enter image description here

On our website we have two header rows that float. Is this strange? Will it cause UX issues? Are there other examples of this?

And,why is this kind of interaction is very common on the mobile phone? enter image description here

  • It is all depends on the what the project is for. Here are some of the examples who follow the pattern which you have uploaded www.housing.com www.compass.com aspacerealty.com – Jasmin Javia Jan 3 '17 at 13:20
  • The grey and white bar at the top? – DarrylGodden Jan 3 '17 at 14:20
  • @DarrylGodden Yes, floating and fixed. – user2869490 Jan 3 '17 at 14:55
  • @JasminJavia thx. – user2869490 Jan 3 '17 at 15:05

What you are displaying in your edited image is a Title on an App bar. An App bar has app related buttons, such as search, sidebar and the actual Page title, buttons, etc. The App bar can have expanded height an display the Title in a second line.

The title in the app bar reflects the current page. It can be an app title, page title, or a page filter.

Source: Material design - Structure

(single line & expanded height)

In the cases you give the Title is displaying in a different div. This is just a matter of styling, but the idea is to display the app name and app related actions in a div and the actual page Title and buttons in a secondary div. I find no problem in displaying it this way, as long as the secondary div is understood as part of the App bar and not as part of the content.


i assume that when you say "float" you mean fixed headers. If so, you have to see it from user's perspective: while you know there are 2 fixed elements on top, they will see only one. And as such, it wouldn't be different to any other site with fixed header.

HOWEVER, it looks to me your second fixed element relates to the graph below, and has no relation with the main header. If so, try adding a visible separation between elements and make that header with the controls be part of the container with the graph, otherwise it will be really confusing.

Remember that when you build a layout, you have different dimensions, where the body is dimension 0, and elements are applied with a certain z-index (for example, the z-index you use to build the fixed header). Try playing around with options, how natural (or unnatural) it feels, see which element belongs to each one and group accordingly, the build a prototype and test with real users. Adjust as needed, and you'll have it

Disclaimer: Please keep in mind I don't understand the language in your capture and there's some missing information, so I might be completely off base

EDIT: I answered from an iPad, now that I have access to my computer, you can see a graphical example on how should you treat the different dimensional spaces on your layout, including the z-indexes and basic interaction of controlled elements.

Just in case, each element has a given z-index, and the x in [element]+x is any number equal or greater than 0

enter image description here


Thanks for your answer to my comments. The question, in my opinion, is not whether they are "strange" but whether the functionality they offer is relevant to the application and in that respect, are they relevant across the whole of the application, as it appears the accomodate a space where a user would consider the feature to be peristent.

I can't read the language, but if you can verify with yourself that the functionality is required and is relevant to the user and requires to be changed at any point, then it is a valid layout.

If a user would only change the values occasionally, you may have to ask yourself whether an expanding menu allowing users to update the values in the top bars would be more appropriate, this would come with the additional advantage of recovering the real-estate in what can often be prime spave in applications.

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.