The document discusses the importance of user interface (UI) prototyping, emphasizing how it enhances understanding and communication of requirements in software development through visual representations. It outlines the benefits of both low-fidelity (e.g., paper prototyping, Balsamiq) and high-fidelity (e.g., Axure Pro, Microsoft Expression Blend) prototyping tools, highlighting their roles in user-centered design and usability testing. The presentation concludes by detailing various methods and tools for prototyping to improve user experience and usability in software engineering.

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

2. Why UI Prototyping?
A picture is worth a thousand words
«If I can't picture it, I can't understand it.»
- Albert Einstein
20. Mai 2011 Folie 2 © Zühlke 2011

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 text
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 3 © Zühlke 2011

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 implemented
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 4 © Zühlke 2011

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 easy
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 5 © Zühlke 2011

6. UI Prototyping Tools
Low- & High-Fidelity Prototyping Today
Part I: Low-Fidelity Prototyping
• Paper Prototyping
• Balsamiq Mockups & iMockups
Part II: High-Fidelity Prototyping
• Axure Pro 6
• Microsoft Expression Blend
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 6 © Zühlke 2011

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

8. Low-Fidelity Prototyping
Overview
Typical Goals
• Gather (initial) Requirements Sketch the
UI
• Communicate with Stakeholders
Focus is on Users, Context of Use, Flow of Events
Discuss,
Supplementary Methods, e.g. Workshops, Interviews Analyze
Sketch 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. Low-Fidelity Prototyping
Various 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
supplies
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 9 © Zühlke 2011

10. Low-Fidelity Prototyping
Some 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 required
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 10 © Zühlke 2011

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

12. Low-Fidelity Prototyping
Early 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 sketches
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 12 © Zühlke 2011

13. Balsamiq Mockups
Low-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. Balsamiq Mockups Extensions
SWT Prototyping with Balsamiq Mockups
Source: 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. Balsamiq Mockups
Rapid Mobile Prototyping with iMockups
From iMockups
Into Balsamiq
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 15 © Zühlke 2011

16. iMockups
Low-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. High-Fidelity Prototyping
Tools for Designing the User Experience
Folie 17
20. Mai 2011
Dr. Thomas Memmel
© Zühlke 2011

18. High-Fidelity Prototyping
Overview
Typical goals
(Re-)Design
Prototype
• Visualize requirements in detail
Analyze
Discover usability issues, especially with interactive
Results
•
behavior
• Develop a UI specification Evaluate
Prototype
Prototyping Tool Prototyping with GUI Builder
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 18 © Zühlke 2011

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 hand
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 19 © Zühlke 2011

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

21. High-Fidelity Prototyping
From Prototype to Product – Zühlke Project ZEUS 3.0
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 21 © Zühlke 2011

22. High-Fidelity / Evolutionary Prototyping
Overview on Tools
MS Expression Blend
For Example
• Microsoft Visio, PowerPoint
• MS Expression Blend
• Axure Pro
• iRise Studioj
Axure Pro
MS Visio
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 22 © Zühlke 2011

23. Axure Pro
High-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.com
Dr. Thomas Memmel 2. Juli 2009 Folie 23 von 50 © Zühlke 2011

24. Axure Pro
Access 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.com
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 24 © Zühlke 2011

25. Axure Pro Prototyping
Example: Zuehlke.com
• Build design alternatives fast
• Easy refactoring with masters and
templates
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 25 © Zühlke 2011

26. Axure Pro Prototyping
Example: Zühlke iPhone Application Prototyping
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 26 © Zühlke 2011

27. Microsoft Expression Blend
High-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 code
Dr. Thomas Memmel 2. Juli 2009 Folie 27 von 50 © Zühlke 2011

28. Microsoft Expression Blend
High-Fidelity Prototyping Tool
Source: 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 Illustrator
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 28 © Zühlke 2011

29. Microsoft Expression Blend
Zühlke Project with Phonak
Software Engineering meets User Experience Design
UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 29 © Zühlke 2011

30. Zühlke Usability Engineering Services
Human-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 usability
engineering • User Interface Engineering (Integration of Usability
services – get in Methodology in the Software Development Process)
touch at • Usability Testing (e.g. with Mobile Usability Lab)
www.zuehlke.com/ • User Interface Specification
usability
Folie 30 © Zühlke 2011

31. Zühlke Usability Engineering Services
Contact
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 Technology
Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 31 © Zühlke 2011

32. Zühlke Group
XING: www.xing.com/companies/zühlkeengineeringag
Facebook: www.facebook.com/zuehlke.group
Twitter: twitter.com/zuehlke_group
Folie 32
20. Mai 2011
Dr. Thomas Memmel
© Zühlke 2011