Happy New Year to all our readers! Today, we’re going to check out three key navigation traits that may dominate 2015.
One would possibly suppose that now we have explored each potential variation of navigation on the internet, and but we see continued exploration within this very particular area of interest. It is really wonderful simply what number of variations of design will be utilized to a humble record of hyperlinks.
Here I wish to take into account 3 common developments within the space of navigation: first how use of the navicon (or hamburger icon) is altering, second a brand new method utilizing full display menus and eventually what I think about the perfection of the mega drop down menu. Let’s dive in and see these approaches at work.
LONG LIVE/DEATH TO, THE NAVICON!
Facebook is given credit score for popularizing the usage of navicons to cover navigation choices off display, or off canvas. With the start of responsive net design the online design group was determined for an answer to navigation. Packing every little thing right into a navigation panel that sits off canvas, and strikes in upon choosing the navicon was a gorgeous resolution. It appears the neighborhood latched onto it as a considerably simple answer that appeared to make life a lot simpler for the designer and developer. As a outcome the navicon has change into a go-to choice for cell apps and web sites.
Recently nonetheless, the navicon has come below assault. In many of those debates evidently one essential element is omitted. The cellular apps trade is definitely shifting away from off display screen navigation in favor of on display screen choices. This comes because the pattern is in direction of targeted, single function apps. This makes the change extra affordable. In distinction, even a small website online may be filled with dozens, if not a whole lot of hyperlinks within the navigation. Take for instance a web site like sony.com, and even this web site. These websites have navigation wants that go properly past what is feasible with a easy tab strip. For this motive it appears to me that navicons, and off display screen menus are right here to remain. We merely have to concentrate on their limitations, potential issues and so forth. And after all, all the time take note the utilization: is it a cellular app or a cell/responsive web page. Because they don’t seem to be the identical.
The website for design company Long Story Short is a beautiful instance of easy methods to leverage the navicon in a significant and restricted means. This web site makes use of the navicon to cover away the complete vary of navigation choices. It does so on each the cellular and desktop variations of the positioning. The use of navicons on the desktop is definitely an entire sub development right here. What makes this web site a premium instance of the method is that probably the most important components of navigation seem outdoors the menu. The house web page is a portal to the three most necessary sections of the positioning. In this fashion the hidden menu isn’t the first navigation, however fairly a secondary one which fills within the blanks.
The Squarespace website is one other pretty instance of successfully use hidden menus. On this website the tour and login choices are all the time seen. While roughly 23 menu choices in whole are contained within the slide out menu. Frankly, the usage of hidden menus to permit crucial navigation choices to take middle stage is nothing wanting good. I went via a section the place I was actually down on using navicons on the desktop; it appeared like a miss use of the method. However, after seeing how websites are utilizing it to drive customers in direction of probably the most essential components I can’t assist however like it.
Finally, for those who’re getting grief over the usage of navicons, or hidden menus don’t take anybody’s phrase for it. Instead, do your individual usability checks to see whether it is working in your website. A nice rule of thumb is to keep away from debate, and go take a look at as a substitute.
FULL SCREEN NAVIGATION
The second pattern I wish to take a look at is the usage of full display navigation menus. These menus are sometimes activated by a button or hyperlink of some sort; fairly regularly a navicon. The distinction right here is that as a substitute of a small panel that slides out, the navigation takes over all the display screen. On cellular this feels regular, however on the desktop that is really a brand new and attention-grabbing method.
The navigation on this website is de facto fascinating in that the navigation overlay packs lots of punch into the menu. Here they’ve the anticipated menu choices, however since it’s full display screen in addition they have room for a full contact type, contact data, social media hyperlinks, a latest weblog submit and a distinguished name to motion.
It’s attention-grabbing to think about that a person launching a menu at any time is searching for course. This makes it a major alternative to steer them in direction of what you need them to do. In this case they need the consumer to get in contact or go to their undertaking planner.
In this instance we additionally see the sample at work, however in a way more minimalistic means. Instead of packing in further choices they opted to easily current a really concise record of navigation choices. Plus they get bonus factors for animating the navicon into an “x” to shut the menu.
PERFECTION OF THE SUPER-SIZED MENU
Finally, I need to think about the tremendous sized or mega drop down menu. The use of tremendous sized menu techniques are nothing new. What I do discover fascinating is the content material positioned within them. In my evaluation of issues designers have actually put this new house to work in highly effective methods.
The Lowes web site completely demonstrates what I take into consideration. Here you possibly can see that the menu system has develop into a location for content material. This content material can be utilized to direct the circulation of customers by the positioning. Most importantly it might probably drive them in the direction of an important content material. The query turns into, what’s crucial content material? Perhaps it’s the most worthwhile objects in your retailer. And on this method the navigation acts as a salesman pushing probably the most worthwhile merchandise. Or maybe it’s used to information customers to the most well-liked objects.
Another website that makes use of this selection in a barely totally different manner is the New Balance web site. Here the primary three dropdowns are giant in nature, however are basically lists of hyperlinks. However, the final possibility for creating customized footwear produces the dropdown proven above. This menu possibility is a single hyperlink. I love that they took the chance to make this single merchandise into a very compelling intro to the content material behind the hyperlink.
These three tendencies, although we will talk about them individually have many traits in frequent. Primary amongst these is how navigation has modified through the years. Dropdown menus was once typically an organized listing of hyperlinks. For probably the most half they had been considerably impartial in that each one issues had been offered equally. Now we discover that navigation methods are a key means to assist information customers in the direction of fascinating targets.
For me the problem is obvious. That we must always elevate our pondering of navigation and actually embrace the affect it has on the expertise of utilizing the web pages we create. All too typically I discover that navigation is a little bit of an afterthought. When in reality, it must be among the many most critically thought of and refined parts within the design.