Chapter 2 Web Site Design Principles

Download  file with answers

Not a member!

Create a FREE account here to get access and download this file with answers

---

 

Chapter 2: Web Site Design Principles

TRUE/FALSE

1. Almost every Web site has at least one flaw.

2. Not only should you plan for a deliberate look and feel for your Web site, but you must also test your design against the variable nature of the Web.

3. Visitors to your site always look for specific information.

4. You should provide direct links to the areas of your site that you feel are most in demand.

5. It is best to break information into small chunks and link them with hypertext.

6. Users generally do not orient themselves quickly to a navigation structure.

7. You can use a grid to enforce structure, but you also can break out of the grid to provide variety and highlight important information.

8. Web pages that have scattered alignments have a more polished look than pages that respect the grid and align different elements.

9. White spaces are always white.

10. A lack of active white space creates the impression that a page contains too much information and that it will be difficult to find the piece of information you want.

11. Human engineering studies show a wide range of results when tracking a user’s eye movements.

12. Building more accessible content means that you will have to forgo interesting Web designs.

MULTIPLE CHOICE

1. All Web pages are stored on computers called ____.
a. application servers c. Web servers
b. cache servers d. laptops

2. When you type a(n) ____ address in your browser, it connects to the appropriate Web server and requests the file you specified.
a. hypertext c. server
b. Uniform Resource Locator (URL) d. HTML

3. A(n) ____ is the browser’s temporary storage area for Web pages and images.
a. server c. application
b. cookie d. cache

4. A computer monitor’s ____ is the width and height of the computer screen in pixels.
a. screen resolution c. properties
b. display d. screen saver

5. Designers are moving to ____ layouts because of the extended landscape shape of newer monitors.
a. vertical c. portrait
b. fixed d. flexible

6. By specifying a(n) ____ specifically for handheld devices, you can customize the page layout such as by designing the content to appear in a single column or providing navigation customized for smaller screens.
a. style sheet c. resolution
b. image d. font

7. ____ are CSS statements that let you specify different style rules for different media destinations.
a. Grids c. Media Queries
b. Fonts d. Colors

8. ____ page layouts are designed to adapt to different screen resolutions.
a. Linear c. Flexible
b. Flat d. Horizontal

9. Fixed-width designs are often chosen for use with Web sites that have more ____ page designs.
a. simplistic c. circular
b. complex d. fluid

10. Your ____ is the single most important factor in determining the success of your site.
a. font choice c. number of graphics
b. information design d. plug-in requirements

11. When designing a Web page, think about providing contrasting colors that are easy to read and easy on the eye, such as dark colors against a ____ background.
a. gray c. white
b. black d. red

12. When designing a Web page, you should keep the “____ (plus or minus two)” rule of information design in mind.
a. three c. seven
b. five d. nine

13. You can ____ by repeating colors and fonts and by using a page layout that allows information to be organized in a hierarchy.
a. practice consistent placement of page elements
b. provide visual structure
c. create smooth transitions
d. utilize active white space

14. You should provide grounding for the user by placing navigation elements ____ on each page.
a. in different positions c. at the top
b. at the left d. in the same position

15. The ____ is a conceptual layout device that organizes the page into columns and rows.
a. grid c. style sheet
b. page template d. matrix

16. White space that is used deliberately is called ____ white space.
a. passive c. well-formed
b. intentional d. active

17. ____ white space includes the blank areas that border the screen or are the result of mismatched shapes.
a. Passive c. Well-formed
b. Intentional d. Active

18. In a strong periodical-like image, the main page components are ____.
a. graphic c. image-based
b. textual d. variable

19. You can make reading easier by using a text ____ that is narrower than the width of the screen.
a. row c. column
b. font d. spacing

20. As a function of normal, paper-based reading habits, the user’s eye moves from ____ and back again.
a. top to bottom c. left to right
b. bottom to top d. right to left

21. You should use ____ and color to reinforce location or topic.
a. font c. size
b. weight d. shapes

22. You should not make your users click more than ____ times to get to the content they desire.
a. two c. four
b. three d. five

23. A ____ can be used to graphically display the organization of your Web site.
a. Web log c. road map
b. directory tree d. site map

24. Designing for ____ means developing Web pages that remain accessible despite any physical, sensory, and cognitive disabilities,work constraints, or technological barriers on the part of the user.
a. navigation c. accessibility
b. readability d. portability

25. Many of the guidelines necessary for developing ____ content naturally lend themselves to creating good design.
a. colorful c. hyperlinked
b. accessible d. fluid

COMPLETION

1. The goal of information design is to organize your content and present it as a meaningful, ____________________ set of information.

ANS: navigable

PTS: 1 REF: 67

2. Your ____________________ options should present a variety of choices to users without detracting from their quests for information.

ANS: navigation

PTS: 1 REF: 67

3. Your choices of colors, fonts, graphics, and page layout should communicate a visual ____________________ to users that orients them to your site’s content.

ANS: theme

PTS: 1 REF: 69

4. ____________________ and repetition creates smooth transitions from one page to the next, reassuring viewers that they are traveling within the boundaries of your site, and helping them find information.

ANS: Consistency

PTS: 1 REF: 70

5. The overall design of a page at any information level should reflect the ____________________ of the site.

ANS: identity

PTS: 1 REF: 70

6. The structure of a Web page is imposed by the ____________________ or page template you choose for your page design.

ANS: grid

PTS: 1 REF: 72

7. Content presentation can become confused when designers do not use enough ____________________ white space to separate and define content.

ANS: active

PTS: 1 REF: 76

8. Keep your design efforts centered solely on your ____________________.

ANS:
user
users

PTS: 1 REF: 77

9. Knowledge of your ____________________ answers almost all design questions.

