Interaction Design: It’s All About the Subtleties

Pop-ups have earned a bad reputation, mostly because design teams often use them to distract users with unwanted advertising. However, a well-designed pop-up with useful information can add real value to a web experience.

Such is the case at Netflix, where the designers have integrated movie descriptions into their design. Ideal for pages where they are making movie recommendations, the designers display a pop-up description to assist the user in making decisions on what to add to their queue.

How Long Is too Short?

Initially, the designers would display the pop-up when the user moved the mouse over one of the movie ‘box covers’ and remove the pop-up when the mouse left the image. Unfortunately, if the user moved the mouse across several box covers, this left a trail of pop-ups appearing and disappearing, like fireworks. This created a very distracting experience for the users.

To solve the fireworks problem, the designers integrated a delay into the design. The user would need to hover over the box cover for a while before the pop-up would appear. The question was then: how long should the delay be? Too short and the fireworks were still an issue. Too long and the user wouldn’t realize the functionality was there.

The team played with several timings, trying them out amongst themselves and watching users in usability tests. They settled on approximately 250ms—a quarter of a second. After much tweaking, the team delivered the experience to the users that they were seeking.

In interaction design, the little subtleties often make a big difference to the result. A fraction of a second turned an annoying, frustrating experience into a delightful one.

Folders from Venus and Labels from Mars

Timing isn’t the only kind of subtlety that designers need to consider. Another has to do with the choices they make for representing the internal structure of the application.

As soon as the first email clients appeared, it was clear users wanted to store their messages in some type of filing system. Almost immediately, folders were born and they became a mainstay of the email interface. From MCI Mail to AOL Mail to Microsoft Exchange, users could simply create folders to store their correspondence.

Folders treated each message individually, regardless of the ongoing conversation. For users, this meant they could, if desired, put every message in a conversation in a different folder, or they could store the entire conversation in a single folder.

The effect is that long conversations would overtake a folder listing. Following the thread of a discussion would require jumping from message to message. Because outgoing messages are often stored in a different “sent” folder, the resulting conversation would only show half of the discussion—leaving out any contributions sent by the user themselves.

With the introduction of Google’s GMail, the Gmail designers wanted to approach email differently. They started by collecting all the messages in a conversation into a single email “message”. Now, the entire conversation would occupy only one line of the inbox, giving the user one-click access to every message in the discussion.

However, users still wanted to store messages in an organized fashion. Thus, the Gmail team added labels to the interface. Users create labels as needed and add them to related conversations.

The system can automatically assign labels too. For example, every sent message gets the “Sent Message” label and every deleted message gets the “Deleted Message” label. “Filtering on a label” presents the user with a list of every conversation with the chosen label, providing similar functionality to displaying the contents of a folder. However, unlike folders in most email implementations, messages can contain multiple labels, thereby giving the effect of being in more places than one.

While the underlying implementation of a folder system is very similar to a label system, Gmail’s presentation is radically different from most other email implementations. The result is a division amongst the users. Some users love the flexibility of labels while many existing users still pine for their old folders.

A struggle for the Gmail designers is to help those users still attached to their history of using folders. The underlying architectural change from folders to labels is minor. However, when designers render the subtle architectural change in the user interface, it can become a big deal for the users. Designers need to consider the subtleties of implications of the architecture.

How Much Is Shipping?

A client (who prefers to keep their identity private) recently made some simple changes to their site’s checkout process, with the intent to simplify the user’s experience. Specifically, they shortened the number of steps by combining the shipping address, billing address, and payment information onto a single page. Since this was all the same information from the original design, they only expected an increase in the number of visitors who made purchases.

What the team didn’t realize was they had made a subtle change to the interaction with users. Unfortunately, this change caused sales to drop off sharply, and it took the team a bit of research to figure it out.

In the old design, the site first asked for the shipping address, then, like many sites, required the user to press a continue button to proceed. That button produced a page that required the billing address, followed by another button.

The final page inquired about the payment information. However, that page also reiterated the contents of the order and showed the total price, including the shipping costs and taxes. It turns out, in the old design, the user entered their payment information after they learned what the total cost would be.

In the new design, they still reported the total cost. However, because of the consolidation of pages, that information now appeared on the page after the request for payment information. The team hadn’t realized how important it was for users to find out their costs before they entered their credit card.

Every checkout process is a conversation with elements that need to happen in a specific sequence. When the team unknowingly changed the sequence of conversation elements, they accidentally broke the site. Again, it’s subtle, yet important.

Subtlety in Interaction Design

When designing, it’s easy to get lost in the gross interactions—the dialog boxes and system flow. However, the subtleties are just as critical to the success of the design. We need to pay close attention to these nuances as we’re working through our design process.