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

Design Follows FunctionAudience + 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

Examples

• Professor Lengel’s sitehttp://www.bu.edu/jlengel/cmc/onlineindex.html

• Dorling Kindersley Web sitehttp://www.dk.com/uk/

• espn.com http://www.espn.com/

• Radford University http://www.radford.edu/

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

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)

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”.

Answer the navigation questions.

• BMWhttp://www.bmw.com/generic/com/en/products/automobiles/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?

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)

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.

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

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

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

Text Easier to Read if:

• Black text on white background

• 10-12 words per line

• Standard 12 point system fontsTimes, 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

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.

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.

Designing for Eye Appeal

• http://www.webwhirlers.com/colors/combining.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.

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

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

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?

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?

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 <marquee>, <blink>

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

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

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)

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