Tag Info

Hot answers tagged

16

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 ...


10

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 ...


9

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 ...


9

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 ...


9

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 ...


8

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 ...


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 ...


6

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 ...


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 ...


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

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. ...


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 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 ...


4

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.


4

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 ...


3

This may sound surprising, but there is no fixed header on Google+. Google+ has an outer "shell" within which you see your feed in a scrollable area. The shell has an equal width above and to the left of the scrollable area, and it surrounds it on all sides (at the bottom as well, although you can only see it very briefly if you hit End, and before ...


3

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 ...


3

In my previous usability tests I've noticed an interesting phenomenon regarding images and eye-tracking. That is that while people are aware of images such as logos and graphic areas/elements, they never fixated on the image. A fixation is a duration, specified in milliseconds, where the participant focuses on an item. For example, we showed participants a ...


3

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.


3

Drop-down boxes tend to be the more common pattern, and because most 'view controls' try to use as little viewport estate as possible, the space-saving properties of a dropdown are useful. If a radio button is laid out vertically, it'll take up a lot of space, but if it's horizontal, it's hard to scan, because users can't seek left to right as effectively as ...


3

It depends on your target user's context and past experience. Based on my experience in making icons gray when the rest of a site/app has colour, users relate to the colour gray as being disabled or non-clickable. A simple and interactive way to improve this is by leveraging your header area more interactively. When the user hovers over the header ...


3

Default signs in most finance systems are arrow indicators: red down arrow for spent and green up arrow for received money. So it is the clearest way to represent balances using such signs, for instance in such compact way: download bmml source – Wireframes created with Balsamiq Mockups


3

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 ...


3

It depends how specific you need the information to be. Things can often seem "friendlier" in UI's if they are less specific or require less accuracy. This would allow you to use less text in favor of some graphic features. This may, however, have an impact on the outcome of your data and the amount of space required to get the form onto the screen. Maybe ...


3

How are current customers getting to this site? Are they prompted for feedback somewhere in the product packaging? Or is the idea that a current customer would stumble onto this site, at which point you would want to prompt them to leave feedback? As a current customer, I don't know if I would view either of those links and see it as an invitation to leave ...


3

It depends on the target audience. For Squarespace, it makes perfect sense for them to focus on a more visual/audio experience since that's their target demographic (artists, musicians, etc.). The page can be better utilized if it's designed to guide the user towards relevant information. This doesn't mean cramming everything into the top 600 pixels but ...


2

People (generally) look at the center of the screen for content. Putting up a header on top of the page makes it easier for the visitors to actually see the content and creates a continuity for focus on the content and a safe place to 'return' home. Its a convention but one grown because it works so well. Putting something on the right side of the screen ...



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