Transcript Chapter 17 Designing for the Web

Chapter 17
Designing for the Web
Ryan Galloway
Andy O’Neil
Joe Ahn
Introduction
Five aspects of web design
1.
2.
3.
4.
5.
Design principles for web sites
Designing web sites
Designing home pages and interior pages
Design issues for web pages
Writing the content of web pages
1. Design Principles for Web Sites
(HOME-RUN)
High-quality content
Often updated
Minimal download time
Ease of use
Relevant to user’s needs
Unique to the online medium
Net-centric corporate culture
2. Designing web sites
Designing the web site structure
Helping the users know where they are
Helping the users navigate around the site
Navigation aids
Designing the web site structure
– Most common is the hierarchical structure
– Several points to consider
How deep and how wide should the hierarchy be?
Is it better to divide a block of information into several short
pages or leave it as one long page?
Can several web pages be combined into one larger one?
Does the structure of the site reflect the structure of the tasks
the users want to carry out?
How should the site content be grouped?
Deep Hierarchical Structure
Shallow Hierarchical Structure
Helping the users know where they are
– Clearly label each page
– Have a logo in the top-left corner and the name of the
site
Helping the users navigate around the site
– Three types of links
Structural navigation links
Associative links
“See Also” links
– Text links
Should be distinctive and consistent
Should be discriptive
– Other alternatives to text links
Buttons and selectable graphical images
Drop-down lists
Navigation aids
–
–
–
–
–
Site maps
Breadcrumb trail
Geographical or visual maps
Navigation bars
Drop-down lists
Site Map and Simple List
Breadcrumb Trail and Rows of Tabs
Single Line of Tabs and Drop-down Lists
2. Designing home pages and interior
pages
Home page: Tells the users where they are and
what the site does. Contains all or some of the
following
– Name or logo of the organization usually in top-left
corner with tagline
– Name of the site
– Navigation aid
– Summary of news, promotions, or changes
– Summary of key content for first-time visitors
– Search facility for experienced users
– Some sites use a flash page
Interior pages: Contains all or some of the
following
– Typically contains more content and less introductory
and navigational information
– Logo and name of site may be smaller and less
intrusive but still helps the user stay oriented
– Link to homepage
– Links to pages within level of hierarchy
3. Design issues for web pages
Widgets on web pages
Scrolling
Designing for different screens and platforms
Using the screen area effectively
Improving download time
Using style sheets
Designing for accessibility
Homepage that needs scrolling
4. Writing the content of web pages
Keep text to a minimum (about 50% of what
would be included in print form)
– See if the introductions are necessary
– Use numbered or bulleted lists and tables for
organizing information
– Check whether the text actually adds value from the
user’s point of view
Help users to scan
–
–
–
–
Use headings and subheadings as appropriate
Use meaningful headings
Bulleted and numbered lists help
Highlight and emphasize important issues and topics
Dividing long blocks of text into separate
sections
– Could be done using same page with associative
links
– Split text into chunks where each chunk relates to a
different topic
Questions?