- Deconstructing the Poor Design of a well-intentioned Microinteraction
- The Nuggets translation Project
- Translator: L9m
- Proofreader: Shenxn, Hugo Xie
American Airlines passengers stare blankly at the message that pops up on the screen: Your session has expired. She was at a loss.
Just now, after she realized she had already bought a plane ticket, she opened another TAB, booked a hotel room for the trip, and rented a car. Then go back to the American Airlines TAB to get her confirmation number and record it on her calendar.
The confirmation number is replaced by an expiration notice. All confirmed transactions have been saved, but do you need to restart outstanding transactions or restart queries that have been completed? She’s pretty sure she bought a ticket. Has it been confirmed? She didn’t know what to do next.
A typical security design pattern
American airlines’ designers have many reasons for wanting a session to expire. If the user is unsure of the flight (or ends up buying from another source), he or she may be left with an unfinished reservation. American’s designers want to return those outstanding reservations to inventory so that other customers can reserve them.
Similarly, if someone uses the machine while someone else has booked a ticket but has not closed the browser, they may have access to details and account functions that the user does not want to disclose. A session expiration prevents confusion.
American airlines is not alone in using expired sessions. The same goes for banking websites, business tools and other apps that will force someone offline if they spend too much time or are inactive for too long.
Web sites often use the design pattern that your session has expired to deal with session expiration. This message will pop up at any time. For most users, this usually means bad news. Whether an important function is interrupted or just annoying.
Good intentions but poor interactivity
Your Session is Out of date Design patterns are microinteractions, and microinteractions are small functional interactions in a design. Microinteractions make up all of design but are often looked down upon by design teams. This design pattern is no exception.
]
American’s designers wanted to protect their customers from the wrong hands. A noble goal.
However, they don’t seem to notice that suddenly expired sessions create a bad user experience. When the user is faced with this message (a form of error message), they do not know how to proceed.
Session expiration doesn’t happen very often in the real world. When you shop at the grocery store, your cart doesn’t suddenly empty because you haven’t added something in a long time. You don’t automatically get locked out of your house after a long walk around the block. Your TV doesn’t check every 15 minutes to see if you’re still in the room.
Session expiration is everywhere, demonstrating how incongruous our real and digital worlds can be. If your laptop knew exactly who was sitting in front of it, we’d be better able to protect users from the bad guys.
Protecting business requirements is a good idea.
Design is how we present our ideas in the real world. American’s website designers did not intend for its users to be frustrated by expired sessions. How can we improve?
Improve design with a microinteraction framework
In recent years, Dan Saffer has devoted himself to the design of microinteractions and has written a book called Microinteractions. In the book. Dan breaks down microinteractions into four components: feedback, patterns and loops, triggers, and rules. We can start with these four components to improve the session expiration microinteraction of the American Airlines website.
Feedback is how the user understands the microinteraction. In this case, a dialog box prompts the user that the session has expired, but does not tell the user what that means. He does explain that “confirmed transactions are saved,” but he does not explain what confirmed transactions are or what is saved. Is a flight already booked a confirmed transaction?
Is it more helpful to use a language the user is familiar with? (Wouldn’t it be better to say something like “Your flight to Peoria has been booked, confirmation email has been sent to you”?)
The unique label on the button returns to the home page. What does the user do when they go back to the home page? What are the next possible actions? Can the dialog list some things that the user should do next (and then ask them to re-authenticate to make sure they are the same user)?
Patterns are how the system determines what users can access. On American airlines’ website, they appear to use a two-factor verification – the user has the right to use or not. When the session expires, the system changes from the authenticated state to the unauthenticated state.
Should the designer consider using more than two-factor validation depending on what the next steps might be?
Triggers determine when a microinteraction is triggered. It looks like American Airlines’ session expiration trigger will trigger 15 minutes after the last page loads.
Is it appropriate to use page loading as a starting point for a timer? Should the timer be reset if the user changes focus with the keyboard or mouse?
Why 15 minutes? Why not 20 or 40 minutes? What’s the basis for 15 minutes, and what research shows it’s optimal?
Should I use the same expiration time after a successful flight reservation as before? After all, an unbooked flight may be in short supply but no longer available after being booked.
Should triggers be entirely time-based? Is there a better way to determine if a user has lost interest in a web page or has left (i.e. posed a security threat)?
What if the trigger is based on the next operation? If the screen does not move, the microinteraction does not trigger. But if the user tries to do something after the session expires, is there a microinteraction that tells the user to recertify or reconfirm inventory?
Rules govern the behavior of microinteractions. The rule for session expiration is to prevent further access, change from an authenticated state to an unauthenticated state, and give feedback to the user.
Do we need to tell the user that their session has expired? After all, there’s not much they can do about it. Conversely, if there is no prompt, then we can trigger a login microinteraction when the user makes any attempt to access something that requires authentication?
Intentionally designed micro-interactive experiences
Are business requirements like secure execution and inventory management always at the expense of user experience? Session expiration does solve some problems, but is this the best design?
Many microinteractions, like error messages and alerts, are unintentional. Often, a developer in a hurry doesn’t think about the user experience in a marginal situation.
Paying attention to these little details and asking questions will create a better experience. Dan’s microinteraction framework will help us identify problems and, in turn, allow us to design better.
Microinteractions are critical to building a great user experience, and we asked Dan Saffer to organize a workshop on the key details of Using microinteraction Design. It is part of UX Immersion in San Diego, California, April 18-20. Dan’s workshop is full of data, great ideas, brilliant practices, and effective microinteractions. Don’t miss it. For details, see uxi16.com.