Headers are an area of a website found at the top of the page, and traditionally contain elements such as site navigation, logo, and other site-wide controls and elements.

learn more… | top users | synonyms

44
votes
8answers
4k views

Why do websites toggle header visibility on scroll?

Some websites have a (usually rather small) header that hides when the user scroll down. What I never understood is why it is shown again when scrolling up. Sometimes I want to scroll a bit up to ...
15
votes
5answers
6k views

Usability research on sticky headers?

Sticky (or fixed) headers are not so uncommon nowadays, and for a large website that relies heavily on catalog and search functionality it may be a good choice to aid the user. As I am currently ...
12
votes
3answers
829 views

Why some websites put a small contrasting bar on top of the page?

I've observed this pattern in practice at many places now, websites put a small contrasting bar on the top of the page. What is the rationale behind it? Readability header: Tenderapp header:
11
votes
3answers
494 views

What is the best way to order items on an admin page?

We have a Content Management System (near enough). The picture below is the Administration page, which is a flex based front end, viewed in a browser. Thanks to Roger-A on another Q, he gave me the ...
11
votes
4answers
822 views

Mixing Full Page-Width Navbar With A 960px Body

Is there ever a use case for mixing a full-width top navigation bar (meaning the navigation bar content is also full-width) with a contained body (around 960px)? What are the benefits or drawbacks to ...
8
votes
2answers
248 views

Are people used to seeing a “My Cart” link in the header?

I have been designing an E-commerce platform where users will be able to buy Apps from the marketplace. I had thought of placing "My Cart" links in a number of places, such as: Docked widget in ...
7
votes
4answers
6k views

Is a website with a Fixed Header good for end-users of a Web2.0 website?

Fixed Header is the header that is always visible to users even the user scrolls down. It uses the fixed-position in CSS. There a lot of websites nowadays that use a fixed header, such as gmail or ...
7
votes
3answers
381 views

If a microsite uses the same logo as the main site, which “home” should it link to?

Which 'home' should the microsite's logo link to - the main site or the microsite? Consider that... The content and layout of the microsite is the only differentiator Half the users reach the ...
6
votes
5answers
907 views

Are social media icons as effective when grey-scale?

Social icons may be more noticeable in the header, but they can clutter they navigation. Are social icons as effective in grey-scale? ie. Will users still see them in a group of links if they're not ...
6
votes
3answers
367 views

Pros/Cons of placing Login/Account in line with the main nav bar?

Currently our navigational header is mostly left side and central of page, account is on upper right. A proposed design shows the account moved down, into the main nav bar. There's some space in ...
5
votes
1answer
453 views

how to indicate to click on title for more information

im designing an app and am having trouble indicating to the user to click on the business name('candys' in this case) for more information. clicking shows details like contact details, website etc. ...
5
votes
6answers
425 views

Radio Buttons in the header?

Our web app allows users to switch between (currently 3, potentially more in the near future) different "contexts". For example, they could choose to view the app from the point of view of a ...
5
votes
1answer
598 views

(How) does capitalization affect readability

TLDR In short, given the following two options: This is sentence case This is Title Case Has any research been done into which one is more user-friendly, especially considering dyslexia and other ...
4
votes
2answers
617 views

Appropriate UI Design for Crossing Matrix

i'm programming in php, javascript. This isn't a programming question but rather User Interface/Experience one. suppose i want to create a crossing matrix for dog breeds. I initially created a table ...
4
votes
5answers
318 views

Do a large percentage of users fail to look at a website's logo?

I was testing some people - ok, family - with random websites and I noticed they didn't pay any attention to logos. Then I realized that I don't either. Given the cost of logos and clients' ...
4
votes
3answers
534 views

Is a large breadcrumb good enough for a page title?

We have a breadcrumb under the menu and and the page title under the bread crumb. Can I get rid of the page title since it is really just a repeat of the breadcrumb? BTW, this is a LOB application ...
4
votes
2answers
397 views

Should a site have separate buttons for social media sharing and following?

Following: 'following' a business on Twitter or 'liking' a business on Facebook, or subscribing to their YouTube channel. Sharing: posting something on their wall/Twitter or their content on your ...
4
votes
2answers
513 views

Site with full width navigation bar and header but pages that vary in width

This has been kinda asked before but my need is slightly different and would like to ask for opinion. In short, my site has a couple of pages that need to have full page layout, namely, a map and a ...
3
votes
4answers
572 views

Why is there a header and logo at the top in a web application?

We are building a webapp, so everyone asks me what content should be in header and why you are using a header at the top. So my question is why are we using a header and logo at the top, we can use ...
3
votes
3answers
2k views

Should I Put a Phone Number in the Header?

I see that it is really popular with web services nowadays to have their phone number in the header of the website. Is it really that effective? Does it make the company look more legit?
3
votes
3answers
58 views

Header img with color overlay or shadow on elements?

I'm working on a web app and this question came to my mind. I tried to look around but found a lot of resources from both approaches. So here I am, trying to figure out a good solution. The web app ...
3
votes
2answers
81 views

Small Caps Headings: Accessible or not?

Recommendations on digital accessibility often include avoiding ALL CAPS. There was even a discussion on this site (All capital titles: Good or Bad?), though the focus was not specifically ...
2
votes
2answers
591 views

Placement of login/signup relative to website nav bar

When it comes to designing the header of a website, it is very common to have something like this: Here we have a: [LEFT] Logo [RIGHT] Main navigation menu [TOP RIGHT] Signup and Login links ...
2
votes
3answers
3k views

Logo size for new website? [closed]

The large companies chose small logos (apple, amazon, gmail, facebook) etc (on login or search pages they have large logos). But if I go back a few years, all those large companies had large logos. ...
2
votes
1answer
812 views

