Web Site Interface

Design

By Nguyen Duc Son

What is a User Interface and
Why do you need one?

By Nguyen Duc Son

 User-Centric Design
• A user interface must be user-centric in nature, or completely user focused

By Nguyen Duc Son

Layout & Organization

• Chunking

• Grouping

• Hick’s Law

By Nguyen Duc Son

 Chunking
• Refers to the processing of small pieces or
“chunks” of information. (numbers, letters, words, objects,
or even sequences of events)

• Person can only store, recall, and process

seven bits of information – plus or minus two –
at any given time. → “Magic number” : 7 +/- 2

By Nguyen Duc Son

Example of Interface Chunking

By Nguyen Duc Son

 Grouping
• Clustering different web interface elements together:

– It helps make the interface more aesthetically pleasing

by creating balance and minimizing clutter.

– It helps users to find what they’re looking for faster.

– It helps users to see relationships between certain

interface elements, making the interface more intuitive
to use.

By Nguyen Duc Son

An example of Grouping

By Nguyen Duc Son

 Hick’s Law
• A set of formulas that mathematically prove the
observations of how users react when confronted with
multiple choices of a given type

• It’s faster for a user to make selections from a single

menu with many choices than two or more menus with
fewer choices.

• The best way to hierarchically arrange interface elements

of a particular kind: text links or Form elements.

By Nguyen Duc Son

An Example of Hick’s Law

By Nguyen Duc Son

Usability & Experience
* Affordances * Consistency

* Context * Data Protection

* Default Devices * Feedback

* Fitt’s Law * Forgiveness

* Latency * Legibility

* Maintaining State * Visibility

By Nguyen Duc Son

 Affordances/ help
• Affordances are features or devices that
help users determine how an object might
be used.

• Norman identified two kinds of affordances:

– Cognitive Affordances: help the user to know sth

– Physical Affordances: help the user to do sth

By Nguyen Duc Son

 Cognitive affordances

• Guide the user within an interface. Including:

– Helping the user to know what to do next

– Helping the user avoid potential errors and mistakes

– Helping the user know how to use an object or device

– Making the user aware of shortcuts and their

alternatives
By Nguyen Duc Son
Cognitive affordances

By Nguyen Duc Son

By Nguyen Duc Son
 Consistency

• Helps users anticipate the behavior of an

interface based on their prior knowledge
and/or computer experience.

• Put consistency aids the user in both

learning and remembering how a given
interface works.
By Nguyen Duc Son
 To be consistent

• Web interfaces should always be consistent

in both their appearance and operation.

• They should be standardized and not be

suddenly changed.

• Inconsistent element behavior can confuse,

disorient, frustrate, and even alienate users.

By Nguyen Duc Son

Example consistent

By Nguyen Duc Son

 Context
• Context makes web interfaces easier to use by:
– Ensuring that the most appropriate options are always presented at
the proper time and place, such as displaying menu choices that are
relevant to a user’s current activity

– Acting as a type of affordance by providing various hints (visual or

cognitive) that help users interpret the particular function or purpose of
a given interface element.

• Web interfaces that lack context often take longer for

users to learn and use.

By Nguyen Duc Son

Example context

By Nguyen Duc Son

 Feedback
• Feedback – an acknowledgement that it recognizes a
user-initiated action.

• Without feedback, users might not be sure that their

action has actually been received and processed by
the computer.

• There are two ways to present feedback to the user:

– Audio Feedback

– Visual Feedback

By Nguyen Duc Son

 Audio Feedback

• Beeps,

• Whistles,

• Buzzes,

• Dings, or

• even spoken words and phrases…

By Nguyen Duc Son

Visual Feedback

• Color changes,

• Animation,

• Text messages,

• Changes to an object’s appearance

By Nguyen Duc Son

 Fitt’s Law

• Qualitative measurement of the distance between

objects and targets

• The two basic premises of Fitt’s Law:

– The smaller an object is, the harder it will be to click on.

– The farther away an object is, the more effort it will take
the user to get to it.

By Nguyen Duc Son

Fitt’s Law

By Nguyen Duc Son

 Forgiveness
• Provides users with a graceful way out of
a potentially bad situation.

• It prevents users from taking foolish,

harmful, or even dangerous actions and
even gives them a chance to back out
before things go too far.
By Nguyen Duc Son
By Nguyen Duc Son
 Latency
