8. LIKE BUILDINGS, APPLICATIONS BREAK AT THE
JOINS
IT’S THE JOURNEY BETWEEN
PAGES OR SCREENS, NOT THE
PAGES AND SCREENS
THEMSELVES, THAT CAN CAUSE
THE MOST PROBLEMS FOR USERS.
Plus - problems with the journey are the
most expensive problems to fix.
Design the journey between states
first, before designing the states.
ixd101.com
9. WHAT WE NEED TO DO IS…
PROTOTYPE
Identify potential problems early
Troubleshoot risky areas in advance
Get everyone headed in the same direction
Understand how new features relate to existing features
Reassure stakeholders about what they are getting for their money
Clearly communicate what needs to be built
Clearly communicate what it will be like to use…
10. WHAT WE NEED TO DO IS…
PROTOTYPE
Identify potential problems early
Troubleshoot risky areas in advance
Get everyone headed in the same direction
Understand how new features relate to existing features
Reassure stakeholders about what they are getting for their money
Clearly communicate what needs to be built
Clearly communicate what it will be like to use…
11. DESIGN WITH MODELS
101 Things I Learned in Architecture School, Matthew
Frederick
12. IN USER EXPERIENCE,
PROTOTYPING IS A WAY OF LIFE
Research
Evaluate Design
TO FIND THE RIGHT USER
EXPERIENCE, WE NEED TO Build
PROTOTYPE AND TEST
Unlike our engineering friends
13. UX PROTOTYPES STARTED AS STATIC
MOCKUPS
STATIC PAGES
PAPER PROTOTYPES
WIREFRAMES
ALLOWED FOR
Collaborative design
Rapid exploration
Usability testing
Jensen Harris, Microsoft
14. THEN ALONG CAME RICH INTERNET
APPLICATIONS
FOCUS ON TRANSITIONS
LESS NAVIGATING TO FEATURES
AND CONTENT
MORE SUMMONING FEATURES AND
CONTENT
MORE DESIGN EFFORT AND
EXPLORATION
Jensen Harris, Microsoft
15. ARCHITECTURAL PLANS EXPRESS THE FUNCTION,
BUT NOT THE EXPERIENCE
Rebeca Cotera Gehry Partners, LLP
rebes.info/resources/dch+composite+1.jpg www.abc.net.au/rn/bydesign/galleries/2010/3086582/
image3.htm
16. DYNAMIC UI’S – THE CHALLENGE
HOW TO DOCUMENT THE
HOW TO SUPPORT THE BEHAVIOUR OF RICH
CONCEPTUAL DESIGN PHASE? INTERACTIONS?
RAPID EXPLORATION EASY TO DOCUMENT THE STATES
MORE EXPERIENTIAL HARDER TO DOCUMENT THE
not just optimal arrangement of TRANSITIONS
features and selection of widgets. Expanding/Collapsing
Opening/Closing
Appearing/Disappearing
Animating
17. DOCUMENTING TRANSITIONS
Technique Pros Cons
Annotations No new tools Not expressive enough
Excruciating Textual Detail No new tools Hard work
Hard to understand
Hard to show timing
Storyboards Easy to understand Hard work
Series of single paths
Hard to show timing
Screenflow Diagrams No new tools Hard work
Fragile
Hard to show timing
Animatics Compelling New tools and skills
Easy to understand Series of single paths
Interactive Prototypes Model multiple paths New tools and skills
Easy to understand
Other uses
19. IN THE OLDEN DAYS
PROTOTYPING PROBLEMS
REQUIRED SPECIFIC SKILLS
TOO MUCH IMPLEMENTATION
DETAIL Emotional and financial
WASN’T AGILE ENOUGH investment
means
EVERYTHING INTERPRETED Hard to iterate
THROUGH THE PROTOTYPER’S
EYES
THROW-AWAY
SOME OF THESE PROBLEMS ARE
RESOLVED TODAY
25. PAPER PROTOTYPING
VALIDATE THE CONCEPT
PROS
NO TECHNICAL SKILL REQUIRED
NOT INTIMIDATING
CLEARLY UNFINISHED
NECESSARILY HIGH-LEVEL
LOW INVESTMENT
CONS
BECOME UNWIELDY WITH LOTS OF
CONTENT
AWKWARD TO SHOW SUBTLE
INTERACTIONS
NOT AS PORTABLE
42. ATTRIBUTES OF GOOD
PROTOTYPES…
PUT THE READER IN THE USER’S SHOES
HAVE AN APPROPRIATE LEVEL OF INVESTMENT
COMMUNICATE THE RIGHT LEVEL OF DETAIL
ARE CHANGEABLE AND CAN EVOLVE
ARE ACCESSIBLE
47. GOOD PROTOTYPES…
ARE ACCESSIBLE
Design Wall Whiteboard
High traffic pathway
Interaction Design
Team (3)
Architecture and
technical Teams
R equirements
Teams
48. ATTRIBUTES OF GOOD
PROTOTYPES…
PUT THE READER IN THE USER’S SHOES
HAVE AN APPROPRIATE LEVEL OF INVESTMENT
COMMUNICATE THE RIGHT LEVEL OF DETAIL
ARE CHANGEABLE AND CAN EVOLVE
ARE ACCESSIBLE
49. OBSERVER’S GUIDE TO
PROTOTYPES
STATIC INTERACTIVE
LOW
Activity Scenarios
FIDELITY
Sketches Paper prototypes Wizard of Oz
Storyboards
Untreated
Wireframes Clickable wireframes
interactive
Comps
HIGH Treated
Animatics
FIDELITY interactive
50.
51. TIM BROWN, IDEO
DESIGN THINKING
Inspiration Ideation Implementation
Research for
Visualisation
inspiration, Build to
to sell, and
not think
control
validation
52. ALAN COOPER
THE ONLY THING MORE
EXPENSIVE THAN WRITING
SOFTWARE IS WRITING BAD
www.uxquotes.com/author/alan-cooper/prototype-before-you-code/
SOFTWARE
53. THANK YOU
shane morris
shane@automaticstudio.com.au
@shanemo
Hinweis der Redaktion
Xxx win 8 pic
XXX prototypes are exploratory or explanatory
Validate the conceptParticularly as a whole – the flow
Mistakes will be made
The ones on the right are cheaper and easier to fix
Inspired by a suggestion from Dave Malouf (http://davemalouf.com/).
Exactly applies
XXX pic of a RIA
Like a site map, or a screen flow
Documenting transitions is easier with a traditional web site.There is only one transition, from one full-screen web page to another
In the pastMany tools existAxureiRiseBalsamiqHypercardProduction toolsFlashHybridsCatalyst?Expression BlendCheck list by @tuna
Or, what do I mean by prototyping
To recap
XXX one of my paper prototypes
Also did Formal TestingRecruit people who matched our personsMade sure we recreated the physical setup of a typical sessionSound booths HardwareTypically a developer role-played the recipientInsight: Can’t hear at certain points of the sessionInvaluable to experience that first hand
Scope creep
Different prototypes serve those purposes in different ways at different stages of the project.
Means you have to give up control, and show your work early.
The right level of detail increases as the project progresses.
9minsConclusion: Different levels of fidelity required at different stages of the design processLower fidelity early in the design process. High fidelity later in the design process.Speaking of deeper engagement between design and development – Lets talk about the differences for a moment
Prototyping works well with agile methodologiesHeavy UX specs are inefficient, always behind the game, unusable and get the team focused on the wrong stuff
One answer to the fence is the wallCo-location - a lot of designers don't like it.Arrogant snobbery?Laziness?A need for a more creative space, man
Different prototypes serve those purposes in different ways at different stages of the project.
Prototype to explore, control and sellPrototypes throughout the lifecycle