Interaction Design Failures
Interaction design is vital to the user experience. Products with a well thought out and thorough design make for enjoyable interactions and ease of use. Unfortunately, we have to use many products on a daily basis that do not live up to this standard of enjoyable usability.
One website that can be considered an interaction design failure is the FAST Shampoo website. It fails to abide by the Five Principles of Interaction Design, and the website is therefore counterintuitive. Using it becomes complicated and irritating, which becomes a large problem when competitor websites offer flawless user experience.

The FAST Shampoo website lacks consistency. Generally, components with similar behaviors should look the same, and components with different behaviors should have distinct appearances. Beginning with the top of the page, it becomes clear that the FAST site does not follow these guidelines. There are two different menu bars. The orange horizontal menu showcases the different products offered by Nisim International, and the blue menu in the top right corner gives options to gain information about the company itself. Placing a menu in the top right corner is counterintuitive in that users will generally look to the top left or center, as those locations are usually home to a menu. Furthermore, there is a search bar above the blue menu that asks the user, “What are you shopping for today?” In addition to creating two separate menus, FAST places a search bar associated with products away from the list of products. The search bar is blue, indicating that it is associated with the blue menu. This inconsistency creates uncertainty and attracts unwanted attention. The site might benefit from putting all of these links in one menu, like most retail web pages do.
The FAST site is also inconsistent in regard to buttons and links, which creates issues with predictability. The menu items in the top blue menu look very similar to the email subscription button, but as previously stated, very different from the other menu items and clickable links. This sets inaccurate expectations for clickability, which makes the site unpredictable.


This interface lacks a great deal in terms of predictability. It does not set accurate expectations for user interactions. The user has to scroll down past a graphic at the top that resembles a traditional banner ad. It is difficult to tell that this graphic is not an ad, because it uses different colors than the page header, contains different fonts, and displays a button that says, “Start Here,” indicating that it probably navigates away from the current page. If users scroll past this misleading graphic, they will eventually reach a list of products. There is a teal heading that says, “FAST Shampoo and Conditioner for fast growing hair.” The same teal color is used immediately prior to indicate a clickable link in the disclaimer for testimonials. This consistency creates an expectation that the heading will also be clickable, but it is just static text. Immediately under the heading, there is a black blurb underlined in red that says, “Buy it here!” with a small arrow pointing down at the products. The other black text on this page is static, but this blurb is in fact a link. Although it points with an arrow directly to purchasable products, this link navigates away from the page and brings users to a page where they can buy one specific product. It sets an inaccurate expectation and does not effectively communicate what users should do and what will happen when they do it.
The “Buy it here!” blurb fails both tests of consistency and predictability. It also lacks visibility. There are no visible indicators that the blurb is a link, so users have no way of knowing that they should click on it. The only signal of the availability of interaction is a hover state that changes the black text to teal. This feature is also misleading though, as the color is very similar to the teal that is used for both links and static text further up on the page. This feature provides inconsistent feedback, another shortcoming of the site. Feedback in the form of hover states is usually useful and informative, but only when it is consistent and intuitive. This link and the links on the products themselves possess hover states that change black text to teal, but the already teal links in the disclaimer have no hover state. Furthermore, none of the buttons possess hover states. This lack of feedback makes it difficult to infer the possible actions on the web page.
All of these failures culminate to create poor learnability. The FAST website is not an intuitive interface, and interactions are not easy to learn and remember. Even users who use the site frequently (like myself) can get confused when trying to complete an action or purchase. The design of the website is counterintuitive and therefore creates a poor user experience. A possible improvement could be making all of the static text on the page black, and making all of the linked text a different color with a uniform hover state.
Uncomfortable user experience is certainly not limited to the digital world. Poor interaction design creates conflict in the analog realm as well. One example of poor analog interaction design is that of the Instax Mini 8 Polaroid Camera. Much like the FAST website, it creates a confusing user experience that leads to unenjoyable interactions with the technology.

The Instax Mini lacks consistency in that components with different behaviors do not differ in appearance. Both the power button and the button used to take photos are round, circular, and pink. These buttons create problems in regard to learnability. Since they are so similar, users usually will try both and see which one turns the camera on. Every time someone takes a picture with my camera, they press both buttons while asking, “Wait, how do I do it?” Some people even try to press the light for the flash, as it also sort of resembles a button (it has rounded edges and protrudes from the camera). The design of this camera might benefit from adding labels to the buttons, even in the form of icons. The power button could have the classic icon of a circle and a line that indicates an on/off function. This icon would also improve predictability, as users would have an accurate expectation about what will happen when they press the button. The design currently does not adequately communicate what users should do and what will happen when they complete an action.

Another component the camera lacks is visibility. In order to take a photo, users have to look through a tiny window to see what the frame will capture. Users are probably expected to draw on their experiences with older cameras that have this feature, but some members of the target audience might not have that prior knowledge. This camera is aimed at teens and tweens. Its trendy, pink design and availability at stores like Urban Outfitters appeals to a younger crowd that is used to taking photos by looking at a large screen. It is therefore not necessarily intuitive that users have to look through the tiny black box on the back of the camera to see the photo they are going to take. This feature might also benefit from an instructive label.
One aspect of the interaction design of the Instax Mini is its feedback component. When users take a photo, a clear click indicates that an action has been completed. There is also a scanning noise that plays while the photo is being printed from the top of the camera.
These interaction design failures are not necessarily terrible products. In fact, I use both pretty frequently. They do, however, create frustrating experiences when their features don’t act the way I expect them to. You don’t really notice interaction design until you encounter poor examples of it, but these pieces of interactive technology definitely make a case for what not to do.