User Interface Prototyping

15
User Interface Prototyping IFI7156 Interaction Design Methods

description

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

Transcript of User Interface Prototyping

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

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

User-centred design and prototyping

User-centred design and prototyping

Visual-CFD - Virtual Prototyping Software and Services · PDF fileAn Intelligent and Advanced User Interface for OpenFOAM® Visual-CFD is an advanced user interface ... region meshing

Visual-CFD - Virtual Prototyping Software and Services · PDF fileAn Intelligent and Advanced User Interface for OpenFOAM® Visual-CFD is an advanced user interface ... region meshing

User Centered Design And Prototyping

User Centered Design And Prototyping

Saul Greenberg User Centered Design and Prototyping Why User Centered Design is important How Prototyping helps User Centered Design.

Saul Greenberg User Centered Design and Prototyping Why User Centered Design is important How Prototyping helps User Centered Design.

User Interface Design II: Process · User Interface Design II: Process J.Serrat 102759 Software Design November 22, 2016 Index 1 How to design UI ? 2 User research 3 Paper prototyping

User Interface Design II: Process · User Interface Design II: Process J.Serrat 102759 Software Design November 22, 2016 Index 1 How to design UI ? 2 User research 3 Paper prototyping

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.

User Experience and Prototyping

User Experience and Prototyping

User Interface Prototyping Techniques - High Fidelity Prototyping

User Interface Prototyping Techniques - High Fidelity Prototyping

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

Prototyping*and*User*Interface*Design*for* Augmented ... › content › dam › mathworks › ... · Prototyping*and*User*Interface*Design*for* Augmented*Coaching*Systems** with*MATLAB*and*Delphi*

Prototyping*and*User*Interface*Design*for* Augmented ... › content › dam › mathworks › ... · Prototyping*and*User*Interface*Design*for* Augmented*Coaching*Systems** with*MATLAB*and*Delphi*

CSE 403 Lecture 6 User Interface Prototyping Reading: Paper Prototyping, C. Snyder slides created by Marty Stepp

CSE 403 Lecture 6 User Interface Prototyping Reading: Paper Prototyping, C. Snyder slides created by Marty Stepp

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

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,

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

Prototyping Corporate User Interfacespresent ways of agile high-fidelity prototyping for corporate user interface design. Without harming agile principles and practice, detailed prototypes

Prototyping Corporate User Interfacespresent ways of agile high-fidelity prototyping for corporate user interface design. Without harming agile principles and practice, detailed prototypes

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

User Interface Prototyping

User Interface Prototyping

Interface Prototyping Case Study - Paper

Interface Prototyping Case Study - Paper

User Interface Prototyping Toolkit (UIPT)

User Interface Prototyping Toolkit (UIPT)