Page 1 of 6

Answer Key: A & B

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 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 of visual
design. At the top of the logo you can see the chains 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 citys 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 dont know where they will take us) and discoverability (its 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 whats 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.

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

EC1.

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. Im not sure I would trust the information on this
site to be accurate or high quality.

EC2.

The Hurt Locker

EC3.

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

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

What principle do questions EC1 and EC2 demonstrate?

_Recognition___ vs. __Recall___