User Interface PrototypingLow- & High-Fidelity Prototyping Today                                         Folie 1          ...
Why UI Prototyping?A picture is worth a thousand words                                 «If I cant picture it, I cant under...
Why UI Prototyping?Beyond Text-Based Requirements & Specifications                                             •     Text ...
Why UI Prototyping?Prototyping-Driven Human-Centered Software Engineering                                             •   ...
Why UI Prototyping?See and interactions before they are built                                             •     Take care ...
UI Prototyping ToolsLow- & High-Fidelity Prototyping TodayPart I: Low-Fidelity Prototyping•     Paper Prototyping•     Bal...
Low-Fidelity PrototypingTools for Sketching the User Experience                                          Folie 7          ...
Low-Fidelity PrototypingOverviewTypical Goals•     Gather (initial) Requirements                                          ...
Low-Fidelity PrototypingVarious Methods – From Sticky Notes to Storyboards  Method                            Description ...
Low-Fidelity PrototypingSome Words on Paper Prototyping•     One of the cheapest and fastest visual techniques•     Can be...
Low-Fidelity PrototypingTools for Paper PrototypingUI Prototyping Tools | Dr. Thomas Memmel   20. Mai 2011   Folie 11   © ...
Low-Fidelity PrototypingEarly Usability Testing•     Solve task cases using paper prototypes      that simulate the UI dia...
Balsamiq MockupsLow-Fidelity Prototyping Tool for Wireframes & Mockups                                           •   Based...
Balsamiq Mockups ExtensionsSWT Prototyping with Balsamiq MockupsSource: http://blogs.balsamiq.com/product/2009/05/13/swt-b...
Balsamiq MockupsRapid Mobile Prototyping with iMockups                                           From iMockups            ...
iMockupsLow-Fidelity Prototyping Tool for the iPad                                                       •   Development o...
High-Fidelity PrototypingTools for Designing the User Experience                                          Folie 17        ...
High-Fidelity PrototypingOverviewTypical goals                                                                            ...
High-Fidelity Prototyping (Cont.)•     High-fidelity prototypes reach from more detailed paper prototypes to fully      in...
High-Fidelity PrototypingFrom Prototype to Product – Zühlke Project DataInheritUI Prototyping Tools | Dr. Thomas Memmel   ...
High-Fidelity / Evolutionary PrototypingOverview on Tools                                                                 ...
Axure ProHigh-Fidelity Prototyping Tool•     Very fast & easy prototyping•     Interactive behavior without programming   ...
Axure ProAccess to Widget Libraries•     Advertising                          •   Mobile – iPhone•     Calendars          ...
Axure Pro PrototypingExample: Zuehlke.com  •      Build design alternatives fast  •      Easy refactoring with masters and...
Axure Pro PrototypingExample: Zühlke iPhone Application PrototypingUI Prototyping Tools | Dr. Thomas Memmel         20. Ma...
Microsoft Expression BlendHigh-Fidelity Prototyping Tool•     Allows development for WPF/Silverlight      without media di...
Microsoft Expression BlendHigh-Fidelity Prototyping ToolSource: http://www.microsoft.com           Source: http://www.micr...
Microsoft Expression BlendZühlke Project with PhonakSoftware Engineering meets User Experience DesignUI Prototyping Tools ...
Zühlke Usability Engineering ServicesHuman-Centered Software Engineering                      •   User Studies, User Profi...
Zühlke Usability Engineering ServicesContact                                                 Dr. Thomas Memmel            ...
Zühlke GroupXING: www.xing.com/companies/zühlkeengineeringagFacebook: www.facebook.com/zuehlke.groupTwitter: twitter.com/z...
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
Upcoming SlideShare
Loading in...5
×

User Interface Prototyping - Low- and High-Fidelity Prototyping Today

19,309

Published on

Zühlke offers various usability engineering services – get in touch at www.zuehlke.com/usability

