Matthew Garvin

The goal of this report is three-fold. It seeks to compare and evaluate two competing websites in terms of human-computer interaction with a focus on the information processing model. This model likens our cognitive processes to how a computer works. Using this critique, we will then propose a new design, and justify why this design is an improvement over these two sites. (Wickens, Hollands, Banbury & Parasuraman 2015, pp. 3–5)

Compare:

For the purpose of comparison, this report will consider two users with individual differences on Jakob Nielsen’s (1993) user cube as shown below.

Janet is a cohort 2 Baby Boomer and domain expert with minimal computer expertise. (Norman, 2008) She’s made her career in hospitality and marketing, beginning her first restaurant position as a hostess in high school, where she was responsible for taking reservations the “old-fashioned” way, by phone.

anet worked her way up to restaurant manager by her early 30’s, and now in her late 50’s, she’s the regional manager of a franchise bar and grill. She’s comfortable enough on the computer to complete her tasks mostly related to work, but spends little time online. Her task is to book a reservation for her and the eight General Managers in her region in celebration for a great quarter. We can imagine she is looking for a reservation for 10/26/2019 from 6–9pm at a restaurant that serves alcohol and accommodates vegetarian and gluten free options.

Earl is a high school senior, Gen Z, who is preparing to go on his first date with his new girlfriend on 10/19/2019 for Sweetest Day. As such, he’s ignorant about the domain (both making reservations and dating) but has relatively extensive computer experience. Earl is hoping the website will show him a good recommendation for a romantic evening at a restaurant in a teenager’s price range. As we proceed to compare these two websites, consider Janet and Earl, and their tasks at hand. For them, how do OpenTable and Resy compare?

We find Janet confused by Resy more than OpenTable. As she arrives on the homepage, she understands that she can click on “Detroit” and “Guests” to select her options. There is a downward facing carat to suggest a dropdown menu once clicked. As she hovers over these menus, she notes that the cursor turns into a hand, which provides immediate feedback, and causes her to begin building a mental model of how the site works.

She is puzzled by how to select her specific date; the cursor doesn’t change when she hovers over “Today” and there is no carat to suggest she should click on the word. This is inconsistent with the internal model she is building as the colored words should suggest “clickable” in conjunction with a hand cursor upon hovering. Here we find a missed opportunity to exploit redundancy, which results in a design that doesn’t immediately support the maximization of automaticity and unitization. (Lee, Wickens, Liu & Boyle p. 170) And while this also slowed Earl down, his level of computer expertise and habituation from other websites informs his decision to just click anyway to see what, if anything, happens. (Johnson, p. 5)

When Janet goes to “View all Detroit Restaurants” via the search menu, the long list of locations is sorted in no order. The screen is split between the restaurants and a map pointing out all the participating restaurants in the area, but with no corresponding information. Even hovering over points on the map yields no new information. It’s only by clicking on a point that the user will see movement in their peripheral vision as the list of restaurants on the left side of the screen moves to bring the selected restaurant to the top of the panel.

Simultaneously, there is a pop-out feature that displays the selected restaurant’s information in a box over the map pinpoint the user just clicked, but Janet initially misses this pop-out information which is overshadowed by the movement in her peripheral vision. (Ware, pp. 27–35) Additionally, the scroll bar on the far right of the screen is mapped to the restaurant list on the left, with the map separating the two, a clear failure to design for stimulus-response compatibility. (Ritter, Baxter & Churchill, 2014)

By comparison, Janet has a much easier time figuring out how to navigate OpenTable. The center of OpenTable’s homepage is consumed by the main feature, making a reservation. She can immediately see how to select her chosen date, time, and number of guests. The “Let’s Go” button is easily recognizable as a button, providing a signifying clickability combined with what Saffer refers to as feed- forward, the label of the button tells the user what will happen before clicking the button. (Saffer, 2010, p. 133)

Clicking on the “Let’s Go” button, she is presented with a long list of restaurants as well as a “Map” button, and a variety of options chunked on the left side of the screen, creating meaningful sequences that she can select in order to narrow down her search. (Lee et al., p. 177)

