38

I noticed this while using websites that require login/logout - I get used to accessing the "Logout" button at the bottom of the menu. For example:

general layout of extended menu

On burger menu, the logout option will always be at the bottom, and usually the top row of the menu is mostly "Details" or "Account Info."

Last night, I opened Steam website and I clicked the ">" button to extend the menu. The layout is a bit different, and I accidentally clicked the "Logout" button by reflex, because (by habit) I thought it was a "Details" menu because the link is on the first row. Here's a screenshot:

enter image description here

So yeah, I'm not used to the "Logout" button/link being at the very top of this kind of menu. It got me wondering, my question is:

What is the base theory for this position of the "Logout" button in menus with rows? Should it always at the 'end' because it shows the exit sign (technically)? And why, for example, does the Steam website place the "Logout" button in the opposite position? Is it something to do with other habits or tendencies?

PS: Pardon my English, I try to articulate my thoughts in limited grammar.

Improve this question
14
  • 40
    Note: "logout" is a noun; "log out" is a verb.
    – Reinstate Monica
    Apr 19, 2017 at 19:24
  • 15
    Here I am thinking about the user interfaces used by fast food cashiers....
    – Wildcard
    Apr 20, 2017 at 3:36
  • 3
    Possibly Steam have moved it to the top to make it easier to access. I suspect one reason that Logout has traditionally been the last item in such menus (cf. File|Exit in a traditional Windows program) is that when keyboards were more used/supported, it was easy to open the menu (Alt-F for the File menu) and then press Up Arrow to get the bottom option. Today, many web, web-like and especially mobile apps have little-or-no support for keyboard navigation, so the item at the top of a menu would be the quickest to access after a touch/click to open the menu.
    – TripeHound
    Apr 20, 2017 at 6:47
  • 4
    If logout is the most used feature of that menu, then it is reasonable to place it first.
    – user84290
    Apr 20, 2017 at 12:15
  • 2
    Sometimes floats on menu items can cause them to display in reverse order. I could buy this list in reverse order as being normal and "correct". To be certain, you could open the source and see if that somewhat common mistake was made here (the source will have them in the correct order).
    – user51426
    Apr 21, 2017 at 5:40

7 Answers 7

Reset to default
46

I think Steam just haven't noticed this problem.

Here are some reasons to put the logout button at the bottom of the dropdown:

  • Avoid Accidental logouts - as you pointed out putting the logout at the top of the list could create accidental logouts for users that are used to double clicking on elements.
  • Follow standards - when browsing the internet users start to have something, like a muscle memory, for the different elements of a webpage. In your case, you've developed expectation (muscle memory) that the logout is residing at the bottom of the user controls list. Because most of the sites have adopted this standard you should follow it so you avoid accidental logouts.
  • The top and the bottom of a list are most visible - when you have a list, the most visible elements are the top and the bottom ones (see here).
  • Meaning - when a person has logged in it makes sense to list the logout option as a last, because logout is usually the end of a certain task.
Improve this answer
6
17

Make it harder to find destructive buttons

If you do need to include destructive buttons, you should definitely find a way to make them harder to find than the primary action button Best practices for buttons

It's very important for businesses today to keep the users engaged with their products, and no one wants to give them an easy access to the users to leave their app or stop using their product.

Here's a perfect example from Pinterest they have really made it harder to find on their website:

enter image description here

Improve this answer
14
  • 14
    Log out isn't destructive. Logging out can still allow logging back in. The reason why logging out is more than likely the last in that menu, is because it's more than likely the last thing users will do.
    – UXerUIer
    Apr 19, 2017 at 15:32
  • 15
    @Majo0od Logging out isn't "I hope you have an off-site backup" destructive, or "I lost a day's work" destructive (hopefully), but it does cost time and could lose data, depending on the application. I've lost moderate amounts of work from accidentally logging out of applications before.
    – Carl Kevinson
    Apr 19, 2017 at 22:10
  • 5
    Logging out is potentially destructive, and definitely undesirable when you don't want it to happen.
    – barbecue
    Apr 19, 2017 at 22:23
  • 20
    This is completely and utterly wrong. It is rarely advisable to make something the user wants to do "hard to find". Destructive actions should be reversible and difficult to take accidentally, but "hard to find" is not a good principle for any product.
    – plainclothes
    Apr 19, 2017 at 23:01
  • 7
    Hiding logout can be detrimental in itself as it infuriates uses, thus possibly not returning to the site.
    – dougal 5.0.0
    Apr 20, 2017 at 5:55
13

User Flow

Think about each menu item as a task. You can perform tasks sequentially, like task1, task2, task3.... taskN . Which would be the very last task you can perform? Answer is easy: logout.

App Ergonomics

By adding the logout link at the bottom of the menu, you make it harder to accidentally click that element. See graphic below:

