users dan fleck (slides adapted from jeff offutt and joao sousa) swe 632 user interface design and...

UsersDan Fleck

(slides adapted from Jeff Offutt and Joao Sousa)

SWE 632

User Interface Design and Development

Cooper Ch. 3,4,5

Know the User

outside-in design in a nutshell:

• know the user

• know the tasks

• design the interface

interface

task

task

task

task

SWE 632 – UI Design © Fleck 2012

What to know about users?

• work experience

• computer experience

• age

• sex

• education

• reading skills

• language skills

• visual acuity

• dexterity…

Which ones matter?

Depends on the problem

you’re trying to solve!

SWE 632 – UI Design © Fleck 2012

Example

• work experience

• computer experience

• age

• sex

• education

• reading skills

• language skills

• visual acuity

• dexterity…

Which ones matter?

Depends on the problem

you’re trying to solve!

Example: We are developing a UI for a DVR (TiVo)

SWE 632 – UI Design © Fleck 2012

representation/manifestationmost users are familiar with hillsphys ed specialists are familiarwith effort charts

ou

tsid

e-i

n d

esi

gn

examplebridging implementation to user

models

what representationwould map the designer’s intentto the user’s understanding?

picture on thebike’s screen

hillintended workout

more generally:how to capture meaning in a way users will understand?

SWE 632 – UI Design © Fleck 2012

form vs. meaning

• things that exist• objects

• people

• things that may happen• actions

• causes and effects

• abstract concepts• responsibilities

• goals

• tasks

aka syntactic vs. semantic knowledge

• representations• words

• sentences

• symbols (icons)

• combination & sequences

thank you

xie xiegracias

cám ón

SWE 632 – UI Design © Fleck 2012

form vs. meaning

• things that exist• objects

• people

• things that may happen• actions

• causes and effects

• abstract concepts• responsibilities

• goals

• tasks

aka syntactic vs. semantic knowledge

rote memorizationeasily forgotten

various dialectsdependent on device,OS, app…

• representations• words

• sentences

• symbols (icons)

• combination & sequences

computer-supported tasks

SWE 632 – UI Design © Fleck 2012

• find files• find . –name “*.ppt”• Start – Find – Files or Folders• …

• search within files• grep “b.b” filename• open - focus - Ctrl-F – focus – “bob” - Enter• …

form vs. meaningexamples of syntax

SWE 632 – UI Design © Fleck 2012

form vs. meaningmore than one aspect/layer

semantic knowledge

• technology-specific knowledge• interaction concepts & devices• keyboard, mouse, windows, buttons…

• OS & applications

• file storage

• printing…

• domain-specific knowledge• what needs to be done

• domain concepts

• order of actions

task computer

how to carry out the task using a computer

enough?+ app-specific syntactic knowledge

SWE 632 – UI Design © Fleck 2012

traditional assessment does a poor job at distinguishing different

kinds of experts

H

M

task

sem

an

tics

computer s

emantics

H

M

app-specific syntax

LM

H

the all round expertaka the pink

elephant

the techiethe techie with

app training

the domainexpert

the techiedomain expert

the domain expertwith app training

the staff withapp training

SWE 632 – UI Design © Fleck 2012

different competenciesneed different UI strategies

• the techie• help with domain concepts• some app-specific help• not how to do a search

• not how to get focus on field

• the domain expert• help with computer concepts• how to print

• how to import data...

• detailed app-specific help

• the staff...

H

M

task

sem

anti

cs

compute

r

semantic

s H

M

app-specific syntax

LM

H

the techie

the domainexpert

the staff withapp training

SWE 632 – UI Design © Fleck 2012

Example: Evaluate our users

• Evaluate a generic user in all types of knowledge:• App-specific syntax, comp-semantic, task-

semantic

• Is “computer semantic” relevant? Why or why not?

SWE 632 – UI Design © Fleck 2012

Example: We are developing a UI for a DVR (TiVo)

13

Syntactic & Semantic

• Syntax knowledge is about the specific form to manipulate things, without regards to the concepts• How to type, without knowing language• How to turn a radio on, without understanding the sounds

• Semantic knowledge is about the meaning• The language we type in• The meaning of the music and the words

• “thank you”, “xie xie”, “gracias”, “cám ón” all have the same semantics, but very different syntax

