Interaction Design
Christine Robson
September 25, 2007
Today

User interface consistency
– Buttons and widgets

Computer Interaction
– Mouse, Keyboard, Stylus, Touchscreen …
– Speech, NLP…

Human-Human Interaction
– Social effects, tagging
– Virtual worlds
Review: Fitts’s Law

Time T to move your hand to a target of size
S (measured as width) at distance D away is
T = RT + MT = a + b log (D/S +1)
D
start
S
– Depends only on index of difficulty
log (D/S +1)

Hand movement based on a series of microcorrections
Don’t Make Me Think


Make your UI obvious and selfexplanatory
Everything should be self-evident
– Know in one look what it is

Don’t distract and confuse your user
– They have a short attention span!
Buttons



Clickable?
Not Clickable?
How many
milliseconds
will your users
waste
wondering?
Soft vs. Hard Buttons

Hard Buttons
– “real” buttons
– Generally have a single action

Soft Buttons
– Programmable buttons or options
– Can appear and disappear in different
modes
Soft and Hard Buttons
Soft
Buttons

What’s
wrong with
this picture?
Rows of
identical
buttons…
with different
meanings in
different modes
Button pitfalls


Maintain consistency
Don’t make your users think!
User Interface
Consistency

The Principle of Least Surprise
– Similar things should look and act similar
– Different things should look different

Other properties
– Size, location, color, wording, ordering

Command/argument order
– Pre-fix vs. post-fix

Follow platform standards
Kinds of Consistency



Internal consistency within your
application
External consistency with other
applications on the same platform
Metaphorical consistency with your
interface metaphor or similar realworld objects
Case Against Consistency

Inconsistency is appropriate when
context and task demand it
– Arrow keys

But if all else is (almost) equal,
consistency wins
– QWERTY vs Dvorak
– OK/Cancel button order
Widgets


a widget is an interface element that
a computer user interacts with, such
as a window or a text box
The term was first applied to user
interface elements during Project
Athena in the 1980s
Widget Toolkits






The Microsoft Foundation Classes
(MFC) for Microsoft Windows platform
Cocoa, used in Mac OS X
Swing for Java applications
Adobe Flash
XUL, based on XML (Mozilla project)
Google Web Toolkit, based on AJAX
Interactions
How do you interact with
your computer?
Keyboard Design


modeled after the typewriter keyboard
QWERTY vs Dvorak (patented 1936)
Other Keyboards
Chorded Keyboards

A chorded keyboard
– enter characters or commands
formed by pressing several keys
together
– like playing a "chord" on a piano
– entered with one hand, leaving the
other hand free to do something
else (such as manipulating a
mouse).

Chord keyboards usually cannot
be used by a "hunt and peck"
method
– additional training required
Mouse

pointing based UI
– detects two-dimensional motion relative to its
supporting surface


name coined at the Stanford Research
Institute
Invented 1963, marketed 1981
Joystick

Many applications
– Computer Interfaces
– Video Games
– Equipment Controls
– Airplanes

First Computer
Joysticks in
the 80’s
Gesture Interfaces – from
the mouse to the hand

Mouse Gesture
– combining computer
mouse movements and
clicks
– the software recognizes
as a specific command

Gesture Devices
– The Nintendo Wii
– handheld pointing device
– can detect acceleration in
three dimensions
Stylus



Originally used for drawing- widely
marketed to artists and architects.
Mouse proved more popular for the
average computer user… or was it just
better applications?
Now stylus is widely used in pocket
devices
Stylus


Used in combination
with touch screens
Detachable pens
Touchscreens

Display overlays which have the ability to
display and receive information on the same
screen
Minority Report anyone?
Perceptive Pixel
by Jeff Han
http://www.perceptivepixel.com/
More Touchscreens…
Speech Interfaces



Most effectively used to give dictation
which the computer transcribes
Less effective for executing complex
commands
Fast when paired with other tasks
– Except auditory ones!
Accessibility: Speech

Accessibility software for visually
impaired users
Reads the text on the screen aloud to
the user very quickly
Can’t read images, only text

:)


Natural Language
Processing (NLP)


automated generation and
understanding of natural human
languages
language generation systems
– convert information from computer databases
into normal-sounding human language

natural language understanding systems
– convert samples of human language into more
formal representations that are easier for
computer programs to manipulate
Applications:
NLP and miners
Consider the following statement:
Sam Palmisano spoke at the European Union
meeting in Brussels last Thursday
Proper Nouns
Sam Palmisano
European Union
Brussels
Thursday
Places
Brussels
People
Sam Palmisano
Cities
Brussels
Countries
Belgium
USA
CEO
Sam Palmisano
Regions
Europe
Can now query as a page about “CEO’s in Europe”
Applications of NLP:
The “Web of Life”
NLP Challenges

What does they refer to?
We gave the monkeys the bananas because they were hungry
We gave the monkeys the bananas because they were over-ripe

same surface grammatical structure
cannot be understood properly without knowledge of
monkeys and bananas

What might this mean?

Is it a simile? Is “Time” a species of fly? A magazine?

Time flies like an arrow
Human-Human
Interaction
Social effects

Fostering Online Community
– Facebook
– MySpace
– LiveJournal
– YouTube
– Flickr

UI’s reflect the social characteristics of
the community
Tagging as a Game

Bird Identification at
Berkeley
– CONE Sutro Forest
– online game that allows
players to control the
movements of a remote
camera
– earn points by snapping
photos of birds and
identifying them
http://cone.berkeley.edu/
Virtual worlds



Neal Stephenson's Snow Crash, published
in 1992
The term metaverse is now widely used
to describe fully immersive 3D virtual
spaces
An avatar is an Internet user's
representation of himself or herself
– three-dimensional model used in computer
games and virtual worlds
– two-dimensional icon (picture) used on
Internet forums and other communities
– or a text construct found on early systems
such as MUDs
Second Life Metaverse

Internet-based
virtual world
– Launched 2003
– Developed by
Linden Labs

Models the real
world
– Economy (Linden
Dollars)
– Real estate
WoW




MMORPG: massively multiplayer online roleplaying game
Quests, Experience Points
9 million users
Purchase things on eBay
Other Virtual Worlds



EverQuest
City of Heroes
Many other online
games
Interactions
Bottom-to-Top

Interact with the (computer) system
– User interfaces promote usability and
functionality of the system

Interact with other users
– Functionality and usability of the system
promotes social interactions

In the end, users are going to do
what’s fun and easy
Nuts & Bolts
Are you on the class
mailing list?

You would have gotten an email…

If not, join the CS160-fall07 group
http://groups.google.com/group/cs160-fall07
click apply for membership
Social and useful design
space
Useless
Group
Individual
Pyramid scheme
Zombie
iLike
Grafitti
Likeness
Useful
Social networking
Group Friends
Contextual Inquiry



Examples of resources
Examples of hindrances
Examples of key design issues
Course schedule changes




The Poster Session moved to be part of the
Project Demo session (now on Nov. 13)
Both the Project Demo session (now Nov.
13) and Final Presentations (now Dec. 4 &
6) pushed back a week -- more time to
work on the group project
Moved the midterm review up to the week
before the midterm
Some lectures and discussion section topics
moved to accommodate the changes
Assignments
Due Thursday Sept 27:
 Contextual inquiry
– Pick appropriate method
– Group analysis
– Report
Due Oct 4th:
 Project Proposal
Next time
Design Process: Implement -- Low
Fidelity Prototyping
Readings:
– Prototyping for Tiny Fingers
– Norman Chapter 7
Don’t Forget to pickup:
“Prototyping for Tiny Fingers”