Design your way

Looking at mobile interface design, it is easy to conclude that navigation tabs are the most common components there.

Usually displayed on a neatly placed tab bars, user interface tabs help us switch between views and bring our mobile app to life.

If designed properly, these tabs will be everything you need to keep the interface under control, and to improve your usability rates.

Tab UI design refers, in short, to objects and ideas that enhance interaction, and let the user familiarize with app immediately. Thus, tab design is an excellent example of a successful UI metaphor, which replicates closely how users interact with products in real life.

For instance, building index card mobile menus comes quite close to building an actual catalogue, alike the one you already offer to local customers.

When executed properly, navigation tabs will have the following effects:

Navigation will become self-evident. Mobile navigation bars should always be easy to find, as they play the role of main interface controls. They must account for the actual visual appearance users will get, and enable them to distinguish the ones they need.
Content will become more organized. Navigation tabs are also useful to organize content and divide it in logical sections, so that the already packed mobile screen won’t look cluttered. Mobile navigation bars and tabs build a bridge between the content and the desired view, and reinvent the concept of active UI space and easy access.
The app will look more visually consistent. Ever wondered what it is that makes mobile apps so popular? If settling for nothing less than first-class tabs design, you should make it possible for users to prioritize, and understand immediately which the leading piece is and what they can do with it.

Mobile navigation bars and tabs: Which are the differences?

Tabs and navigation bars are often confused for each other, and that’s because they look very similar. The difference between them is rather cognitive, as tabs are somehow interrelated and dependent on each other, while mobile menus are not.

Users will find it challenging to differ between them, but only until data is displayed in the tab or to the parent. In the navigation bar this may as well be a whole different action that has nothing to do with his search.

Tab UI design and when to use it

When categorizing sibling views

When arranging content in several different tabs or bottom navigation bars, make sure you’re following your organizational principle, and making each tab different and independent from the others.

For instance, there should be a tab for administration settings and one that lists the sections of your newspaper – both have a primary role, but are completely mutually exclusive.

This gives tab design an additional role you might have underestimated – they make it possible to shift between views and predict with ease what the content of a particular category is, without having to alternate their search or navigate to another area.

Parallel content

Most of the time, users won’t be interested to see the content of other tabs in parallel, but only for as long as they are not comparing multiple tabs at once.

If you think people would be interested to compare your content, skip tabs altogether, as asking users to switch back-and-forth will burden the memory load and compromise usability.

Filters and scope bars

An idea to arrange tabs is to embed an entire scope bar, so that users can see all fields and categories they can search through.

It is exactly tabs that mark data as ‘related’ or ‘not related’, as it is in the case of Apple’s AppStore (a dedicated view for each app that contains tabs on reviews, sib-views, and details).

Making tab design more useful

Placement tips – tabs on top of the screen

The rule of thumb says that you should always list tabs on top of the screen, rather than the bottom.

This means paying respect to the natural hierarchy of things (starting from the top and moving towards the bottom), and following the usual direction in which the human eye is scanning listed content.

Marking the active tab

A common mistake in many app menus is failing to show users where they’re currently located. For successful navigation, you should always highlight an active tab, be that with colours, underlines, or other visual indicators. What designers also do is to enable a boldfaced label for the tab in action.

Always pre-select a tab

As an app designer, you’re probably familiar with the fact that a tab must be selected at all times to keep the rest of them visible. Better yet, preselecting a tab helps users understand how to navigate the menu, and not feel lost in the meanwhile.

Put tabs in order

You need to arrange tab labels logically to give users a sense of order and professionalism. The use of your app and the options it provides will determine how that order should look, but you should always take into account the preferences of your future audience.

Use understandable labels

The reason why we use tabs and not large text boxes is to make content easy to understand, and give users the idea of what they’d see by clicking on a particular tab. This can be achieved with attractive and clear labels that give tabs a meaning:

The language should be plain and on-point, and without terms that mean nothing to users.
The text should be short and concise (if you need longer labels, it may be that tabs are not your ideal solution).

Using icons with care

Tabs should be described with plain text or an icon, not both of them.

If you’ve opted for icons, you must use familiar ones whose usage will depend on semantic meaning, not on how those icons look.

