Workstation Display Analysis

On initial setup, the user is prompted to select their home location, such as George Mason University (GMU). The main screen (See Figure 1) features a large image and the user’s current geographical location which can be manually or automatically changed by clicking the location icon in the top right corner of the screen. Below the image, the Tapingo main screen presents the user with nearby restaurant choices including the restaurant icon (where available), the name, the expected wait time in minutes, and any promotions. In the top left corner of the main screen, the user can go to the app’s main menu by tapping an icon that is three horizontal lines. From a top down perspective, the location icon and the menu icon rely on the user’s mental model of typical mobile app design symbols. The main menu (See Figure 2) is in simple black text coupled with various black and white symbols on a white background.

The usability analysis below focuses on the Tapingo app’s main screens that support its purpose of conveniently ordering food and beverages from nearby restaurants. On the surface, the app design is simple in terms of visual elements and navigation features. Tapingo themselves tout this simplicity in the app description on the Google Play Store, stating they have “baked in all kinds of mobile ordering goodness to make this easy as cake”. Further analysis of the Tapingo app from a usability perspective reveals that its design allows for easy navigation, decision-making, and task completion though there are some opportunities for improvement.

Design Principles

When using the Tapingo app, the primary area of interest (AOI) is the screen of the user’s device. In this case, since a user’s device is easily discriminable from the background and right in front of them, the AOI is salient and seeing it requires little effort. When ordering something, a user conducts repeated serial self-terminating searches within each screen. The app is designed like a drop down menu, where a user selects which item, if any, they would like from each screen before moving to the next screen. By taking advantage of the proximity compatibility principle, items that should intuitively be below or next to each other often are (e.g. when selecting size, large is below medium which is below small). Further, similar app menu items are discriminated by color from other selections (e.g. ‘pickup’ and ‘delivery’ are a different color heading at the top). The Tapingo app also has vertical lines that make the discrimination of restaurant to restaurant easy for users.

The app also contains several top-down features. It tells the user how long the wait is and how many people have recently ordered in front of them (See Figure 3). Each restaurant also has a ‘your usuals’ section where commonly ordered items are placed. The app also features favicons (favorite-icons) for each restaurant, streamlining the process of selecting what the user wants to eat. The app uses real world containers (accordion) and input controls (location), which ease the user’s experience. The Tapingo application is designed in such a way as to parallel the user’s hierarchical level of thinking. The user is presented with higher order categories (“pickup” or “delivery”) at the top of the navigation bar.

The app takes advantage of design redundancy in some ways but is lacking in others. A logo is placed next to each restaurant’s name so they can be quickly looked through in a conjunction search (e.g. the Chick-fil-A logo is red and written in cursive-flowy letters) (See Figure 3). The app does not have a dynamic order summary so a user must remember what they had selected on previous screens, as further discussed in the Interruptions and Warnings section of this analysis. Similarly, the app keeps some things consistent while others are inconsistent. Font, color, item location, overall feel, and flow are kept homogenous throughout which facilitates visual momentum. Location of items within a menu or screen are also consistent. There is some inconsistency within a selected restaurant where certain items feature item descriptions while others do not.

As stated above, the color scheme is consistent throughout the app (i.e., header text is always white and accordion text is black). As the user changes from “pickup” to “delivery”, the within category color scheme changes to give feedback to the user as to what category they are in (See Figure 4). The category design also incorporates the Vernier acuity so that the selected category appears thinner than the unselected category. The Vernier acuity is consistent throughout the application which allows for streamlined navigation by using easily discriminable categories. One concern with the app and the Vernier acuity is that, unlike within the app, the Vernier acuity is typically used with black and white or opposite colors. The main category colors in Tapingo are so similar that it can lead the user to use track of which category they are in. This similarity could result in a user with protanomaly having a difficult time differentiating between the two main categories. A proposed solution is to make the main navigation more of a toggle, where the selected category is colored and the unselected is a neutral color.

Visual Scanning and Multiple Resources

Humans scan information following an inverted pyramid model, fixing our gaze on the most important information first, followed by items of lower importance. Tapingo has this principle integrated in its design. Starting with the main screen, a user is drawn to the tabs which prompts the user to pick between pickup and delivery. The list of restaurants comes after these tabs. These tabs are integral to the user interaction inside the app and the optical scanning pattern add to the experience. Even after picking the restaurant, the tabs remain to allow ease of navigating between different categories of the menu while keeping the hierarchy of information on the screen intact.

