15
User Interface Prototyping IFI7156 Interaction Design Methods

User Interface Prototyping

Embed Size (px)

DESCRIPTION

Lecture slides from the Interaction Design Methods course, 20 April 2013, Tallinn University.

Citation preview

Page 1: User Interface Prototyping

User Interface Prototyping

IFI7156 Interaction Design Methods

Page 2: User Interface Prototyping

lo-fiprototyping

hi-fiprototyping

Page 3: User Interface Prototyping

Prototyping software

Page 4: User Interface Prototyping

Balsamiq Mockups

http://www.balsamiq.com/products/mockups
http://www.balsamiq.com/products/mockups
Page 5: User Interface Prototyping

OmniGraffle

http://www.omnigroup.com/products/omnigraffle/
http://www.omnigroup.com/products/omnigraffle/
Page 6: User Interface Prototyping

http://developer.yahoo.com/ypatterns/about/stencils/

http://developer.yahoo.com/ypatterns/about/stencils/
http://developer.yahoo.com/ypatterns/about/stencils/
Page 7: User Interface Prototyping
Page 8: User Interface Prototyping
Page 9: User Interface Prototyping

http://www.axure.com

http://www.axure.com/features
http://www.axure.com/features
Page 10: User Interface Prototyping

Adobe Fireworks

http://www.adobe.com/ee/products/fireworks.html
http://www.adobe.com/ee/products/fireworks.html
Page 11: User Interface Prototyping

Pencil

http://pencil.evolus.vn
http://pencil.evolus.vn
Page 12: User Interface Prototyping

http://pencil.evolus.vn

http://pencil.evolus.vn
http://pencil.evolus.vn
Page 13: User Interface Prototyping

http://www.invisionapp.com

http://www.invisionapp.com
http://www.invisionapp.com
Page 14: User Interface Prototyping

Images

• meedanphotos, http://www.flickr.com/photos/meedan/4762863697/

http://www.flickr.com/photos/meedan/4762863697/
http://www.flickr.com/photos/meedan/4762863697/
Page 15: User Interface Prototyping

This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/

Hans Põ[email protected]

Interaction Design Methodshttp://ifi7156.wordpress.com

Tallinn UniversityInstitute of Informatics

http://creativecommons.org/licenses/by-sa/3.0/
http://creativecommons.org/licenses/by-sa/3.0/
http://creativecommons.org/licenses/by-sa/3.0/
http://creativecommons.org/licenses/by-sa/3.0/
mailto:[email protected]
mailto:[email protected]
http://ifi7156.wordpress.com
http://ifi7156.wordpress.com

The Role of Prototyping Tools for Haptic Behavior DesignKeywords: haptic, prototyping, design, graphic user interface 1 INTRODUCTION Haptic behaviors are touch-based interactions that

The Role of Prototyping Tools for Haptic Behavior DesignKeywords: haptic, prototyping, design, graphic user interface 1 INTRODUCTION Haptic behaviors are touch-based interactions that

Documents
CS160 - User Interface Design, Prototyping, and Evaluation University of California, Berkeley

CS160 - User Interface Design, Prototyping, and Evaluation University of California, Berkeley

Documents
CSE 440, Autumn 2012 User Interface Design, Prototyping ... · does not perform the one task it should do well – getting from A to B . 2 CSE 440, Autumn 2012 User Interface Design,

CSE 440, Autumn 2012 User Interface Design, Prototyping ... · does not perform the one task it should do well – getting from A to B . 2 CSE 440, Autumn 2012 User Interface Design,

Documents
User Experience Prototyping

User Experience Prototyping

Mobile
CPSC 481 1 User Centered Design and Prototyping Why user-centered design is important Prototyping User centered design Prototyping methods

CPSC 481 1 User Centered Design and Prototyping Why user-centered design is important Prototyping User centered design Prototyping methods

Documents
User Interface Design - uni-saarland.de · User Interface Design ... Adobe Photoshop or how to operate an ego shooter. Paper prototyping is not the best way! ... Direct Manipulation

User Interface Design - uni-saarland.de · User Interface Design ... Adobe Photoshop or how to operate an ego shooter. Paper prototyping is not the best way! ... Direct Manipulation

Documents
User interface design...UI Wrap-Up UI design process involves •user analysis •system prototyping •prototype evaluation Create metaphors, use them consistently UI critical for

User interface design...UI Wrap-Up UI design process involves •user analysis •system prototyping •prototype evaluation Create metaphors, use them consistently UI critical for