In such way, the UI of your app will make more sense, and provide clear visual cues of where users should search for specific information. Designers already know the challenge of coming up with unique, yet understandable and descriptive icons, and that’s why so many of them use text instead.

Don’t nest tabs in multiple rows

The rule is simple – you don’t need more than a single row of tabs. Adding more rows will just complicate navigation for your users, so try to fit all essential ones in a single line.

When tabs are nested too close to each other, the effect is a lot of visual clutter to deal with. Users cannot properly track the relationship between the tabs (or remember those they’ve already seen), and you’re spatial memory is seriously affected.

Proper tab sizing

If you want a target to be seen and tapped, make it large enough. Calculate the average width of each tab, and you will see how many of them you can accommodate on a single page.

Keep unselected tabs visible

The more visible and readable unselected tabs are, the clearer it will be to the user that there are additional options he can explore.

Therefore, don’t move tabs out of sight once a single one is opened, as their features may remain hidden from the user’s sight forever.

Tabs that reveal a sub-set of additional options should be easily scrollable, and that’s the only exception of tab visibility you can consider. Keep in mind that this affects reversely the efficiency of your content, as users have to scroll repeatedly to find the option they need.

Consider the scrolling direction, and hide tabs depending on it

Mobile apps will often come with multiple sections and pages, but you can’t afford the luxury of adding an extra row/button on limited mobile real estate.

Instead, you can introduce a scrolling feed that hides the tab bar while users are scrolling for additional content, and make it appear only once they’ve moved towards the top. Still, A/B test this mechanism in advance, so that you will be sure that users’ behaviour is not limited.

Control transitions with slide animations

If you want users to understand that clicking on a tab won’t take them too deep into the app and interrupt their experience, you should skip animated transitions. Instead, the animations should reflect that those apps are close to each other and similar, in which case sliding animation could be an idea.

Users will also like it, as it encourages them to move between the tabs with simple swipe gestures.

Why do you need swipe gestures

Simply because swiping is easier than tapping! Swiping doesn’t require the user to move towards the top of the UI, and shortens the time it takes him to reach the content he wants.

Keep tabs consistent

An unavailable function doesn’t mean that you have to remove the entire tab. Of course, there will be cases when you need to do this, but try keeping it as rare as possible to preserve the stability and predictability of your service. In short, keep the tabs enabled and let users know why a function is not available.

The Modspot App, for instance, lets users add missing information themselves (a feature known as Empty state). A good example of how that works is a music app that suggests users to upload missing songs.

Bars, on the other hand, serve no other purpose than navigation. They should not be touch-sensitive and enable actions, as this may disrupt your control on what the user gets to see or use. Toolbars are a much more suitable solution for that.

Another thing you should definitely avoid is overwhelming users with tabs and choices. This comes without saying, as tabs do occupy valuable space and selection areas, but they also make your app more complex to use and information more difficult to find.

Adding more tabs feels like a vicious circle – once you do it, you’ll need to display more and more explanatory content, and end up with no space whatsoever. Three to five tabs is the generally accepted rule for both Android and iOS apps.

Enhance communication with badges. These useful elements can fit in the extra text and explanation points, and indicate that there is additional information related to what the user is viewing or looking for.

In an attached view, try always to switch the context, as in this way you will offer a predictable interface and actions that can only be performed in one place rather than everywhere on the screen. For instance, when the user taps on a tab located on his left hands side, this should not cause any changes on what he’s got offered on the right side. If you lack space to execute an idea like this, think of adding changing pop-ups.

Navigation tips

So far, we got to the point that tabs facilitate navigation, but that’s true only for as long as you’re following a user’s typical path for addressing a particular action.

Think of a booking app, for instance. The usual actions here would be ‘Book now’ or ‘Special offers’ but before you jump up with tabs like these, you have to build an interface that helps users understand what they can do with your app. This will also require arranging content in categories.

Data segmentation

Another interesting way to put tabs into action is to use them to break content in smaller and more manageable tabs. This will make content discovery more efficient, as what you’re using are actually high-level filters that cover topics rather than general categories. There is nothing better than giving the user a right to choose.

Arranging options in a logical manner

As well-informed and experienced as users are nowadays, you can’t risk not telling them what options they have available. Basically, you’re taking communication down to a personal level, and you manage to cover all those cool options you thought users would like. Returning to the music app, you can offer several genres as options and tab items, and let the user know what you have to offer.

