Upload
lindsay-tabas
View
132
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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/
Citation preview
You Don’t Know
C.R.A.P. about UX &
UI
Who am I?
Philadelphia (‘burbs) born and raised.
B.S. in Systems & Information Engineering from UVA – 2005
Masters of Information from UC-Berkeley – 2007
First UI Design Project: Touch Screen Treadmill Interface
Current Position: Lead Interaction Designer at The Cadient Group
Who are you?
Lets Play a Game!
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.User
Experience
MarketingBrandingQuality of Service
*Nielsen-Norman Group
Gulf of Evaluation
We want a small gulf!
The common goal of all products
The user: Starts with a goal Translates to an intention Translates to a sequence of actions
The amount of effort a person must exert to interpret a display: Perceive Interpret Evaluate
*Norman, D. The Gulf of Evaluation
Small Gulf of Evaluation
I am not the user…your teammates are not the
users. And, the customer is not always the user.
User Centered Design
1. Needs Assessment
1. Personas
2. Goals
3. Task Analysis
4. User Scenarios
5. Comparative Analysis
2. Design
1. Initial Sketches, Interaction Diagrams
2. Low-Fidelity Prototyping
3. High-Fidelity Prototyping
4. Build
3. Evaluate
1. Low-Fidelity Usability Testing
2. Heuristic Evaluation
3. Formal Usability Tests
Repeat, Repeat, Repeat
The user is always right
…but they never know what they need.
Personas
When to use: The end-users’ goals are unclear, the team isn’t sure how to prioritize features
Why: Identify your most important
customers Identify user goals and
objectives. Capture use cases for the
product Develop an idea for the
market Have a common “person” to
point to
Tool to Try: Usersbox.com
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?
Task Analysis
When 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
requirements Assign a priority to these
requirements based on user research and business needs. Low, Medium, High or N/A
Task AnalysisLets Try an Example
Are we ready to sketch?
Prototype & TestRepeat, repeat, repeat
Lo-Fidelity Prototyping a.k.a wireframes
When to use: To signal the flow of interaction, To separate the content from layout & display, When the designer is not the developer
Value: Save on development time, realize design problems early before making big investments.
Heavyweight Tools: Visio, Fireworks, OmniGraffle
Mediumweight Tools: Balsamiq (Cross Platform) SimpleDiagrams (Mac), Mockingbird (Web)
Lightweight Tools: Marker & Paper or Whiteboard,
Visual Design in UI Design
Contrast: If they’re not the same, make them different
Repetition: 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
User Scenarios & Interaction Diagrams
Design Exercise
Re-organize a flier
Point out C.R.A.P. in Google Search
Click icon to add picture
Metaphors and UI Patterns
Map to some facet of the real world task
Direct engagement & manipulation
Lots of resources out there: UI-Patterns.com Yahoo! Design Pattern Library Book: Designing Interfaces by
Jenifer Tidwell Site:
http://designinginterfaces.com/firstedition/
Example Metaphor
Why we test:
VCR Buttons to Control a Printer Tabs of Arbitrary Groups
Samples from Interface Hall of Shame
Usability Testing
Test if a page becomes more usable because of the layout.
What does the layout communicate?
Guidelines: Test the interface, not the user Give clear scenarios and tasks to
accomplish
Quick & Dirty: Not much time, Grab a co-worker
Formal: Determine time requirements for task completion, compare two designs on measurable aspects Requires Experiment Design
Discount Usability Testing
Usability Heuristics
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from errors
Help and documentation
How
Use on Lo or Hi-Fidelity Prototypes, or built products
Use a small set of 3-5 evaluators Check for compliance with
usability principles
*Jakob Nielsen
What’s wrong with this website?
Is this familiar?
Training is Not an Excuse for Poor Design
Resources
Books
The Design of Everyday Things by Donald Norman
Usability Engineering by Jakob Nielsen
The Inmates are Running the Asylum by Alan Cooper
GUI Bloopers by Jeff Johnson
PhillyCHI
Websites
DesigningInterfaces.com
Use-it.com
UI-Patterns.com
UXMag.com
AListApart.com
Local Groups