ANS:
audience
users

PTS: 1 REF: 77

10. You should avoid using the meaningless phrase “____________________” as the hypertext link.

ANS: Click Here

PTS: 1 REF: 88

ESSAY

1. How can you plan for clear presentation of your information on a Web site?

ANS:
Even with the current move to higher resolutions and crystal-clear displays, the computer monitor can be a poor reading medium. Environmental factors such as glare or physical distance from the screen can make reading difficult. To counter these problems, design you information so it is easier to read and legible on the screen. Many Web sites fail these criteria by using too many fonts, colors, and lengthy passages of text. Break text into reasonable segments that make for easier on-screen reading. Think about providing contrasting colors that are easy on the eye, such as dark colors against a light or white background. Use plenty of white space to accent specific areas of content and provide separation and structure to your information.

Keep in mind that readers have different habits when reading online. Compared to how they read printed text, online visitors scan more and read less online, skimming long pages quickly as they scroll through the text. Include plenty of headings so users can find content quickly. Control the width of your text to provide complete, easy-to-read columns. Keep the “seven (plus or minus two)” rule of information design in mind; that is, users cannot comprehend more than seven (plus or minus two) steps or segments of information at one time. For example, a well-written procedure would contain no more than nine steps. Rather than presenting long scrolling pages, break information into smaller chunks and link them with hypertext.

PTS: 1 REF: 68

2. What is white space? What is the difference between active and passive white space?

ANS:
White spaces are the blank areas of a page, regardless of the color you choose to give them. Use white space deliberately in your design, rather than as an afterthought. Good use of white space guides the reader and defines the areas of your page. White space that is used deliberately is called active white space and is an integral part of your design because it structures and separates content. Sometimes the strongest part of a design is the active white space. White space is any area of the screen that does not include content, regardless of your background color. Passive white space includes the blank areas that border the screen or are the result of mismatched shapes.

Content presentation can become confused when designers do not use enough active white space to separate and define content. A lack of active white space creates the impression that a page contains too much information and that it will be difficult to find the piece of information you want. Plenty of active white space reduces clutter and clarifies the organization of your ideas.

PTS: 1 REF: 75-76

3. What are the concepts that are relied upon when designing Web pages that “guide the user’s eye”?

ANS:
The user can traverse a page in a variety of ways. Human engineering studies show a wide range of results when tracking a user’s eye movements. As you plan your design to guide the user through your content, consider the different ways your user could be viewing your Web pages.

Fixed-width designs tend to have the same proportions as the printed page, which enforces scanning the page using paper-based reading habits. In this reading pattern, the user’s eye moves from left to right and back again.

In contrast when viewing flexible layouts that fill the screen, users may scan information following a clockwise pattern.

A third pattern, found in eye-tracking studies performed by Jakob Nielsen, shows that “users often read Web pages in an F-shaped pattern: two horizontal scans followed by a vertical scan.”

PTS: 1 REF: 82-84

4. How can you harness the power of hypertext linking to create more effective Web pages?

ANS:
Unlike paper-based authors, as an HTML author you have the luxury of adding clickable text and images where necessary to guide users through your information. This powerful ability comes with a measure of responsibility. You make the decisions that determine how users move through your site and process information. Readers browsing through magazines can flip to any page in any order they desire. You can replicate this nonlinear reading method on your Web site with links that let users move from page to page or section to section. With thoughtful hypertext writing, you can engage readers in a whole new way.

Many sites have separate columns of links and topics, but not enough sites provide links within the text. This is a powerful hypertext feature that is not used often enough. Weave links into your prose to offer a variety of paths. Avoid using the meaningless phrase “Click Here” as the hypertext link. Instead provide a helpful textual clue to the destination of the link.

Provide plenty of links to let the user get around quickly. Use links to let the user return to the navigation section of your page, to a site map, or to the main page. Do not make the user scroll through lengthy columns. Provide links that let users jump down the page, return to the top of the page, or navigate a clear path back to higher levels of your content.

PTS: 1 REF: 88-89

5. Discuss why you would need to design for accessibility in a Web site.

ANS:
Any large audience for a Web site includes users who want to access your content despite certain physical challenges. Designing for accessibility means developing Web pages that remain accessible despite any physical, sensory, and cognitive disabilities; work constraints; or technological barriers on the part of the user. As Tim Berners-Lee said, “The power of the Web is in its universality. Access by everyone, regardless of disability, is an essential aspect.” Most mainstream Web sites are so heavily image- and media-intensive that they are not suitable for adaptive devices such as screen readers, voice browsers, and Braille translators.

Many Web sites employ at least some accessibility features, while others are more aggressive about conforming to the standards set by the W3C, which maintains the Web Content Accessibility Guidelines (WCAG) recommendation. Many of these features can be helpful for any visitor to your site. For example, allowing the user to change the font size on a Web page (rather than using the browser zoom tool) would possibly be used by people with a sight disability and people who have high-resolution monitors where the text appears much smaller. Offering more accessibility features makes your content available to a wider audience.

Building more accessible content does not mean that you have to forgo interesting Web designs. Many of the guidelines necessary for developing accessible content naturally lend themselves to creating good design.

Two current sets of accessibility guidelines are available to Web designers. The W3C’s Web Accessibility Initiative publishes the WCAG 2.0. The U.S. government has its own set of guidelines, which are part of the Rehabilitation Act Amendments of 1998, called Section 508. The law requires federal agencies to provide information technology that is accessible to federal employees and citizens who have disabilities. Both sets of guidelines help you create more accessible Web content, so which should you use? If you are designing a Web site for the federal government, you must follow the 508 guidelines, but for general public Web sites, the W3C guidelines will suffice.

PTS: 1 REF: 92-94