Hidden top navigation menu: best way to show it is there

Question

I have a top header that is hidden because we want the customer to focus on the forms they are filling out and these footers and headers take up a lot of real estate. So my question is what are some good ways to show that there is a hidden header that you can get to by hovering over a certain spot.

Here are some screen shots. First one shows where I have a down arrow showing there is content up above that will appear

Second picture shows the header appearing after hovered over down arrow.

The footer has a similar setup at the bottom with some animation.

Any suggestions for showing that there is a hidden header? I want the icon or something along the lines of one to be non invasive to the rest of the content. The focus isn't the header it is just there if they want to access other features.

Thanks!

Answer 1

I think you have the right idea, but some suggestions:

• Place the drop arrow in the center of the screen. Placing the arrow at the center of the header space makes it easier for the user to locate, as well as helps annotate the header as a full width header, instead of a small drop down at the side of the screen (if that makes sense?).
• Show a sliver of the header. Based off your pictures I can't really tell if you are doing this, but have a sliver of the header showing at the top, enough to contain the drop arrow. When the user moves their mouse over this sliver, display the header.
• Make the sliver a different color from neighboring elements. Again, it's hard to tell from your pictures, but you want to make sure that the header sliver is visible. By having it be a different color that compliments its' neighbors you maintain visibility of the header sliver. How contrasting the color is can help give you control of how distinct the header sliver is on the page.
• Have your header be over-top the page's contents. Not sure if you are doing this already, but from your pictures is looks like the header is on the same perspective index as the rest of the page's contents. Meaning when you display your header the contents of the page get shifted down, which can be jarring. Have your header be layered over-top the rest of the page's contents to remove this problem.

Hope this helps!

Answer 2

Since your task is to focus the user's attention on the form, I would consider utilizing a pattern typically used in situations like this. Instead of thinking of the action as hiding the header and footer, think of the action as bringing the form into focus. Accessing the header and/or the footer in this model would mean pulling the form out of focus. Once there are enough visual cues to inform the user that the form is being focused they should be clued in to how they can retrieve the 'hidden' header and footer.

This pattern usually involves a modal with a close icon (x) in the top right-hand corner. You may be able to adapt this without a modal by creating an animation that flows the UI of the form element over both the header and the footer. You can provide the close icon to have the form be brought out of focus and any user action on the form UI would trigger/retrigger focusing of the form.