For those coming into the site via another page, it’s a little less efficient to find what you’re looking for than if the menu options were always visible. Its homepage provides links to each of the main pages from within the content. However, I did wonder if I was missing out on something in that menu, since I couldn’t initially tell what was in it or what it did.īig Spaceship has a fixed menu icon for its navigation. It’s amazing that support and contact are initially hidden from view and I can’t see a good reason for it.Īmmunition Group has a menu icon, but it’s not necessary to access it: it just provides a way to jump down a long single page site. You can’t scroll down the page, so unless you’re wanting a tour, to “get started” or to log in, you have to open up the menu to see what’s on offer. The menu comes in from the right and pushes the page off to the left. Firstly, there’s a mix of an expanded menu, the word menu and the icon. ![]() I’m not a fan of SquareSpace’s use of the menu icon. The menu icon is clearly visible in a consistent spot as you scroll down the page, but removes visual clutter and keeps the focus on the photography. I think this works well with the content: you scroll down the latest collection and see information and links to past collections down the very bottom. ![]() This reflects the likely purpose you’re on a page on the site: when you’re on the homepage, navigating to other news sections is likely to be far more important than when you’re reading an article.įashion brand Auria has no top navigation apart from the menu icon, even on large screens. Interestingly, the horizontal menu disappears entirely when you’re reading a single article and you’re just left with the menu icon. “All sections” text disappears and is replaced by the menu icon. When you scroll down the homepage, the horizontal menu sticks to the top of the screen. The horizontal menu also has a “All Sections” link which pulls out the side menu rather than having little dropdown menus for the horizontal menu. On the homepage, top level sections are additionally accessible via the horizontal top menu. Clicking on this brings up a side navigation menu which can expand out several levels deep. It hides other main menu items behind the top “Now reading” bar – but essentially, if you’re going there to read the latest articles, you don’t need to do anything else but scroll down the content, or jump down via the list of articles on the left.Īs part of its recent redesign, The New York Times has used the menu icon along with the title “Sections”. Here, Quartz places non-essential navigation items behind the menu icon. I don’t mind having the navigation hidden here as I don’t use it often and it’s not really a website where I’m navigating pages through a menu. In this instance, Pinterest keeps the focus on the latest pinned content, and provides a menu if you do wish to look at other general categories of pins. Here are some different examples and my thoughts on whether or not they make for a good user experience. While this may make a site look trendy, cleaner, minimalistic, more focused and less overwhelming, it’s potentially making it more difficult for people to actually use the site. Where space is not at a premium, some sites are still choosing to hide their menu behind this icon and requiring some form of interaction (an extra click, mouse movement or touch) in order to see the navigation options. Responsive websites viewed on large screens ![]() Most of the responsive sites we design use this icon when viewed on a small screen. Responsive websites viewed on small screens In the apps I currently have on my phone, the following use this icon: Feedly, Facebook, Spotify, Wunderlist, Gmail, IMDB, QuizUp and Paper. I think it’s fantastic that there’s now a nice sense of familiarity and consistency across different fields: there’s far too examples of icons where confusion and inconsistency reigns. The icon is believed to have originated in apps such as Facebook and Path, then it spread to other mobile apps, responsive websites viewed on mobiles and even to other software such as Chrome. In the last couple of years, the “three lines” or “hamburger menu drawer” icon has become the de facto standard icon to represent a collapsed menu.
0 Comments
Leave a Reply. |