I taught a class titled "You Don't Know C.R.A.P. about UX/UI" for SkillShare Philadelphia on 8/23/11. For more information on the class visit: http://www.skillshare.com/You-Dont-Know-CRAP-about-UX-UI/1632896614/
Baby steps. The first way to get your eyes thinking in the right direction. People like symmetry, and interfaces should be even, aligned.
What would you put the emphasis on? What are the most important things people should know?
This is where consistency and standards go a long way.
You Don't Know C.R.A.P. about UX/UI
You Don’t Know C.R.A.P. about UX & UI<br />
Who am I?<br />Philadelphia (‘burbs) born and raised.<br />B.S. in Systems & Information Engineering from UVA – 2005<br />Masters of Information from UC-Berkeley – 2007<br />First UI Design Project: Touch Screen Treadmill Interface<br />Current Position: Lead Interaction Designer at The Cadient Group<br />
What is User Experience?<br />All aspect’s of user’s interaction with the company, its services and its products. Not only in relationship to software.<br />Meet the needs of the customer.<br />Make the products enjoyable.<br />Go beyond what the customer says they want.<br />*Nielsen-Norman Group<br />
Gulf of Evaluation<br />We want a small gulf!<br />The common goal of all products<br />The user:<br />Starts with a goal<br />Translates to an intention<br />Translates to a sequence of actions<br />The amount of effort a person must exert to interpret a display:<br />Perceive<br />Interpret<br />Evaluate<br />*Norman, D. The Gulf of Evaluation<br />
The user is always right <br />…but they never know what they need.<br />
Personas<br />When to use: The end-users’ goals are unclear, the team isn’t sure how to prioritize features<br />Why: <br />Identify your most important customers<br />Identify user goals and objectives.<br />Capture use cases for the product<br />Develop an idea for the market<br />Have a common “person” to point to<br />Tool to Try:Usersbox.com<br />
Personas:<br />Who are the students?<br />What matters from students’ point of view?<br />What are their goals?<br />What about the teacher?<br />What matters for the business?<br />
Task Analysis<br />When to use: At the beginning of every design cycle.<br />How to use:<br />Break a goal into specific tasks.<br />These tasks may be referred to as requirements<br />Assign a priority to these requirements based on user research and business needs.<br />Low, Medium, High or N/A<br />
Lo-Fidelity Prototyping a.k.a wireframes<br />When to use: To signal the flow of interaction, To separate the content from layout & display, When the designer is not the developer<br />Value: Save on development time, realize design problems early before making big investments.<br />Heavyweight Tools: Visio, Fireworks, OmniGraffle<br />Mediumweight Tools:Balsamiq(Cross Platform)SimpleDiagrams (Mac), Mockingbird (Web)<br />Lightweight Tools: Marker & Paper or Whiteboard, <br />
Visual Design in UI Design<br />Contrast: If they’re not the same, make them different<br />Repetition: Repeat colors, shapes, fonts & sizes. Reuse patterns.<br />Alignment: Line things up. Make it clean.<br />Proximity: Group LIKE things. Put similar information close together. Organize & De-Clutter<br />
Metaphors and UI Patterns<br />Map to some facet of the real world task<br />Direct engagement & manipulation<br />Lots of resources out there:<br />UI-Patterns.com<br />Yahoo! Design Pattern Library<br />Book: Designing Interfaces by Jenifer Tidwell<br />Site: http://designinginterfaces.com/firstedition/<br />
Why we test:<br />VCR Buttons to Control a Printer<br />Tabs of Arbitrary Groups<br />Samples from Interface Hall of Shame<br />
Usability Testing<br />Test if a page becomes more usable because of the layout.<br />What does the layout communicate?<br />Guidelines:<br />Test the interface, not the user<br />Give clear scenarios and tasks to accomplish <br />Quick & Dirty: Not much time, Grab a co-worker<br />Formal: Determine time requirements for task completion, compare two designs on measurable aspects<br />Requires Experiment Design<br />
Discount Usability Testing<br />Usability Heuristics<br />Visibility of system status<br />Match between system and the real world<br />User control and freedom<br />Consistency and standards<br />Error prevention<br />Recognition rather than recall<br />Flexibility and efficiency of use<br />Aesthetic and minimalist design<br />Help users recognize, diagnose, and recover from errors<br />Help and documentation<br />How<br />Use on Lo or Hi-Fidelity Prototypes, or built products<br />Use a small set of 3-5 evaluators<br />Check for compliance with usability principles<br />*Jakob Nielsen<br />
Training is Not an Excuse for Poor Design<br />
Resources<br />Books<br />The Design of Everyday Things by Donald Norman<br />Usability Engineering by Jakob Nielsen<br />The Inmates are Running the Asylum by Alan Cooper<br />GUI Bloopers by Jeff Johnson<br />PhillyCHI<br />Websites<br />DesigningInterfaces.com<br />Use-it.com<br />UI-Patterns.com<br />UXMag.com<br />AListApart.com<br />Local Groups<br />