For awhile now, we’ve become accustomed to certain common navigation on the websites, mobile sites and applications we visit.
Quite a few years back, most websites utilized a very simple menu bar that fit straight across the top of the page in a neat little row. Then from these, drop-down menus were added which allowed the user to view and access pages from under a sub-menu.
Web navigation has made its journey into our generation leading to the hamburger menu. We all know this well, the icon that looks like a stack of “two all-beef patties, special sauce, lettuce, cheese, pickles, onions on a sesame seed bun”? When this icon is opened, you can view your full menu options.
The hamburger icon, also know as the navicon, became a leading navigational choice with the growing need of responsive layouts that could be viewed across several browsers on different devices. Interestingly enough, now an increasing amount of websites also use the navicon for their desktop sites.
While we all love hamburger menus… ahem, I mean the hamburger menu. Now, its remarkable to see more navigational history in websites begin to pave the way.
We can see this is true with the emergence of different menu options and how past navigation choices have built on new ones:
Full Screen
Ready for large and easy?
Usually opened first by either a button or link, these menus expand to fill the full screen of the webpage. Usually, they sit transparently over the site and display full menu options for the entire website. Some sites will include additional information in this menu — contact information, a customer response form and links to social media.
A lot of these navigations also have a “hidden” option to close and hide the menu while navigating the site. This is another excellent navigation choice that is gained popularity in recent years.
Super-Sized Menus
“Super-size me!” (Enjoying our McDonald’s old slogans references?)
A new and improved drop-down menu, super-sized includes content within the menu. This system serves to direct users through the site and assist them visually. An excellent approach to take if you have several product pages within your site and want to help drive traffic to certain pages or more popular items.
Scrolling
One long scroll!
Parallax scrolling (and other scrolling options) for sites combine all web pages into a single page. You simply navigate by scrolling your mouse downwards through each page. At the bottom right, an arrow will take you back up to the top homepage of site. Minimal navigation is used in scrolling sites with pages such as Contact and Privacy Policy linked at the bottom of the web page.
Web navigation has come a long way. Since the pioneer days of the internet and simple webpages of the 90’s all the way to our vast online world of website design layouts in 2016, we’ve continued to see user interface navigation reach better, more creative heights.
If you are looking to improve the navigation of your website, you’ll want to keep in mind the five principles of effective navigation: easy, consistent, clear, simple, helpful.
Need assistance? Check out our web design plans today!
Article by Zipporah Schumaker