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

User Interface Prototyping

Low- & 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 can't picture it, I can't 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 text
UI 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 implemented


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
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


Low-Fidelity Prototyping

Tools for Sketching the User Experience

Folie 7
20. Mai 2011

Dr. Thomas Memmel

© Zühlke 2011

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.


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


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


Tools for Paper 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


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/


Balsamiq Mockups Extensions
SWT Prototyping with Balsamiq Mockups

Source: http://blogs.balsamiq.com/product/2009/05/13/swt-
bmml-an-interesting-new-mockups-extension/

Balsamiq Mockups
Rapid Mobile Prototyping with iMockups

From iMockups

Into Balsamiq


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#


High-Fidelity Prototyping

Tools for Designing the User Experience

Folie 17
20. Mai 2011

Dr. Thomas Memmel

© Zühlke 2011

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


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


From Prototype to Product – Zühlke Project DataInherit


From Prototype to Product – Zühlke Project ZEUS 3.0


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


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

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

Axure Pro Prototyping
Example: Zuehlke.com

• Build design alternatives fast
• Easy refactoring with masters and
templates


Axure Pro Prototyping
Example: Zühlke iPhone Application Prototyping


Microsoft Expression Blend

• 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


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


Zühlke Project with Phonak
Software Engineering meets User Experience Design


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

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

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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

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

Similar to User Interface Prototyping - Low- and High-Fidelity Prototyping Today (20)

More from Thomas Memmel

More from Thomas Memmel (14)

Recently uploaded

Recently uploaded (20)

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