Manageable chunks of content

Even when you don’t think there is a need to divide content in categories, use tabs to create smaller and more manageable groups. Make sure the items without self-explanatory connections are not mixed.

Preserve the context, and use tabs that indicate different views instead of moving users to different areas.

This is your first and main priority, because tabs were actually designed to keep the user in the same place, and yet let him alternate the views.

Of course, your content should be grouped logically and predictably, so that users know exactly what is expecting them, and card sorting is a great way to achieve that.

Tabs will only work in cases where users are not attempting to open content from several tabs at the same time.

In case it is important to them to compare the information of these tabs, you’ll be forcing them to switch back-and-forth, and challenge their short-term memory.

Another risk is that you’re making them wonder whether it is useful to invest time in such interaction, and making the app automatically less usable than it would be with content neatly packed on one page.

Thus, the tabs you’re designing should be parallel in nature. With a visible dissimilarity, users may misinterpret the directions you’re providing them.

The tab that is selected should be highlighted in a prominent and noticeable way, so that users know exactly what they’re doing.

Highlighting, however, is only one part of the process. Additionally, you can use sizing to mark different tabs, or even icons and boldfaced labels to make them appear bigger. Such signals are particularly helpful when users have only two tabs to work with.

At the same time, you should keep the unselected tabs easy to find and read, so that users know they have additional options. Blurred or faded tabs simply blend with the background, and it may happen that users never click on them.

Establish a connection between your tabs and your content, the same way you would with actual index cards. In such way, users will always know which panel they’re looking at, and which tab they’ve selected in a larger row.

Make tab labels short, and use plain and simple language rather than terms that mean nothing to a novice visitors. One to two words will suffice for users to scan the content, as longer labels may disrupt your tab controls.

Don’t write tab labels with CAPS. Regardless of how you’ve imagined your mobile interface, CAPS will cause reading difficulties, and an unwanted feeling of complexity. If it is a single, short word, this may not matter, but preserving a unified capitalization style is still a better idea. Once you’ve chosen it, stick to it.

A single row of tabs is enough. In order to add more of those, you’d have to skip important UI elements and lose valuable memory, and still not have a bunch of satisfied users that would conform remembering your app.

To start with, the row with tabs should be placed above the tab panels, as in all other place it may be overlooked.

It is with visual design that you show users which is the scope of controls a tab will reveal, kind of as if they were filtering a drawer of index cards or an actual catalogue. As simple as it is – they must know where they’re going, and what they’re going to see.

The thing about tabs is that they always look and work in the same way; as such consistency in GUI controls gives users the feeling that they’ve mastered your app. These are the consistency considerations

Recognizability. Important actions and destinations should always look the same, regardless of where in the app they are to be found. If users know how something is supposed to look, they will have no troubles finding it.
Predictability. Users want that things will always work in the exact same way, so avoid complex patterns that could confuse them.
Clear goals. You should use your previous knowledge to decide which the available features will be, and compose the exact kits of actions users need to achieve their goals.
Efficiency. Users should not spend time learning how to use your features, or feel as if your content was inconsistent and unclear.

Mobile UX design: The basics of bottom navigation

The first thing a successful mobile designer would tell you is that there is much more to design than good looks. Design also handles user engagement, be that a website, an app, or a product. Good navigation is like a two-way conversation – the look of the app will be worth nothing if a user can’t understand it.

The importance of bottom navigation

Steven Hoober’s research on mobile device usage revealed that almost 50% of people complete important actions on their phones with a single tab.

All frequently used and top-level actions should be placed on the bottom of the screen, so that the user can reach them comfortably, and with a single thumb interaction.

Tab bars

The tab bar is in fact your bottom navigation bar where designers believe they should place all most important destinations and features.

For instance, you’d have all core Facebook functionality available with a single tap, and be able to switch between features with unparalleled ease.

The three critical moments in bottom navigation design

When making an app, think of navigation as the moving engine that directs users where they want to be.

Prioritize between destinations, and use the bottom navigation only for top-level actions and destinations (such users may wish to come back to wherever they are in the app).

If you want your bottom navigation design to be successful, consider this basic rule: Give priority to important destinations

