Contents

„ Interface Design
Web Page Design Basics „ Site Design
„ Page Design
Rosanna Chan „ Six-step Design
rosannachan@cuhk.edu.hk „ Some Examples

References:
Web Style Guide: Basic Design Principals for Creating Web Sites, Lynch and
Horton, 1997
Kerlins.net, 2001 2

Interface Design Interface Design

The Four W’s
„ Who
„ the readers may ask “Who is
saying this to me?”
„ always tell the reader who
create the web page
What
„
„ a clear title to capture the
readers’ attention
„ the title is the first element
that appear on the reader’s
browser
„ it will also become the text
of the “bookmark”
„ When
„ timeliness is an important
element in evaluating the
worth of a document
„ every Web page, and
change the date whenever
the document is updated.
„ Where
always tell the reader where
„
you are from
„ incorporating the "home"
URL on at least the main
pages in your site
Make it User Friendly
„ User centered design
„ Adapting web technology for the targeted users’
expectation
„ Build clear navigation aids
„ Use frame structure
„ Use button bars (e.g.www.microsoft.com)
„ No dead-end page
„ “Dead-end" pages are pages with no links to any
other local page in the site

3 4
 Interface Design
Access Issues
„ Give user direct access
„ Provide the user with the information they want in the
fewest possible steps
„ Simplicity and consistency
„ Keep it simple, familiar and logical to the audience
„ Use same basic layout, graphic themes, editorial
conventions, and hierarchies of organization across
pages
„ Design carefully!
„ Feedback and dialog
„ Well-designed Web sites should always provide direct
links to the site's editor or the "webmaster"
5 6

Interface Design Interface Design

Navigation Navigation (Con’t)
„ Provide consistent and predictable set of navigation „ Use “Previous page” and “Next page” buttons
buttons „ Guide your readers
„ Give the user a sense of your site's organization „ Don’t lost them!
„ Makes the logic and order of your site visually explicit
„ Aware of the displayable area
„ The entire document may not fit into the browser

7 8
Site Design Site Design
Organising Information Hierarchy
„ Adopt a solid and logical organizational „ Build a hierarchy from the most important or most
general concepts, down to the most specific or
backbone for your web site optional topics.
„ 4 steps in organising information
„ divide it into logical units (chunks)
„ establish a hierarchy of importance and generality
„ use the hierarchy to structure relationships among
chunks
„ analyze the functional and visual success of your
system

9 10

Site Design Site Design

Hierarchy – More Examples Site Structure
„ Sequence
„ The simplest way to organize information is in a sequence
„ Ideal for information that naturally flows as a narrative, time
line, or in logical order
„ Usually only works for smaller sites

8 „ Grid
„

„
A good way to correlate variables
Examples include procedural manuals
and lists of university courses
„ Best for those who already have a

9
basic understanding of the topic and
its organization.

8 11 12
 Site Design Site Design
Site Structure (Con’t) Site Structure - Summary
„ Hierarchy
„ Users find it easy to build mental models
of the site
„ You need to organise the material
thoroughly

„ Web
„ Pose few restrictions on the pattern of
information use
„ Work best for small sites dominated by
lists of links
„ Not for a basic understanding of your topic

13 14

Site Design Page Design

Site Elements Graphics
„ Home page / Site Cover „ The spatial organization of graphics and text on
„ http://www.nytimes.com/ (provide information)
Web page can
„ http://www.yahoo.com/ (provide reference)
„ Engage the user with graphic impact
„ http://www.jonesandjones.com/ (get reader’s attention)
„ Direct the user’s attention
„ Menus (graphic or text)
„ Choose graphic or text according to the target readers
„ Prioritize information
„ Managing time „ Make the page more enjoyable and more efficient
„ put a "NEW" graphic next to each updated item „ Design and visual logic
„ date your Web pages „ An optimal balance between visual sensation and
„ Provide a feedback method for the users graphic or text information
„ Email of the webmaster/person in charge
„ Beware of “Bandwidth”!
„ Discussion forum/Guestbook
„ More graphics Æ the page take long time to load
„ Other related site/links
„ With or without graphics? Æ strike for a balance
„ Provide additional information to the readers
15 16
Page Design Page Design
Graphics (Con’t) Graphics (Con’t)
„ Establish a visual hierarchy (left figure) „ Graphic distractions
„ Emphasize on important elements „ Avoid overuse of horizontal rules, graphic bullets, icons
and other visual markers
„ The visual scanning process
„ If not Æ nothing is really emphasized!
„ Visual contrast (right figure)
„ Direct the reader’s eye
„ Be consistent
„ Establish a layout style
„ Choose graphic theme and use it throughout your site
(e.g. a banner at the top)
„ “Style”
„ Don’t just simply import the graphic elements of
17
another Web site to “decorate” your pages 18