• A fancy term for any computer-generated
delay. Computer users want immediate
responses to their commands and actions.
In fact, users can become bored or
distracted within 10 seconds of
experiencing latency.

By Nguyen Duc Son

By Nguyen Duc Son
 Legibility
• Legibility measures the clarity and distinctiveness of
individual interface elements.

• Legibility can actually be a function of any interface

element, including buttons and icons.

• Interface elements that are overly decorative, fuzzy, blurry,

improperly sized, or use jarring color combinations can be
difficult to distinguish on-screen and can lead to user
confusion, frustration, and inefficiency
By Nguyen Duc Son
Legibility

By Nguyen Duc Son

 Maintaining State
• Helping the user to keep track of various interface-
related events:
– Where they are

– What they’ve done

– What’s currently happening

→ more user friendly, more responsive, less confusing, and

reduce the likelihood of the user repeating their work
(read: they increase user efficiency).

By Nguyen Duc Son

By Nguyen Duc Son
 Visibility
• Visibility is a type of affordance, since visible interface elements

facilitate user interaction.

• Visibility isn’t necessarily a binary state – i.e. visible or not visible.

• An element be considered invisible simply if the user can’t see it.

• Many web interfaces unintentionally (or intentionally) obscure or bury

elements, making them difficult for users to find on-screen.

→ From the user’s perspective, such interface elements might as well

not exist
By Nguyen Duc Son
By Nguyen Duc Son
By Nguyen Duc Son
Audience Considerations

• Accessibility

• Internationalization

• Metaphors

By Nguyen Duc Son

 Accessibility
• A web site interface should be made accessible,
or able to accommodate users with specific
disabilities and / or special needs.

• Accessibility accomplishes two important things:

– It makes it easier to use a given web interface

– It increases the number of people who can use a

given web interface.

By Nguyen Duc Son

 Physical Disabilities

• The more serious of the two, physical

disabilities can include such problems as:
– Visual Impairments

– Auditory Impairments

– Motor Function Disabilities

– Cognitive Disabilities

By Nguyen Duc Son

 Visual impairments
• Visual impairments are one the most
widespread of all user disabilities. (In fact, as of
1998, approximately 3.5% of all Internet users were classified as
being visually impaired).

• Users with visual impairments run the gamut

from experiencing slightly reduced visual acuity
to total blindness.

By Nguyen Duc Son

By Nguyen Duc Son
By Nguyen Duc Son
 Material Disadvantages

• Users with material disadvantages suffer from a

variety of equipment-related issues, including:

– Inferior Hardware

– Obsolete Software

– Poor Connectivity

By Nguyen Duc Son

Inferior Hardware

By Nguyen Duc Son

Obsolete Software

By Nguyen Duc Son

 Poor Connectivity
• The vast majority of users are still accessing the
Internet at 56Kbps speeds or less.

• You can expect large numbers of users to

experience delays while using web-based
interfaces (particularly those that contain many graphical
elements, use “rich” technologies such as Java, Shockwave, and
Flash, or perform significant amounts of back-end processing)

By Nguyen Duc Son

 Internationalization
• Your web site interfaces be internationalized: both usable by and
accessible by a global audience.

• Internationalization is a process for developing culturally “neutral”

web interfaces. In order for a web interface to be considered
“internationalized”, it must make accommodations in a number of
areas, including:
» Text Translation

» Element Layout

» Graphical Symbols

» Colors

» Formatting
By Nguyen Duc Son
Text Translation

By Nguyen Duc Son

Text Translation

By Nguyen Duc Son

Graphical Symbols

By Nguyen Duc Son

Colors

By Nguyen Duc Son

Colors

By Nguyen Duc Son

 Formatting
• Date styles, numbers, times, addresses, telephone numbers,
currencies, calendars, paper sizes, and units of measure… can all
vary from country to country and region to region.

• In some cases, these differences are minor while in others they are
quite considerable.

• Your interfaces, particularly those that make use of Form elements,

should take into account of these differences if they are to be truly
accessible and usable by foreign users.

By Nguyen Duc Son

 Metaphors
• Metaphors are devices used by interface designers to
provide visual equivalents for various concepts and
ideas that can’t be easily or directly explained.

• Two issues should be carefully considered when

choosing a metaphor for an interface:

– User Understanding

– User Interpretation

By Nguyen Duc Son

User Understanding

By Nguyen Duc Son

User Interpretation

By Nguyen Duc Son

By Nguyen Duc Son
Thanks for listening

By Nguyen Duc Son