3

I'm building a secure website, closer to banking. I'm bit hesitant to hide the logout link with the error/warning message. I think design look simplistic when I add error/warning over the logout panel. I want UX experts out there to help me out with this dilemma? Here are some prototype images. enter image description here

Notice I have a close button (X) on both error/warning message. User can close the message to see the log out button.

Here is the reasoning why I want to do like this:

Basically the error/warning message act like notification message, even success message will go there. I wanted to put this on the header because I wanted to make my notification sit on the master page rather on the content page. This way I can show notification consistently.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this question
5
  • 1
    this is beyond confusing! why would you hide the log out link from someone, who cares if they have a warning. if they want to log out let them log out. simplistic design is neat if it doesnt make the interface confusing and not INTUITIVE. massive no go
    – downrep_nation
    Sep 26, 2015 at 15:44
  • Thanks for the input, but how would you make it better with the clean UX. Thanks.
    – HardCode
    Sep 26, 2015 at 16:11
  • Could you add some of your reasoning to the question? Could you elaborate on what the problem is that you're trying to solve by hiding the logout link?
    – Peter
    Sep 26, 2015 at 16:44
  • Also, note that the stackexchange editor has a button that you can use to make wireframes in your posts (like Larivact did below). That might make your mockup look a bit more understandable.
    – Peter
    Sep 26, 2015 at 16:46
  • 1
    Just don't do it. But the consolation is that if it's web app, users will just close the browser / tab if they want to.
    – joshp
    Sep 27, 2015 at 4:00

2 Answers 2

Reset to default
-3

Definitely do not hide the button. Everyone understands what logging out is by now. If anything, rather than causing clutter when attempting to logout give them a dialog box. Something like: enter image description here

Improve this answer
3
  • 1
    im pretty sure that someone that clicks log out, means log out. unnecessary dialog box. also OK on if you are sure that you want to do something? this answer is wrong on so many levels
    – downrep_nation
    Sep 26, 2015 at 16:38
  • Confirmation dialogs are almost always bad UX.
    – Peter
    Sep 26, 2015 at 16:43
  • @Peter In this case certainly. But so many times I find that in real world use, without them, really bad things happen, and customers demand them. Last 20 years I am working on software where certain user mistakes cost a lot of money or threaten safety. That might be why. Of course, even with such confirmations in risky situations, we have to be creative to avoid alert fatigue.
    – joshp
    Sep 27, 2015 at 3:58
-3

Seriously?

Just read this. Your "prototype" fails in almost every aspect. I don't want to offend you but you don't even get the basics of UI design. If you train you will get better ... don't worry.

*gets tackled down by the stackexchange police*

  1. Aesthetically pleasing
  2. Clarity
  3. Consistency
  4. Familiarity
  5. Predictability

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
6
  • i agree, warnings should not make the rest of the interface inaccessible.
    – downrep_nation
    Sep 26, 2015 at 16:39
  • 5
    Don't berate people for asking questions. The OP never claimed to know anything about UI design. Perhaps the thinking is that the user should not log out before they've acknowledged that the form hasn't been saved. Figure out what problem the OP is trying to solve, then answer.
    – Peter
    Sep 26, 2015 at 16:41
  • @Peter UI design is his problem. And yeah ... I could have said it nicer.
    – Larivact
    Sep 26, 2015 at 16:51
  • I don't understand how the 3 mockup elements you provided are meant to fit together or illustrate your answer.
    – octern
    Feb 13, 2016 at 21:09
  • @octern It's about cleanly separating different UI components. In my mockup the header, the notification and the main content are all cleanly separated. It's easily comprehensible. Now look at what OP wanted to do. He wanted to replace the bar that shows as whom you are logged in (and other options related to your account like log out) whenever a notification pops up. This is unintuitive because you no longer have clear components but rather some weird metamorphose bar. I pity you for not seeing this yourself.
    – Larivact
    Feb 14, 2016 at 9:12

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.