Transcript ITC 200

Interface Design (ITC 200)
Course Overview and Introduction
Lecture 2
What makes a “good” interface?


Simple: it makes the user more
effective
In addition, it leads to an enjoyable
experience - so the site visitor will want
to come back!
How do you get a good interface?





Know audience goals
Know company goals
Remember context of the Web as a
whole
Consider different devices
Understand system limits (bandwidth,
monitor size, etc.)
Key - know your visitors



Know user tasks
Know user language
Follow web norms
Know your visitors: Example
From The Interface Hall of Shame
http://www.iarchitect.com/global.htm
Analyze User Goals



Goals are why we perform tasks
Tasks are not goals - tasks make it
possible to achieve goals
Example:


I want to share pictures with my family goal
The steps required to post pix to the web those are tasks
Effective Interfaces






Visually apparent
Forgiving of errors
Allow “undo” (the “oh-no!” second)
Anticipate user needs
Consider color blindness (colored used as
secondary cue)
Consider user productivity not the computer
speed
-- Bruce Tognazzi
Effective Interfaces






Visually apparent
Forgiving of errors
Allow “undo” (the “oh-no!” second)
Anticipate user needs
Consider color blindness (colored used as
secondary cue)
Consider user productivity not the computer
speed
-- Bruce Tognazzi
Effective Interfaces





Key: system provides feedback!
Consistent
Predictable
Sound conceptual model
Books:



The Design of Everyday Things
Things That Make Us Smart
The Invisible Computer
-- Don Norman
Interface Guidelines




Simplicity
Speak User’s Language
Be Aware of System Status
Consistency
Simplicity




No irrelevant information - KISS
Each piece of information competes
with the user’s attention (animations not!)
Added bonus: maintenance is easier
Don’t copy designs straight from print
to web!
Simplicity: Example

From The Interface Hall of Shame http://www.iarchitect.com/tabs.htm
Simplicity: Print to Web
Readability



We don’t read. We scan.
Fonts optimized for screen
Mac-PC differences
Natural Language


Don’t use system-oriented terms
Use the audience’s own language
System Status



Where am I?
Where can I go next?
Feedback
Two views of interaction

Interaction with
 Software as a tool or machine
 Interface is usability-engineered
membrane
 Human as processor & interpreter
models
Two views of interaction

Interaction through


Software as medium to interact with task
objects or people
Interface plays a role in social context
Intro to Paper Prototyping

What is paper prototyping?


Brainstorming, designing, creating, testing,
and communicating user interfaces.
Allows designers to create and refine UIs
based on user feedback before
implementation.
What does it entail?





Creating user profiles, e.g., target user
Defining tasks
Creating prototypes
Recruiting testers
Conducting tests
What it doesn’t entail….


Comps
Storyboards