You Don't Know C.R.A.P. about UX/UI
Download as PPTX, PDF•4 likes•2,344 views
The document outlines the fundamentals of user experience (UX) and user interface (UI) design, highlighting the importance of understanding user needs and creating enjoyable products. It emphasizes methodologies such as user-centered design, personas, task analysis, and usability testing to enhance design outcomes. Key principles from various sources, including design best practices and usability heuristics, are also discussed to support effective design processes.
You Don't Know C.R.A.P. about UX/UI
- 1. You Don’t Know C.R.A.P. about UX & UI
- 2. Who am I?Philadelphia (‘burbs) born and raised.B.S. in Systems & Information Engineering from UVA – 2005Masters of Information from UC-Berkeley – 2007First UI Design Project: Touch Screen Treadmill InterfaceCurrent Position: Lead Interaction Designer at The Cadient Group
- 3. Who are you?
- 4. Lets Play a Game!
- 5. What is User Experience?All aspect’s of user’s interaction with the company, its services and its products. Not only in relationship to software.Meet the needs of the customer.Make the products enjoyable.Go beyond what the customer says they want.*Nielsen-Norman Group
- 6. Gulf of EvaluationWe want a small gulf!The common goal of all productsThe user:Starts with a goalTranslates to an intentionTranslates to a sequence of actionsThe amount of effort a person must exert to interpret a display:PerceiveInterpretEvaluate*Norman, D. The Gulf of Evaluation
- 7. Small Gulf of Evaluation
- 8. I am not the user…your teammates are not the users. And, the customer is not always the user.
- 9. User Centered DesignNeeds AssessmentPersonasGoalsTask AnalysisUser ScenariosComparative AnalysisDesignInitial Sketches, Interaction DiagramsLow-Fidelity PrototypingHigh-Fidelity PrototypingBuildEvaluateLow-Fidelity Usability TestingHeuristic EvaluationFormal Usability TestsRepeat, Repeat, Repeat
- 10. The user is always right …but they never know what they need.
- 11. PersonasWhen to use: The end-users’ goals are unclear, the team isn’t sure how to prioritize featuresWhy: Identify your most important customersIdentify user goals and objectives.Capture use cases for the productDevelop an idea for the marketHave a common “person” to point toTool to Try:Usersbox.com
- 12. Personas:Who are the students?What matters from students’ point of view?What are their goals?What about the teacher?What matters for the business?
- 13. Task AnalysisWhen to use: At the beginning of every design cycle.How to use:Break a goal into specific tasks.These tasks may be referred to as requirementsAssign a priority to these requirements based on user research and business needs.Low, Medium, High or N/A
- 14. Task AnalysisLets Try an Example
- 15. Are we ready to sketch?
- 16. Prototype & TestRepeat, repeat, repeat
- 17. Lo-Fidelity Prototyping a.k.a wireframesWhen to use: To signal the flow of interaction, To separate the content from layout & display, When the designer is not the developerValue: Save on development time, realize design problems early before making big investments.Heavyweight Tools: Visio, Fireworks, OmniGraffleMediumweight Tools:Balsamiq(Cross Platform)SimpleDiagrams (Mac), Mockingbird (Web)Lightweight Tools: Marker & Paper or Whiteboard,
- 18. Visual Design in UI DesignContrast: If they’re not the same, make them differentRepetition: Repeat colors, shapes, fonts & sizes. Reuse patterns.Alignment: Line things up. Make it clean.Proximity: Group LIKE things. Put similar information close together. Organize & De-Clutter
- 19. User Scenarios & Interaction Diagrams
- 20. Design ExerciseRe-organize a flier
- 21. Point out C.R.A.P. in Google Search
- 23. Metaphors and UI PatternsMap to some facet of the real world taskDirect engagement & manipulationLots of resources out there:UI-Patterns.comYahoo! Design Pattern LibraryBook: Designing Interfaces by Jenifer TidwellSite: http://designinginterfaces.com/firstedition/
- 24. Example Metaphor
- 25. Why we test:VCR Buttons to Control a PrinterTabs of Arbitrary GroupsSamples from Interface Hall of Shame
- 26. Usability TestingTest if a page becomes more usable because of the layout.What does the layout communicate?Guidelines:Test the interface, not the userGive clear scenarios and tasks to accomplish Quick & Dirty: Not much time, Grab a co-workerFormal: Determine time requirements for task completion, compare two designs on measurable aspectsRequires Experiment Design
- 27. Discount Usability TestingUsability HeuristicsVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recallFlexibility and efficiency of useAesthetic and minimalist designHelp users recognize, diagnose, and recover from errorsHelp and documentationHowUse on Lo or Hi-Fidelity Prototypes, or built productsUse a small set of 3-5 evaluatorsCheck for compliance with usability principles*Jakob Nielsen
- 28. What’s wrong with this website?
- 30. Training is Not an Excuse for Poor Design
- 31. ResourcesBooksThe Design of Everyday Things by Donald NormanUsability Engineering by Jakob NielsenThe Inmates are Running the Asylum by Alan CooperGUI Bloopers by Jeff JohnsonPhillyCHIWebsitesDesigningInterfaces.comUse-it.comUI-Patterns.comUXMag.comAListApart.comLocal Groups
Editor's Notes
- #10: This is how we figure out what the user wants
- #19: Baby steps. The first way to get your eyes thinking in the right direction. People like symmetry, and interfaces should be even, aligned.
- #22: Class Participation
- #23: What would you put the emphasis on? What are the most important things people should know?
- #30: This is where consistency and standards go a long way.