Wireframes and UI-Prototypes

3,780 views
3,571 views

Published on

An introduction to wireframing and UI-prototyping with practical tips, given to IT-students at the Hasso-Plattner-Institute, Universität Potsdam.

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,780
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
104
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Wireframes and UI-Prototypes

  1. 1. Trends and Concepts, Hasso Plattner InstitutePotsdam, February 15th , 2011Wireframes and UI-PrototypesAn introduction with practical tipsPidoco GmbHSilvan T. Golega
  2. 2. Topic of today Wireframes and UI-Prototypes Theory Why should I do them How do I make them Wireframes and UI-Prototypes Practice Demo of Pidoco Prototype Creator
  3. 3. About me About me Silvan T. Golega Did my bachelor and my master here at HPI Founded Pidoco GmbH We develop web projects We build and sell web-based tools for prototyping and usability testing* *(We are looking for interns)
  4. 4. How would you go about developing a microblogging service? Idea
  5. 5. How would you go about developing a microblogging service? Development Idea
  6. 6. How would you go about developing a microblogging service? Development Idea Product Specification
  7. 7. How would you go about developing a microblogging service? Product Manager Developer Client End UserInteraction Designer and many more… Consultant Graphic Designer
  8. 8. How would you go about developing a microblogging service?
  9. 9. Product design Strategy Scope Structure Skeleton Surface Jasse James Garret http://www.jjg.net/elements/
  10. 10. Product design Strategy abstract Scope Structure Skeleton Surface concrete
  11. 11. Product design Strategy abstract idea, goals Scope requirements, features architecture, behavior, work Structure flow, information structure components, shapes, dialogues, Skeleton human interaction Surface concrete visual appearance
  12. 12. Product design user needs, use cases Strategy Idea, goals site objectives functional specification Scope requirements, features content requirements architecture, behavior, work interaction design, Structure flow, information structure information architecture components, shapes, dialogues, information design, Skeleton human interaction interface design, navigation design Surface visual appearance visual design
  13. 13. Product design User Needs, Strategy Site Objectives Functional Specification Scope Content Requirements Interaction Design, Structure Information Architecture Information Design, Wireframes Skeleton Interface Design, Navigation Design Surface Visual Design
  14. 14. Definition Wireframes are: A visual representation of an interface used to communicate the structure, content, information hierarchy, functionality, and behavior of an interface
  15. 15. Definition Wireframes are: A visual representation of an interface used to communicate the structure, content, information hierarchy, functionality, and behavior of an interface
  16. 16. Definition Wireframes are: A visual representation of an interface used to communicate the structure, content, information hierarchy, functionality, and behavior of an interface Prototypes are: A simulation of some aspects of the final solution used to develop, demonstrate and evaluate the process, capability, performance or usability of the solution
  17. 17. Definition Wireframes are: A visual representation of an interface used to communicate the structure, content, information hierarchy, functionality, and behavior of an interface UI-Prototypes are: A simulation of some aspects of the final solution used to develop, demonstrate and evaluate the process, capability, performance or usability of the solution
  18. 18. Types of UI-Prototypes low fidelity wireframes vs. high fidelity designs
  19. 19. Types of UI-Prototypes low fidelity wireframes vs. high fidelity designs static sketches vs. dynamic prototypes
  20. 20. What is your purpose? Ideation Feedback Specification Usability Testing
  21. 21. What are your goals? Define content Test interaction Create the big picture Solve difficult problems
  22. 22. Focus when prototyping Focus on content Focus on interaction Focus on the big picture Focus on the difficult problems
  23. 23. Focus when prototyping Focus on content No graphics, no visual design, no branding No fake text (lorem ipsum): be realistic Focus on interaction Focus on the big picture Focus on the difficult problems
  24. 24. Focus when prototyping Focus on content No graphics, no visual design, no branding No fake text (lorem ipsum): be realistic Visual design produces other kind of feedback „What happens when I click here?“ vs. „I do not like this color.“
  25. 25. Focus when prototyping Focus on content No graphics, no visual design, no branding No fake text (lorem ipsum): be realistic Sketchy look lowers the feedback barrier Visual signal to the tester: „I may criticize, it is not yet finished.“
  26. 26. Focus when prototyping Focus on content Focus on interaction Use storyboards, screen flows, interactive prototypes Keep the context in mind: how do pages work together Focus on the big picture Focus on the difficult problems
  27. 27. Focus when prototyping Focus on content Focus on interaction Focus on the big picture Details come later … or even later Focus on the difficult problems
  28. 28. Focus when prototyping Focus on content Focus on interaction Focus on the big picture Focus on the difficult problems Design controversial issues Do not design the obvious
  29. 29. Tools Lots of tools available Paper, whiteboard, gui magnets Technical drawing tools like Visio Graphics programs like Photoshop Specialized tools like pidoco° Programming tools like Html frameworks or Flex
  30. 30. Tools Choose tools that help you focus Photoshop make it difficult to focus on content Paper makes it difficult to focus on interaction HTML makes it difficult to focus on the big picture
  31. 31. Tools Choose the right tool for the right task Paper if you need to be quick Internet based tools if you want good feedback Tools with dynamic features if you want to test interaction Programming tools if you want to test new UI-Elements Tools with good exports if you need a specification
  32. 32. Exceptions Exceptions are the rule When doing the first sketches only for yourself or when inserting user generated content „lorem ipsum“ can be just great.
  33. 33. Exceptions Exceptions are the rule When testing visitor conversion or for eye tracking you might need a perfectly designed high end prototype
  34. 34. Exceptions Exceptions are the rule When testing a new interaction element you might need Html/Javascript
  35. 35. Exceptions But: do not forget your focus 99% you do need content 99% you do not need visual design 99% you do not need javascript
  36. 36. Mobile Designing for mobile User interface concepts differ no right click, no mouse over, etc. Search for good device guidelines each device is different Test it on the real device as often as you can an emulator just isnt the same
  37. 37. Tool Demo
  38. 38. Here’s our contact information: Getting in touch: Pidoco GmbH Warschauer Straße 58a D-10243 Berlin Silvan.Golega@pidoco.com @pidoco, @tec on Twitter www.pidoco.com
  39. 39. Collaborating with Pidoco helps ensure project success: Increase User Experience - better usability - higher quality => Exceed expectationsSave Time Save Costs Minimize Risk- quick prototyping - better specs - better communication- easy collaboration - less rework - early concepts/requirements validation=> Be on time => Be on budget => Be on target
  40. 40. Images taken from: Under (CC BY 2.0) http://www.flickr.com/photos/jackdorsey/182613360/ Under GPL: http://de.wikipedia.org/w/index.php?title=Datei:Songbird_With_Addons.png

×