Position
The most common placement pattern for a “Log out” button is 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 close pattern.
Windows
Grammar
“Log out” means 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 important for clear UX. If you use ‘Log in’, then need to use ‘Log out’ and the same situation with ‘Sign in’ and ‘Sign out’ buttons.
Notion
Profiles
Sites with personalised user profiles or accounts having a logout option within a larger menu is a handy way to group user admin actions – without cluttering navigation.
Dribbble
After logout
After the online user has successfully logged out, several things should happen to optimise UX. The user still needs confirmation. Moreover, to make the post-logout process smooth, these final actions should happen within a branded screen or logout page.
Conclusion
- Consistency
- Confirmation Let the user know that they have succeeded in logging out with a simple message.
- Acknowledgment “You are now logged out. Thanks for using xxx – we hope to see you again soon.”
- Signposting So, include navigational links to your homepage and login area for a smooth re-entry.
- Engagement A logout page is an excellent opportunity to present a relevant product/promotion/media to stoke interest before an exit.