Expand your prototyping knowledge

How to Prototype Mobile UI Patterns for Real Users: Part 1

How to Prototype Mobile UI Patterns for Real Users: Part 1

In our new mobile navigation series, we’ll be comparing and contrasting some well known navigation and UI patterns with some newer concepts, that work with users in mind. In this first post, we’ll take a look at each pattern individually.

With a lot less space on mobile screens than on desktop, not everything can be visible in a mobile UI and this can make mobile navigation design quite challenging. When a user interacts with your mobile app, they need to be able to navigate it easily or you’ll quickly lose them – and it doesn’t take much for a user to give up. Creativity can be what sets your mobile app apart from the rest, but it can also alienate your target audience, especially when it comes to complications with navigation. It’s all well and good to think outside the box, as long as you make sure that your users can navigate your app easily by sticking to the principles of mobile navigation and the best practices of mobile user experience – after all, great navigation equates to great UX. So, how do you perfect navigation for your mobile app? Well friends, luckily there are streams navigation and UI patterns out there for you to try. And what better way to test them out than with a prototyping tool like Justinmind?

The Top Navigation Bar

One of the big challenges of implementing navigation on mobile is figuring out how to prioritize content while making “navigation accessible and discoverable”. One of the most frequently used solutions for navigation is to keep it at the top. Because of its ease of implementation, the top navigation bar is one adopted by many mobile apps.

Itemizing the main navigational options across the top of the screen, the top navigation bar was essentially inherited from the desktop design that most of us will be aware of. Typically, navigation bars will initially appear at the top of the page but disappear once the user has scrolled down one or more screens. This makes for a natural flow for the eye, and can make for fluid navigation when there are fewer options to be navigated.

Learn how you can create top navigation drop down menus in your prototypes with the help of this tutorial.


The Hub and Grid Style Menus

The Navigation Hub and the Grid-style menu – usually featured on the homepage of the app – list all of your navigation options at once. To navigate to a new location, users first have to go back to the hub or grid menu, and then select one of the options listed there. This type of navigation usually takes up the whole screen and puts emphasis on the navigation – making it clear and and easy to interact with. This approach can be also useful when you need to display several links, and/or with a task-based mobile app.

Learn how to create dynamic navigation menus in your prototypes with the use of dynamic panels here.


Download Justinmind today and up your mobile navigation game!


Sticky Navigation

Sticky, or fixed, navigation is basically a a form of web or mobile navigation that is “locked into place” so that it is accessible anywhere on the website, as the user scrolls through the page.

The tab bar – presented as a selection of icons linked to other pages – is the basis for sticky navigation, and typically appears at the top (in Android devices) or at the bottom of the page (in iOS devices). Similarly to the top navigation bar, it is present on most pages within an app. However, unlike the top navigation bar, tab bars are continuous and always visible on the screen – whether the user scrolls down the page or not. Just like the top navigation bar, tab bars are well suited for sites and mobile apps with relatively few navigation options, otherwise they can create clutter and overwhelm the user, leading to a poor user experience.

You can simulate this in your prototypes by using Parallax features to create a fixed position menu that will remain always visible on top of the screen when scrolling. Likewise, by using sticky elements on scroll in your prototypes, you will be able to pin an element to a specific location in your web or mobile prototype, so it is always visible as you scroll down.



Icon Navigation

Pictorial icon navigation is a creative way of saving mobile screen space. If screen space is scarce, a search box or navigation links at the top of the page can interfere with the user’s ability to get to new information quickly and may make the user work more than they signed up for – doom! The image on the icon should relate to where the user will navigate to once they have clicked on the icon. For example, a mailbox image, should take the user to their email. Icon navigation is simple and easy-to-use, a space saver that gives you enough freedom to separate your app from others, if implemented correctly.

Click here to explore the ways in which you can create links between pages in your prototypes using icons, widgets and other UI assets.




The Navigation Menu

Need to present lots of navigation options? Looking for a good-looking, scalable and user-friendly approach to mobile navigation? Look no further! The Navigation menu is the one for you. The navigation menu – or hamburger menu – contains the main navigation options neatly by hiding the detailed options and making them visible upon request – out of sight, out of mind! This approach is best suited to content-heavy, browse-mostly mobile apps. As explained by Raluca Badiu here, the main advantage of the navigation menu is that it can contain a fairly large number of navigation options in a very small space, only taking a minimum amount of space from the content, and can easily support sub menus if needed.

What’s more, within a navigation menu, you can add even more content with an expand menu – for example, the curtain menu for multi-level navigation. Expanding menus are great for informative content and/or tightly-packed interface designs. Within an expanding menu, you incorporate the toggle approach, in which the user can choose from a set of primary links, which ‘expand’ to reveal secondary links. When the menu is initially opened, sliding open from the hamburger menu icon, the user can clearly see all primary links. This pattern is not difficult to implement, allows you to include a lot of content, and is easy for users to navigate.

You can simulate an expanding menu with the toggle approach in your prototypes with the use of accordions. These provide multiple panes and display them one at a time, through expanding and collapsing behavior, as you can see in the example below. Additionally, check out how you can use breadcrumb navigation to allow the user to link back to the parent pages of the current selection, or to the previous pages navigated by the user to get to their current location.




Responsive Vertical Navigation: The Slide Menu

The side, or slide menu, is nothing new: as Nataly Birch explains in Design Modo, “various website designs and desktop applications include sidebar menus in order to make the user’s experience more convenient, and interface more comprehensive and user-friendly“. She goes on to add that although we usually see conventional horizontal navigation in mobile apps, you can find examples of app designs that offer “amazing, aptly-executed side menus with great functionality and interaction abilities.

Learn how to create a slide menu for iOS prototypes here, and see and interact with the below example here.




As always, the ability to think from the user’s perspective when defining an interface – be it content, layout, transitions or navigation – will help you create mobile apps that feed the expectations of the user. Empathy is a must-have trait for any UX designer. Download Justinmind today and discover how you can improve your mobile app’s navigation by using interactive prototypes that really look like the real deal!


Emily Grace Adiseshiah

About the Author

Emily is Marketing Content Editor at Justinmind

Comments are closed.