Should the header be the same color as the footer in Material Design?

Strictly speaking of Material Design, Google states that you should use hue shade 500 for large areas of color. I would guess the header is considered large area? Should the header and footer be the ...
2
votes
5answers
203 views

Website logo: include the TLD or not?

Should a website logo include the TLD ".net"? Background to my specific case: I'm in the process of redesigning / relaunching a website, which includes redesigning the site logo. The site is moving ...
2
votes
2answers
98 views

What is a space-efficient way to display two numbers next to each other while minimising confusion?

I'm working on a site that needs to show two balances next to each other, preferably in the header next to a user's name. The issue I'm having is differentiating the balances enough that they don't ...
2
votes
2answers
175 views

ECommerce design: Collective price display vs No. of items

Often on sites of an ecommerce nature, a shopping cart icon will display in the site header/toolbar together with a quick summary of the users activity. This will usually be in the form of either: ...
2
votes
2answers
1k views

Should there always be a header and footer on a website?

Strange question perhaps but I've been pondering over the idea of not using any header and footer at all for a website application (non-responsive). I thought of the idea for only having a sidebar on ...
2
votes
2answers
126 views

2 different sort forms next to each other

Right now, on my site tindie, I have 2 sort forms next to each other (one for sorting products by price & popularity, the other for sorting items that can be shipped to your country). This just ...
2
votes
3answers
256 views

title placement in mobile apps

What's best practice for placing page titles in mobile development? In jquerymobile it looks like header is great placement, however titles can be long (ecommerce products), and because they're ...
2
votes
1answer
86 views

Logging in: fields in a header, or dedicated link?

Does anyone know if it's better practice to include user login fields in the header of a website, or just a login link that takes the user to a login page (or a modal lightbox style login)? For ...
2
votes
1answer
76 views

Can Tabs also serve as Page Titles?

I have a full page where there are several Tabs across the top. The content type is a data table in the example but could be anything. Question: Is there a need for an explicit Title if the Tab ...
2
votes
1answer
585 views

Collapsing header / mega-menu

I have a website with a mega-menu. On the homepage we're looking for maximum exposure of the website categories (and we can spare the room) while the internal pages have plenty of content. So I've ...
2
votes
1answer
84 views

Best way to stop a navigation from wrapping by changing design?

Didn't know whether this was a UI or a UX issue but I have been asked to change our header section so that the navigation items don't wrap to a second line when the user views our site on a smaller ...
1
vote
6answers
354 views

Best way to present sections of information

I'm working on a form that will be used to collect pieces of information on a person. The information has two main sections, "identifying" information like name, DoB, etc. and the second section is ...
1
vote
3answers
197 views

How can the word “feedback” in the header affect potential new customers?

Background of my project I was recently asked to implement pages for customer feedback. This is aimed at customers who just bought one of our products. It is a major purchase of medical equipment. ...
1
vote
2answers
63 views

What is the best use of icons in the header? (icons replacing free text)

What is the best use of icons in the header? In my application I am using a number of icons for simple features such as "find friends". "ask a question" etc. This is mainly because I need to keep the ...
1
vote
2answers
97 views

Is it necessary to have headers?

Can we go even without headers by including simple placeholders inside the input box? any other suggestions?
1
vote
4answers
123 views

Is it a bad idea to auto-scroll to title of the page bypassing the header?

In one of the sites I developed, I want visitors to auto-scroll to the title of the page (blog) by passing the header of the website. Only main page shows everything as usual. Inline pages doesn't ...
1
vote
1answer
32 views

Column header name suggestions

I have a column in a table with each cell being a toggle switch (on/off),what would be an appropriate header for the column? Right now I have just called it as state
1
vote
3answers
76 views

When should a website show only a headline on the first screen a user sees?

It's very trendy to have one page sites, where the first screen the user sees is a beautiful image with a single headline. For example, http://www.squarespace.com/, http://playgroundinc.com/, ...
1
vote
2answers
208 views

Repeating Sidebar and Nav titles within the Page view

Should I repeat the active (selected) navigation (either top or sidebar) title within the page view itself? My current opinion is that it should not repeat as long as the tab that is active is clearly ...
1
vote
2answers
57 views

fixed header - with navigation for e-com site

I have an e-commerce site. I believe it makes sense to have a fixed header when a user scrolls down. This will show the items in the cart, and will also show the visitor when they have added a new ...
1
vote
2answers
134 views

Where should I place the leaderboard ad? [closed]

I've seen the leaderboard ad mainly being displayed on two locations: above header and below header. Above: Below: My question is, why did these websites went for one option over the other?
1
vote
3answers
263 views

Full width header vs standard width header

The other day I was discussing about the use of the standard (965px more or less) on the header images / navs. I was pretty sure about the increasing use of high resolutions, so that means on ...
1
vote
2answers
136 views

When should I show a simpler version of the header?

MY website has the following buying flow: Select a product > Choose the product specifications > Additional Options / Choose delivery method > Shopping Cart > Log-in > Payment Page. I'm trying to ...
1
vote
1answer
36 views

Convention For Marketing Section

Background: Part of a SaaS service is a web-management tool. The main part of the website, when you log in, contains a header with a lot of marketing-related links like pricing, benefit and ...
1
vote
0answers
15 views

Profile Header Layouts [closed]

Alright, so I'm designing the header of profiles, however I'm having a bit of a hard time with it. So, I have come here to ask for some tips on what to do. So, it is a box at the top of the profile. ...
1
vote
1answer
3k views

What is an average header height for mobile websites?

What is recommended/average header height for mobile websites. Browsers such as Chrome and Safari have an address bar at the top which takes space so in terms of UX how big the header (eg bootstrap ...