User Interface Design - MEET 2010 Y3 lecture
Transcript of User Interface Design - MEET 2010 Y3 lecture
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
1/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
2/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
3/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
4/111
The question were going to tackle is why are some interfaces more
effective than others?Effectiveness means many things, dependent on what youre talking
about
Remain neutral
MySpace lets users configure their layout
Facebook has the same consistent layout throughout the site
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
5/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
6/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
7/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
8/111
Novices see a new interface (website etc) and think what does this
do? and how do I do it?
Infrequent users come back every month or every year (new years
presents site), and want to remember how to use the interface
quickly
Frequent users have learned all the features and want to do thingsQuickly
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
9/111
Webservers want Performance!
Nuclear plant wants safety, security, reliability
accident is not ok
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
10/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
11/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
12/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
13/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
14/111
aware of how people actually learn.
Misleading message
can't assume if the interface tells the user something, that the user
will immediately learn and remember it.
Dialogue box -- overreliance on user memory
Must click OK to follow the instructions
Instructions disappear, how to follow them?
Just because you've said it, doesn't mean they know it.
Applies to real life too!
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
15/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
16/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
17/111
Working memory where we think
Disappears quickly
Mechanical repetition doesnt actually work
Relate knowledge with what you already know
Remembering a persons name
repeating it a lot doesnt workremembering your interaction, and labeling them with the name isbetter
Learnability: connections as easy as possible to make
consistency is a good way to do that
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
18/111
Psychocolgy experiments -- Humans VERY good at recognition
In one study, people looked at 540 words for a brief time each,then took a test in which
determine pairs of words seen on 540-word list.
88% accuracy on average!
High level can recognize
Experts typically can recall information
Learnability:
help users use recognition and not recall.
The dialog before was asking users to use recall!
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
19/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
20/111
learning new system requires user build mental model of how system
works.
Learnability can be strongly affected by difficulties in building that
model.
A model of a systemway describing how system works.
specifies what parts of system are
how parts interact to make system do supposed to do.
What do you think happens when the user model != system model?
confused, frustrated, scared (red light is blinking!)
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
21/111
What do you think happens when the user model != system model?
confused, frustrated, scared (red light is blinking!)
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
22/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
23/111
Want to make sure user model and system model are the same
Cues = hints about the system model (recognition!)
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
24/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
25/111
Sold by Staples, a company that sells office supplies
Perceived
button
can press it
makes life a little easier
Actual
makes a little noise.
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
26/111
How do you think this door opens?
What about the restroom doors here?
Does perceived match actual affordance?
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
27/111
Textbox affords text input
Affordances depends on context, learned from practice.
The first time we see a rectangular box, its not clear what it means,
but we all know that this is a textbox, and we can type text into it.
The button has the affordance of being pressed down
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
28/111
Information foraging
humans used to be hunters
maximize the benefit of doing something vs its cost
What is most important?
Whats the star icon?
The text is a scent
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
29/111
May want to have icons or other information.
Scents
Calendar for events
Word bubbles for messages
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
30/111
What the system does when the user does something
let the user know whats going on and how system modelresponded
make sure user model == system model
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
31/111
Affordances and natural mapping
examples of a general principle of learnability:
consistency.
This rule is often named the Principle of Least Surprise,
basically means shouldnt surprise the user with the way
a command or interface object works.
Similar things should look, and act, in similar ways. Conversely,
different things should be visibly different.
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
32/111
4 different web browsers look identical!
What if firefox was not consistent? Would people use it?
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
33/111
Wording is just as important and often overlooked.
MIT computer science undergraduate group creates course
evaluations so students can rate their classes
They use evaluation and review to describe same thing, but
users will wonder if they are using two different words, then are
they different?
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
34/111
RealCD is an audio-CD software package developed by the User
Interface Architecture and Design Group at IBM. The application isintended to showcase IBM's use of real-world metaphors in
interface design, that is, designing software based on objects,
actions, and processes that people interact with in the real world.
Modeled after a CD case
Interface does not provide any clues
80% of space devoted to the logo
Which are controls and which are not?
No Tooltips
Exit control is the dot
How to open CD case?
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
35/111
But it gets worse.
interface can also be opened like CD case
Clicking on cover art -- sensible way to open case,
not hard to discover once you get frustrated and start clicking everywhere.
Instead, only way open case is toggle button control (the button with two little graysquares on it).
Opening the case reveals important controls,
list of tracks
a volume control
buttons for random or looping play.
consistency dictated track list belongs on back of case. But why is the cover art more importantthan these controls? Clearly adjusting the volume, picking a track >> viewing the cover art.
Ignore consistency with other desktop apps.
not all the tracks on the CD are visible
Could you tell right away?
Where is its scrollbar?
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
36/111
See handout
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
37/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
38/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
39/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
40/111
Move to target = stop on top of target (not just pass over quickly)
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
41/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
42/111
See http://particletree.com/features/visualizing -fittss-law/ for more
details
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
43/111
We dont talk about it, but the speed to touch or click on an object
based onDistance
Size
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
44/111
In Microsoft office 2007, when you highlight text, a panel of
commonly used buttons appear next to the textreduces the distance
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
45/111
The file menu appears right next to the File button because they
are used together
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
46/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
47/111
What if you want to delete all of you messages or set all of your
messages to read?
the select all link lets to do this in 1 click, rather than
100 or 1000.
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
48/111
If you copy lots of files to a directory with files that have the same
name, windows will ask if you want to replace each file.Yes to All button is a great shortcut that groups all the yes clicks
if you know you want to replace everything
What if there are some you dont want replaced? Is the yes to all
button useful?
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
49/111
Google, and most search engines, select the search box
Ex: Yahoos homepage is designed to show what it thinks you will be
interested in.
Its default is the most interesting news
Common answers filled into form
Auto completion helps the user avoid fully typing
Helps recognition (recall is hard)
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
50/111
User is likely to do what they recently did
Open a recent file
Go to a recent website
File editing often exhibits this,
Recently-Used Files menus (like this) very helpful
Makes file opening more efficient.
Keep histories of users previous choice
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
51/111
This dialog is from Microsofts Web Publishing Wizard, which
uploads local files to a remote web site.
usual mode operation in web publishing
locally develop copy of the web site
upload to web server all at once,
suggests deleting files on host that dont appear locally
Thats a helpful shortcut, which improves efficiency,
what if know a file on the host that dont want to delete?
What would you have to do?
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
52/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
53/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
54/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
55/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
56/111
Antoine French Writer and Aviator, best known for The little
prince (le petite prince)
Simplicity is to remove unnecessary differences
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
57/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
58/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
59/111
Title bar
Label current folderWindow activation indicator -- Blue if it is selected, gray
if not
Location for control buttons -- closing, maximizing andminimizing
What is the icon? Information scent?
Scroll bar
Thumb is what the mouse hovers over
affords dragging
indicates position of the currently displayed content inthe document
the fraction (amount) of the displayed content
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
60/111
Contrast = irregularity in design, communicates information or
makes elements stand out
Simplicity says we should eliminate unimportant differences
Once chose the important differences, make differences clear along
visual variables
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
61/111
Value is the brightness or luminance of color.
Color is pure color;
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
62/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
63/111
Easy to find green object or large objects
Hard to find triangles out of rectangles
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
64/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
65/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
66/111
Cover up one eye, and squint the other
Simulates what a user sees at a glance, if not paying attention
Is different font a good use for contrast?
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
67/111
Shows how contrast can be used to make articles easier to read
Try squint test on this. High contrast?
What visual variables are used?
Title and heading uses position, value, and size
Should we use different fonts for the paragraph and the figure?
text shape is not selective
balance contrast and simplicity
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
68/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
69/111
Spatial tension
distracting effects like two lines
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
70/111
Which is easier to read quickly?
A particularly effective use of white space
put labels in the left margin,
white space sets off, highlights them.
Read from left to right (or right to left here)
dialog box (a)
cant scan the labels and group names separatelylabels and lines interfere with each
redesigned dialog (b)
the labels are now alone on the left
much easier to scan.
same reason, should put labels left of controls, rather than above.
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
71/111
Simplify by aligning elements horizontally and vertically
Fewer alignment postitions = simpler
This has terrible alignment, seems more complex than actually is
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
72/111
Two school of though on label alignment. Just choose one
Controls should best aligned left and right, but at least left
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
73/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
74/111
dialog box from Adaptec Easy CD Creator, which appears at the end of burning a CD. The topimage shows the dialog when the CD was burned successfully; the bottom image shows what it looks
like when there was an error.
What does the squint test tell you about these dialogs?
Key problem = lack of contrast between the two states.
Success/failure of CD burning important
should be obvious at a glance.
Use the squint test.
some labels
big filled progress barroundish icon with a blob of red
three buttons.
No difference!
How to fix?
Different color
Different number of buttons (is that enough?)
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
75/111
Here s Googles homepage. Lets talk about just this page, in terms of:
- simplicity
- learnability
- visibility, specifica lly information scent
My comments:
outstanding example ofaesthetic and minimalist design.
simple as possible.
Unnecessary features, hyperlinks are omitted
lots of whitespace.
fast to load
trivial to use.
But maybe Google goes a little too far ! Take the perspective of a completely novice user coming to Google for the first time.
What does Google actually do?
The front page doesnt say.
What should be typed into the text box?
It has no caption at all.
The button labels are almost gibberish.
Google Search isnt meaningful English
And what does Im Feeling Lucky mean?
Where is Help?
Turns out its buried at the bottom, along with Jobs & Press.
Although these problems would be easy for Google to fix, they are actually minor, because Googles interface is simple e nough that it can be learned by only a small amount ofexploration. (Exce pt perhaps for the Im Feeling Lucky button, which probably remains a mystery until a user is curious enough to hunt for the help. After all, maybe it does a randomchoice from the search results!)
Notice that Google does not ask you to choose your search domain first. It picks a good default (web pages), and makes it ea sy to change.
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
76/111
producing cheaper, less accurate renditions of your target interface.
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
77/111
Many reasons, all boils down, related to cost
Faster to build, so can quickly evaluate and get feedback.
Implementing a full interface may take months or years,while a prototype may take hours or days.
If there are hard to resolve design decisions, can build multiple and trythem all
Easier to change. If the design is wrong, we want to throw it away!
Hard to do when time invested in code to implement adesign
Cost in terms of time, money
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
78/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
79/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
80/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
81/111
Programmers are happier dealing with details than with the big picture stuff.
Details are easier to wrangle with;they tend to have concrete, clear answers;
they tend to be less ambiguous;
they tend to have more written about them;
they are easier to test;
they tend to be technique-oriented.
Compared to getting the big picture stuff right getting the details right is easy.
The latter is often done at the expense of the former.
Example:
the plane flight was flawless but the plane landed at the wrongairport
the program works well and even tests well, but user's won't buyit because it doesn't do the right thing.
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
82/111
The big one on the right is easier to read and manipulate (change)
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
83/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
84/111
The prototype on the left
lots of little pieces
trouble staying put.
Post-it glue can help with that.
On the right is a prototype thats completely covered with a transparency.
write directly w/dry-erase
which just wipes off
With multiple layers of transparency
user write on the top layer,
lower layer for computer messages, selection highlighting,
and other effects.
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
85/111
Paper is great for prototyping features that would be difficult to
implement.
Project (a contact manager) envisioned showing your social network
as a graph
prototyped it, it turned out not useful.
Cost of trying that feature on paper was trivial, so it was easy to
throw it away.
Trying it in code, longer, much harder to discard.
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
86/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
87/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
88/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
89/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
90/111
Lots of tools, many of these tools have scripting languages to
program interactive elementsHtml has javascript,
flash has action script
There are also tools to make the html/flash. Dreamweaver, etc
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
91/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
92/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
93/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
94/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
95/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
96/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
97/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
98/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
99/111
Should this paragraph have larger font?
Should this form element be aligned?
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
100/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
101/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
102/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
103/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
104/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
105/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
106/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
107/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
108/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
109/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
110/111
-
8/9/2019 User Interface Design - MEET 2010 Y3 lecture
111/111