Sie sind auf Seite 1von 6

Answer Key: A & B

Page 1 of 6

I&CS 4 , Winter 2015 Human Factors for the Web Midterm Exam, February 4, 2015 – Answer Key

How we graded

There were two different exams – A and B, indicated in the header at the top of each page. The differences were mostly in the ordering of questions and multiple choice answers.

The total number of points for each question did not change, but the breakdown of points noted below for each question is only a guideline, and may vary slightly for particularly good or bad answers.

Our focus was on content. Generally the writing style and language use were not weighted heavily unless they were poor enough to make it hard to understand the content.

Part 1: Multiple Choice / Fill In The Blank – 30 pts.

Question

Test A

Test B

1

B

C

2

C

A

3

A

C

4

B

D

5

Diagram

B

6

D

B

7

B

A

8

A

C

9

D

D

10

D

Diagram

Answer Key: A & B Page 1 of 6 I&CS 4 , Winter 2015 Human Factors

Answer Key: A & B

Page 2 of 6

Short Answers – 30 pts.

Answer each of the following questions in a few (about 2-4) sentences. All questions refer to the context of this class and the design of websites and mobile apps.

  • 1. What are stakeholders? What is the difference between primary (or direct) and secondary (or indirect) stakeholders?

Stakeholders: people who are using the system or affected by its use. (2 pts)

Direct/Primary: Hands-on users. (2 pts)

Indirect/Secondary: Affected by use, but not using the system directly. (2 pts)

  • 2. What do we mean by consistency? What is the difference between internal and external consistency? Give at least one reason for each why internal and external consistency are important in interface design.

Consistency means doing things the same way, following a set of rules or norms, and following expectations. Consistency in web design can refer to type, color, mode of interaction, layout of page, use of imagery, etc. (2 pts)

Internal: Consistency within a page, site, or app. (1 pt.)

External: Consistency with norms or conventions, consistency across different sites or apps. (1 pt)

Reasons (most can apply to either): Helps with navigation; better brand or personality; less confusion; reduces learning effort; reduces memory load; reduces decision making; makes it more efficient; helps with discoverability; prevents error (1 pt each, up to 2 total)

  • 3. What is the “card sorting” technique? How is it useful for web or app design?

Card Sorting is a technique for understanding how people put things in categories. Participants are given a set of words or items, and asked to put them in groups of similar items. (3 pts)

Card Sorting is useful for web design because it helps designers understand how their users organize information. It helps with Information Architecture. (3 pts)

Answer Key: A & B

Page 3 of 6

  • 4. What is the difference between open-ended questions and closed-ended questions? Give an example of each.

Open-ended: Allows person answering to decide how much information. No right or wrong answer. Allows for elaboration on the part of respondent. (2 pts + 1 pt for example)

Closed-ended: simple answers, limited number of responses, yes/no (2 pts + 1 pt for example)

  • 5. What does “7 plus or minus 2” refer to? Provide an example of a situation where this concept is relevant in web or app design.

Amount of information we can store in short-term memory. (3 pts)

Examples might include: remembering passwords, long URLs, not having tasks that are too complex, etc. (3 pts)

Long Answers – 40 pts.

Your answers to these questions should be at least 3 (and maybe more) paragraphs. Your answers should include definitions of key concepts and clear and specific explanations of how the concept applies. Here we are most interested in your ability to demonstrate that you understand the concepts, so provide enough detail to convince us.

  • 6. The logo for the Baskin Robbins ice cream chain is a particularly interesting example o f visual design. At the top of the logo you can see the chain’s initials, “BR.” However, if you look closely, the center, lighter-colored portion also says “31” which refers to the number of flavors of ice cream they offer. (In the original logo, everything is dark blue except the 31, which is pink.) Using Gestalt principles (proximity, similarity, closure, good continuation, common fate, good form), explain how we can see the figure as both “BR” and “31.” (Note: not all of the principles apply in this case.)

20 pts.

The logo exhibits: proximity, similarity, closure, and maybe good form.

The logo does not exhibit: good continuation, common fate

Points for:

Defining the concepts

Explain how the concepts apply

An awesome answer might go something like this:

Answer Key: A & B

Page 4 of 6

The top part of the Baskin Robbins logo is made up of four shapes that can be perceived as both “BR” and “31” simultaneously. This effect relies on four Gestalt principles.

The principle of closure suggests that our perception will fill in the gaps in incomplete forms. Thus, we tend to fill in the gaps between the left two shapes so that we see the letter “B” and between the right two shapes so that we see the letter “R.”

The principle of similarity suggests that we will see objects as a group if they have similar characteristics. In this case, because the middle two shapes are both pink we group them together. This leads us to see the middle shapes as the number “31.”

Proximity plays an interesting role here. The principle of proximity says that when we see objects close together, we see them as part of the same group, and when they are separated in space, we see them in separate groups. Here, the four shapes are carefully spaced about the same distance apart. As a result, our perceptual system is equally likely to group shapes 1 and 2, shapes 2 and 3, and shapes 3 and 4. This creates a form of multistability, in which ambiguous perceptions tend to alternate between different interpretations.

