An introduction to UI/UX and the User-Centered Design Process

1. UI/UX/UCD

2. About me
Past
BFA, Graphic Design, University of Michigan
MA, Digital Media & Education, University of Michigan
Designer at Q LTD
SIC Product & Design Spring 2014
Current
Senior Product Designer at

4. About You
Name?
Where are you from?
What brought you to Startup Institute?
What would you like to get out of these two sessions?

5. What we’ll cover today
Defining “Designer” (and Developer)
Principles & Heuristics
UCD process (more next week with activity)

6. What is UX?
Identifying and validating assumptions

9. Principles
& Heuristics

10. Nielsen’s Heuristics
Visibility of system status
The system should always keep users informed about what is
going on, through appropriate feedback within reasonable time.

11. Nielsen’s Heuristics
Match between system and the real world
The system should speak the users’ language, with words,
phrases and concepts familiar to the user, rather than system-
oriented terms. Follow real-world conventions, making
information appear in a natural and logical order.

12. Nielsen’s Heuristics
User control and freedom/autonomy
Users often choose system functions by mistake and will need
a clearly marked “emergency exit” to leave the unwanted state
without having to go through an extended dialogue. Support
undo and redo.

13. Nielsen’s Heuristics
Consistency and standards
Users should not have to wonder whether different words,
situations, or actions mean the same thing. Follow platform
conventions.

14. Nielsen’s Heuristics
Error prevention
Even better than good error messages is a careful design which
prevents a problem from occurring in the first place. Either
eliminate error-prone conditions or check for them and present
users with a confirmation option before they commit to the action.

15. Nielsen’s Heuristics
Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and
options visible. The user should not have to remember information
from one part of the dialogue to another. Instructions for use
of the system should be visible or easily retrievable whenever
appropriate.

16. Nielsen’s Heuristics
Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up
the interaction for the expert user such that the system can cater
to both inexperienced and experienced users. Allow users to tailor
frequent actions.

17. Nielsen’s Heuristics
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant
or rarely needed. Every extra unit of information in a dialogue
competes with the relevant units of information and diminishes
their relative visibility.

18. Nielsen’s Heuristics
Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language
(no codes), precisely indicate the problem, and constructively
suggest a solution.

19. Nielsen’s Heuristics
Help and documentation
Even though it is better if the system can be used without
documentation, it may be necessary to provide help and
documentation. Any such information should be easy to search,
focused on the user’s task, list concrete steps to be carried out,
and not be too large.

21. Affordances

24. User-Centered
Design

25. Why
Problem that needs to be solved
Who
People who need it to be solved
How
The way in which it should be solved
to be relevant to those people
c/o Whitney Hess

26. UCD
Process
Discover Define
Evaluate Design

27. Interviews
Ethnography
Shadowing
Research
Observation
Focus Groups
Surveys
Discover

28. Identify users
Identify needs
Frame focus
Establish goals
Chart trajectory
Plan Process
Define

29. Personas
Scenarios
Use cases
Journey maps
Information architecture
Wireframes
Prototypes
Design

30. QA/QC
Usability testing
User interviews
Accessibility
Surveys
Analytics
Evaluate

40. Model Name 1
Description goes here, maybe something like
multinomial categorization to predict something.
DV: dependent_variable_name1
SS: scoring_set_1
AUC: 0.81
Multinomial Gates Foundation
1/16/15 aampezzan
Tag 1 Tag 2
Final Version
Tag 3
Console Project Name Score Model
Search to Filter
Tag 1 Tag 2 Final Version
Multinomial Binary Tag 3
Gates Foundation
Binary
Sort by: Date
Filter by Tags
Model Name 2
Description goes here, maybe something like
multinomial categorization to predict something.
DV: dependent_variable_name1
SS: scoring_set_1
AUC: 0.81
Multinomial Gates Foundation
1/16/15 aampezzan
Tag 1 Tag 2
Final Version
Tag 3
Console Project Name Score Model
Model Name 3
Description goes here, maybe something like
multinomial categorization to predict something.
DV: dependent_variable_name1
SS: scoring_set_1
Multinomial Gates Foundation
1/16/15 aampezzan
Tag 1 Tag 2
Console Project Name
Lorem Ipsum Dolor
Description goes here, maybe something like
multinomial categorization to predict something.
DV: dependent_variable_name1
1/16/15 aampezzan
Console Project Name
Dolor Sit Amet
Description goes here, maybe something like
multinomial categorization to predict something.
DV: dependent_variable_name1
SS: scoring_set_1
1/16/15 aampezzan
Console Project Name
Gates FoundationMultinomial
Console | Organization Name 3?Projects Queue Results Search Console

42. Suggested reading
Change by Design
Tim Brown
Don’t Make
Me Think
Steve Krug
101 Design
Methods
Vijay Kumar
The Design of
Everyday Things
Donald Norman
Universal Principles
of Design
William Lidwell,
Kritina Holden,
Jill Butler
Designing with
the Mind in Mind
Jeff Johnson
Information
Architecture for
the Worldwide Web
Peter Morville