Why these web design elements are crucial to your website

When we visit a website, or are looking to have one built and designed for our own businesses, more often than not we’ll have visual references we want to draw from. Very often, understandably, we hear ‘I want it to look like this, this and this’. The aesthetic of your website is extremely important; it is, after all, the first impression you give users. However, the role of a designer isn’t just to make your site look pretty. Functionality and user experience (UX) is the springboard from which all else occurs. So, we thought we’d go through the main functions and explain what they are and their benefits to the navigation of your site.

The menu

Dropdown

A drop down menu offers a list of navigation options (site pages) that is presented when the user clicks or hovers over a button, typically positioned in the header. Once the user navigates away from the button, the menu stops being visible. 

The benefit: they offer a neat aesthetic, particularly for a web design that includes a significant amount of pages to navigate through, that stops the user experiencing overwhelm on first view. It keeps page navigation curated in one place. 

Hamburger menu

Hamburger menu isn’t, obviously, takeout options. Usually in the top right corner of a website, it’s an icon of three short horizontal lines stacked vertically, resembling a hamburger… sort of. Like the drop down menu, hovering over or clicking on it will display navigation options. 

The benefit: 

Allows for quick direct clicks to pages a user wants to navigate to, and a more streamlined user experience. These are also great when there are multiple menu options competing for primary menu space, tuck less relevant pages neatly into the hamburger menu so your users can continue exploring as they need to. 

Top Menu v Left Menu vs Right Menu vs no menu

The description of these is in their name. Top menu is a menu that runs along the top of the screen, left menu runs down the left (or right on the right), vertically, of the screen, and no menu is, well, no menu. 

The benefit:

Top Menu

For the most part, a top menu (primary menu) meets user expectations and so creates a good initial user experience. The first place people will typically go to for the menu is the top. It can also make the most of your page width and, as with all menu functions (or what all menu functions should do), it guides the user to the most important pages in a linear, transparent way.

Left Menu or Right Menu

Again, there is some expectation of a user to be able to find information there (our natural inclination to read left to right feeding into that assumption). While it takes up some valuable content real estate on a page, having it run along the left of it can be helpful for the user to not have to scroll to the top of the page to revisit the menu. 

No menu

We’re going to be really honest here… We can’t find a benefit for this. It might be scratching a creative itch for a designer wanting to do something cutting edge, but when the payoff is a very poor user experience, it’s never worth it. Don’t make it confusing for your user by offering absolutely no navigational prompts. 

Mega Menus

These are expandable menus that offer a significant amount of navigational options displayed in a multi-drop down layout. Typically, this is displayed with big panels, offers sub-navigation and is structured with headings and icons. 

The benefit:

Essentially, you can display every page on your site through the one menu. This gives users a big picture understanding of how each page relates to others. Also, the ability to fit in elements such as icons, means that you are able to demonstrate navigation to the user in ways that might better suit the particular users in your customer demographic. For example, for e-commerce, presenting product variations through illustrations rather than just the written word. 

The Footer

This is a section that runs along the very bottom of the website page, usually ‘stuck’ on all pages (so a user can navigate there without leaving the page they’re on), offering navigation to various on site and off site pages (such as social media accounts). 

The benefit: 

While at the very bottom of your website and intuitively not the place you would assume users would navigate to, the footer actually plays an important role in their experience and can offer good impacts on long term SEO strategies. Here is where the ‘ugly’ but vital stuff sits. That being, Terms and Conditions, Shipping and Returns, Sitemap, Privacy Policy, Email Sign-up or social media icons. It’s the nitty gritty information a user will need to know closer to the point of converting. Importantly, it is also where users will expect to find this information. 

Bread crumbs

Breadcrumb trails in design are the secondary or tertiary navigation showing a user’s location on the site. ‘Breadcrumbs’ bring them ‘home’ if needed, think those little buttons when you’re online shopping women > dresses > cocktail dresses… 

The benefit: 

This element improves the navigation between site pages for users, making it easily understood thanks to the breadcrumbs. This means they don’t need to re-click the menu to have continuity between page exploration. 

Here are some example sites and their menus from Zimple:

Artisan Exterior has a strong UX through the use of a mega menu and site wide product search. 

All Lift Forklift and Access Equipment considered UX through different purchasing channels requiring the use of a mega menu, hamburger menu and multiple sub menu and page filtering selections. 

Cveta Property utilises bottom of page menus that follow the user through their journey, coupled with a hamburger menu and global search that is always visible no matter what page the user is on. 

Feature image: Tim Mossholder on Unsplash