Finally, the principle of good form suggests that we are likely to group objects together if they form familiar objects. In the case of this logo, good form also creates multistability because we are equally familiar with numbers and letters so the four shapes can be perceived as both “BR” and “31.”

  • 7. On the previous page is a website about the city of Oceanside (note – it is created by an outside organization, it is not the official city’s page). It is also on the screen at the front of the room so you can see it in color. Using at least 3 different design principles or concepts we have discussed in class so far, provide a critique of the usability of this page. For each principle, provide a definition of the concept, identify the element in the page that is a good or bad example of the application of the principle, and explain why it is good or bad.

20 pts.

Should provide 3 critiques, 6 pts each, plus 2 pts for general form, language, etc.

Each critique should define the concept it uses (2 pts), refer clearly to the part of the design (2 pts) and justify the critique (2 pts).

The site is at http://oceanside-ca.com – you really need to be able to click on the links to see how completely awful the site is.

Awesome answers might include the following kinds of critiques:

Answer Key: A & B

Page 5 of 6

The site violates external consistency, which is the idea that the site should have similarities to norms and standard ways of doing things for other similar websites. Most sites have primary navigation at the top or left side of the page, while the links at the bottom of the page are used for less -important or rarely used links. Having the most important navigation links at the bottom is inconsistent with the way other sites work.

The site has problems with signifiers which affects the discoverability of the functionality of the site. Signifiers are the ways that the affordances or available actions on a site are communicated to the user. The principle of discoverability says that users should be able to easily figure out what they can do on the site. This site is externally consistent with other websites in that it uses blue text to signify clickable links, but it also uses blue text to signify headings, which are not clickable. As a result, it is not easy for users to see which are and are not clickable links.

The use of links called “Links” and “Miscellaneous” violates principles of good navigation (we don’t know where they will take us) and discoverability (it’s not clear what the functionality is behind them).

The site has both positives and negatives in regards to the principle of minimalist and aesthetic design, which says that designs should not have more complexity than is necessary. On the good side, the site tends not to overwhelm the user with information, and there is a good amount of whitespace to separate parts of the page. However, this page also includes many unnecessary and redundant aspects, including the overly long headers (for example, “Thank you for taking time to visit Beautiful Oceanside, CA”), unnecessary instructions about how to use a website (“We hope that you will utilize this site for everything and anything you need to know about our beautiful city.”), and 3 links to weather information.

The website has problems with internal consistency in reference to its capitalization and use of punctuation. Internal consistency suggests that designs should use similar ways of doing things within a site or page. Here, some of the link text is in all capital letters, some is in mixed case, and some includes underscores instead of spaces in the links. One of the headings is capitalized like a sentence (except for the word “Beautiful”) while one heading has every word capitalized.

The hierarchy of information on the page is not clear. Hierarchy means that some information is more important than other information, and a goal of design is to make it clear which information is more and less important. Here, some of the least important information (“Good morning” and “Thank you”) is given primary screen real estate and eye-catching visual treatment, while some of the most important and useful information are placed in the middle of a list of links at the bottom.

The information architecture and hierarchy of categories are not very clear. The links are not very logically grouped even though the nested boxes at the bottom

Answer Key: A & B

Page 6 of 6

suggest three distinct categories of links. Some of the links seem to overlap in terms of categories (3 types of weather, Culture vs. Religion vs. Entertainment), making it difficult to understand what’s here, where can we go, and how the information is arranged. Information one might expect from a California beach city (e.g. beaches, water activities, etc.) is nowhere to be found.

Fitts’s Law helps us understand how long it will take for users to select an item on the screen. It shows that users will take longer to select items that are farther away and that have a smaller area to click on. This suggests that the links at the bottom of the page will be a problem for users. Because the text is quite small and crowded together, it will be difficult for users to select the link they want without overshooting, making this an inefficient design.

The personality of the website is somewhat of a problem. The goal for a good website is to have a look and feel that accurately represents the content and fits with the expectations of the users. In one sense, the personality of the website conveys a good message of a fun and relaxing beach community. This impression comes from the relaxed script font used for the title of the page, and the picture which gives a sense of the beach (sand color), the water (waves), and water activities (boating). At the same time, the design feels outdated, in that it is more consistent with web designs from several years ago. The information provided is quite generic and could apply to any city with just a quick swap of the name. A tourism site wants to give an impression that its information is reliable and its recommendations can be trusted. I’m not sure I would trust the i nformation on this site to be accurate or high quality.

EC1.

What 2009 film won the Best Picture Oscar at the 2010 Academy Awards?

The Hurt Locker

EC2.

Which of the following images is a poster for a Hunger Games Movie?

B

EC3.

What principle do questions EC1 and EC2 demonstrate?

_Recognition___ vs. __Recall___
_Recognition___
vs.
__Recall___