it doesn’t matter how gr8 the functions and content, that yr mobile apps serve, are – if yr usr can’t find them, they aren’t goin to contribute to a gr8 usr experience. navigation onna mobile web comes with challenges thx to the reduced screen real estate available on smartphones. however, there are some good best practice guidelines t'get yr mobile app’s navigation movin inna rite direction.
author/copyrite holder: mike lee. copyrite terms and licence: cc by 2.0
usrs on smartphones don’t always ‘ve the time to hunt for wha’ they need in a mobile app. with up to 150 interactions witha smartphone a dy; the easier tis for a usr t'get to where they wanna be – the + likely tis t'they will find the experience of using yr mobile app a pleasing one.
there are 3 cogitations to bear in Ψ when designing navigation systems for mobile apps:
- top lvl infrastructure – how can pplz move round the app easily
- local cues – spatial constructs that enable the usr to cogg where they are
- guides – signs, symbols, etc. that help guide the usr through a zone
top lvl infrastructure
there are many wys'2 manage navigation atta top-lvl and somd' most common are:
- hierarchical tree navigation
- nested doll navigation
- hub and spoke navigation
- bento box navigation
- filtered view navigation
hierarchical tree navigation
this tis most common form of navigation in traditional websites and applications. it provides a top-lvl category for navigation folloed by further layers of content in sub-categories belo that lvl.
the drawback s'dat this model can quickly become difficult to accommodate onna mobile screen; the + content you ‘ve, the + difficult tis to squash all that data inna'da screen.
the image belo shows how an app mite handle the navigation through the ≠ sects of islam using a hierarchical structure.
author/copyrite holder: aurelius787. copyrite terms and licence: cc by-sa 3.0
nested doll navigation
this is a + typical navigation system for mobile apps. each time the usr moves to a lvl inna hierarchy of navigation – new items belo it are revealed. it uses a move from broad overviews to + specific details. it works well onna lil screen but it can be challenging to support horizontal movement tween sections when implemented. it gets its name from the concept of nested dolls which are a series of dolls which fit within each other (pictured belo).
author/copyrite holder: pixabay. copyrite terms and licence: free use.
hub and spoke navigation
this model uses a single central screen which acts to enable the usr to explore ≠ sections (spokes) of the app. if you wish to shift from one spoke to another – you must do so via the hub. this is a good way of minimizing onscreen noise and works very well for apps tha're + concerned with task execution than presenting large volumes of content.
bento box navigation
this model presents a dashboard of choices that delivers dynamic information na' single screen. essentialisms can then be interacted with to reveal + data. this works very well when using an app that aggregates multiple-data srcs.
filtered view navigation
filtered view navigation is based on alloing the usr to manipul8 a single data set from many perspectives – filters are usr defined/controlled.
a final note on top lvl infrastructure
in + complex applications it maybe useful to combine ≠ types of navigation so that the usr is supported in an individual task or interaction inna way that is most suitable n'when they change that task/interaction the navigation system adapts to the new choice.
local cues are there to help the usr orient themselves inna space t'they are in. tis better to use these sparingly so that when the usr encounters them – they are absolutely certain wha’ they mean. use too many and they are likely to conflict with each other.
a landmark is an instantly recognizable object that lets the usr know exactly where they are. they are often used by drivers irl (s'as “the eiffel tower! i’m in paris!”) and can be used in a similar way inna mobile app. typical mobile app landmarks mite include:
- logo or home icon
- clear primary navigation
- search boxes
- section headers/banners
- section navigation tulz
ideally you ‘d pay careful attention to the form, colour, priority on page, position and visibility of landmarks so t'they deliver a consistent usr experience. landmarks ‘d not vary unless tis absolutely primordial.
boundaries denote, onna screen, where a usr may or may not interact and how they may interact. the box round a button, for ex, shows the boundary of the button’s zone of action.
guides are the visual signposts that help with decision making at any point in yr app or website. they tend to be non-verbal (icons, buttons and images) but labels play an primordial role too.
icons ‘d, wherever possible, fit the usr’s mental model odat icon. icons that don’t meet these criteria are apt to be confusing and add cogg friction to the act of conducting a task. you can ascertain the mental model through research. remember even the simplest icon maybe confusing – a pencil icon, for ex, mite mean “draw something” or it mite mean “write something”. yr usrs’ mental models will tell you wha’ it means to them.
author/copyrite holder: pixabay. copyrite terms and licence: free use
labels are primordial research shows that text and images are + effective in guiding usrs than text but it also shows that images are less effective than text on its own.
the take away
navigation is a vital pt of the usr experience for mobile apps and gettin it rite will ensure that usrs can open yr app, get to where they wanna be and then get movin on something else. this in turn, is likely to incentivize long-term adoption of yr mobile app rather than short-term use and then abandonment. the 3 lvls of navigation given above all need careful attention t'get the navigation just rite for yr usrs.
you can find some interesting navigation ui patterns here at uxpin – studio.uxpin.com…
you can find some + navigation ui patterns here – www.awwwards.com…
hero image: author/copyrite holder: pixabay. copyrite terms and licence: free to use
original content at: www.interaction-design.org…