Almost all of the information is presented visually in the Tapingo app rather than through multiple modalities. It somewhat makes up for this deficiency, however, by using visual, haptic and auditory notifications to convey to the user that their food is ready. Tapingo has a winding timer (See Figure 5) as well as a notification panel banner to show that their order is ready for pickup. This is accompanied by a vibration and a notification sound to ensure the user is aware. These settings could be changed but this is the ideal scenario to support multiple modalities.

Most of the information in the Tapingo app requires processing through verbal code such as restaurant names, order for order, wait time, and cost. Though the app is automatically selecting nearby restaurants, the restaurant’s specific location (i.e. spatial processing) is not readily apparent despite this information being important for restaurant choice. To determine the location, the user must select “INFO” then an address and map appear. The map is zoomed in closely and directions can only be obtained by selecting navigational icons that appears only after tapping the screen (See Figure 6). Though it may not be an issue for users that have a well-developed mental model of the geographic area, those new to an area would benefit from more readily accessible location information to support their decision-making.

Interruption Support and Warnings

In Tapingo, the ongoing task (OT) is placing the food order. The interrupting task (IT) can come from the phone itself (e.g. phone call, alarm clock) or from the external environment (e.g. friend talking to you, having to look up and away from the app, to avoid pedestrians or to cross the street). The OT (i.e. food order) generally takes about one to two minutes to complete while the IT can vary in duration. When a phone call comes in, the Tapingo app is still 75 percent visible and fully functional as the call window is relegated to the top 25 percent of the phone screen (See Figure 7).

If attention is called away from the phone to the external environment, Tapingo remains on the screen where the user left off. The Tapingo display, however, does not have a persistent order summary feature that summarizes what has been ordered. As the user progresses through each screen of the display, they have to hold in their working memory, through verbal rehearsal, what has been ordered so far and the cost of each selection (e.g. chai tea latte $3.75 – next screen – tall $0.20 – next screen – organic soymilk $0.60 – next screen – add whipped cream $0.50 – next screen – vanilla syrup $0.50) and the total cost. Also, the back arrow on the app returns the user all the way to the first screen of the order to start the process again rather than to the previous screen.

The user may be able to hold the order information in working memory through chunking if completing the order without interruption but if attention is called away from the process or from the phone itself, and the user does not recall what they ordered, they would have to return to the home screen and begin the order again. This can be especially problematic if the IT requires verbal access whether through speech or text since the OT (i.e. ordering in the app) requires verbal rehearsal. A recommended improvement is to include an order summary bar at the bottom of the screen so the user can see what has been ordered and the cost. This is particularly beneficial for interruption management rather than relying on working memory.

The Tapingo display provides a warning if the user places an order for items from more than one restaurant in a single order (See Figure 8). For example, the user cannot have a coffee in their cart from Starbucks then order a chicken sandwich from Chick-fil-A. The warning immediately demands the user’s visual attention by placing a white box in the middle of the screen featuring black text including the word “Warning” at the top (there are no audio or tactile features). Temporally, the warning appears before the user can even begin to order from the other location. To proceed, the user must either cancel the new order or clear the previous order. These options are presented and must be selected on the warning screen. This ensures the warning is noticed, read, and understood and it is explicit what the user must do.

Conclusion

The app features an indicator for when there are discounts (e.g. 10 percent off) at a restaurant. The discount indicator is a small blue oval with the discount percentage below the restaurant icon. The discount indicator is displayed next to each item so there is no confusion about which items are on sale. Analysis of the ordering process revealed the limitation that Tapingo does not have a warning for selecting multiple items when, realistically, the order may not be fulfilled, the items may be redundant, or the items are contradictory. For example, in a Starbucks coffee, the user is able to select all 12 syrup flavors or decaf plus espresso shots. Finally, to address the interruption management issue described above, the app should feature a warning that alerts the user if their order process is timing out.

Overall, the Tapingo app fulfills its purpose of allowing for quick, convenient, remote ordering of food and beverages from nearby restaurants. The app is simple and easy to use, following a number of design principles including proximity compatibility, redundancy, and top-down features. Access to Tapingo is primarily through the visual modality and it does well to support the inverted pyramid model of visual scanning. Other modalities are supported through the mobile phone’s settings. One of the greatest areas for improvement is related to the Tapingo app’s limited interruption support. An order summary feature would relieve the burden on the user’s working memory within the ordering process, especially when interrupted while ordering.