A bottom navigation bar should have three to five destinations the most. If there are fewer destinations, tabs will be enough.

You don’t need more than 5 destinations on the navigation bar, as it can make it look too cluttered and with little space to tap on. Your app will not only become more complex, but also physically challenging and unattractive for future users.

In case you have a level navigation bar placed on top of the screen, and which offers more than actions/destinations, offer the other ones as bottom alternatives.

Scrollable content – Yes or no?

It is usually mobile UI designers that opt for hidden navigation, as it saves them some extra space.

To cover for the issue, they usually attach a scrollable bar (where efficient, because with lots of content the user has to scroll big time to get where he wants to be).

Locations

You’d be surprised to know how many great apps fail because of location miscommunication. On the user’s side of your coin, it happened to you to that you were not sure where an app has directed you, which means that navigation was not successful at all.

As a user, you deserve to know exactly how to move from point A to point B, and conclude this at first sight rather than with complex guides and tutorials. As a designer, you should make this happen with clear visual cues alike colours, icons, and labels.

Icons

The actions presented on your bottom navigation bar will be displayed as icons, and you should only use them for content that can be neatly communicated that way (printing, emailing, rating, searching, and so on).

The challenge here is that no one will suggest ‘one-size-fits-all’ icons, but there are many good examples that will give you the idea of how it works.

Colours

Regardless of how many tabs you have, don’t use too many different colours and icons in the same tab bar. On the opposite – choose a single colour, and work around its variations to indicate the status of the tabs.

The rule is simple – the colour you’re using to tint the current navigation tab (including the text and the icon inside) should be the primary colour used in your app.

If you have a bottom navigation bar that is already coloured differently, use white or black to indicate the user’s current action.

Tab bars in mobile UI design

UI design helps users in accomplishing various tasks on their mobile devices. The user-friendly tab bar enables its users to navigate and perform multiple functions in an efficient and simple manner.

Unlike its counterparts, the tab bar design allows for simple navigation with well-defined, easily identifiable tabs. As the core of a UI design is its functionality, the many favorable facets of the tab bar design are undoubtedly what make it most prominently used in UI design.

Tab bars’ navigation schemes are most efficient as they allow app developers to produce compound views with sub-views encompassed within each view. This permits users to easily complete tasks without irrelevant and cluttered information appearing on their screens. In selecting each tab, users are able to maneuver effortlessly between common views on their apps, such as their profile, settings, and activity feed.

The majority of tab bars contain between two to five tabs, each tab with a specific glyph icon to supplement it. There are a growing variety of design schemas available offering new design styles for tab bars.

To further explore these navigation UI designs, I have assembled a collection below that displays several of the top tab bar designs. This display is a beneficial learning aid and inspiration to any user interface designer as it showcases the quality the tab bar UI design has to offer.

Speed Detector

Category Page

Travel App: iPhone

App Upload Ui-2

Tab Bar Exercise

Drickit

Analytics

Proof of Concept WIP

Dog App Updates

an app (profile)

Tab Bar

Location based auctions app

Qiwy iOS/iPhone app curl test

Viva tree: eco

Iphone UI

Ending thoughts

At the beginning of a promising app design projects, tabs are not exactly the most interesting graphical aspect the creator wants to deal with. But as it is explained both here and in practice, much of how users interact with apps’ content depends on tab. Tabs are not only useful, but also empowering and supportive.

This, however, is also the reason why designing tabs happens to be the weakest point of your app’s health check, and should be tested multiple times to ensure users can interact with it. In case you’re examining different in-page operations, and conclude tabs are rarely used, compare what you’ve done to the rules and guidelines discussed in this article.

A quick A/B test here and there will help you redesign your tabs upon need, and stay in line with users’ expectations.

Following the steps and guidelines discussed here will help you optimize and explore the tab art without any guesswork, paired with the knowledge if your audience’s behaviour and expectations. Tabs will have no value or purpose unless they meet your business goals, so make sure they’re worth the effort.

If you liked this article about tab bars in mobile UI design, you should also check out these articles:

The post Tab Bars In Mobile UI Design: Showcase of Impressive App Designs appeared first on Design your way.

Source: http://ift.tt/1vgN3TC

Pages

Web Design