User Studies, User Profiling & User Modeling (e.g. Personas), User-Centered Requirements Engineering, Usability Concepts & Modeling (e.g. Scenarios, Storyboards), Agile Development & User Experience (e.g. User Stories combined with elements of Interaction Design), User Interface Prototyping (Low- & High-Fidelity), User Interface Engineering (Integration of Usability Methodology in the Software Development Process), Usability Testing (e.g. with Mobile Usability Lab), User Interface Specification.

Published in: Technology, News & Politics
1 Comment
44 Likes
Statistics
Notes
  • Nice overview and insights. Flash Catalyst is worth a look too, though its missing a few default controls you can virtually create any control you want from design files to model interactions.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
19,309
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
45
Comments
1
Likes
44
Embeds 0
No embeds

No notes for slide

User Interface Prototyping - Low- and High-Fidelity Prototyping Today

  1. 1. User Interface PrototypingLow- & High-Fidelity Prototyping Today Folie 1 20. Mai 2011 Dr. Thomas Memmel © Zühlke 2011
  2. 2. Why UI Prototyping?A picture is worth a thousand words «If I cant picture it, I cant understand it.» - Albert Einstein 20. Mai 2011 Folie 2 © Zühlke 2011
  3. 3. Why UI Prototyping?Beyond Text-Based Requirements & Specifications • Text has limited expressivity with regards to human- computer interaction • Tons of paper make needs & requirements intransparent • Extensive documents cause people do not see the wood for the trees • Consequences of needs & requirements are not realized until they can be experienced • UX does usually not originate from hundreds of pages of textUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 3 © Zühlke 2011
  4. 4. Why UI Prototyping?Prototyping-Driven Human-Centered Software Engineering • Translate requirements into usable interactive systems • Visualize ideas in front of users and stakeholders • Consider alternate designs • Avoid premature decision making • Make the impact of changes to requirements obvious • Usability-test requirements before the get implementedUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 4 © Zühlke 2011
  5. 5. Why UI Prototyping?See and interactions before they are built • Take care of usabiliy concerns up-front • Avoid «firefighter-usability» activities late in the process • Don’t loose time discussing intangible requirements • See and interact with applications before they are built • Visualize and change requirements as long as it is cheap and easyUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 5 © Zühlke 2011
  6. 6. UI Prototyping ToolsLow- & High-Fidelity Prototyping TodayPart I: Low-Fidelity Prototyping• Paper Prototyping• Balsamiq Mockups & iMockupsPart II: High-Fidelity Prototyping• Axure Pro 6• Microsoft Expression BlendUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 6 © Zühlke 2011
  7. 7. Low-Fidelity PrototypingTools for Sketching the User Experience Folie 7 20. Mai 2011 Dr. Thomas Memmel © Zühlke 2011
  8. 8. Low-Fidelity PrototypingOverviewTypical Goals• Gather (initial) Requirements Sketch the UI• Communicate with StakeholdersFocus is on Users, Context of Use, Flow of Events Discuss,Supplementary Methods, e.g. Workshops, Interviews AnalyzeSketch Wireframe Storyboard Logo Intranet Welcome <User name> Help Alle Seiten Suche go Logo Unternehmen Erweiterte Suche Home | News | Land 1 | Land 2 | Land 3 | Globale Services | Projekte | Wissen | Teams | Community | Suche | Hilfe Home Status Intranet News Land 1 Stadt 1 Stadt 2 Stadt n Image Mission Statement Services Land 2 Stadt 1 Stadt 2 Stadt n Services Land 3 Image Image News Teaser – Link auf News Stadt 1 Stadt 2 Stadt n Populärste Seiten Services Unternehmens Group Prozess Developer Globale Serv, News RUP Software Keys Sub1 WebDir PEP Icon Subn Phonelist Software Development Process Library Joiners Projekte Events Sub1 Education center Subn Event pictures Homepage Wissen Helpdesk Sub1 Subn Unternehmensnachrichten Teams Sub1 Subn Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Community fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 8 © Zühlke 2011
  9. 9. Low-Fidelity PrototypingVarious Methods – From Sticky Notes to Storyboards Method Description Content Simple lists inventorying the information of controls to be inventories collected within a given interaction context, such as window, dialog box, page, or screen Sticky notes Visual content inventories, introduced by usage-centered design incorporate position and spatial relationship among UI contents Wireframes Schematics outline the areas occupied by interface contents Paper Rough sketches of the UID; for usability studies or quick prototypes, reviews; rated as fastest method of rapid prototyping; Paper designer can concentrate on design instead on mechanics mockups of tool Story- Sequence of papers that contain UI components e.g. boarding drawn collaboratively with users; done with simple office suppliesUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 9 © Zühlke 2011
  10. 10. Low-Fidelity PrototypingSome Words on Paper Prototyping• One of the cheapest and fastest visual techniques• Can be used for any type of human-computer interface (soft-/hardware)• Get quick feedback from users while the design is still (literally) "on the drawing board."• Used to clarify requirements through simulation• Detect usability problems very early• Promote communication between designers and users• Everybody can participate – no specific skills needed• Only minimal resources and materials are requiredUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 10 © Zühlke 2011
  11. 11. Low-Fidelity PrototypingTools for Paper PrototypingUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 11 © Zühlke 2011
  12. 12. Low-Fidelity PrototypingEarly Usability Testing• Solve task cases using paper prototypes that simulate the UI dialog flow• System feedback is simulated by the usability expert, for example by changing the sequence of „screens“ or by adding additional artifacts to the sketchesUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 12 © Zühlke 2011
  13. 13. Balsamiq MockupsLow-Fidelity Prototyping Tool for Wireframes & Mockups • Based on Adobe Air • Easy Install • Based on BMML - an open, human- readable, documented XML-based file format Source: http://balsamiq.com/ • Excchange of prototypes with other BMML-based tools • No programming skills required • Many different additional tools available (e.g. for Eclipse SWT wireframing) Source: http://balsamiq.com/UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 13 © Zühlke 2011
  14. 14. Balsamiq Mockups ExtensionsSWT Prototyping with Balsamiq MockupsSource: http://blogs.balsamiq.com/product/2009/05/13/swt-bmml-an-interesting-new-mockups-extension/UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 14 © Zühlke 2011
  15. 15. Balsamiq MockupsRapid Mobile Prototyping with iMockups From iMockups Into BalsamiqUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 15 © Zühlke 2011
  16. 16. iMockupsLow-Fidelity Prototyping Tool for the iPad • Development of Mockups & Wirframes • Widgets for Desktop-, Web- & Mobile Applications available • Export to Image • Export to BMML format (Balsamiq)Quelle: http://itunes.apple.com/de/app/imockups-for-ipad/id364885913?mt=8 • iTunes: http://itunes.apple.com/de/app/imock ups-for-ipad/id364885913?mt=8#UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 16 © Zühlke 2011
  17. 17. High-Fidelity PrototypingTools for Designing the User Experience Folie 17 20. Mai 2011 Dr. Thomas Memmel © Zühlke 2011
  18. 18. High-Fidelity PrototypingOverviewTypical goals (Re-)Design Prototype• Visualize requirements in detail Analyze Discover usability issues, especially with interactive Results• behavior• Develop a UI specification Evaluate PrototypePrototyping Tool Prototyping with GUI BuilderUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 18 © Zühlke 2011
  19. 19. High-Fidelity Prototyping (Cont.)• High-fidelity prototypes reach from more detailed paper prototypes to fully interactive simulations• From the level of detail of HTML prototypes on, users can see dialog windows, react on messages and enter form data• This prototypes are high-fidelity, because they show the real system behaviour in an interactive manner rather than just presenting static screens• Sometimes, detailed prototypes can be built as quick and as easy as the low- fidelity ones – if you got the right tools at handUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 19 © Zühlke 2011
  20. 20. High-Fidelity PrototypingFrom Prototype to Product – Zühlke Project DataInheritUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 20 © Zühlke 2011
  21. 21. High-Fidelity / Evolutionary PrototypingOverview on Tools MS Expression BlendFor Example• Microsoft Visio, PowerPoint• MS Expression Blend• Axure Pro• iRise Studioj Axure ProMS VisioUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 21 © Zühlke 2011
  22. 22. Axure ProHigh-Fidelity Prototyping Tool• Very fast & easy prototyping• Interactive behavior without programming skills (e.g. event handling)• Huge variety of UI controls & extra libraries (e.g. iPhone widgets)• Executable HTML prototype runs in the Source: http://www.axure.com Browser (no plug-in required)• Attachment of review notes (for testing)• Generation of reports (Word), e.g. for specification documents• Modeling of flow chart diagrams Source: http://www.axure.comDr. Thomas Memmel 2. Juli 2009 Folie 22 von 50 © Zühlke 2011
  23. 23. Axure ProAccess to Widget Libraries• Advertising • Mobile – iPhone• Calendars • iPad• Carousels • Navigation and Pagination• Charts and Tables • OS Elements• Controls • Page Grids• Form Elements • Placeholder Text• Menus and Buttons • Screen Resolutions• Mobile - Blackberry & Nokia • Tabs • Windows and Containers Source: http://www.axure.comUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 23 © Zühlke 2011
  24. 24. Axure Pro PrototypingExample: Zuehlke.com • Build design alternatives fast • Easy refactoring with masters and templatesUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 24 © Zühlke 2011
  25. 25. Axure Pro PrototypingExample: Zühlke iPhone Application PrototypingUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 25 © Zühlke 2011
  26. 26. Microsoft Expression BlendHigh-Fidelity Prototyping Tool• Allows development for WPF/Silverlight without media disruption• Rich library of UI controls• Huge freedom in designing own controls• SketchFlow allows flow chart modeling and computer-aided paper prototyping style• Support for (remote) review and UI testing• Adobe import allows usage of traditional design assets and integrates designers smoothly in the process• Enable interactivity without writing codeDr. Thomas Memmel 2. Juli 2009 Folie 26 von 50 © Zühlke 2011
  27. 27. Microsoft Expression BlendHigh-Fidelity Prototyping ToolSource: http://www.microsoft.com Source: http://www.microsoft.com Expression Expression Blend Visual Studio Development Design User Experience Design with Sketch Flow Adobe Photoshop Adobe IllustratorUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 27 © Zühlke 2011
  28. 28. Microsoft Expression BlendZühlke Project with PhonakSoftware Engineering meets User Experience DesignUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 28 © Zühlke 2011
  29. 29. Zühlke Usability Engineering ServicesHuman-Centered Software Engineering • User Studies, User Profiling & User Modeling (e.g. Personas) • User-Centered Requirements Engineering • Usability Concepts & Modeling (e.g. Scenarios, Storyboards) • Agile Development & User Experience (e.g. User Stories combined with elements of Interaction Design)Zühlke offers • User Interface Prototyping (Low- & High-Fidelity)various usabilityengineering • User Interface Engineering (Integration of Usabilityservices – get in Methodology in the Software Development Process)touch at • Usability Testing (e.g. with Mobile Usability Lab)www.zuehlke.com/ • User Interface Specificationusability Folie 29 © Zühlke 2011
  30. 30. Zühlke Usability Engineering ServicesContact Dr. Thomas Memmel Business Unit Manager Wiesenstrasse 10 8952 Schlieren Email: thomas.memmel@zuehlke.com XING: https://www.xing.com/profile/Thomas_Memmel Blog: http://www.usability-architect.com/ Business Unit Manager «Java Integration & Channels» Manager Competence Center Client TechnologyClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 30 © Zühlke 2011
  31. 31. Zühlke GroupXING: www.xing.com/companies/zühlkeengineeringagFacebook: www.facebook.com/zuehlke.groupTwitter: twitter.com/zuehlke_group Folie 31 20. Mai 2011 Dr. Thomas Memmel © Zühlke 2011

×