Hot answers tagged

46

Why is nav-menu visible when you are scrolling up? In content focused sites and pages, the users expect to scroll down if there is an engagement. If user is not scrolling down but up, it can be accepted as "not engaged user". Providing other options for engagement is the main goal of this behavior. The same pattern can be also seen in mobile safari app. ...


22

I think it's part aesthetics - as @marcintreder suggests - and part visual anchoring. The horizontal bar is a cue that the page is scrolled all the way to the top - which is especially useful in "light"/"minimal"/"uncluttered" designs without so many other cues.


19

Mobile focused design This sometimes called the scroll up bar and is a product of mobile-focused design. It is a compromise between having a fixed navigation bar that is always on screen and flowing navigation bar that is only on the top of the page. The fixed navigation bar has the downside of taking up a significant portion of the smaller mobile screen, ...


18

11 items is a difficult number of things to arrange in more than one line, but it's very easy around a circle. How about something like the following which might still be inkeeping with your needs I also decreased the size of the icons in relation to the labels in my version, but this is just a mock up anyway - you can obviously take the idea and adapt ...


13

Many people do this because other people do this and no other reason. Their purported reason might be to give maximum space to their content while minimizing the header which they read about somewhere. I agree with you, though. Having the header expand when scrolled up is annoying. It wouldn't bother me if it waited till you got to the top before doing that,...


11

The header is usually at the top because it's convention. Why is it convention? Probably because you want to introduce the title and brand of the website you're visiting to the user immediately when the page loads. So you put it at the top. And then it gets out of the way quickly when you scroll down. Sounds like a pretty good solution to me. Why not put it ...


10

Just tried to improve the concept taken from above designs. I tried to group functionality that works together. Data sources | Arcgis server | coordinate systems describe connections to external systems. Queries and Maps (i guess the mostly used functions) have moved to right hand corner where users will find it more easy to locate. Product logo is ...


10

1. You could split it into logical sections, where you have first 3 colums with these: "Datasources", "ArcGis servers" "Users", "Roles" "Tools", "Settings" And then the rest on a single line below: "Coordinate Systems", "Maps", "Queries", "Layouts", "Reports" 2. Have the Esri logo at top left, and the Dekho logo at top right. This way, the symetry ...


10

Here's a study published by Smashing Magazine that supports the use of sticky navigation: http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/ Two key points from the study: STICKY MENUS ARE 22% QUICKER TO NAVIGATE: The data from the study indicated that participants were able to find what they were looking for quicker ...


9

There are lots of ways to do this, but I would recommend against using an icon like the one you have chosen (which could be platform specific). The concept of more information is a bit abstract to represent with an icon that can easily translate across cultures. Option 1 If the information is to be shown in a overlay panel, then a downward arrow should be ...


8

Also if you're worried about screen height, you could have the menu collapse from full size to a smaller size when they scroll down. Then have a down arrow or some other way to let them know to click or rollover and it expands to full size again


7

If you consider Google to be a successful company who have started to shape up on User Experience the last year, then that is your answer. They implement a full width top navigation bar on all of their sites, and some of the content is narrower and centered in the middle. It looks like the pattern in your question. Google bar’s updated look Posted on ...


7

