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