1. Designing Display and Navigation Chapter Objectives - to review the ways that text, images, and multimedia can be displayed - to develop systems that allow users to find their way through the site - to describe methods for collecting user feedback and supporting interactivity - to understand role of corporate identity in web site design

2. Design Follows Function Audience + Purpose => Design Most Web site functions fall into one of these categories. - The display of information. - Navigation through the site. - Choosing, searching, and finding - Feedback and interaction - Communicating the organization’s identity

3. Examples Professor Lengel’s site http://www.bu.edu/jlengel/cmc/onlineindex. html http://www.bu.edu/jlengel/cmc/onlineindex. html Dorling Kindersley Web site http://www.dk.com/uk/ http://www.dk.com/uk/ espn.com http://www.espn.com/http://www.espn.com/ Radford University http://www.radford.edu/http://www.radford.edu/

4. Display of Information Early Web designs copied format from magazines and newspapers but - printed doc’s are taller than they are wide, screens width > height - print is high resolution - magazine, 2000 dots per inch - newspaper, 300 dots per inch - computer, 75 dots per inch - printed documents – no navigation

5. Screen Resolution Dots per inch, pixels, and resolution all refer to the density of a display medium. A pixel (“picture element”) is represented by one dot on a computer screen. All computer screens have nearly the same aspect ratio, 4:3, 4 units wide and 3 units high. Most monitors now are 800 pixels wide and 600 pixels high. (New ones are 1024 x 768) The page must fit within the browser window, so the web designer should plan on a space of 760 wide by 420 high. (10.1 in x 5.6 in)

6. Site Navigation The Web site should provide the answer to these questions on every page. - Whose site am I looking at. - Where am I in the site. - What else is available at this site? - Where should I go next? - How do I find what I am looking for? Remember navigation is closely related to “use cases”.

7. Answer the navigation questions. BMW http://www.bmw.com/generic/com/en/products/a utomobiles/showroom/z4/z4/index.html http://www.bmw.com/generic/com/en/products/a utomobiles/showroom/z4/z4/index.html - Whose site? - Where am I? - What else is available? - Where should I go next? - How do I find what I am looking for?

8. Feedback and Interaction Should be evident on the site’s list of purposes. Implicit collection – user doesn’t know Explicit collection – user realizes - forms - discussion boards (asynchronous) - chats (synchronous)

9. Image Logos & Identity Color – many organizations have an official color scheme, if so – use it to promote identity Logos – signs or symbols of an organization are very useful to establish identity (How many little children know what the “golden arches” mean? Font – Special for logo Features – Consistent with other pubs.

10. Better Design Understand how to incorporate key design concepts to the entire site Guidelines for site design Use color, balance, alignment, and other tools for Web page eye appeal Sketching, prototyping, and testing Web design process

11. Observe First Before building any new web application, first look at other sites from your organization and at sites with similar purposes, review: - display of information - navigation - choosing and finding - communicating the organization’s identity - feedback and interaction

12. Most important location on a Web Page Publishers have learned that people look at the upper right portion of the right-hand page first. First point seen hasn’t been established for web pages yet, but – - top more likely than bottom - things below or right of scroll bar never seen - number of items should be 7 plus or minus 2, “hrair limit” - if you want something seen, put it near the top of the page with few competing items

13. Text Easier to Read if: Black text on white background 10-12 words per line Standard 12 point system fonts Times, Helvetica, Arial, Times Roman Serif font for body, sans serif for titles - this is Arial, this is Times Roman Use only two font sizes, one for titles and one for the body text

14. Text Easier to Read if: (continued) Avoid words in all caps (only for warnings) DON’T CLICK HERE!!! Make sure headings contrast with body text. (let’s users scan easily) Separate paragraphs using a blank line or an indented first line, not both. Leave plenty of white space around text Build page around a single axis. We like things to line up.

15. Text Easier to Read if: (Continued) Balance the page from top to bottom and right to left. Memorize this: “The simpler, the better. Chaos and clutter are the opposites of order and organization.” A simple page with a few visual and text elements is easier to read than a page with a plethora of items competing for attention.

16. Designing for Eye Appeal http://www.webwhirlers.com/colors/combin ing.asphttp://www.webwhirlers.com/colors/combin ing.asp Primary colors – red, yellow, blue Colors that are directly across the wheel are complementary. They work will together. Adding black to a color is called a shade. Adding white is called a tint.

17. Designing for Eye Appeal (continued) Alignment – human eye likes things to line up, for example, the left edge of a picture and text column (single axis) - alignment should be the same from page to page Frames facilitate - constant titles and menu items Pay close attention to how scrolling will work on your pages

18. Web Site Design Steps Sketch the pages, consider the display of information – text, images, video, tables, lists (pay attention to alignment) Build navigation: menus, identification, and user control Consider feedback and interaction issues Decide how to include Corporate Identity Decide on type of text Color, contrast, and balance Frames & alignment Scrolling

19. After Design - Prototype Use a WYSIWYG Web page editor or drawing package to create your online prototype Test the prototype with the target audience Ask the questions of prototype reviewers - Text readable? Useful images? Could you find information? - Is it clear where you are and where you going within the site?

20. After Design – Prototype (continued) - Are all menu choices evident? How would you find “X”? - Who sponsored the web site? - What seems missing from this page? What could be eliminated? - On a continuum from simple to cluttered where would this page fall? - What changes do you recommend?

21. Testing Be thorough - Windows running Netscape - Windows running IE - Macintosh on both browsers In particular, test on older versions of browsers if you’re looking to reach a wide diverse group of users Design without browser specific extensions,

22. Testing Display Test versus the three most common display sizes - 640 x 480 - 800 x 600 - 1024 x 768 In Windows, click Settings from the Start menu, then click Control Panel - double-click Display, set slider to desired resolution

23. Test Color Depth Most computers set their monitors to 16-bit color depth However, some are set to 8-bit colors Changing the resolution of the display, follow a similar procedure as used on resolution

24. Test Bandwidths Make sure to test downloading your page via a modem connection to the internet (56K connection speed) Depending on your audience, you may want to eliminate some intensive applications (video, pictures/images, or sound)

25. Most Important – User Testing Find the various kinds of users as defined in your use cases Let them use the site and see if they can get what they want from the site easily Make sure to note anything they have difficulty with and make corrections Get a good cross section of users, don’t just get experienced users