The logout experience is oft-overlooked in our increasingly logged in lives. Typically (and perhaps understandably), greater UX focus is placed on getting users in than ushering them out. Unfortunately, this lack of focus means that user logout experiences are lacking.
Think of the last time you created a digital account. It is a safe bet that the brand took pains to get you through the door of their website or app smoothly and swiftly. The process behind creating and accessing your account was likely to be easy, elegant and engaging. The same can rarely be said for logging out.
Logging out is considered the last step, a bland touchpoint with minimal value. However, it need not be so banal. The logout process can be an opportunity to engage your users, advocate your brand and optimise UX. Here is why, and how, you should avoid the UX logout lapse.
The Online Account Flood
By 2020, it is estimated that the average internet user will have no less than 207 accounts. Consumers are awash in services, apps, websites and products – each with their own login details and processes.
Creating online accounts, and logging in and out of them has become part and parcel of our daily lives. Though they may not be the bread and butter of the user experience, these entry and exit touchpoints matter. Every touchpoint matters.
The user’s experience does not come to a dead end the moment they tap that “Log out” link. (Nor does it start the moment they choose to log in.) Logging out is a utilitarian step, but that should not make it unimportant. In fact, because the logout is such a staple action in our day to day digital processes, it is a prime place to inject some substance.
A Communication Opportunity
In Why We Buy: The Science of Shopping, Paco Underhill stresses the importance of taking every opportunity to communicate with customers. The communication, however, must suit its ‘zone’. As he writes: “Each zone is right for one kind of message and wrong for all others.”
For example, a flashy sales banner has no place in a help area. In-depth information should never touch a splash screen. A search function adds no value to a log-in page. It is all about considering the user’s goals and actions in context and delivering appropriate messaging for each touchpoint.
The logout process may be a seconds-long fringe step, but it is still a ‘zone’ in its own right. As such, it offers a chance to present palatable, relevant messaging within a smooth process. However, to create a contextual and useful experience within that zone, UX practitioners should first consider the user’s frame of mind.
Understanding The User
A user’s logout expectations are likely to be simple and functional. Whether it was a membership site, an app, or a service, the user looking to log out has now wrapped up their browsing session. So, they want to hop out and carry on with their day.
Most obviously, this means the user wants ease and accessibility during a logout process. They do not wish for a navigational nightmare to find the logout link, and they do not expect the experience to be complicated or multi-layered.
However, beyond that quick click to exit, there is also a transitional period before the user’s attention has shifted elsewhere. This is an opportunity for UX practitioners to apply some of the considered creativity so abundant within the logged-in area.
Start With The Process
So, how can designers start avoiding the UX logout lapse? The first thing to consider is the process itself. The most common placement pattern for a “Log out” button or link is within the upper right-hand corner of a screen. That is the place that has become the intuitive exit area for users, ever since Windows made that top-right ‘x’ the standard close pattern.
However, a top-right button is far from the only logout option for users. As our online accounts have exploded, logging out has become a hot mess. There is a lack of well-defined convention to make the experience consistent for users, and a plethora of process variations.
Some services, for example, hide the “Log out” option within a menu. It could be found behind an avatar, within an account tab, beneath a cog icon, or as a stand-alone link. It could have a “Sign out” label. It could be engaged by a hover interaction, or it could require multiple clicks.
These might sound like trivial differences, but they defy the ‘don’t make me think‘ principle that underpins usability. In the words of Amir Ansari: “There are so many icons, avatars, links and buttons in the top right corner of a website that it’s often not clear which one will reveal the magical Logout link.”
To The Drawing Board
With so much variation in how users can log out, there is no single, iron-clad set of UX rules to follow. That top right-hand corner is a hotspot worth conforming to, but there are other factors to consider. You should start by considering the nature of your service and how often the user is likely to access it.
Sites that have personalised user profiles, for example, are likely to be used and explored more frequently. The user (in theory) will then learn where to find the logout link as they customise their profile. In these instances, having a logout option within a larger menu is a handy way to group user admin actions – without cluttering navigation.
This might not be such a wise move for services that are not visited as frequently, or that offer a limited number of options. For these smaller-scale memberships, tucking a logout option within a featureless dropdown menu could add a pointless layer that obscures the user’s path.
Beyond Position And Visibility
Other (seemingly small) considerations on the logout process include:
- Grammar: To “log out” (two separate words) is to take an action, while “logout” is a noun or adjective that describes the components required to exit an account. It is a small difference, but clear grammar is a cornerstone of clear UX.
- Wording: There is a subtle difference between ‘signing’ out and ‘logging’ out. The former pertains to signing in and out of a physical building via a visitor book, while the latter is more meaningful and valid for online interactions. Again, the devil is in the detail.
- Security: If the account contains sensitive information, the user might expect to be logged out on an automatic or timed basis as soon as they abandon the page. (That does not mean that the logout link should not remain visible and explicit.)
- Transparency: If you make the logout option challenging to find, it could appear that you are forcing the user to stay within a passive logged-in state. Consequently, this has darker implications of web usage monitoring and data mining, which could alienate users later down the line.
Clearly, the logging out process is not as trivial as it might first appear. These (condensed) considerations all happen before the user has even hit the “Log out” button – without touching on what happens next.
Acknowledgement, Engagement
This brings us nicely to the next point: what does, or should, happen after the user clicks to log out? As Sandra Niehaus points out: “Logout pages are typically starved for design and marketing attention.” Since they appear after a completed transaction, they occur outside a conversion funnel – making them a throwaway step that isn’t prioritised.
This is a judgement lapse. If a customer has completed a transaction in-store, they will not leave with a door shut in their face. Online users do not want a fanfare as they exit, but they also do not expect the abruptly closed door that a cold logout experience imposes.
After the user has successfully logged out, several things should happen to optimise UX. The user still needs confirmation, acknowledgement and appropriate engagement. Moreover, to make the post-logout process smooth and succinct, these final actions should happen within a branded screen or logout page.
Logout Screen Best Practices
Your branded logout screen should offer five main things, clearly and quickly:
- Consistency: You have provided a smooth user journey thus far, so do not falt at the last hurdle with a poorly designed, off-brand logout page. It will leave a bad taste in the user’s mouth, and jar with their logged-in experience.
- Confirmation: Let the user know that they have succeeded in logging out with a simple reassurance message.
- Acknowledgement: The user has just spent time using your service – thank them for it. This can easily tie in with your confirmation message: “You are now logged out. Thanks for using xxx – we hope to see you again soon.”
- Signposting: You should make it as easy as possible for the user to re-access their account or revisit your service, without overwhelming them with options. So, include navigational links to your homepage and login area for a smooth re-entry.
- Engagement: Is there anything else you can offer the user before they leave? A logout page is an excellent opportunity to present a relevant product, promotion or piece of media to stoke interest before an exit.
As with anything in UX, careful research and testing should go into creating your logout flow and content. However, by taking the time to make these considerations, you create a user experience that leaves no touchpoint neglected.
Logging Out
Typically, UX attention is not lavished on the logout process. Logging out happens after the user has converted, on the periphery of your services. The user has already accessed their carefully crafted, logged-in interior, and seen what you have to offer. Why expend efforts on the sidelines?
Unfortunately, those sidelines are reflections of your brand. Everything the user sees and touches contributes towards their experience and shapes their opinion of your offering. Closing impressions count.
Remember the care, effort and attention to detail it takes to nurture a user far enough through the funnel to log out. Do not scupper that great work with a lousy logout process.
Want to learn more?
Want to get an industry-recognized Course Certificate in UX Design, Design Thinking, UI Design, or another related design topic? Online UX courses from the Interaction Design Foundation can provide you with industry-relevant skills to advance your UX career. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research – Methods and Best Practices are some of the most popular courses. Good luck on your learning journey!
(Lead image: Depositphotos – affiliate link)