enter image description here

Once you open the menu, if you add the logout on top and double click by accident, you'd hit the logout link.

However, if you add it on bottom, each menu item will reduce the chances until making them negligible. Furthermore: between second and 7th element, it will require an additional effort by user to reach the logout, which of course reduces the chances of hitting that button by accident almost to 0. Thus, it's recommended that logout doesn't go further than the 6th or 7th element. More than that there will be trade-offs: thumbs will reach the element easier than before and users may forget to log off when needed .

Of course, size (height) will depend on testing based on your choice of fonts, padding, etc. But also on what your app is for: not always you will want users to logout after a session is done. But you need to offer the option anyways

Conclusion

It's done this way because it's an accepted standard that brings benefits with close to none costs

Improve this answer
4
  • 3
    Logging out is literally the last thing you would do in the session. But, it should not be buried too deeply, and tougher to get to than other less common tasks. If the button is too tough to get to, then it poses security a risk because users would be less likely to log out of their session, so there are some tradeoffs.
    – Jason Hutchinson
    Apr 19, 2017 at 20:19
  • @JasonHutchinson, you're correct, when I mentioned the 2nd to 7th element I forgot to add that this should be more or less the size, with 7th element being an extreme (at these sizes, which for example purposes are taken from Material Design Guidelines). Other sizes (and this one as well, as we're at it) should be tested, as anything UX
    – Devin
    Apr 19, 2017 at 21:16
  • Hmmm I don't know if I agree with this. Most people don't hold their phones with one hand only... uxmatters.com/mt/archives/2017/03/… "...They change their methods of grasping their phone without realizing it, which also means people cannot observe themselves well enough to predict this behavior..."
    – UXerUIer
    Apr 20, 2017 at 13:20
  • @Majo0od, the principle still applies for both hands. The important part is the double tap area, which will happen with one or 2 hands, no matter what. It's true that using phone with one hand increases this accidental tapping, but it also exists when using on ehand. Also, just do this experiment yourself: draw a phone (real size) on a piece of paper, and add a hamburger that act as control. Then with a post it create different menus, with logout on different positions. Measure the distances with a ruler and you'll clearly see that the farther it goes from control, the harder to tap it
    – Devin
    Apr 20, 2017 at 15:30
6

To my understanding, the log out button is the button in the dropdown that has a different action than the rest.

The rest of your menu account details, preferences, view profile etc are navigation elements for the user, but the log out button is an action that would make the user log out from the system.

What is sure is that the Log out and the navigation elements need to be separated, because they have different behavior.

Placing the log out at the button, I would say that is a way to separate them but also a convention since a lot of application use it this way.

I found also this question which is also very interesting: Placement of the logout button/link? which is very well connected to this one Why would a web site hide the log out button?

By hiding the logout feature, you're more apt to simply close the browser or tab, but effectively remaining logged into a service. This allows Facebook to openly track your online whereabouts via advertising partnerships that all report back to Facebook.

Lastly, I really like the clear separation of the Log out option, comparing to the rest, as for example, Jira does. I think this is much clearer than just displaying it at the bottom of the dropdown.

Jira

Improve this answer
4

Best user experience: Track clicks and order list's items according to visitors preferences.

Result: Log-out button may come first.

Best corporate experience: Order items according to company's best interest.

Result: Log-out button should be hard to reach.

Improve this answer
2
  • This is usually the real reason a sign out action is buried. It's a "dark pattern" to serve the organization's interest in maintaining visibility to unique users.
    – plainclothes
    Apr 20, 2017 at 16:53
  • In some great cases log-out command is similar to stop tracking (for end users)
    – cameraman
    Apr 20, 2017 at 17:47
2

It all depends on how important Log out is to your solution and the users goals.

When you have a list of features, you can score them based on their relevance to the tasks the user is performing.

Log out is rarely related to the primary tasks of the solution so this is why the position of Log out is often placed towards the end of the information hierarchy, so if you have a vertical menu you often see it placed at the bottom, and if you have a horizontal menu it often is placed at the end (on the right in western culture).

However, some solutions might view Log out as a special case worthy of placing it in a prominent location, e.g. persists in the top right corner (corners of the screen are prominent locations).

The bottom line is the position will vary depending on how important it is for the user to explicitly log out.

You could argue that Log out is so different to all the other features that it should not be placed in a menu along side other other solution features.

Improve this answer
1
  • Sometimes, "The only winning move is not to play."
    – user67695
    Apr 21, 2017 at 14:07
1

Placing Logout Button in the right place is context-sensitive. For secured apps, it should be prominent in the header outside hamburger menu. For others, it can be inside the hamburger menu. Probably at the top if the user prefers logging out every time, and at the bottom if it is less used.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.