Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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 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 Examples • Professor Lengel’s site http://www.bu.edu/jlengel/cmc/onlineindex. html • Dorling Kindersley Web site http://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. • BMW 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? 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 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 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/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. 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