Transcript Web page design

Web page
design
Web Site Design Principles
Design for the Medium
• What is meant by Hyper
Media?
• Hypertext links
Design for the Whole Site
Four primary aspects
•Content
•Technology
•Visuals
•Economics
Design for the User
User-centered design
Usability
• Definition: Usability is the
extent to which a site can be
used by a specified group of
users to achieve specified goals
with effectiveness, efficiency,
and satisfaction in a specified
context of use.
Consider each piece of
the definition
• We should limit the group of users.
• Usability should be related to task.
• Effectiveness describes whether or
not the user is able to achieve their
goals.
• It is related to efficiency. If the user
makes a great number of mistakes
or has to do things in a roundabout
way, the site isn’t terribly usable.
Five ideas determine
the usability
• Learnability
• Rememberability
• Efficiency of use
• Reliability in use
• User satisfaction
Planning the Site
•
•
•
•
•
•
•
•
•
•
•
•
Short goal statement
Detailed goal discussion
Audience discussion
Use scenario discussion
Content requirements
Technical requirements.
Visual requirements
Delivery requirements
Site structure diagram
Staffing
Time line
Budget
Logical site organization
models
• Linear
• Grid
• Hierarchy
• Web
• A combination of two of
them
Site navigation
Navigation is only a
means to an end
result
Navigation No-No’s
• Back button hijacking
• Pop-up windows
• Unique Navigation
• Heavily Branded buttons
• Reliance on back button
• Making users work too hard
Conventions used for
navigation
• Upper left-hand logo signals home page.
• Text links are repeated at the bottom of
the page
• Back to top link used on long pages
• Special print forms used for heavily printed
pages
• Clickable items are blue and underlined
• Secondary navigation elements such as
site map or search are presented
separately from sectional navigation.
TLB, or top-left-down
TLB designs are so common,
that users already know it. From
usability point of view major
compliant is left hand
navigation takes lot of real
estate meant for content. When
using TLB design consider
limiting the right margin.
Is white space good or
bad?
• White space makes a
page much more readable
• About 40-60 percent
white space is suggested
for web pages.
Number of fonts to
use
Consider three fonts
per page:
• one for page labels and
headlines
• one for body text
• one for navigation.
How type can be used to
improve the organization
of a page greatly
•Heading
•Subheading
•body text
Images
• Images makes the site
look more beautiful
• Large images takes time
to download and hence it
should be avoided
• Use animated gif files
instead of animations