![Page 1: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/1.jpg)
UsersDan Fleck
(slides adapted from Jeff Offutt and Joao Sousa)
SWE 632
User Interface Design and Development
Cooper Ch. 3,4,5
![Page 2: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/2.jpg)
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
![Page 3: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/3.jpg)
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
![Page 4: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/4.jpg)
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
![Page 5: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/5.jpg)
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
![Page 6: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/6.jpg)
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
![Page 7: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/7.jpg)
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
![Page 8: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/8.jpg)
• 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
![Page 9: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/9.jpg)
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
![Page 10: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/10.jpg)
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
![Page 11: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/11.jpg)
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
![Page 12: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/12.jpg)
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)
![Page 13: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/13.jpg)
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
![Page 14: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/14.jpg)
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
![Page 15: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/15.jpg)
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
![Page 16: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/16.jpg)
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
![Page 17: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/17.jpg)
Qualitative Research: Finding Information about
the User
Cooper Ch. 4
• Know the user• Know the tasks• Design the
interfaceSWE 632 – UI Design © Fleck 2012
![Page 18: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/18.jpg)
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
![Page 19: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/19.jpg)
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
![Page 20: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/20.jpg)
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
![Page 21: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/21.jpg)
Applying Information about the user through Personas
and Modeling
Cooper Ch. 5
SWE 632 – UI Design © Fleck 2012
![Page 22: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/22.jpg)
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
![Page 23: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/23.jpg)
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
![Page 24: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/24.jpg)
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
![Page 25: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/25.jpg)
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
![Page 26: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/26.jpg)
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
![Page 27: Users Dan Fleck (slides adapted from Jeff Offutt and Joao Sousa) SWE 632 User Interface Design and Development Cooper Ch. 3,4,5](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e1b5503460f94b09824/html5/thumbnails/27.jpg)
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