User Interface Design - MEET 2010 Y3 lecture

8/9/2019 User Interface Design - MEET 2010 Y3 lecture

1/111


2/111


3/111


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


5/111


6/111


7/111


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


9/111

Webservers want Performance!

Nuclear plant wants safety, security, reliability

accident is not ok


10/111


11/111


12/111


13/111


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!


15/111


16/111


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


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!


19/111


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!)


21/111

What do you think happens when the user model != system model?

confused, frustrated, scared (red light is blinking!)


22/111


23/111

Want to make sure user model and system model are the same

Cues = hints about the system model (recognition!)


24/111


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.


26/111

How do you think this door opens?

What about the restroom doors here?

Does perceived match actual affordance?


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


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


29/111

May want to have icons or other information.

Scents

Calendar for events

Word bubbles for messages


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


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.


32/111

4 different web browsers look identical!

What if firefox was not consistent? Would people use it?


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?


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?


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?


36/111

See handout


37/111


38/111


39/111


40/111

Move to target = stop on top of target (not just pass over quickly)


41/111


42/111

See http://particletree.com/features/visualizing -fittss-law/ for more

details


43/111

We dont talk about it, but the speed to touch or click on an object

based onDistance

Size


44/111

In Microsoft office 2007, when you highlight text, a panel of

commonly used buttons appear next to the textreduces the distance


45/111

The file menu appears right next to the File button because they

are used together


46/111


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.


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?


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)


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


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?


52/111


53/111


54/111


55/111


56/111

Antoine French Writer and Aviator, best known for The little

prince (le petite prince)

Simplicity is to remove unnecessary differences


57/111


58/111


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


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


61/111

Value is the brightness or luminance of color.

Color is pure color;


62/111


63/111

Easy to find green object or large objects

Hard to find triangles out of rectangles


64/111


65/111


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?


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


68/111


69/111

Spatial tension

distracting effects like two lines


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.


71/111

Simplify by aligning elements horizontally and vertically

Fewer alignment postitions = simpler

This has terrible alignment, seems more complex than actually is


72/111

Two school of though on label alignment. Just choose one

Controls should best aligned left and right, but at least left


73/111


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?)


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.


76/111

producing cheaper, less accurate renditions of your target interface.


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


78/111


79/111


80/111


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.


82/111

The big one on the right is easier to read and manipulate (change)


83/111


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.


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.


86/111


87/111


88/111


89/111


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


91/111


92/111


93/111


94/111


95/111


96/111


97/111


98/111


99/111

Should this paragraph have larger font?

Should this form element be aligned?


100/111


101/111


102/111


103/111


104/111


105/111


106/111


107/111


108/111


109/111


110/111


111/111

Documents

User Interface Design - MEET 2010 Y3 lecture