0

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

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.

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!

2 Answers 2

3

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!

2
  • HI! Thanks for the quick response! I actually did have the arrow originally in the middle so I think I may put it back there. As of right now the header is hidden and only a small div containing the arrow is visible, Making a slightly different color sounds like a good idea to me.the footer actually does animate over the content. The header does a little .slideDown() as per request since it is more important than the footer. Its good to see I am on the right track! I just needed an extra couple pairs of eyes! thanks!
    – Eric322
    Sep 7, 2016 at 14:59
  • if you could vote my question up, that would be great! I think header ux/ui is pretty important lol
    – Eric322
    Sep 9, 2016 at 19:20
0

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.

2
  • HI, Yes I have edited the page a little to better reflect that there is a header hidden, I used animate on the footer and .slideDown() on the header. Im pushing the form out of focus to make room for the header which I like as an effect and I have the footer animate up of the content. Thanks for the Response!
    – Eric322
    Sep 7, 2016 at 15:05
  • @Eric322 great. Sep 7, 2016 at 16:09

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.