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

User Interface PrototypingLow- & High-Fidelity Prototyping Today Folie 1 20. Mai 2011 Dr. Thomas Memmel © Zühlke 2011

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

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

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

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

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

Low-Fidelity PrototypingTools for Sketching the User Experience Folie 7 20. Mai 2011 Dr. Thomas Memmel © Zühlke 2011

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

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

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

Low-Fidelity PrototypingTools for Paper PrototypingUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 11 © Zühlke 2011

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

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

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

Balsamiq MockupsRapid Mobile Prototyping with iMockups From iMockups Into BalsamiqUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 15 © Zühlke 2011

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

High-Fidelity PrototypingTools for Designing the User Experience Folie 17 20. Mai 2011 Dr. Thomas Memmel © Zühlke 2011

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

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

High-Fidelity PrototypingFrom Prototype to Product – Zühlke Project DataInheritUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 20 © Zühlke 2011

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

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

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

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

Axure Pro PrototypingExample: Zühlke iPhone Application PrototypingUI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 25 © Zühlke 2011

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

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

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

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

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

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

http://www.usability-architect.com	278
http://moodle.lit.ie	36
http://feeds2.feedburner.com	14
http://iaabkj210.wordpress.com	6
url_unknown	3
http://www.bedienhilfe.ch	3

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

by Thomas Memmel

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 340

Statistics

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