3

We have a dialog as HTML/CSS based desktop window (Sciter based UI if that matters ) and there is a requirement to provide validation messages on it: dialog window with and without messages

Questions that we have:

  1. Is it in principle acceptable to resize desktop window to accommodate changed content, especially dialog window that has predefined layout?
  2. If not to resize the window then what other options would be? Ideally we would like to keep the window compact - without large unused/blank areas.

Again, this is HTML/CSS/script under the hood so existing web tech stack solutions will work here too.

  • Only slightly related - this seems to be a fill-and-forget type of form; meaning users enter details and move on, without being able to view the filled form again. So instead of labels you can use placeholders. That will buy you some space. – Izhaki Mar 24 '15 at 21:20
2

1. Is it OK to resize the dialog to accommodate changed content?

Yes it is nowadays, providing it doesn't cause the window to scroll offscreen. There are lots of ways to do validation notices, but the approach you've chosen (notify below the field, red, left-aligned) is a very well tested and classic approach so it's a safe choice.

The main downside to resizing the window is the momentary disorientation the user feels when the messages appear and the form suddenly shifts. To ameliorate this, I'd suggest using a slide-down or other animation (e.g. this) to provide a smooth transition so the user understands visually what is going on.

2. What other options are there? Ideally we would like to keep the window compact - without large unused/blank areas.

There are other ways to getting this done without creating a lot of unnecessary initial white spaces, as you say (e.g. floating messages) but I think your instinct around the slide-down messages should work just fine unless you really want to get fancy.

If you want to prevent the modal dialog from being resized, I would suggest adding extra space between the form and the Join/Cancel buttons as that is the conventional way to do this. i.e. the buttons should be aligned to the bottom of the dialog, and there can be open vertical space between the Remember me checkbox and the Join/Cancel buttons.


BTW, it's not great UX to provide messages like 'Invalid Meeting ID'. To the user, this feels like you are scolding them without providing them guidance around what to do. Rephrasing it as 'Please enter a valid meeting ID' is better UX because the user is being directed on how to fix a problem rather than just being alerted that there is a problem.

  • 1
    good answer and here are a few other things to note -- 1. aligning the labels vertically above inputs provide the quickest recognition for the user. -- 2. validation errors vertically aligned underneath is also correct. -- Vertical alignment of everything best accommodates strings of varying lengths when they get translated into different languages (either by you or the browser) – DaveAlger Mar 24 '15 at 18:39
  • @DaveAlger Not clear what "aligning the labels vertically above inputs provide the quickest recognition for the user" means to be honest. Is it rather "showing validation error text on top of / in place of input field?" – c-smile Mar 24 '15 at 19:13
  • @c-smile - here's a link with more info - nngroup.com/articles/form-design-white-space – DaveAlger Mar 24 '15 at 19:26
  • Let's assume we will have window expansion animation, what should happen when user will fix error in one of the fields? Shall we play collapsing animation then? In other words: when these messages shall disappear? Assuming that we can verify each field independently. – c-smile Mar 24 '15 at 20:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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