We have a web app where the users need to complete a number of steps to get the most from the app - we are struggling with a user friendly and intuitive way of displaying the steps which get across the importance of doing so but still being obvious but not obtrusive. We see this as critical as this is the first thing the user sees when they signup and first impressions really do count!

At the moment we have something like this:

enter image description here

The blue part is only shown until the user has completed all the steps and the individual steps are removed as each is completed - the red part is used as part of this as well as throughout the life of the application to let them know they didn't log out properly or to give other application wide notices.

The problem with the red part is that sometimes we need to display more than one message and putting them on top of each other takes up too much screen space plus they are different colours depending on the seriousness of the message hence it could look too much like a rainbow. We have tried notification buttons before with an icon with a red indicator to show the number of messages but a lot of people either didn't see them or just chose to ignore them as the little red number was pretty small and unobtrusive. At least the current ones are hard to miss!

The blue part we think is intuitive but it doesn't feel very slick nor user friendly and the number of steps might be offputting for those who want to start using the application despite each only taking 30 seconds really.

Is there a better way of displaying "error" messages as well as progress indication within the same UI?

2 Answers 2


Perhaps your Quickstart flow becomes something of a wizard, a series of simple, predefined steps that the user complete before they gain full access (or perhaps there are better, more positive ways to incentivize them, I'd need to know more about your context of use).

Make it simple, quick, and as casual or "fun" as is appropriate to you audience... don't make it a lot of work, obviously. Just a thought - best of luck!


Place icons in your topbar which have the color scheme and icon of the error. Perhaps in the top right, you could have them color coded. Have a floating number over the colored icon to indicate how many are present (do not show ones with 0).

Clicking or touching the icon will reveal the errors in a popout or perhaps an accordian or whatnot, that design option is open. You could even just show all of that type in the area where your red box is now, since it is only one color you wont get the rainbow effect.

Present one summary note of the errors/warnings in the place where your current red box is to alert the user that there are errors/warnings/etc that need to be dealt with in the [name the error area] area.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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