Page Design Page Design

Design a Template for Pages Page Headers
„ First establish a consistent, logical screen layout „ Home page efficiency
„ Then “plug in” text and graphics for each new page „ The top four inches of a Web page is the most crucial
area!
„ Provide functions (e.g. search to your site)
„ Consistent graphic identity
„ Provide a unique visual identity to your Web site
„ Page footers
„ Carry basic information about the origin and age of the
page

19 20
 Page Design
Page Length Six-Step Design
„ The page should contain „ Step One – Conceptualize your site
no more than two „ Step Two – Plan the Site
640X480 screens worth „ Step Three – Prototype
of information
„ Content, navigation, presentation
„ Long Web pages require
readers to remember too „ Step Four – Implement
much information that is „ Step Five – Evaluate
currently scrolled off the
„ Step Six – Site Maintenance
screen
21 22

Six-Step Design Six-Step Design

1 – Conceptualize the Site 2 – Plan the Site
„ What is the purpose of the site? „ Know Your Target Audience
Audience: who will use this web site?
„ What are your objectives (goals) for the site? „

„ Are you designing for users, viewers or readers?

„ What do you want visitors to come away with?
„ What policies, e.g., copyright and privacy, will
guide site development and use?
„ What norms and practices will users bring to
your site?
„ How can you integrate and reinforce those
norms in your site design?
„ Focus: Don't try to reach too broad an audience.
„ Policies: Copyright, Privacy & Ethical Constraints
„ What policy constraints do you need to be aware of in
your design?
„ What privacy issues will you need to consider in
developing the site?
„ Consider legal and ethical aspects of the information
you want to distribute.

23 24
Six-Step Design Six-Step Design
3 – Prototype: Content 3 – Prototype: Content
„ Develop and collect (online and hard copy) „ Effectively designed navigation systems will:
content materials „ take into account the human limitations of
„ Develop a Storyboard for your site memory
minimize complexity
Templates
„
„
„ reduce the likelihood of human (user) error
„ give your site a unique "look and feel“
„ minimize the need for training
„ Add aesthetic integrity
„ improve the user's decision-making
„ Add consistency, predictability and perceived
stability „ increase productivity and user satisfaction
„ Spell-check your contents „ Please refer to the previous part of this
Powerpoint

25 26

Six-Step Design Six-Step Design

3 – Prototype: Presentation 4 – Implement
„ Present information in a meaningful way „ Choose the HTML tools to create your site
through the effective use of the following: „ Create a parallel file structure on local and
„ Layout remote computer systems
„ Colour „ SAVE regularly
„ Graphic „ Back up your files
„ Texts and fonts „ Field test it (if the site has any forms/input
„ To Scroll or not scroll field)
„ Speed vs. design „ Check your site using various browsers and
„ Create a low bandwidth version of your page computer systems

27 28
Six-Step Design Six-Step Design
5 – Evaluate 5 – Evaluate
„ Check List:
„ Check and Double-Check Your Content „ home page
mission/purpose statement about the site
„ Develop a user feedback form „

„ how to use the web site

„ Use it to invite continuous feedback from your „ table of contents (site overview)
users „ predictable page layouts (templates)
„ consistent page headers (same as the title)
„ Use an itemized check list to evaluate your „ consistent page footers
site for „ short pages that are easy to scan
„ limited and small graphics
„ Content „ balance of white space
„ Navigation „ avoid multiple fonts, type sizes, and text colors
„ less is more
„ presentation „ do not use blinking text
„ do not mix navigational prompts with page content
29 30

Six-Step Design Some Examples

6 – Site Maintenance The Goods
„ Good reasons to maintain your site: „ http://www.wsdot.wa.gov/rweather/
„ update content „ Clear presentation of information
„ replace outdated links „ Appropriate use of frame
add new content
„
„ http://www.serbia-info.com/enc/
„ correct errors
„ A very professional look and feel
„ improve the site design
„ Simple navigation system
„ respond to visitor feedback
„ http://abcnews.go.com/sections/world/
„ Regular site maintenance enhances the balkans_content/
creditability of your site
„ A very well design site
„ Your design should make it easier for others „ Very special use of vertical scroll
to maintain
31 32
 Some Examples
The Bads
„ http://www.petco.com/
„ Too much information on the splash page
„ http://www.infovillage.com/PatronSaints/McLuhan.html
„ Inappropriate use of centered texts
„ http://www.etsu.edu/educator/elpa/surveyed/
„ Inappropriate use of colour
„ http://www.geocities.com/RainForest/2453/main.html
„ “More is less”

33