IS 403 User Interface Design Shaun Kane Today More on interaction design Getting started with user testing Checkin on A6 How is everybody doing Problems Need feedback A7 posted Interaction design ID: 203951
Download Presentation The PPT/PDF document "Interaction design" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Interaction design
IS 403: User Interface Design
Shaun KaneSlide2
Today
More on interaction design
Getting started with user testingSlide3
Check-in on A6
How is everybody doing?
Problems? Need feedback?
A7
postedSlide4
Interaction design
“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is.
It’s not just what it looks like and feels like. Design is how it works.
” – Steve
JobsSlide5
What makes a good design?
What skills have we picked up so far?Slide6
What makes a good design?
Requirements gathering
Good information design and architecture (IS 387)
Good interaction design
Testing, iteration, improvementSlide7
Some recap from IS 387Slide8
Consider a web site…
What questions
might a user have?Slide9
Consider a web site…
What questions
might a user have?
Where am I?
Where can I go?
What can I do here?
What did I just do?Slide10
Tools from IS 387
Site ID
Global / persistent navigation
“You are here”
BreadcrumbsSlide11Slide12
Site ID
The main site, brand identity
Click to go homeSlide13
Global navigation
It should be
persistent
5 elementsSlide14
Utilities
Site-wide elements that are
not
part of the content hierarchy
Separate them, so we don’t have to shoehorn them into contentSlide15
“You are here”
Show user’s position in hierarchy
Helps user understand hierarchy
Can be shown in several waysSlide16
Breadcrumbs
Hierarchical vs. chronologicalSlide17
Buttons and links
Make them
actionsSlide18
More about interaction designSlide19
The holy texts of usabilitySlide20
The holy texts of usability
<- how
people think
tools, methods ->
processesSlide21
Norman
You’ve probably read it before
Worth a reread
Now you have fun projects to apply it toSlide22
Important ideas from Norman
It’s not the user’s fault
Affordances
Conceptual models
Make things visible (system status, feedback)
Feedback
Mapping
Constraints
Next time: execution and evaluatingSlide23
Affordances
Examples in everyday life/this class?Slide24
Affordances
Jared Sinclair, “
Untouchtable
”. http://
blog.jaredsinclair.com
/post/64880801326/untouchableSlide25
Perceived vs. actual affordance
Affords sitting
Affords pushing
Perceived affordanceSlide26
Affordances vs. convention
What does
this
do?Slide27
Affordances vs. convention
What does
this
do?
A cultural convention: blue underlined things are web linksSlide28
Conceptual models
How the system works vs. how the user thinks it works
Examples?Slide29
Conceptual modelsSlide30
Conceptual models
Good conceptual models aren’t always the same as the
system modelSlide31
System status and feedback
What’s going on?
What did I just do
?Slide32
System statusSlide33
System status
Good?
Bad?Slide34
System status
Good?
- Tells me I need to wait
Bad?
Why?
How long?
What is it doing?Slide35
FeedbackSlide36
Mapping
What is it?
What is a good mapping?Slide37
MappingSlide38
Mapping
Natural mapping
Arbitrary mappingSlide39Slide40
Constraints
What are they?
Good/bad?Slide41
ConstraintsSlide42
Don’t do this
Phone number:
Phone number MUST be formatted XXX-YYY-ZZZZSlide43
Class activity
Take out your phones (no really!)
In groups of two, find
good
and
bad
examples of:
Affordances, mapping, feedback, constraintsSlide44
Next time
Norman, model of execution
Usability heuristics (Nielsen)