Home > UX and Prototyping > 5 UI patterns: prototyping navigation that makes good UX sense
Designing UI patterns for web and mobile that optimize your user experience and improve your bottom line

Designing UI patterns for web and mobile that optimize your user experience and improve your bottom line

Accessible navigation guides users through the flow of information in the UI and helps them complete their tasks, boosting your UX and driving up your web/mobile conversion. Likewise, if a user can’t find their way around your site or app, that site/app is useless to them – poor navigation design makes for poor UX and causes users to drop off the conversion funnel. It’s no surprise then that poorly designed/neglected UI navigation can have a disastrous impact on your bottom line.

The secret to UX-friendly UI navigation begins with the navigation menu. In order for users to get from Point A to Point B on your website or app, they need a map to guide them. Designing the navigation menu should take precedence in the design process. Prototyping your navigation menu before development will provide the resources you need to visualize and interact with your designs in real-time, from the start.

Let’s take a look at 5 common UI patterns and how to prototype them with interactive prototyping tool, Justinmind.

Dropdown menu for smooth website navigation design

ui-navigation-drop-down-menu

A dropdown menu is an expandable UI navigation with several values that the user can select and, from there, be taken to another area of the website. The dropdown is a website navigation design that transport users to a new location in a website and command menus that execute an action based on the last option selected.

When to design a dropdown menu

The dropdown menu is a great way to navigate a website when you have lots of options to display and you want to conserve space.

Familiar and easily to scan, a good drop down menu can improve click-through rates. But it has a time and a place, so think about your UX patterns. The menu needs to contain enough navigation values so that the user knows how to interact with it (e.g. single click on chosen value as opposed to a double click using a radio button), and not so many that the user has difficulty scanning the menu list. Use it wisely and it’ll do wonders for your ux ui design.

How to prototype a dropdown menu in Justinmind

ui-navigation-drop-down-menu-prototype

To add a dropdown menu to your Justinmind web prototype, first you’ll need to create the main menu with a text table container widget.  To create the dropdown area, use another text table widget. Add the submenu values (each screen the user can navigate to) to the table and repeat this step for each main menu value.

Remember to create new screens in the Screens tab – otherwise users won’t be able to see anything upon clicking!

Add linking events (‘On Click’ + ‘Link To’) to each value in your main menu and submenus to make sure they reach the additional screens.

You can also use ‘Change Style’ events to provide feedback to the user when they interact with the menu – e.g. using different colors to gray out an unavailable option. Additionally, consider using markers to indicate which main menu value has a submenu, such as an arrow or a dot.


Download Justinmind now for FREE and prototype powerful UI patterns 

Download Free


The sliding hamburger mobile menu

ui-navigation-sliding-hamburger-mobile-menu

The sliding hamburger menu, or slide menu, is a common Android and iOS mobile menu for displaying multiple links. In its ‘resting’ position, the slide menu is hidden from the screen. By triggering a hamburger icon, the user can access uncovered navigation links.

When to use it

The sliding hamburger menu works well with responsive web design. For instance, the Android Navigation Drawer for the Anroid Gmail inbox, the YouTube and Facebook UIs.

The slide menu is ideal for hidden navigation, for instance to de-clutter a mobile screen that has lots of navigation links. Read more on our best practices for slide menus here.

How to prototype it

To create a slide menu for your mobile app prototypes with Justinmind, you’ve got two options:

  • Follow the steps in this tutorial to create your own from scratch, or
  • Try out the readymade UI screens in both the Android and iOS widget libraries. They’ll be pre-loaded when you create your mobile prototype!

Fixed position menu web UI pattern

ui-navigation-fixed-position-menu

What is it

The fixed position menu, or sticky menu, is a web UI pattern whereby the header area (menu, website title and logo) remains visible as you scroll down, and the page’s content flows beneath it. Sticky headers have become a web UI pattern standard – Google + and Dropbox both have sticky menus.

When to use it

Fixed position menus should be used on pages of websites where an action is intended, such as retail, e-commerce sites. Users can get to their navigation options in seconds – making the fixed menu really powerful. Speed is the most important thing to the user when browsing your site. In fact, according to an Akamai and Gomez.com study, 79% of online shoppers won’t return to a site if they had trouble with performance.

How to prototype it

To prototype a sticky menu for your web prototype, get acquainted with Justinmind’s parallax elements. The pre-made elements allow you to create a floating menu in seconds, and you can even customize the scrolling speed.

Custom mega menu for web navigation

ui-navigation-custom-mega-menu

The mega menu is an expandable, multilevel menu for navigating websites. It has two-dimensional panels that are divided into groups of navigation options (tabs) and all links within each tab are available at once – so there is no scrolling involved. Users click or hover over a tab to view the links it contains.

Like dropdown, megamenus menus may use icons to provide structure and submenu visibility. They may also include images or colored fonts alongside the navigation links to direct the user’s attention to notable content.

When to use it

Megamenus are great space savers, hiding content until the user hovers over the menu bar to reveal all navigation links. A Nielsen Norman Group study reveals that the greater the number of links to be displayed on a webpage, the more popular mega menus are.

This menu is best for accessible web design, for users with visual impairments or senior web users. They are also popular with magazine-style blogs that contain lots of different topics.

How to prototype it

To create a mega menu in your interactive prototypes with Justinmind, you can use dynamic panels.

In a web prototype, use text boxes and dynamic panels to construct the main menu bar and customize it as you like. Add a separate panel within the dynamic panel for each main menu tab. You’ll need to use ‘Set Active Panel’ events so that when the user hovers/clicks over a tab, the correct one will expand and display its contents.

Choose between ‘On Mouse Over’ and ‘On Mouse Click’ events – to create hover and click functionalities respectively – so the user can access each tab. When you’ve created the rest of the screens, you can link them to the mega menu with ‘Link To’ events, or simply by dragging the menu navigation link to the corresponding screens.

Card grid for responsive navigation

ui-navigation-card-grid-menu

The grid is a navigation pattern used both in web and mobile navigation. The grid contains a set of images divided into blocks that are expandable and collapsible. It is another highly visual structure that allows you to group relevant elements together and visualize themes and UX flows.

When to use it

The images within the grid provided large click/tap targets, making the grid the ideal candidate for mobile UI navigation. They are also used in many web designs and websites for browsing visual content, such as image sharing site Pinterest, and music streaming service, Spotify.

And because of their logical, adaptable layout, card grids are perfect for responsive navigation! Lucky that.

How to prototype it

You can use dynamic panels to create a card grid in your web or mobile prototypes. Use image and text widgets to define each of your cards and then use ‘Link To’ events to make your cards interactive.

Tip: It’s really easy to maintain even spacing between the UI elements by using the wrap setting in the layout section of the Properties tab.

Click here to make your card grid expandable and collapsible.

 

Download Justinmind now to improve your UI patterns in your web and mobile prototypes.download_free

Emily is Marketing Content Editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *

Download Free