Introduction to Usability & Design
Principles
Navigation
Content
Can the
user find it?
Is it what
users want?
Presentation
s
Is it easy to
understand?
Interaction
Can users
act on it?
Navigation
Can the
user find it?
Did you know?
Users leave Web Sites if they can not find what
they are looking for in 10–20 seconds
Designing
Designing
What make a good design
 Simplicity
 Consistency
 Identity
 Usable Navigation
 Content –clear, helpful and
accurate
1
2
3
4
Designing
User Experience
A concept that places the end-user
at the focal point of design and
development efforts.
1
2
3
4
Designing
Ensuring that no aspect
of the user experience
happens without your
clear and precise intent.
Knowing every possible
action the user is likely to
take.
Understanding the user
expectations at every step
of each of the possible
actions.
1
2
3
4
DESIGNING
Designing
On all sites, poor organization communicates a message that
determines users’ confidence in the site.
The result, bad branding.
 Four focal points of design:
Navigation
Content
Presentation
1
Interaction
2
3
4
Designing
Navigation accounts for
80% of design success.
 Nothing will frustrate a user
more than the inability to
navigate a web site.
 Make sure users can find it
and use it.
Which way do I go?
 Good structures are easy
to navigate.
1
2
3
4
Information Architecture
Organization of content and tasks
 First tangible design for a site
 Organizes all tasks and information into groups and levels
 Increases effectiveness
 Prevents distraction during tasks
 Presents contents of a site in easy to understand fashion
 Preparation for assigning navigational scheme at each level
1
2
3
4
DESIGNING
Information Architecture
Content Gathering
 Identify existing content
 Identify content to be created
 Create a content wish list
1
2
3
4
DESIGNING
Information Architecture
Content Matrix

Identify of content

Ensures that every piece of
content has an owner that
is responsible for updating
so site does not become
outdated
1
2
3
4
DESIGNING
Information Architecture
 The Chunking Principle
 “The Magical Number Seven,
Plus or Minus Two”, by George
A. Miller (Harvard psychologist,
1950s)
 Study of short term memory—
how many numbers people
could be reliably expected to
remember a few minutes after
having been told these
numbers only once.
 It has become particularly
useful in the domain of written
communication.
1
2
3
4
DESIGNING
Information Architecture
Content Prioritization

Ensures that the navigation
structure, labeling schema
and conventions flow well
and are easy for the user to
follow
Worksheets and
documentation

1
2
3
4
DESIGNING
Information Architecture
Labeling Schema

Clear labels improve
navigation accuracy

Must meet the users
expectation
1
2
3
4
DESIGNING
Information Architecture
How do you organize a site?
1
2
3
4
DESIGNING
Information Architecture
Some organization schemes are exact
These work best if you know exactly what you are looking for.
1
2
3
4
DESIGNING
Information Architecture
Other types of organization schemas:
1
2
3
4
DESIGNING
Breadth vs. Depth

Too deep is too deep
 Users
have a more
difficult time encoding,
and consequently
navigating, deep sites.
1
2
3
4
DESIGNING
Breadth vs. Depth

Too broad is too broad
 Conversely
extremely
broad sites (which may
encourage sacrificing)
also present a challenge
to efficient navigation.
1
2
3
4
DESIGNING
Breadth vs. Depth

Sub-grouping
 Navigation
elements
thematically improves
performance for even
the broadest
structures.
1
2
3
4
DESIGNING
Navigation
In a successfully designed web site, users can easily understand the navigation
scheme.




Consistent positioning of navigational graphics is important so
visitors don't have to hunt for ways around your site.
Each screen of your site needs a link to your homepage and the
major sections of your web site. .
Limit the main sections of your site to five to ten at the most.
 Too many choices overwhelm and confuse your users.
 Integrate your navigation with the entire page while making it
look clickable.
Your navigation system must be intuitive and obvious
1
2
3
4
DESIGNING
Navigational Structures
 Hierarchal drill-down

Allows the user to drilldown to a specific page.

Good for complex,
hierarchical information
structures
1
2
3
4
DESIGNING
Navigational Structures

Hierarchal drill-down

Persistent Button/Notebook Menu

Provides a persistent and dedicated
navigation area.
1
2
3
4
DESIGNING
Navigational Structures




Hierarchal drill-down
Persistent Button/Notebook
Menu
Provides a persistent and
dedicated navigation area.
Menus

Provides access to large
sets of hierarchical data
1
2
3
4
DESIGNING
Navigational Structures
 Hierarchal
drill-down
 Persistent
Button/Notebook Menu
 Provides a persistent and
dedicated navigation
area.
 Menus
 Sequential

Leads user through a
process.
1
2
3
4
DESIGNING
Navigational Structures
 Hierarchal
drill-down
 Persistent Button/Notebook
Menu
 Persistent and dedicated
navigation area.
 Persistent List Menu
 Sequential
 Search


Displays on every page
Make text entry box usable
1
2
3
4
DESIGNING
Navigational Models





Global Navigation
Primary Navigation
Local Navigation (Left)
Cross-Over Navigation
Search
1
2
3
4
DESIGNING
Augmenting Navigation
 Breadcrumbs
 Secondary browsers (pop
up windows, calendar,
etc.)
 Rollovers and cascading
menus
1
2
3
4
DESIGNING
Navigational Levels
 Top Level
 Secondary Level
 Tertiary Level
It is never recommended
that a site structure go
beyond three levels of
navigation.
Top
Secondary
Tertiary
1
2
3
4
DESIGNING
Navigation
Key to good navigation design
Complements information
architecture and / or task flow
 Maintains context
 Is efficient and flexible
 Appropriately limits choices
 Facilitates associative
learning
 Reinforces expectations

1
2
3
4
DESIGNING
Navigation
Key to good navigation design
– Complements information architecture and /
or task flow
– Maintains context
– Is efficient and flexible
– Appropriately limits choices
– Facilitates associative learning
– Reinforces expectations
1
2
3
4
DESIGNING
Navigation
Before you begin to create
navigation, chant the following
mantra:
LESS is MORE.
LESS is MORE.
LESS is MORE.
In case you missed the point,
Minimalism is the goal.
1
2
3
4
NAVIGATION
Navigational Structures
In a successfully designed web site, users can easily
understand the navigation scheme.
Too many choices overwhelm
and confuse your users.
1
2
3
4
continue
1
2
3
4
advance to
quiz
return to
menu
return to
menu