However, upon clicking the button and being taken to the next screen, we find a box featured in the center of the screen labeled “Restaurants with Bonus Points”. What are bonus points? On the top right of the box we see a link labeled “About Bonus Points”, but even after clicking this link it is not clear what bonus points are or how they work as we are taken to a new page with a list of articles to sift through in order to learn more. This is disruptive to the user and largely distracts from their task of making a reservation as now their attention is being spent on information regarding bonus points filling up their working memory. (Johnson, pp. 90–94)

Overall, OpenTable is more consistent in being able to properly detect and apply the appropriate interactive features in which to carry out tasks the user wishes to perform. OpenTable offers the map level view as an option but improves the design by providing a scroll bar right next to the list of restaurants that the scroll bar is mapped to. On the other hand, Earl’s expertise with computers gives him an edge in that he is able to figure out both sites eventually, albeit initially confused by the Resy interface and found it less intuitive and more difficult to navigate according to his model of how website navigation typically works in line with stimulus-response compatibility. (Ritter et al., 2014)

OpenTable’s design draws the user’s eyes to the center of the screen and keeps them there. It strategically arranges supporting information around the periphery in an easily understandable format that allows users to quickly perform a visual search that supports pattern building from the bottom-up while the user’s top-down processes reinforce relevant information. (Ware, pp. 8–17)

Resy is arranged to be viewed left to right, and top to bottom, but it doesn’t lend itself well to a clear use as the user’s eyes scan over the menu of cities to select from, even though the website has already detected the user’s location. The elements involved in initiating the search and booking a reservation are less distinct from the rest of the page, and blends in somewhat with the white space across the header. (Lee et al., p. 109)

Viewing all restaurants focus the eyes on the map which presents no further information aside from an array of pinpoints, while more prevalent information is situated around the periphery of the screen.

How does the user determine what pinpoint they should bother clicking on? If they have clicked on a few points already, how can they tell which points were already clicked? Rather than supporting user recognition of where they’ve already clicked, Resy forces the users to recall it for themselves, something humans tend to have difficulties with. (Johnson, pp. 121–129) Overall, the map is distracting to the user and impedes bottom-up pattern building as more attention is required from top-down processes to scan for relevant information. (Ware)

Design:

Explain:

In Figure 1 the design brings the user’s attention to focus on their primary task above all others, which is to make a reservation. This is accomplished by bringing all the necessary elements center stage. (Esser, 2017) The selections are clearly labeled and contrast with the surrounding whitespace to allow features to be more easily detected. The stacked positioning of the selection and search boxes improves speed and accuracy of moving from box to box in accordance with Fitts’s Law. (Johnson, pp. 187–191)

This also improves the ability of users who prefer to navigate the website with the keyboard using Tab targeting, as well as assists in keeping more of the initial reservation selections from falling outside the focus of the user into the periphery. (Johnson, p. 56) This design places “Top Rated” and “Popular Cities” around the periphery of the homepage to support the needs of users like Earl, who are interested in browsing recommendations without obfuscating the primary task of making a reservation.

Finally, this design maintains the labeling of the “Let’s Go” button from OpenTable, but it increases the size for improved targeting and prominently displaying the button within the user’s detection field. (Ware, pp. 37–42) We changed the color of the button from red to green to take advantage of the greater contrast between surrounding colors. (Johnson, p. 39) This has the added benefit of utilizing the socio-cultural schema in American society between green and the word “Go”. (Marcus, 2000)

Explain:

The design presented in Figure 2 shifts the center stage contents of Figure 1 to the header of the page while maintaining the relative size of the boxes. The map button is moved up next to the city search for more consistent “chunking” during the visual search and pattern building as the user constructs a model of how the page flows. (Lee et al., p. 177)

