0

I created a webapp-based learning management system, and I'm debating whether a decision I took regarding the top app bar(s) is sound or could cause issues when it comes to user experience and branding of the product.

My app currently has some views where a sidebar is shown on the left in order to navigate, and a top app bar is displayed as well. The top app bar is sticky and always displayed. Here's an example (please disregard the missing UI strings):

enter image description here

On some other views, like the one a student sees while taking an exam, I want to remove the sidebar as I feel that could be distracting and not fit in well with the context of taking an exam.

I still want the user to be able to navigate and have a clue where they are in the app, so I thought of using breadcrumbs. However, putting everything in the top app bar didn't feel right. I decided to have one app bar below with the view title and breadcrumbs. The top app bar isn't sticky on those views, whereas the one below is.

Here's what it look like:

enter image description here

Is it common for apps to use two top bars like in my case? Can you think of any drawbacks on the UX side?

One thing I'm concerned with is that the very top bar disappearing like that can leave the app looking too anonymous, without any hints of branding. I would like something that looks good and is still functional and easy for the user to understand, but I can't come up with anything better.

2 Answers 2

0

On the other hand, not having a consistent top bar may cause confusion, surely increase cognitive load for the user each time the bar changes. Putting the breadcrumb in it's own space only when it's needed adds to the consistency, and therefore memorability, of the interface.

Regarding maintaining brand identification, fix the logo in place.

Top bar fully exposed:

scroll before

 

Top bar scrolled off page:

scroll after

0

I don't think there are corporate identification problems for not displaying the top bar logo, in fact almost all the apps that don't have a sticky top bar hide the logo, and those with a double top bar in many cases do so as well. Example muji.eu

The problem I see in your application is that by hiding the top bar and the side bar, you eliminate all corporate references, making the application a simple form with no relation to its visual identity beyond color.

I don't know what the application's use premises are, but I would try to give a visibility option to one of the two elements you hide, such as an expandable sidebar, or some other element that refers to the visual identity of the application. In other words, avoid this simple form with a title:

enter image description here

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.