Test!!!!

Being lost on a website is almost as frustrating as being lost in a car. I used to blame the traffic sign companies until Google Maps came around. Now I find myself on the same side with the sign companies as a web designer, trying to show others how to get around in a website.

Our grocery store navbars are pretty simple if you don’t have a custom website, and this blog post is not suggesting they will change anytime soon. However, I work on the awginc.com website, and that navigation could use some help when/if it gets redesigned.

This article I found, “11 WAYS TO DESIGN THE PERFECT SITE NAVIGATION” by Saijo George on webdesignerdepot.com, has several website navigation examples I like. These examples below are mostly the same as this article, I just replaced the authors descriptions and added my opinions with a grocery perspective.

SISTRIX
Sistrix, an SEO company based in Germany, uses a nice clean design for their website. They use only 4 drop down menus despite featuring tons of content. When viewing each dropdown menu, a white underline helps to remind you where you are, almost like a shopping mall map with the “you are here” marker.  Light grey lines help separate the categories into a hierarchy of groups and light grey icons help the viewer interpret what each category is about. Another way they visually group categories is by changing the header text colors which is a small detail many won’t notice but helps in an almost a subliminal way. The green call to action button is also a nice feature many don’t think to use in a drop down menu.

REISS
One of my favorite features in drop down menus is the addition of photos that give a visual “sneak peek” of select items within all categories. For a grocery store, I can imagine seeing a photo used for “new products” and “sale items”.

MASHABLE
Granted, Mashable has categories within categories, typical for a news site. Their drop down menu uses more color and the width adjusts to the size of your screen.

OARS
This website appeals to me, mostly because of the edge to edge landscape photography. I like how the drop down menus have slightly transparent backgrounds. I don’t care for the embedded text in the photos, however if it were just one larger photo, it would be okay. Either that or keep the fonts consistent in each photo.

PAPER COLLECTIVE 
On this site, the nav expands when you click the hamburger button and pushes everything else to the right. Granted the behavior is a smooth transition, like a drawer with gliders. However I think the side nav is more of a “look how cool this is” feature. It would be nice if it were used more as a necessity in the design? I tend to wonder how many times the nav of this site gets overlooked all together?

OLYMPICS.ORG
This drop down menu, I love. Each category is a different Olympic game throughout the years. As a designer, I like to follow the logo designs used for each year and here they all are! Plenty of white space and each year shows the same importance. A small arrow nav lets you click through to see all the years. Nice!

NEXT.CO.UK
Here is a nav that makes my head hurt. It is a major overload. No color or images and each drop down has tabs! The “All” items in a box make me feel like it was an afterthought because they had no control on how full this was going to get.

ESPN
Like the Olympic site, I like how all the team logos are shown and in columns for each division. I like how the first column is separated from the rest by using a light background color. I also like how the ESPN logo fits in the nav bar.

BIG JOHN GROCERY
Here is an example of one of AWG’s online shopping websites using the Freshop platform. I like the use of space and the bold headers. The obvious arrow buttons show you there’s more to scroll through so you don’t miss it, and the “more…” at the bottom of each column also gives the viewer a hint to look further if they aren’t finding something in particular. In my opinion, use a small photo at the top of each column and make the background about 90% translucent and it would be perfect.

 

All in all I think these website navigations are an improvement compared to the simple text drop down menu. It seems like the trend of placing the site map in the footer is moving up the page to the top, which is good. However, I wonder how many of these websites are using a content managed system. These navigation improvements use more technical code which invites more things to go wrong, especially between browser versions and device types viewers use. I’m not sure if these navs are in a CMS that anyone just off the street could figure out how to use AND be easy to navigate. I’m sure eventually someone will figure out a way to make them easy to use, if they haven’t already. Then they will become the new norm. After all, I remember when a simple text drop down menu costs extra because they were hard to build.