SWE 632 – UI Design © Fleck 2012

14

Perpetual Intermediates

• Cooper argues that most users are always “perpetual intermediates”

• Beginners want to progress to make their lives better (and because nobody wants to be beginner!)

• Experts frequently fall back to intermediates when they stop being frequent users

Do you agree? (next slide)

SWE 632 – UI Design © Fleck 2012

15

Perpetual Intermediates

• For what types of applications are people perpetual intermediates? When is it not true?

• For what types of knowledge are people perpetual intermediates? Syntactic? Task-semantic? Comp-semantic?

Do you agree?

SWE 632 – UI Design © Fleck 2012

Summary

• Know the users’ knowledge in multiple dimensions• Semantic• Task• Computer

• Syntactic• Computer syntactic• Application specific syntactic

SWE 632 – UI Design © Fleck 2012

• Know the user• Know the tasks• Design the

interface

Qualitative Research: Finding Information about

the User

Cooper Ch. 4

• Know the user• Know the tasks• Design the

interfaceSWE 632 – UI Design © Fleck 2012

What to know?

• How does the product fit into the broader context of people’s lives?

• What goals motivate the use of the product? What basic tasks help accomplish these goals?

• What experiences do users find compelling? How do these relate to the product being designed?

• What problems do people encounter with their current ways of doing things?SWE 632 – UI Design © Fleck 2012

Research Types

• Interviews – stakeholders, subject matter experts (SMEs), users, customers

• User observation/ethnographic field studies• Literature review• Product/prototype competitive audits

You can get information in many ways

SWE 632 – UI Design © Fleck 2012

Ethnographic Field Studies

• Avoid a fixed set of questions (you don’t know enough yet!)

• Focus on goals first, tasks second• Avoid making the user the designer• Avoid making the user the developer• Encourage storytelling• Ask for a show and tell (demo)• Avoid leading questions

Observe the user interacting in their own environment

SWE 632 – UI Design © Fleck 2012

Applying Information about the user through Personas

and Modeling

Cooper Ch. 5

SWE 632 – UI Design © Fleck 2012

Modeling Users: Personas and Goals

• a persona is not a real person – it’s a model

• a persona captures

• skills & demographic profiles• how users perceive & behave• goals, motivations,

responsibilities

H

M

task

sem

an

tics

computer

semantic

sH

M

app-specific syntax

LM

H

the techie

the domainexpert

the staff withapp training

SWE 632 – UI Design © Fleck 2012

Persona modelsinform evaluation and design decisions

• which characteristics to model depends on the specific problem

• user & stakeholder goals

• demographics: vocabulary, interpretation of symbol/signs, age

• pref. on graphical representatione.g., map vs. list vs. augmented reality

• disabilities, sight, color-blindnesssee http://www.section508.gov/

• voice: native speaker vs. foreigner

• left-handed, right-handed

What should we

model for our

example?

SWE 632 – UI Design © Fleck 2012

Understand all relevant roles

• primary users• each interface typically targets one primary persona

and maybe one or a few more secondary personas• the primary target persona shapes most design decisions

• served persona• don’t use the UI, but benefit/are hurt by it

e.g., nurse uses system while treating patient

• negative persona• clarify who each interface will not cater for

e.g., hospital directorCan there be

multiple prim

ary

users? What

happens?SWE 632 – UI Design © Fleck 2012

Example: TiVo

• For our example, lets create some “provisional personas” (aka personas based on assumptions, since we cannot do research!)

• Create provisional personas for the example using the next slide as a guide.

• Remember: Personas are specific instances with details.

SWE 632 – UI Design © Fleck 2012

wh

at’

s re

levant

for

the t

ask

sUser Personas:

more than demographics & expertise

• knowledge• task semantics, computer semantics, app syntax

• goals• priorities, commitment, attention, responsibilities

• skills & perceptions• short & long-term memory,

graphical interpretation,language speaking/understanding,visual impairment,dexterity…

SWE 632 – UI Design © Fleck 2012

Summary Modeling Users

• Determine the user’s goals, motivations, needs using research, ethnographic observations, user evaluations

• Understand and evaluate users knowledge in multiple dimensions

• Generate personas for primary and other user types to guide design decisions and evaluations based on your research

SWE 632 – UI Design © Fleck 2012

• Know the user• Know the tasks• Design the

interface