Hot answers tagged

73

I believe the going name for it is a Hamburger Menu, as a reference to the icon that's commonly used for it (, similar to the Unicode character ≡ U+2261 Identical To), and to the stacked nature of the drawer itself. Hamburger Drawer and Hamburger Sidebar would also be recognizable terms to the UX community. A bit of discussion on what I believe to be the ...


64

These dots, referred to as an ellipsis, always mean that there are additional options. For example when you see "Print..." it is indicating that there will be another step before there is anything sent to the printer. Taken from The Microsoft UX Guidlines: Design concepts Using ellipses While command buttons are used for immediate actions, more ...


49

He's making multiple points of varying validity in that post: Explain why an item is disabled: Great advice that almost no one follows! Google search "greyed out menu" and you'll find heaps of people wondering why their menu items are disabled, because the app doesn't tell them. Giving them info when they hover over a disabled item or try to click on it is ...


48

Using text rather than an image is good design when displaying text. This allows the user to interact with the text as text, doing things like copy and paste, or using alternative methods of reading the site content. However, this menu button is not actually text. It has nothing to do with the meaning of that text character (a mathematical symbol meaning ...


35

You get better performance if users click the menu bar to open a menu rather than simply hold the mouse pointer over it. Hover-menus were demonstrated to be a bad idea long before they appeared on the web: Chaparro BS, Minnaert G, & Phipps C (2000). Limitations of using mouse-over with menu item selection. Proceedings of the Human Factors and ...


32

Good question. I can only offer my opinion, no research. In my opinion, it seems as though doing this is mixing 2 separate actions on one element (i've done it myself in the past). I've come to the conclusion that the navigation click action on the "Services" item should be removed. You will face further problems when people use touch screens. E.g. when ...


31

There's lots of research in Human Computer Interaction on this issue and the general concensus is that breadth beats depth (read: wide top level navigation beats nested submenus). This is the case due to Short Term Memory (STM) storage issues and how STM is affected by both breath and depth. Pointing to some hard research should help your case to your ...


30

Not quite - but I have taken a step further in the right direction having previously implemented a mechanism in several desktop applications, whereby in addition to any button or menu item being disabled, a tooltip shows the reason why it is disabled. Thus we get something like the following (Disabled should be new-lined) The additional follow ...


30

Your problem isn't how to mark the link. The problem is that the link appears to be something other than you intended. A breadcrumb trail shows you how you got where you are, and ideally providing links back to where you've been. It is not a navigation element to show you new places that you can go to. Looking at that screen, I would assume that the ...


29

This is called an accordion navigation control, or accordion menu. Use when you want the benefits of a normal sidebar menu, but do not have the space to list all options. Use when there are more than 2 main sections on a website each with 2 or more subsections. Use when you have less than 10 main sections Use when you only have two levels to ...


28

How about using a mega menu? http://www.useit.com/alertbox/mega-dropdown-menus.html


28

Looking through both the "Home button vs Logo link?" and "Should I add a 'Home' Button to the navigation?" questions on UX SE, the information in both is still quite relevant even though some of it is two years old or more. "Relevant" doesn't mean there's a clear-cut answer, and really there isn't going to be a clear-cut answer applicable to all. I don't ...


24

A question mark ? doesn't represent 'help'. It represents a question in general, or a question about more information on a specific point. Some apps and websites have used it for contextual help as it is cleaner for that. If you want a menu option for a help menu, call it "help". This has become so entrenched that the name for it is a "help menu". ...


23

The problem I see here is that you're using a styling which is originally and frequently used to signify a link that will take you somewhere else, where instead what happens is that a drop down of options appears. I would use a ▼ marker at the end of the label to indicate a drop-down menu behaviour. That's a unicode character 'black down-pointing triangle' ...


23

I think it's a great idea to change navigation. In the winter, people are less likely to be looking for golfing products, and more for skiing products. Your navigation needs to meet two goals: Consistency: the navigation needs to be the same across the site, intuitive. Relevancy: the user needs to be presented with the options they are looking for. Now, ...


21

Side panel As mentioned at appadvice The app features a pretty slick interface, and uses the side panel for navigation.


20

(Since your profile indicates you're a developer, I'm going to answer this in the same way I help out programmers at my company. Let me know if you need another angle.) I don't think hierarchical menus in administrative UIs are an anti-pattern. However, it is an example of "programmer thinking" when it comes to interface design. What you're likely doing is ...


20

If it's the help menu, please just call it that way: It makes it easier to find I don't have to think about it "oh, they probably put the help menu under ?" and it's a larger target for me to click on. Alt- keyboard combinations should be secondary to having an easily understandable name for the menu option. I don't believe they're that important anymore ...


20

Fulfilling user expectations is a fine goal, but it’ll only get you so far. Unexpected results are not themselves bad. Sometimes they are even delightful (“Surprise!”). However, unexpected things in a UI are a sign of a usability problem. To resolve conflicts between kinds of consistency, you need to analyze the situation for the impacts of violating ...


19

I have no idea as to the actual correct answer to this question, but let me speculate: I think it's because the web has hyperlinks. Clicking on something on a web site is associated with visiting a different page, and as such, if you were to create a dropdown menu that activates on click, the expectation of what it may do when activated is uncertain: will it ...


19

A dropdown list (or combobox) should already be a clear indication that you need to select an item from there, so wasting the first item by telling someone this is redundant and a poor idea. The only times that I would recommend having some other text in the dropdown are: when it is not essential to select an item when you want effectively to select ...


18

The layout pattern itself (not the burger icon) is known as 'Off Canvas'. Luke Wroblewski wrote about it in an article about Multi-Device Layout Patterns. ...the Off Canvas pattern for multi-device layout takes advantage of space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or a user ...


17

This type of button is usually called a 'Split Button'. The glossary of the Windows User Experience Interaction Guidelines defines the term 'split button' as: A bipartite command button that includes a small button with a downward pointing triangle on the rightmost portion of the main button. Users click the triangle to display variations of a ...


17

To expand on Tohsters answer, one hamburger menu is already detrimental enough so adding a second one is only going to confuse matters more. If the client cannot be persuaded to follow other avenues then it's probably best to start looking at ways to make the best of a bad situation. (this blog post expands on this ...


16

Users hate slow UIs, just as they hate slowly loading websites. Pop in, fade out. Your users are not here to admire your application. It's just a tool to help them achieve a goal, and when that's done, it doesn't matter how pretty the app - they're out of there. Now, that doesn't mean you should strive for dull, grey, boxy interfaces. But it does mean ...


16

BURGER VS GRID - same or different context? I think the burger and the grid generally have different meanings, though they're not formalized anywhere yet (at least, it's not widely known like ISO or W3 standards). The burger menu usually is more about navigating content within a context. You're on a website and navigate to different subsections of the ...


15

For Mac OS X, it's Application Name | Preferences… For MS Windows, it's Tools | Options or Edit | Preferences (see comments) For GNOME, it's Edit | Preferences


15

Dropbox does a wonderful job with its right-click functionality. Hovering with your mouse over a directory looks like this: Clicking on the underlined link (music) navigates there, but clicking anywhere else in the frame, as well as the "dropdown" sign, or right-clicking(!) opens the following menu: This has so many benefits: It doesn't block the user ...


15

The standards cited by Paul Hibbitts on this page give some general naming guidelines and also explain how to use ellipsis (hint: “Tools > Options...” is wrong). Here are some additional guidelines pulled together from various other sources. Menu names should be short, clear, and concise to speed reading and recognition. Ideally, a name should be a ...


15

Is the user logged in? I wouldn't use MY unless it's for groups of items they themselves have created, then it truly becomes MY stuff. The word MY just takes up extra room in navigations and menus and the like and can makes lists harder to scan. The slogan "My province" is enough to show the user the content is local and the promise of "one click?" well ...



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