登录查看更多内容

What are the pros and cons of using icons, labels, or both for your mobile bottom navigation items?

由人工智能和领英社区提供技术支持

Mobile bottom navigation is a common design pattern for mobile apps that allows users to access the main features or sections of an app with a single tap. However, choosing the right way to present the navigation items can be tricky. Should you use icons, labels, or both? In this article, we will explore the pros and cons of each option and how to make the best decision for your mobile app.

此文章中的业界达人

由社区从 3 条内容中精选。了解更多

1 Icons only

Using icons only for your bottom navigation items can save space, create a minimalist and elegant look, and support internationalization. Icons can also convey meaning faster than words and appeal to the visual learners. However, icons also have some drawbacks. They can be ambiguous, confusing, or unfamiliar to some users, especially if they are not standard or intuitive. Icons also require more cognitive effort to remember and associate with the corresponding functions. To avoid these problems, you should test your icons with your target audience, use clear and consistent symbols, and provide feedback or hints when users interact with them.

添加您的观点

Darren Northcott

User Experience, Product Design & Outdoorsman
举报内容
It's not just about ambiguous icons, yes, you should do research on the icon glyph itself, but something to consider is how that icon is designed. Is it stroke only? Fill? Both? Is the stroke weight easily visible to someone with less than perfect eyesight? Does the colour of the passive/active state follow contrast guidelines for accessibility? Not to mention whether the same icon means different things in different countries/cultures. Other things to consider outside of accessibility are how are the icons developed? Do you use a library, or create custom icons? If custom, can this icon set be easily expanded if a different designer takes over? It's important to keep brand guidelines and integrity in mind as well.

已翻译

赞
Jeff Johnson

Lead Product Designer & Director of Design, ex Dell, Solarwinds
(已编辑)
举报内容
If you're going to use icons only, a common pitfall is trying to design a new, or custom icon. Although new or custom icons may look great, they may not be the most intuitive. I find that using the industry standard or most common basic icon can help a user understand what action they should take.

已翻译

赞

2 Labels only

Using labels only for your bottom navigation items can provide clarity, context, and accessibility. Labels can communicate the purpose and function of each item more explicitly and accurately than icons. Labels can also help users with low vision, dyslexia, or language barriers to understand and navigate your app. However, labels also have some limitations. They can take up more space, create a cluttered and boring look, and limit internationalization. Labels can also be harder to scan and read than icons and require more attention and time from users. To avoid these issues, you should use short and descriptive words, choose a legible and consistent font, and avoid abbreviations or acronyms.

添加您的观点

3 Icons and labels

Using icons and labels for your bottom navigation items can offer the best of both worlds. Icons and labels can complement each other and provide redundancy, which can improve usability and accessibility. Icons and labels can also balance the visual and verbal aspects of your app and create a more engaging and appealing design. However, icons and labels also have some trade-offs. They can consume more space, create a crowded and overwhelming look, and increase the complexity and maintenance of your app. They can also create redundancy, which can be unnecessary or distracting for some users. To avoid these pitfalls, you should use simple and relevant icons, use concise and meaningful labels, and align them properly and consistently.

添加您的观点

Jeff Johnson

Lead Product Designer & Director of Design, ex Dell, Solarwinds
举报内容
Having icons and labels would be my first choice in terms of usability and accessibility as well. Keep the label character count low. Test the icons to see if users can guess the correct label text. In terms of good horizontal margins, I would keep your navigation to no more than four items. Personally, I'm okay with a navigation taking up a couple more pixels of height. The bottom navigation usually leads to the 3-4 of the most common functions of an app; It's okay to give it a comfortable amount of vertical space.

已翻译

赞

4 How to choose

When deciding on the right option for your bottom navigation items, there are several factors to consider, such as your app's purpose, content, audience, and brand. Questions to ask yourself include: what are the main goals and functions of your app? How many navigation items do you need and how are they related? Are your icons or labels familiar and recognizable to your users? What is the available space and how do you want to use it? How do you want to convey your app's personality and style? There is no single solution for mobile bottom navigation design; you should experiment with different options, test them with real users, and assess them based on usability, aesthetics, and performance.

添加您的观点

5 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Mobile Design

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

What are the pros and cons of using icons, labels, or both for your mobile bottom navigation items?

1

2

3

4

5

1 Icons only

2 Labels only

3 Icons and labels

4 How to choose

5 Here’s what else to consider

Mobile Design

给文章评分

感谢您的反馈

更多Mobile Design相关文章

更多相关阅读内容

What are the pros and cons of using icons, labels, or both for your mobile bottom navigation items?

1

2

3

4

5

1 Icons only

2 Labels only

3 Icons and labels

4 How to choose

5 Here’s what else to consider

Mobile Design

给文章评分

感谢您的反馈

查看其他技能