The Direct Manipulation Interface of Target’s iOS App

Mary Margaret Herring

In our readings for this week, Irvine (2019) offers a model of our natural symbolic process cycle. In this model, representations or expressions (like written symbols or patterns of pixels) allow us to make interpretations which are output as actions (Irvine, 2019). In this response, I will be focusing on the representations and understanding how they lead users to interpret the information displayed. To illustrate this, I will use Target’s iOS app as a case study.

Target’s app follows the conventions of a direct manipulation interface to provide a satisfying user experience. Shneiderman et al. (2016) write “the central ideas in such satisfying interfaces, now widely referred to as direct manipulation interfaces, are visibility of the objects and actions of interest; rapid, reversible, incremental actions; and replacement of typed commands by a pointing action on the object of interest” (p. 230). Apple also discusses the importance of direct manipulation interfaces in their Human Interface Guidelines for iOS, stating “through direct manipulation, they [the user] can see the immediate, visible results of their actions.”

The homepage of Target's iOS app

The homepage of Target’s iOS app.

The first principle or attribute of a direct manipulation interface is that objects of interest are visible (Shneiderman et al., 2016). Target does this well by displaying a prominent search bar at the top of the screen. The red color likely draws the users eye there first and invites the user to input text to be shown relevant products. Beneath the search bar sits a “Shop your store” section that demonstrates to users how they can get items from target. This section utilizes icons and short, bold headings to communicate that certain elements may be important to the user without overwhelming them with information. One interesting way that Target uses metaphor to display relevant information to users is by having some of the content boxes go off the screen horizontally (see the “Build your list” div in the “Shop your store” section). This communicates that the user is able to slide the contents of that section horizontally to see other options. By showing the most relevant information first but encouraging the user to see other possibilities, Target successfully reduces the amount of information displayed but encourages the user to investigate the other information there, if it is relevant.

The top bar of the Target app

The nav bar at the bottom of the Target app

The top and bottom of the app. Users can go back by clicking on the left arrow at the top of the screen and can navigate within the app with the options at the bottom of the page.

The second principle or attribute of direct manipulation is that actions should be easily reversible (Shneiderman et al., 2016). The app demonstrates this to users by providing back arrows at the top of most pages and leaving the menu at the bottom of the page constant no matter where the user is in the app. This consistency likely encourages the user to explore other pages of the app but ensures them that there will be a way to get back to a familiar page quickly. However, the app is not consistent in displaying the back arrow at the top of the page. The lack of this widely used convention on some of the pages may leave new or inexperienced users confused when navigating through the site. The site also uses incremental actions to keep the user in control. When shopping by category, the user goes through a number of steps before actually seeing the product. Here is an example search for pet costumes through the categories interface:

The "shop by categories" page in the Target iOS appThe Halloween category page on the Target iOS appThe Pet Costumes category page on the Target iOS appTarget's selection of pet costumesThe product page for pet costumes

This design allows for people who are browsing and once again relies on icons and headings rather than complicated text.

This brings us to the last principle of direct manipulation interfaces: replacement of complex syntax with buttons or icons (Shniederman et al., 2016). I think that the app does a really great job of this overall. There is very little text on the homepage or in any of the product pages. Rather, the app communicates categories of content to the user with icons. The content of the categories pages are broken up into smaller sections where a few categories are displayed using icons and headings and then there is a color advertisement (e.g., Hyde and Eek! Boutique in the sequence of images above). Of course, the user can click on a product to receive more information about it. This way of waiting until a user requests the information reduces the user’s cognitive load and only reveals relevant information.

The representations used in the Target app indicate that the user can either search for relevant products or explore different categories of content. I would be interested to see how many users utilize the “shop by category” feature of the site because that is not something that I would use on a regular basis but it is clear that Target has devoted quite a lot of time into the interface of these sections.


References

Apple. (n.d.). iOS themes. Human Interface Guidelines. https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/.

Irvine, M. (2019). From cognitive interfaces to interaction design: Displays to touch screens. Unpublished Manuscript.

Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Dikopoulos, N. (2016). Designing the user interface: Strategies for effective human-computer interaction (6th ed). Pearson.