2

I'm reworking a web app UI to take advantage of wider screens and I have a niggle I can't shake.

There are many tables throughout the app for which a wider screen is advantageous. Above the tables I wish to establish a pattern for displaying alerts - errors, success, etc. The challenge I face I suspect is more aesthetics than usability but I'd appreciate people's views or best practice.

What do you do with alert boxes in widescreen pages? Running the message the entire width of the page renders it difficult to read, making the message box narrower upsets the balance of the page:

enter image description here

And making it wide with empty space feels awkward too:

enter image description here

I've had a good hunt around and it appear to be a non-sexy design challenge which is skipped in favour of designing the perfect fading button states...

Improve this question

3 Answers 3

Reset to default
2

Interestingly we are working on similar patterns this week, the design we are recommending has a clear classification of error messages.

  • Classification based on type : Error, Warning, Info
  • Classification based on target : which part of the screen is initiating the message.

The first classification is used to decide on the color and fading properties.

The second one is a little trickier.

Our application can be used in widescreen monitors, it makes sure the message is shown in close proximity to what initiates the action. Our application has clear demarcation of screen element like I have shown in the image.

screen elements are message placements

There is a easy contextual link between the message and from where it has popped. This is mostly applicable on feedback actions which are specifically triggered when user performs an action and is waiting for something from the system.

If this user action affects an entire system, we also have a provision to show the messages clearly across the whole page. This remains at the center and wraps around the content.

screen level message

The idea is to fade this notification after a specified timeout (based on message severity), and also give user an option to close it from the icon (optionally on ESC key). If user chooses to click on the bubble then we expand the notification and wait for user's explicit close action.

It is highly relevant when users get feedback near to the area where s/he is focusing. It helps in maintaining the visual context.

Our screens have huge amount of fields and data as it is an enterprise application. Hence we also make sure that we are keeping the message boxes as overlays, so the entire UI does not shift. (Believe me, downwards shift of entire UI annoys the users if it is not smoothly done).

My use case may not directly apply to yours but I hope I have been of some help.

Improve this answer
2
  • Agreed re message placement, we'll be placing errors locally when it's related to a specific control on the page. However, your layout doesn't address the readability of error messages at a page level - i.e. the pink message in your design. Many sources state that the optimal reading length is 75-100 characters per line, which in our design, and I suspect yours too, is <50% of the screen width.
    – JimmyP
    Feb 26, 2015 at 10:12
  • You are right and it's entirely my mistake in badly creating this mockup quickly for this answer. As I mentioned in the answer, the bubble wraps up to content and we make sure it's not overly log in length to read.
    – Harshal
    Feb 27, 2015 at 0:49
0

Why are you fixing its width?

Surely the size of the message box is dependant on the size of the message. Short messages (such as you have illustrated) will look better in a smaller box, which could even be centred. As the message size increases the ideal box pushes wider until it fills the entire screen.

However you refer to messages which leads me wonder if you actually need to consider more layout of multiple messages horizontally (such as a flow layout) or just arrange them in a single column vertically.

Improve this answer
1
  • 1
    That's the challenge - the message text should never fill the full width of the page as readability drops off after 100 characters per line
    – JimmyP
    Feb 26, 2015 at 10:15
0

I have a similar problem I have the following screens on my first single page application

general product screen

Support page with alertenter image description here

Support page after closed the alert enter image description here

My initial solution was to add a big gap that allows the alert to show up on top. After you dismiss the alert, the gap persists After talking to some front-end devs they said that it's recommended to not have a big vertical gap, and I also think that it pushes a lot of content down unnecessarily.

Second solution is to add the alert on top of the The UI widget and push it down, then when you close it goes back to the original position. It might feel that it's flickering and I'm not sure what kind of problems will create in the front-end.

Thoughts?

It seems that Asana manages some of these alerts via modal popup (which seems to be the same case for material design I think?)

enter image description here

Thoughts?

Improve this answer

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.