16. 2 things used to constrain our ability to get ourselves in trouble Platform capability Platform standards
17. Platform Capability The Web 3270 with pictures Graphical User Interfaces(GUI’s) Platform performance Difficulty of coding wikipedia.org/3270
18. Platform Standards Web Logo, Search, Contact Us, top nav, left nav... GUI File, Edit, View, Tools, Window Help...
19. 3 Ingredients for Failure Awesome power No standards Boss that says we need a more up-to-date user experience.
20. Quiz The boss says we need a more up-to-date user experience Do you: Hire a user experience designer immediately Ask "What users?" Brush up your resume
22. User Research User Profile User Task Environment Platform Persona's http://www.usability.gov/analyze/personas.html
23. What is your User Experience? You don't need a UI to define your user experience User Goals Business Goals Usability Goals Design Goals Attitude statement When people use this application, they feel...
28. Quiz You go to your first UI design meeting. In front of you is a blank sheet of flipchart paper. Do you: Change the subject: the required UI will become clear later. Say "Hey, nobody ever got sacked for copying Amazon!" Hand a Texta to the person wearing the most black in the room
31. Matt and Kate in Sydney Matt and Kate have finally made it through immigration at Sydney airport. They've been planning their South American trip for months - it's finally here! But first they have to suffer through the usual two hour wait in the airport before departure. Matt thinks quickly - 'let's get a coffee!' They wander around scanning the usual airport shops, looking for a Gloria Jean's. There are sunglasses shops, duty free of course, a newsagent... Suddenly Kate notices a cool looking store sporting a big blue Lonely Planet logo. "Oh my God! I didn't know there were Lonely Planet stores! Let's check it out!" While planning the trip, Kate was a regular visitor to lonelyplanet.com. She has registered a Lonely Planet profile, and the South America guidebook that they've been thumbing through for the last 4 months is in her bag. Kate has even stored her favourite South American destinations on lonelyplanet.com, and has posted a bunch of questions on Thorntree about the best romantic spots in Buenos Aires. Matt has been less involved in the planning. He knows the Lonely Planet brand, but just associates them with guidebooks. As they walk into the store, they can see not only Lonely Planet products, but also Crumpler, Teva, Northface and a bunch of other travel related brands. Kate is immediately attracted to the wall of books, while Matt notices a group of people leaning over a display screen in the middle of the store. Matt watches a young boy flick through images of New Zealand on the tabletop screen using his hands. Behind the photos is a map of the Queenstown area of New Zealand. Over at the book shelf, Kate notices a sticker on the back of the Buenos Aires city guide. The sticker says “Place me on our Microsoft Surface to learn more!” She grabs Argentina, Peru, and Buenos Aires and takes them over to Matt. Lonely Planet Scenario
32. Take Away #2 Your first user experience design doesn’t have a user interface.
33. Can I draw something now? OK, I’ve written my Activity Scenarios
36. Workflow Diagram Create ‘Customer’ Create ‘Policy Claim’ New New Who is calling? What do they want? New Inquiry Finish Call Act on request Existing Existing Identify ‘Customer’ Identify ‘Policy Claim’ The Hiser Group
37. Workflow Diagrams Are A map of the main user steps that make up a task High-level A way to start thinking about how to break tasks up in the user interface A way to focus on flow between functions, not just the functions
38. Workflow Diagrams Are Are not A map of the main user steps that make up a task High-level A way to start thinking about how to break tasks up in the user interface A way to focus on flow between functions, not just the functions A site map A diagram of the screens/pages in an application A diagram of every possible path and action
39. Workflow Diagram Create ‘Customer’ Create ‘Policy Claim’ New New Who is calling? What do they want? New Inquiry Finish Call Act on request Existing Existing Identify ‘Customer’ Identify ‘Policy Claim’ The Hiser Group
40. Creating Workflow Diagrams Start by creating one workflow diagram for each activity scenario / task. Avoid the temptation to incorporate other scenarios/functions at this stage. Keep it high-level! Once you have a first-pass, try to simplify the diagram. (By combining steps, for example.) Once you have a few, try to combine related diagrams into one, more abstract diagram.
42. Workflow diagram syntax No set rules Keep it simple User action 1 Decision Y N Condition User action 2 Entry/Exit point Optional Usually enough
43. Workflow diagram Interpolate SetParameters Retouch Images SelectNodes Plan SpecialEffect RecordCompositeto Film Scan inFilm Rolls Convert & Manipulate Tape BuildFlowgraph Composite Convert &ManipulateTape ArrangeElements onLightbox Preview Preparation Planning Implementation Completion The Hiser Group
44. Examine your workflow diagrams for: Groupings of related functions Suggests screens, pages or panels Avoid ‘one screen/page per workflow diagram box’. Key flows between activities And therefore flows between screens/pages Clues to the overall Interaction model Hub-based / Document Centric? Wizard-based? Combination?
45. For the Record Other types of task analysis GOMS HTA Etc.
46. Can I build some screens now? OK I have workflow diagrams
49. Paper Prototyping 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
51. Prototyping problems: Required specific skills Too much implementation detail Wasn’t agile enough Everything interpreted through the prototyper’s eyes Throw-away Many of these problems are resolved
53. Quiz OK, you’ve got a user interface design. What is the best way to ensure your user interface is usable? Hire a user experience consultant Get Quality Assurance involved Get an expert user to review the user interface None of the above, the users will tell us if there are any problems
56. Usability Testing Give users tasks to perform Get them to think aloud Don’t interfere Know what constitutes success Consider getting a neutral party to test You don’t have to have a ‘usability lab’ You don’t need large numbers of users
59. What We've Been Talking About User Profiling User Experience Goals Activity Scenarios Workflow Diagramming Paper Prototyping Usability Testing
63. 3 Ingredients for Failure Awesome power No standards Boss that says we need a more up-to-date user experience.
64. 3 Takeaways User Experience Design starts long before the drop-shadows and rounded corners Your first user experience design doesn’t have a user interface Fail early, and fail often
66. Required Slide Speakers, please list the Breakout Sessions, TLC Interactive Theaters and Labs that are related to your session. Related Content WUX212 Panel Discussion - Designers & Developers How We Do It In the Real World Wednesday 3:45pm
Worked in UI design for many yearsLast few years seen an explosion of interest in user experience and UI
2 Reasons
Here’s why
And the others
Perspective 3D may well be the flaming logo of the RIA generation.
History
XXXplaypenpic
Platform StandardsWebLogo, Search, Contact Us, top nav, left nav...GUIFile Edit View Tools Window Help.Standards are going wayDesire to differentiateDesigned for specific types of applicationsWeb: information browsingGUI: Information working - of a particular scale.
Perspective 3D may well be the flaming logo of the RIA generation.
Lots to say, but not today
See my blog for more details
What now?
You go to your first UI design meeting. In front of you is a blank sheet of flipchart paper.Do youChange the subject, the UI will become clear later. UI evolves at the last minute from a test harnessSay "Hey, nobody ever got sacked for copying Amazon!"Hand a Texta to the person wearing the most black in the room
We had to change the names when use case scenarios came along.
See my blog for more details
Well, yes, but not what you think.
Or task analysisOr whatever it is in your methodology
Like buildingsWeb sites is about a series of destinations. Applications are more about the journeys (or, reducing the number of journeys)
No, but you can draw some
Photo from Jenson Harris presentation on Orffice 2007 re-design
Can import your sketches into SketchflowXXX demo?Could show Flow graphTalked about on Wednesday with SketchflowNot really going to talk about today
In the pastMany tools existAxureiRiseBalsamiqHypercardProduction toolsFlashHybridsCatalyst?Expression BlendCheck list by @tuna
How many already do some form of usability testing?Doesn’t have to be formal
Not just “what do you think”?
ACTF
Little to do with the technologyLittle to do with laying out widgetsLittle to do with drop-shadows & gradient fills.
Visual design comes last
By preparing for the design, by understanding user constraints, we can navigate these problems.