Chapter 17 Designing for the Web Ryan Galloway Andy O’Neil Joe Ahn

Introduction Five aspects of web design 1.Design principles for web sites 2.Designing web sites 3.Designing home pages and interior pages 4.Design issues for web pages 5.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?