Wednesday, June 25, 2008

Interaction Design: It's All About the Subtleties

Looking at some detailed UI concepts ...

"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."    (Continued via uie, Jared Spool)    [Usability Resources]

Netflix delay to avoid fireworks. - Usability, User Interface Design

Netflix delay to avoid fireworks.


Post a Comment

<< Home

<< Home