Graphical icons of popular cuisine options are prominently displayed across the top of the page to immediately draw the user’s attention to cuisine options and allow them to begin refining their search. A scroll bar is placed just underneath the icons to convey to the users that there are more options currently off-screen. These icons serve two purposes as noted by Johnson. In Ch. 7 of Designing with the Mind in Mind, even if we are well fed, food will quickly get a user’s attention. (Johnson, p. 93) Since the user is visiting the page to select a restaurant for a reservation in which it is presumed the user will be eating food, it follows that getting the user thinking about the food they want to consume sooner than later will aid in matching the user with their ideal restaurant. But these icons also utilize graphic images to convey function as well, as explained in Ch. 9. This allows for users to click on the pizza icon for example, and immediately refine their search to just look at the notable restaurants that serve pizza. (Johnson, p. 126)

We also employ numerous data-specific controls that exploit chunking through a visual-hierarchy along the left panel to allow users to select their chosen neighborhood, cuisine options, etc. (Moran, 2016) This provides even more structure and allows users to focus more on the relevant information specific to them and their task. (Johnson, pp. 33–34)

Conclusion:

While both Resy and OpenTable provide a similar service, OpenTable offers a better user-interface in terms of the information processing model, particularly for older users. Resy’s layout appears to be more focused on a clean aesthetic with a minimalist approach but falls short in terms of broad usability and appeal for consumers in comparison with OpenTable. Some of the interactive features feel awkward as they don’t conform well to stimulus-response compatibility. The map feature feels cumbersome and causes the user to have to spend time figuring out how to narrow their selection rather than simply doing so.

OpenTable takes advantage of the center-stage approach to interface design and provides usability features for a broader range of users, presenting the map and list view as different modes that users can select between. Overall, the OpenTable design is superior, but it is not without its own issues. Date, time, and guest selections are too spread out on the homepage and causes the user to lose track of some of the information they entered, or missed entering, as their eyes focus on the “Let’s Go”. (Johnson, p. 56) We also see some dark UX in use as OpenTable makes a concerted effort to funnel users to promoted restaurants via “Bonus Points”. (Brignall, 2019)

In our design, we took advantage of the center-stage approach for homepage design and utilized chunking and visual hierarchy as well as stimulus-response compatibility to provide an even easier to use interface with appeal to both our users as positioned on Nielsen’s user-cube, and those in between.

References:

Alleydog.com. (2019, 10 09). Information Processing Model. Retrieved from Alleydog.com’s Online Glossary: https://www.alleydog.com/glossary/definition- cit.php?term=Information+Processing+Model

Brignall, H. (2019, 10 10). What are Dark Patterns? Retrieved from darkpatterns.org: https://www.darkpatterns.org/

C.D. Wickens, J. H. (2015). Designing for People: An Introduction to Engineering Psychology and Human Performance. London: Taylor and Francis.

Esser, P. (2017, 10 1). Center Stage — Help the User Focus on What’s Important. Retrieved from Interaction Design Foundation: https://www.interaction-design.org/literature/article/center- stage-help-the-user-focus-on-what-s-important

Frank Ritter, G. B. (2014). Foundations for Designing User-Centered Systems. London: Springer.

J.D. Lee, C. W. (2017). Designing for People: An Introduction to Human Factors Engineering 3rd Edition. Charleston, SC: CreateSpace.

Johnson, J. (2014). Designing with the Mind in Mind. Waltham: Elsevier.

Marcus, A. (2000). International and Intercultural User Interfaces. In C. Stephanidis, User Interfaces for All (p. 56). Mahwah, NJ: Lawrence Erlbaum Associates.

Moran, K. (2016, 03 20). How Chunking Helps Content Processing. Retrieved from NN/g Nielsen Norman Group: https://www.nngroup.com/articles/chunking/

Nielsen, J. (1993). Usability Engineering. Cambridge: AP Professional.

Norman, K. L. (2008). Individual Differences. New York: Cambridge University Press. Saffer, D. (2010). Refinement. Berkeley: New Riders.

Ware, C. (2008). What We Can Easily See. Burlington: Elsevier.