Documents
User Interface Prototyping Toolkit (UIPT)

User Interface Prototyping Toolkit (UIPT)

Documents
June 2004 User Interface Design, Prototyping, and Evaluation 1 Outline Low-fi prototyping Wizard of Oz technique Informal UI prototyping tools Hi-fi prototyping

June 2004 User Interface Design, Prototyping, and Evaluation 1 Outline Low-fi prototyping Wizard of Oz technique Informal UI prototyping tools Hi-fi prototyping

Documents
User Interface Prototyping Techniques: Low Fidelity Prototyping

User Interface Prototyping Techniques: Low Fidelity Prototyping

Design
Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Documents
Interface prototyping 2014

Interface prototyping 2014

Design
Design Patterns CSE 440 User Interface Design, Prototyping, & Evaluation Autumn 2008 October 30, 2008

Design Patterns CSE 440 User Interface Design, Prototyping, & Evaluation Autumn 2008 October 30, 2008

Documents
Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 17: Prototyping PS2, RS2 due on Sunday next week is paper prototyping week (no

Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 17: Prototyping PS2, RS2 due on Sunday next week is paper prototyping week (no

Documents
Prof. James A. Landay University of Washington CSE 440 USER INTERFACE DESIGN + PROTOTYPING + EVALUATION February 19, 2013 Heuristic Evaluation

Prof. James A. Landay University of Washington CSE 440 USER INTERFACE DESIGN + PROTOTYPING + EVALUATION February 19, 2013 Heuristic Evaluation

Documents
From user journey to prototyping

From user journey to prototyping

Technology
User Centered Design and Prototyping Why user-centered design is important Prototyping and user centered design Prototyping methods Slide deck by Saul

User Centered Design and Prototyping Why user-centered design is important Prototyping and user centered design Prototyping methods Slide deck by Saul

Documents
User interface prototyping techniques

User interface prototyping techniques

Design
Prototyping the User Interface

Prototyping the User Interface

Documents
TUIO AS3: A Multi-Touch and Tangible User Interface Rapid ...cvmr.info/resources/Paper/tuioAS32011.pdf · TUIO AS3: A Multi-Touch and Tangible User Interface Rapid Prototyping Toolkit

TUIO AS3: A Multi-Touch and Tangible User Interface Rapid ...cvmr.info/resources/Paper/tuioAS32011.pdf · TUIO AS3: A Multi-Touch and Tangible User Interface Rapid Prototyping Toolkit

Documents
Mixed-Fidelity Prototyping of User Interfaces...software development. Prototyping involves creating mock-ups representing the user interface of the final software system. Prototypes

Mixed-Fidelity Prototyping of User Interfaces...software development. Prototyping involves creating mock-ups representing the user interface of the final software system. Prototypes

Documents
User Experience Design & Paper Prototyping

User Experience Design & Paper Prototyping

Technology
User Experience and Prototyping

User Experience and Prototyping

Design
User-centred design and prototyping

User-centred design and prototyping

Business
Interface Prototyping Case Study - Paper

Interface Prototyping Case Study - Paper

Design
Study of Prototyping Tools for User Interface Design Righetti 5 Octobre 2005 2 RAPID INTERFACE PROTOTYPING STATE-OF-THE-ART Rapid Prototyping is a development method situated in the

Study of Prototyping Tools for User Interface Design Righetti 5 Octobre 2005 2 RAPID INTERFACE PROTOTYPING STATE-OF-THE-ART Rapid Prototyping is a development method situated in the

Documents
User Interface Prototyping using UML Specifications

User Interface Prototyping using UML Specifications

Documents
Prototyping a Diet Self management System for People with ... · Prototyping a Diet Self-management System for People with Diabetes with Cultural Adaptable User Interface Design Eunji

Prototyping a Diet Self management System for People with ... · Prototyping a Diet Self-management System for People with Diabetes with Cultural Adaptable User Interface Design Eunji

Documents
3D digital prototyping and usability assessment of …...3D digital prototyping and usability assessment of user interfaces based on User Interface Description Languages -Lessons learned

3D digital prototyping and usability assessment of …...3D digital prototyping and usability assessment of user interfaces based on User Interface Description Languages -Lessons learned

Documents
User Testing. CSE490f - Autumn 2006User Interface Design, Prototyping, & Evaluation2 Hall of Fame or Hall of Shame? frys.com

User Testing. CSE490f - Autumn 2006User Interface Design, Prototyping, & Evaluation2 Hall of Fame or Hall of Shame? frys.com

Documents