SIMS 213: User Interface Design

1
SIMS 213 User Interface Design Development

• Marti Hearst
• Thur, Feb 1, 2007

2
User-Centered Design Example

• Course Registration (Tele-bears re-design)
• SIMS 213, Spring 2003
• Group Manager Amy TodenhagenDocumentation
  Manager Kimberley ChambersSoftware Manager
  Nadine FiebrichDesign Manager Zhanna
  ShamisUser Testing Manager Anna Teplitskaya

3
User-centered Design Example

• Problem Statement

4
User-centered Design Example

• Participants

5
User-Centered Design Example

• Needs Assessment Procedure
• Answer the needs assessment questions
• Make a table showing
• user types
• tasks
• (guesses about) relative frequencies of tasks
• Decide which of the new tasks users may perform
  using the new interface.
• Make note of which ideas you decided to drop
  based on your interviews.

6
Needs Assessment Questions

• Who is going to use the system?
• What tasks do they now perform?
• What tasks are desired?
• How are the tasks learned?
• Where are the tasks performed?
• What is the relationship between the user and the
  data?

7
Needs assessment Questions

• What other tools does the user have?
• How do users communicate with each other?
• How often are the tasks performed?
• What are the (time) constraints on the task?
• What happens when things go wrong?

8
User-centered Design Example

• Needs assessment techniques
• Observation
• Interviews
• Study existing successful designs

9
User-Centered Design Example

• Interview
• Prepare a list of questions about how people do
  their task now and what they would like to have
  be different.
• Interview at least three people
• Try to identify people with different needs and
  preferences, with respect to their attitudes
  about using online ordering systems.
• Ask them what, if anything, must be in the
  system in order for them to prefer it over the
  current system
• Refer to needs assessment questions shown above.
• Go look at existing interfaces for the goal
  and see how they handle the necessary tasks.

10
User-centered Design Example

• Interview Participants
• Graduate 1st Year Masters
• Graduate PhD
• Undergrad Freshman1
• Undergrad Freshman2
• Undergrad Junior Transfer
• Undergrad Senior Transfer
• Undergrad Senior

11
User-centered Design Example

• Interview Questions Summary Results

12
User-centered Design Example

• Interview Questions Summary Results

13
User-centered Design Example
14
User-centered Design Example

• Interview Questions Summary Results

15
User-centered Design Example
16
Course Scheduler Example

• Interview Results
• Target user base UCB Students
• Developed from
• 8 interviews
• personal experience as students
• Discovered differences in approaches to tasks and
  needs
• Some students shop around and interact
  intensively with the course scheduling system
• Others consider only a narrow range of courses
  and/or have strict requirements to fill
• Diversity in student body
• Age, educational status, computer experience
• Must work for all students since it is a must-use
  application

17
Course Scheduler Example

• Interview Questions Summary Results

18
Personas (from Cooper)

• Hypothetical Archetypes
• Archetype (American Heritage)
• An original model or type after which other
  similar things are patterned a prototype
• An ideal example of a type quintessence
• A precise description of a user and what they
  want to accomplish
• Imaginary, but precise
• Specific, but stereotyped
• Real people have non-representative quirks

19
Lets Practice
20
Course Scheduler Example
21
Course Scheduler Example
22
Course Scheduler Example
23
Course Scheduler Example
24
Course Scheduler Example
25
Course Scheduler Example
26
Course Scheduler Example
27
Course Scheduler Example
28
Cooper on Scenarios

• Daily Use
• Fast to learn
• Shortcuts and customization after more use
• Necessary Use
• Infrequent but required
• Nothing fancy needed
• Edge Cases
• Ignore or save for version 2
• Example image cropping application
• It works so intuitively, it feels like magic

29
Course Scheduler Example

• Sample Scenario
• Alicia is new to the registration process
•   Its Monday morning and Alicia has just spent
  the weekend partying and getting to know more of
  her dorm-mates. Alicia has her first Tele-Bears
  session this morning and although she already has
  three good classes in mind, she needs to find 1
  more, but she'll have to figure out her GE
  requirements first. Alicia logs onto the system.
  First, she signs up for Nutritional Science 10
  because apparently heaps of cute water-polo guys
  take this class. Alicia is thinking about
  majoring in French Literature and so she signs up
  for English 1A which she must take before taking
  anymore English classes. Alicia then signs up for
  her third class, Biology 1A because she might
  want to major in this too. Then Alicia browses
  for her last class by searching all the GE
  classes, and decides to sign up for American
  Studies 10. Unfortunately this class must be
  really popular because its already full! So,
  Alicia decides to go on the waitlist for it just
  in case. She then adds another GE class that
  looked quite interesting called Film 24. This
  class is a Freshman Seminar on Film so Alicia
  hopes that she'll get to watch some cool movies!
  Someone is yelling Alicia's name down the hall,
  so she logs off.

30
Course Scheduler Example

• Sample Scenario
• Mike needs to make a minor schedule change
• Mike is already well into his second week of
  this semester. As usual, Mike had no problem
  signing up for his classes as he had planned them
  ahead of time out in Excel. Unfortunately he
  needs to switch sections for his Dynamics and
  Control of Chemical Processes class. Mike is
  loving the lecture and enjoying the laboratory
  for the class, but the T.A who is teaching his
  discussion section is clearly inexperienced. Mike
  quickly logs onto Tele-Bears and changes to the
  discussion section on Fridays at 9am. Although
  Mike is certain that this small change to his
  schedule doesn't conflict with his job, he
  reviews his schedule and, satisfied that this is
  fine, prints out his new schedule and logs off
  Tele-Bears.

31
Coopers Perpetual Intermediaries
Beginners
Intermediates
Experts
Programmers design for experts
32
Perpetual Intermediaries
Beginners
Intermediates
Experts
Marketers design for beginners
33
Perpetual Intermediaries
Beginners
Intermediates
Experts
People spend most of their time as intermediates
34
Perpetual Intermediaries
Beginners
Intermediates
Experts
Paradoxical Curves