2

I've been creating a modal exception dialog to tell the user if something has gone wrong. It should be intended for major errors that could seriously alter the user experience or functionality of the application. It could also be used to warn the user of an impeding crash.

Here are some screenshots:

enter image description here When the dialog first shows up, the Show More >> button is focused. enter image description here Version 1: If the Show More >> is invoked, the dialog expands, and is re-centered automatically on the screen. enter image description here Version 2: If the Show More >> is invoked, the dialog expands, and is not re-centered automatically on the screen

I've got two questions:

  1. Is it better UX to center the dialog on screen when it is expanded? This comes at the cross of a minor flicker-looking thing (the screen doesn't really flash, but it is something that you notice).

  2. Should the Show More >> button be renamed? Since the error message will appear above the buttons, should I remove the arrows, since they're kind of misleading? Also, should that button be automatically focused?

  3. Is there anything else that can be done to improve the overall appeal of the dialog?

JeromeR
  • 6,386
  • 23
  • 36
Zizouz212
  • 123
  • 5
  • You have a few suggestions for handling the alignment of the message You can also work to prevent the error. Here are some strategies for preventing errors: http://vanseodesign.com/web-design/minimize-errors-part-iii/ – JeromeR Oct 12 '15 at 06:14
  • 1
    In the example you give, maybe just always show the more state and sidestep this whole issue? It looks like a dev tool, and initially shielding the user from the error details might not be worth the extra step to get to the details. – obelia Oct 13 '15 at 17:30

3 Answers3

2

You shouldn't re-center it. To understand the logic for this and similar cases, think in terms of planes or dimensions: your main window is in a plane, your dialog is in another. Both conceptually and visually. That's why the dialog "floats" without caring about what's below it in the "main plane". While you're in this dimension, you're NOT in the previous dimension, therefore you can't take the dimension you abandoned as a guide, since it doesn't exist until you get back to it again (closing the dialog window).

Keep in mind that you can choose any place of the screen to load a dialog, so this explanation applies in general: once you fire the dialog box, you stick to it. However, if you need to expand your dialog, initial position will define expansion direction. In your particular case, it should expand down and to the sides (assuming you want to make it grow horizontally). If you chose to fire the dialog box on the bottom right area of the screen, then you should grow it up and to the left. And so on.

As for your second question, you'll probably use something like "show additional details". Show more is a bit ambiguous, and while not entirely wrong, it could be improved by being a bit more accurate on the purpose of the button. Again, this is something you may use as general theory for other elements.

Your 3rd question depends on many factors. To be honest, other than the button you really don't need much more than this, your current screen is understandable and seems correct for the intended audience

JeromeR
  • 6,386
  • 23
  • 36
Devin
  • 37,944
  • 15
  • 79
  • 140
1

Here is what i think can be improved

1) Never disrupt your user who might be reading error message so don't re-center it at all...But expand the bottom part below. Your user is already focused on reading the upper part so don't re-position it as he might need to read the top part again if he hasn't finished reading it

2) Show more is very generic, it doesn't tell what it will do...So use something like "See Details of this Error"

3) Why your error message is aligned in the middle, it should be aligned left so if the error is very long, it can fit in one line, use red color for Error Message highlighting as it will be the only thing in descriptive and layman terms...Use red color somewhere at-least so the user knows instantly that its an error that needs to be fixed

Ahsan Idrisi
  • 713
  • 1
  • 4
  • 6
0

  1. This is basically a toggle. So I would not re-center it because that would shift the position of the "View More" button, forcing user to move mouse to close the detail.

  2. "Show Details" is more accurate in this case than "Show More". The latter could be misconstrued as there being 'additional' errors.

  3. Keep the width of the popup the same. In your mockup, it seems to get wider when you click "Show More >>".

Jung Lee
  • 7,671
  • 1
  • 21
  • 34