Silverlight won't save your User Experience - You Will!Shane MorrisUser Experience EvangelistMicrosoft AustraliaARC304

Take Away #1User Experience Design starts long before the drop-shadows and rounded corners

Why all this interest in User Experience (UX)?

Why all this interest in UX?Differentiated experiencesCapability of platform and tools

Capability of Platform and Tools

“With great power there must also come – great responsibility!”Stan Lee

Silverlight won’t save your user experience.

Dropping Our Standards

2 things used to constrain our ability to get ourselves in troublePlatform capabilityPlatform standards

Platform CapabilityThe Web3270 with picturesGraphical User Interfaces(GUI’s)Platform performanceDifficulty of codingwikipedia.org/3270

Platform StandardsWebLogo, Search, Contact Us, top nav, left nav...GUIFile, Edit, View, Tools, Window Help...

3 Ingredients for FailureAwesome powerNo standardsBoss that says we need a more up-to-date user experience.

QuizThe boss says we need a more up-to-date user experienceDo you:Hire a user experience designer immediatelyAsk "What users?"Brush up your resume

What Users?

User ResearchUser ProfileUserTaskEnvironmentPlatformPersona'shttp://www.usability.gov/analyze/personas.html

What is your User Experience?You don't need a UI to define your user experienceUser GoalsBusiness GoalsUsability GoalsDesign GoalsAttitude statementWhen people use this application, they feel...

Lonely Planet Surface Concept

Quickbooksvs XEROhttp://blog.xero.com/2008/12/bank-reconciliation/

Quickbooksvs XEROhttp://blog.xero.com/2008/12/bank-reconciliation/

Eventually you Have to Design Something...

QuizYou 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

Your First DesignActivity Scenarios

Lonely Planet Surface Concept

Matt and Kate in SydneyMatt 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

Take Away #2Your first user experience design doesn’t have a user interface.

Can I draw something now?OK, I’ve written my Activity Scenarios

Task Analysis

Applications Break At The Joins

Workflow DiagramCreate ‘Customer’Create ‘Policy Claim’NewNewWho is calling?What do they want?New InquiryFinish CallAct on requestExistingExistingIdentify ‘Customer’Identify ‘Policy Claim’The Hiser Group

Workflow DiagramsAreA map of the main user steps that make up a taskHigh-levelA way to start thinking about how to break tasks up in the user interfaceA way to focus on flow between functions, not just the functions

Workflow DiagramsAreAre notA map of the main user steps that make up a taskHigh-levelA way to start thinking about how to break tasks up in the user interfaceA way to focus on flow between functions, not just the functionsA site mapA diagram of the screens/pages in an applicationA diagram of every possible path and action

Workflow DiagramCreate ‘Customer’Create ‘Policy Claim’NewNewWho is calling?What do they want?New InquiryFinish CallAct on requestExistingExistingIdentify ‘Customer’Identify ‘Policy Claim’The Hiser Group

Creating Workflow DiagramsStart 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.

Workflow diagramming in action

Workflow diagram syntaxNo set rulesKeep it simpleUser action 1DecisionYNConditionUser action 2Entry/Exit pointOptionalUsually enough

Workflow diagramInterpolateSetParametersRetouchImages SelectNodesPlan SpecialEffect RecordCompositeto Film Scan inFilm Rolls Convert &ManipulateTape BuildFlowgraph Composite Convert &ManipulateTape ArrangeElements onLightbox Preview PreparationPlanningImplementationCompletionThe Hiser Group

Examine your workflow diagrams for:Groupings of related functionsSuggests screens, pages or panelsAvoid ‘one screen/page per workflow diagram box’.Key flows between activitiesAnd therefore flows between screens/pagesClues to the overall Interaction modelHub-based / Document Centric? Wizard-based? Combination?

For the RecordOther types of task analysisGOMSHTAEtc.

Can I build some screens now?OK I have workflow diagrams

Paper Prototyping

Paper PrototypingFAST DESIGN

Paper PrototypingProsNo technical skill requiredNot intimidatingClearly unfinishedNecessarily high-levelLow investmentConsBecome unwieldy with lots of contentAwkward to show subtle interactionsNot as portable

Digital Prototyping

Prototyping problems:Required specific skillsToo much implementation detailWasn’t agile enoughEverything interpreted through the prototyper’s eyesThrow-awayMany of these problems are resolved

Then the miracle happens

QuizOK, you’ve got a user interface design. What is the best way to ensure your user interface is usable?Hire a user experience consultantGet Quality Assurance involvedGet an expert user to review the user interfaceNone of the above, the users will tell us if there are any problems

Usability Testing

Usability Testing http://www.portfoliodesign.net/clients/case_study/monster_mob_usability_testing.asp?nav=marketing>

Usability TestingGive users tasks to performGet them to think aloudDon’t interfereKnow what constitutes successConsider getting a neutral party to testYou don’t have to have a ‘usability lab’You don’t need large numbers of users

Usability Testing BonusProject buy-in

Take Away #3Fail early, and fail often.

What We've Been Talking AboutUser ProfilingUser Experience GoalsActivity ScenariosWorkflow DiagrammingPaper PrototypingUsability Testing

User Centred Design

User Centred DesignUsers

Progressive Refinement

3 Ingredients for FailureAwesome powerNo standardsBoss that says we need a more up-to-date user experience.

3 TakeawaysUser Experience Design starts long before the drop-shadows and rounded cornersYour first user experience design doesn’t have a user interfaceFail early, and fail often

question & answer

Required SlideSpeakers, please list the Breakout Sessions, TLC Interactive Theaters and Labs that are related to your session.Related ContentWUX212 Panel Discussion - Designers & Developers How We Do It In the Real World Wednesday 3:45pm

shanemo@microsoft.comblogs.mdsn.com/shanemoixd101.com@shanemoThank you

Required Slide© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.