User interface design for mobile navigation

RSS Author RSS     Views:N/A
Bookmark and Share         
When designing user interface designs of applications for mobile devices you have to think about different things. You have to define what functions the user interface design should include, what the application should look like and how the content has to be organized. Navigation is one of the most important parts of an application, as it doesn’t only impact the graphical user interface design of your application, but also how the customer will use it. Navigation can make the difference between your user finding the information they want or not. It can also dramatically affect conversion on your website. With mobile devices, navigation and principles of information architecture are different from software and websites designed for desktop applications.

User interface design – ‘Hub and Spoke’

One way of organizing content of a mobile application is called ‘hub & spoke’. Even if you haven’t heard of the name, I am sure you all know it. It’s the typical navigation architecture of iOS devices. In an overview, the so-called ‘hub’, you see all the different functionalities of the application and then chose which ‘spoke’ you want to use. This user interface design pattern is suited for apps which have quite separated functions. One drawback of this type of navigation is that it dramatically limits multi-tasking as the user always has to return to the hub to change which section they would like to return to.

Tab user interface design

A user interface design suitable for multitasking is the tabbed view. There all the different sections are visualized on the bottom of the application as tabs, and the user can easily change between them. One disadvantage of this design pattern is that complexity isn’t easy to realize. ‘Nested doll’ is a user interface design where content is reachable in steps, it gets more detailed with every click. This user interface design is often used within other design patterns such as ‘hub & spoke’. In one section you then get to more specific content by clicking on a subcategory. This navigation architecture also isn’t suitable when the user is supposed to do different things at one time as for changing the section he has to return to the starting point. One last type of user interface design pattern I want to talk about is the hierarchal one. In this structure content is organized in categories and subcategories. This type of navigation is good for applications with a lot of complexity, but can’t be recommended for devices with small screens, because it needs a certain space to visualize content this way.

What user interface design is the best?

There is no best way of navigation for your user interface design. To decide which design pattern is suitable for the specific app you’re working on, you have to think about its functions and complexity and how you want the user to navigate it. Think about your user and how they will use your application. Will it be disruptive for them to switch between tasks, or will they be carrying out the same task for an extended period of time? If in doubt, making a mockup of your user interface design with the navigation included can help you come to a conclusion. Show this to users and see how they respond in user testing. Remember, navigation should be functional, so initially don’t worry about the graphic design, and focus on the user experience.


About the Author:

================= – User Interface Design, Wireframe, Wireframes, Wireframe Software, UI Prototyping, Interface Design Software, Online Wireframe Tool, Wireframe Tool, GUI Prototyping, Clickable Wireframes, Usability Testing and Digital Paper Prototyping.

Report this article

Bookmark and Share

Ask a Question about this Article