0

I currently am redesigning a sidebar that appears when the user clicks the top right corner. Currently, it displays user profile information along with some menu options. Personally, I feel that "edit profile" and "log out" are the secondary/primary actions, while the "contact us" may be used every once in a while. The "privacy policy" and "terms of service", however, will rarely if ever be used. What is the ideal way to order/design the menu options?

I figure "Edit Profile" goes first because of its proximity to the profile information, and generally speaking "Log out" goes on the bottom, but I can't help but think my other 3 buttons do not need to be highlighted/placed before the logout button. The first image is our current design, and the next 3 are different ways I thought I could organize the menu options. I am leaning towards the first option, but worried that "contact us" will be too difficult to find. Additionally, I am having trouble finding examples of websites highlighting their "log out" button since generally you want to avoid the user logging out of your site. Most sites place "log out" on the bottom of their options and design them the same as their other buttons. Any suggestions?

enter image description here

2
  • Why are you placing a logout button on the edit profile page? Aug 1 at 6:38
  • 1
    @KitangaNday This is just the sidebar for our product. It's not primarily edit profile
    – Gene Lee
    Aug 1 at 16:09

2 Answers 2

1

Based on the context you provided, Option 1 matches what I’d expect to see after opening the menu. The informational fields and the two buttons are all related to user information, and are likely the most commonly needed actions — so it makes sense that they’d be placed together. The three links are unrelated and, like you said, probably less used than the user-specific information.

If you’re leaning towards Option 1, one way you could learn about its effectiveness is by conducting a usability test, and give a small group of testers a task that exposes them to the menu. For example: On the example page, find the link to contact information. Once you’ve found the link, log out of the site. Then, you can see if any testers struggled to find the contact link or log out button, and use those findings to assess what (if any) design tweaks you need. Nielsen Norman Group’s Usability Testing 101 article has more details on how to conduct a usability test and write good tasks!

1

Option 3 looks standard, except for your buttons. Edit profile should be your primary and logout your secondary.

Quick note, logout is a button you don't want to emphasise since this could increase people logging out. So bringing attention to it is bad.

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.