4

We are rewriting our desktop application and we are thinking of improving the error handling and error notifications. Currently, it is only based on modal dialogs. But some of the messages contain multiple errors.

I am looking for a new way of displaying these errors. On Save action you can have multiple errors that concern part of the program that is hidden currently for the user - tabs not on focus, rows in grids, etc.

What I was thinking was to have a error list, kind of Visual Studio error list style:

enter image description here

with each row as a link to the control that has faulty input. But maybe there is a better way for displaying such kind of error lists, that don't take up a lot of window space, and are more user friendly.

Could you please help with any ideas on the subject?

P.S. Multiple errors cannot be prevented.

Improve this question

4 Answers 4

Reset to default
2

Instead of an error list, place each error by its UI control

If the errors and warnings you refer to are all related to UI elements on the screen somewhere, then it would be useful to have all the errors located by the UI elements they relate to; so if there's a problem with the third checkbox in the seventh tab, put the warning by that checkbox.

The advantages of this approach are:

  • As soon as the user sees the error, they can see the problem control and they know immediately what to do about it.
  • You don't take up a block of screen space with a new dialog.

Here's a screenshot of how it works in an application I'm currently testing:

Screenshot: Tabs and controls with error messages

You can see that we've added error counts to the tabs too, to guide the user to where the errors are.

Improve this answer
2
  • That is a good approach also but my tabs are not so wide, they don't have headers but only a small icon. Whay is more, next to the tabs there is also a grid, and the error in the grid might be scrolled away. That is why I think there should be one place to gather all the errors information.
    – Spac3
    Jul 1, 2014 at 10:50
  • 1
    @Spac3 Try to separate the "solution pattern" from "visual display". The pattern proposed here is superior UX due to locality. You can render the "Problem Here!" visuals with a simple and small number in a red circle or flag or stop sign. We've even just used a simple red corner of tab, without numbers and users got to problem just fine.
    – Jason A.
    Jul 1, 2014 at 13:05
1

I have seen this done many times with a message console window within the app (like your visual studio screenshot).

If you want to go down this route, but don't want to take up space by having the message console always visible, you could keep it hidden by default (can be opened from the view menu), and display a toast alert to notify the user of an error / message. If you have multiple errors you can just state on the toast alert that there are "multiple errors". Clicking on a toast alert will open the message console.

If a user doesn't click on a toast alert, it should slide away after a short time.

Improve this answer
2
  • Thank you for your quick answer, but I am not familiar with toast alert. What is that?
    – Spac3
    Jun 30, 2014 at 14:56
  • It's a little message box that slides up (like toast pops out of a toaster when it's done). There is a "notification area" in the windows OS where, for example, a notification will pop up if you have a new email in the MS Outlook application.They can appear here, or somewhere inside the main window of your application.
    – Franchesca
    Jun 30, 2014 at 18:46
1

I thing that the solution depends heavily on your application design and visual architecture. However what i can think of is a kind of a variation of the error list from VS.

If there're errors you could have a notification on the top of the window:

enter image description here

Which could then be expanded if needed:

enter image description here

When user clicks on one the item on the list, he gets navigated to the part of the scren where the error is. The list gets collapsed. Once user has havigated to the error item. He can then move forward and backward using controls on the error bar.

enter image description here

This would not use your space so much, however would affect the layout slightly (the content would have to be pulled down). Which depending on the content may not be what you actually want.

However you can experiment with this approach - for isntance have the error bar on the bottom of the screen on the left side of the save/cancel buttons. But I believe top is better.

Improve this answer
1

I guess with any content and interaction with the user, you can take either one of two approaches. The first is to show what is required to resolve any issues that will impact on the user's workflow, and allow them to discover additional details as required (progressive disclosure). The alternate approach is to show everything upfront and reduce the content as the user resolves the issues.

You also need to look at creating a consistent system and category of errors depending on their severity, impact and actions required from the users first to deal with a lot of potential errors. I think it is important to understand the context of the application and the user types of design and apply the best approach.

Improve this answer

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.