Eye Tracking and UX: Using Residual Fixations
Eye tracking studies measure where the eye is focused, or its motion, when viewing a web page. Residual fixation, a pause in the eye’s movement, is found in eye tracking studies. It occurs when a user is focused on an area, that area changes, and the user’s eyes continue to gaze in that area. Anything that appears in that spot right after the change happens benefits from that user’s involuntary attention.
This is a popular technique in the film industry. For instance, a movie director might end a scene with something important happening on the left side of the screen. The next scene might start with action on that same side. This leads the eye in a fluid motion from one scene to the next. User experience (UX) designers can also use this pattern when designing a website. They can show something new in the same position where a user was already looking to take advantage of the user’s attention.
Residual fixation occurs when the user is focusing on an area, and that area changes, but the user’s eyes don’t move.
Using residual fixation to improve user experience
Let’s review a real world example. A user on an ecommerce website adds an item to their shopping cart. A slide down minicart appears from the top right-hand corner of the page. This visual cue draws the user’s attention to the shopping cart icon. Now the user knows where the shopping icon is on the page. When the user is ready to start the check-out process, they’ll know exactly where to click because they’ve already been introduced to the icon. This is one way to take advantage of residual fixation.
In this example, the user is introduced to the location of Urban Outfitter’s shopping cart icon in the top right hand corner.
This screenshot shows a close-up view of the shopping cart icon. In this case, Urban Outfitters is using a bag icon. This micro-interaction, sliding down a mini cart, draws the user’s attention to the icon, making it easier for the user to launch the checkout experience when they’re ready.
Another way an e-commerce website will confirm that an item has been added to the cart is through a popup. A popup is also a valid way of confirming that an item has been added to the cart. The only difference is that it doesn’t take advantage of residual fixation. When the user closes the popup, they are left looking at the same product they just added to their cart. The user will need to search the page for the cart icon when he/she is ready to start the checkout process.
In this B&H example, a popup appears when the users adds a product to their cart. This method is effective, but doesn’t take advantage of residual fixation.
In this Omaha Steaks example, a popup appears to confirm the user added a product to their cart. This method allows the company to cross-sell products. However, if the user dismisses the popup, they need to search for the shopping cart icon on their own.
The difference between these two user experiences is probably not enough to make or break a website. However, keeping these micro-interactions in mind and applying them when possible builds a better user experience.