Sticky headers may seem like a new concept, but they are not much different from frames (visually). To my knowledge, there is unfortunately no direct research on sticky headers. Hopefully others can share their insights from their own user research... As a best practice, I would include sticky elements when they are useful (i.e. recognition rather than ...


7

In the lack of real research data I thought I would share some things I found while studying sticky headers (most of these points are also pointed out by the other respondents): Keep the header small, the largest part of the viewport should be reserved for the content. Only put absolutely necessary things in it (do you really need your logo there?). Make ...


7

The intent behind this functionality is to support the user's assumed intent: If the user is scrolling down, they must be reading the content -- so help them by getting the header out of the way. If they are scrolling up, they must be done reading, and are trying to get back to the navigation at the top of the page -- so help them by bringing the header ...


6

Can't think of any. It's probably aesthetics. Recently I've been split-testing top-bars of large eCommerce website. The reason was changes made due to visual aesthetics Results: top of the top bar wasn't making any statistically significant difference in conversion (cpc business model, large sample - more than 0,5 mln people), no matther if it was pale or ...


6

Large table has usability issues, as headers could became invisible. As you matrix is rather sparse, you could use table with appropriate pairs. Grouping in some meaninfgul way will enhance perception. For static vesion it could look like this. For interactive version solution could be even better.


5

I think as @agib said, it anchors the top of the page, but I wonder whether it is also serving to create a visual separation from the toolbars and stuff at the top of browsers - it indicates that the page stuff starts here. On the sort of minimalist pages that you link to, this might be sigificant - on SE sites, there is a top header bar in a distinctive ...


5

The microsite. When you employ micro-identity iconography, you tell the user that they're in a new, self-contained area. Users will not expect the 'home' icon in this space to take them to a different area of the site, even if it is one they visited earlier. And they will certainly not expect a link to suggest one location and provide another. The ...


5

I appologice for not having any research to reference, but there are other sources. Shawn Borsky, professional User Interface designer and an author have commented the sticky header like this: When users are reading scrolling content such as a feed or an article, its easy to get tunnel vision and ignore the navigation. When they finish consuming content ...


5

In general, adding information like phone numbers or physical addresses to a site, makes it appear more trustworthy (or 'legit'). In a number of tests that I know of, this has been the case. However, the side effect of putting your number in your header is that people will call you more, so don't do it unless you can actually handle the support calls. ...


5

In an E-commerce site I think it has become so synonymous for users to look in the header for their shopping cart. In this case I would say there there is no need to reinvent the wheel, it works and if you were to place the cart in any other location you may confuse a lot of your users. I believe the way you have it designed in your wireframes is a great and ...


5

The design problem you want to solve with a fixed header is to provide quick and easy access to additional pages or tools. The negative effects you get with that solution is that you end up stealing precious pixels from the content. That's the problem we had 15 years ago when everyone wanted frames on their site. This might not be a big problem on desktop ...


5

When you put something in the top nav, your users know it's important. It's fine to have it in the header: It tells your users that you are actively soliciting their opinions. (1) Verbs are good — typically better than nouns, unless the noun is very common / familiar. "Feeback" might work, but "send feedback" might be even better. (2) Agree that combining ...


4

If there's the possibility of very long titles I would have them left aligned and not in a title bar (to allow line breaks). Update: Just checked amazon.com and they do it exactly like that: Hope that helps.


4

The main reason is convention: This is how it has always been done. This convention was probably inherited from print media. For example newspapers, company headed paper etc. Also it's the sensible place to put it as the first thing you do is identify with the brand via the header. Generally when you launch a website you start at the top of the page. ...


4

There are plenty of successful websites out there using this navigation layout, so it not all bad or all good. I personally am against it, an here's why. It violates visual hierarchy. With the nav above the site name (and/or) tagline. With the traditional layout, the nav is clearly a child, and the logo and page name are clearly the parent item. Clearly ...


4

The legibility decreases when using only caps (because the word has no defining shape anymore, it's more of a horizontal bar). Since legibility affects the time it takes to scan words, it does have a (small) impact on usability. However, all-caps can(!) look really stylish and if your users pay a lot of attention to style, this might just improve their ...


4

Material design is, to my recollection, silent on this matter of header/footer matching. The documentation shows several variants: no footer, matching header and footer, different header and footer. The header may or may not be considered a "large area"...it really depends on your layout: material design contains examples of both large headers and narrow ...


4

Question: should login/signup appear before or after the navbar? (question clarified by OP) In short: If it's in that top right corner, then it doesn't matter very much. Here's why: Top-right consoles are rarely perceived by users, because the F-Pattern shows that users rarely scan that corner unless they are specifically looking for something. ...



Only top voted, non community-wiki answers of a minimum length are eligible