Mobile UX/UI Design
15 min
10 lessons & 10 exercises
Transform your mobile app design skills with our interactive mini course
Start Learning
15 min
10 lessons & 10 exercises
Transform your mobile app design skills with our interactive mini course
Correct!
Option A is the better choice for mobile UX because it uses the hamburger menu icon, which is a well-established convention for mobile navigation. This icon saves valuable screen real estate and allows for a clean and uncluttered interface. When users click on the hamburger menu icon, they expect to see a list of items hidden under the icon, which is exactly what Option A does.
On the other hand, Option B displays a list of items on mobile, just as they are displayed on desktop view. This approach is not optimized for mobile, as it takes up too much space and makes it difficult for users to navigate the site on smaller screens. This can lead to a poor user experience and frustration, ultimately leading to a higher bounce rate.
Incorrect
Option A is the better choice for mobile UX because it uses the hamburger menu icon, which is a well-established convention for mobile navigation. This icon saves valuable screen real estate and allows for a clean and uncluttered interface. When users click on the hamburger menu icon, they expect to see a list of items hidden under the icon, which is exactly what Option A does.
On the other hand, Option B displays a list of items on mobile, just as they are displayed on desktop view. This approach is not optimized for mobile, as it takes up too much space and makes it difficult for users to navigate the site on smaller screens. This can lead to a poor user experience and frustration, ultimately leading to a higher bounce rate.
%20(1).webp)
Another popular navigation pattern is the hamburger menu. The hamburger menu is a three-line icon that is typically located in the top left or top right corner of the app. When tapped, it reveals a hidden menu that contains the app's primary navigation items. This pattern is a good choice for apps that have a large number of navigation items, as it allows the app to display a lot of content without cluttering the screen. This is particularly useful in mobile devices, where screen size is limited. However, it is important to note that the hamburger menu should not be overused and should only be used to hide secondary navigation options, not primary ones.
Correct!
Incorrect
Correct!
Tabs in Option A group unrelated items such as music, settings, and help in the same tab set. This design can be confusing for users as they may expect to see related content under each tab, but instead, they will be taken to completely different views, leading to a disjointed user experience.
On the other hand, option B is correct because it groups related items, in this case, different genres of music, under the same tab set. This design helps users quickly find the content they are looking for, improving the user experience.
Incorrect
Tabs in Option A group unrelated items such as music, settings, and help in the same tab set. This design can be confusing for users as they may expect to see related content under each tab, but instead, they will be taken to completely different views, leading to a disjointed user experience.
On the other hand, option B is correct because it groups related items, in this case, different genres of music, under the same tab set. This design helps users quickly find the content they are looking for, improving the user experience.
.webp)
Tabs are a popular user interface design pattern in mobile apps that allow users to navigate between different sections of an application with ease. Typically located at the top of the screen, tabs offer a clear and intuitive way for users to switch between different categories of content, features, or functions. Tabs are especially useful for apps with a lot of information to display, as they help users quickly find the content they're looking for without having to scroll through long lists or menus.
Tabs typically group related items and allow users to navigate between them within the same view. When a user clicks on a tab, they expect to see related data to the parent or the opened tab, and they don't anticipate being taken to a completely different view with no related data. This is in contrast to the bottom navigation, where users expect to be taken to a separate view, which may or may not be related to the current view.
Correct!
Incorrect
-min.png)
-min.png)
Correct!
Option A is the optimal choice for two key design reasons. Firstly, the "Discover" tab, which is the most important tab, is placed as the first tab in the navigation. This decision enhances usability, prioritizes the user's primary actions, and simplifies the user experience by making it easier for them to locate and engage with key features. Secondly, Navigation A has clear labels for each tab, which creates a more intuitive navigation experience and reduces friction in the user's journey by explaining what each tab is for.
Option B, although lacking labels which can be acceptable for certain audiences and easy to recognise tabs, has an incorrect order of tabs with the less important "Notification" tab placed as the first tab, hindering the user's primary task and creating a negative initial experience.
Incorrect
Option A is the optimal choice for two key design reasons. Firstly, the "Discover" tab, which is the most important tab, is placed as the first tab in the navigation. This decision enhances usability, prioritizes the user's primary actions, and simplifies the user experience by making it easier for them to locate and engage with key features. Secondly, Navigation A has clear labels for each tab, which creates a more intuitive navigation experience and reduces friction in the user's journey by explaining what each tab is for.
Option B, although lacking labels which can be acceptable for certain audiences and easy to recognise tabs, has an incorrect order of tabs with the less important "Notification" tab placed as the first tab, hindering the user's primary task and creating a negative initial experience.
%20(1).webp)
Limit the number of items: Keep the number of items in the bottom navigation to a maximum of 5. Having too many items can make it difficult for users to find what they are looking for and can clutter the interface.
Use clear and concise labels: Use short, simple, and descriptive labels that clearly communicate the purpose of each icon.
Provide visual feedback: Provide visual feedback when an item in the bottom navigation is selected, such as changing the color of the icon or label. This helps users understand which item is active and where they are in the app.
Prioritize the most important items: Place the most frequently used or important items in the bottom navigation. This makes it easier for users to access the primary functions of the app.
Avoid using different colored icons and text labels: Instead use the app’s primary color to indicate the view in focus.
Correct!
Incorrect
Correct!
Option A and Option B both have good usability attributes such as appropriate use of white space, understandable icons, and a maximum of five tabs. However, there are important differences in how they handle the primary action of creating a new order.
In Option B, the "create new order" button (represented by a plus icon) is on the same level as the other icons, with no extra emphasis placed on it. While this design choice meets the basic criteria for good navigation, it may not be as intuitive for the user to locate and access the primary action of creating a new order.
In Option A, the "create new order" button stands out visually from the other actions. It's larger and has a prominent color (orange), which matches the other calls to action on the screen. With these attributes, it is evident that creating a new order is the primary action of this screen, and users can easily locate it and focus their attention on it.
Incorrect
Option A and Option B both have good usability attributes such as appropriate use of white space, understandable icons, and a maximum of five tabs. However, there are important differences in how they handle the primary action of creating a new order.
In Option B, the "create new order" button (represented by a plus icon) is on the same level as the other icons, with no extra emphasis placed on it. While this design choice meets the basic criteria for good navigation, it may not be as intuitive for the user to locate and access the primary action of creating a new order.
In Option A, the "create new order" button stands out visually from the other actions. It's larger and has a prominent color (orange), which matches the other calls to action on the screen. With these attributes, it is evident that creating a new order is the primary action of this screen, and users can easily locate it and focus their attention on it.
%20(1).webp)
Bottom navigation is a type of navigation design commonly used in mobile apps. It refers to the placement of navigation elements at the bottom of the screen, typically as a row of icons or labels, that allows users to quickly access the main features or functions of the app. Bottom navigation is often used in conjunction with other navigation patterns, such as tabs or swipe gestures, to provide a comprehensive and intuitive user experience.
Bottom navigation is especially useful for mobile devices because it allows users to easily reach the navigation elements with their thumbs, without having to adjust their grip or use their other hand. It also provides a visual hierarchy that helps users understand the structure and content of the app. However, it is important to design bottom navigation carefully, taking into account the number of items, the size and position of the icons or labels, and the overall visual style of the app.
Correct!
Incorrect
Correct!
In option A, placing the back button in the bottom navigation bar is not a good UX practice for a few reasons. First, it goes against platform conventions, which can lead to confusion and frustration for users. On both Android and iOS, the back button is typically located in the top left corner of the screen. Users have become accustomed to this placement, and deviating from it can create a cognitive load and slow down the user's flow. Secondly, the bottom navigation is typically reserved for primary actions and features, and adding a back button can clutter the navigation and make it harder for users to distinguish between primary and secondary actions.
Option B provides better experience because having the back button in the top navigation provides a more consistent and expected user experience on mobile devices.
Incorrect
In option A, placing the back button in the bottom navigation bar is not a good UX practice for a few reasons. First, it goes against platform conventions, which can lead to confusion and frustration for users. On both Android and iOS, the back button is typically located in the top left corner of the screen. Users have become accustomed to this placement, and deviating from it can create a cognitive load and slow down the user's flow. Secondly, the bottom navigation is typically reserved for primary actions and features, and adding a back button can clutter the navigation and make it harder for users to distinguish between primary and secondary actions.
Option B provides better experience because having the back button in the top navigation provides a more consistent and expected user experience on mobile devices.
%20(1).webp)
Navigation design is a crucial element of mobile user experience (UX) design. It refers to the design and arrangement of navigational elements within a mobile app or website. These navigational elements allow users to move around and discover the various features of the app or website.
Effective navigation design is essential for providing users with a seamless and intuitive experience. It helps users to quickly and easily find what they are looking for, and can greatly impact the overall usability and user satisfaction of the app or website.
There are various navigation patterns that are commonly used in mobile apps, each with its own strengths and weaknesses. We will cover the different navigation patterns - bottom navigation, tabs and hamburger menu - and how to choose the right one for your app.
Correct!
Incorrect
Correct!
The correct answer is B. Skeleton screens are a better approach to providing feedback during the loading process for mobile users because they give users an idea of what content will appear on the screen and help to maintain the user's mental model of the app's layout.
Incorrect
The correct answer is B. Skeleton screens are a better approach to providing feedback during the loading process for mobile users because they give users an idea of what content will appear on the screen and help to maintain the user's mental model of the app's layout.
%20(1).webp)
In the mobile world, loading times can be even more crucial than on desktop. With users constantly on-the-go and often accessing apps and websites with limited data plans, it's important to optimize loading times and provide clear feedback to users during the loading process.
One popular approach to designing loading states for mobile devices is the use of skeleton screens. Skeleton screens are essentially placeholders that appear on the screen while the content is being loaded. They provide users with an idea of what content will appear on the screen and help to maintain the user's mental model of the app's layout.
Skeleton screens are preferred over traditional spinning loaders because they provide users with a more meaningful and informative experience during the loading process. Spinning loaders, on the other hand, don't provide much context or information to users and can leave them feeling confused or disengaged.
Correct!
Incorrect
Correct!
In Option A, the CTA is thoughtfully positioned within the thumb zone, which is a common area where users' thumbs naturally rest when holding their mobile devices. This placement ensures that users can quickly and easily interact with the CTA with just one hand, making it an excellent choice for mobile design.
On the other hand, in Option B, the CTA is located outside of the thumb zone, which means that users would need to stretch or adjust their grip to reach it. This can cause frustration and inconvenience, especially for users who are on the go or have limited mobility.
Ensure that your primary actions, which are used frequently, are easily reachable, however it may be okay if your secondary or tertiary actions are slightly out of reach, depending on their importance
Incorrect
In Option A, the CTA is thoughtfully positioned within the thumb zone, which is a common area where users' thumbs naturally rest when holding their mobile devices. This placement ensures that users can quickly and easily interact with the CTA with just one hand, making it an excellent choice for mobile design.
On the other hand, in Option B, the CTA is located outside of the thumb zone, which means that users would need to stretch or adjust their grip to reach it. This can cause frustration and inconvenience, especially for users who are on the go or have limited mobility.
Ensure that your primary actions, which are used frequently, are easily reachable, however it may be okay if your secondary or tertiary actions are slightly out of reach, depending on their importance
The thumb zone is a term used in mobile interface design that refers to the area of the screen that is most easily reachable with one-handed use. It is based on the natural movement of the thumb when holding a mobile device, and designers use it to ensure that important interactive elements are placed within this zone for optimal accessibility and usability.
The thumb zone is typically located in the lower half of the screen, with the most easily reachable area being the bottom left corner. This is because most people hold their phone with their dominant hand and tend to use their thumb to navigate the screen. By placing important elements such as buttons, menus, and other controls within this zone, designers can improve the user experience and reduce the likelihood of user errors.
Correct!
Incorrect
-min.png)
%20(1).png)
Correct!
The second option is the correct choice because of its larger and well-spaced tap targets, which contribute to a better user experience. The larger size of the tap targets makes them easier to tap accurately, reducing the likelihood of misclicks or frustrating experiences for users. Furthermore, the tap targets are thoughtfully spaced, ensuring that users can easily distinguish between them and avoid clicking on the wrong button.
On the other hand, the first option has two usability issues that may impact user experience. Firstly, the tap targets have very little space between them. Secondly, the like button is small in size, which may make it challenging for users to click on it accurately. Due to its proximity to other tap targets, there is a risk of accidentally tapping the 'Add' to shopping list button instead of the like button. This could cause users to unintentionally add an item to their shopping list.
Incorrect
The second option is the correct choice because of its larger and well-spaced tap targets, which contribute to a better user experience. The larger size of the tap targets makes them easier to tap accurately, reducing the likelihood of misclicks or frustrating experiences for users. Furthermore, the tap targets are thoughtfully spaced, ensuring that users can easily distinguish between them and avoid clicking on the wrong button.
On the other hand, the first option has two usability issues that may impact user experience. Firstly, the tap targets have very little space between them. Secondly, the like button is small in size, which may make it challenging for users to click on it accurately. Due to its proximity to other tap targets, there is a risk of accidentally tapping the 'Add' to shopping list button instead of the like button. This could cause users to unintentionally add an item to their shopping list.
%20(1).webp)
Tap target is an interactive element on a touchscreen device that can be tapped by the user to perform a specific action, such as opening a menu or submitting a form. Common examples of tap targets include buttons, icons, links, checkboxes, and form fields. The size and placement of tap targets are crucial in mobile design because they affect the ease with which users can interact with an interface. Designers must ensure that tap targets are large enough to be easily tapped by fingers of various sizes, while also providing enough spacing between targets to minimize the risk of accidental taps. The minimum recommended tap target size is around 48 pixels. Smaller tap targets should be spaced about 32 pixels apart, both horizontally and vertically. For example, while an icon may only have a width and height of 24px, you can use spacing to bring the tap target size up to 48px.
Correct!
Incorrect
Correct!
When evaluating the suitability of body text size in mobile UX/UI design, it's essential to consider factors such as readability and user experience. While the second option may seem like a good choice initially due to its smaller font size, it can lead to significant readability issues for users, especially on smaller screens. A font size of 13px may prove to be too small for users to read comfortably, leading to eye strain and frustration.
On the other hand, the first option presents a better solution with a body text font size of 16px, which is within the recommended range of font sizes for body text on mobile devices. This font size provides sufficient legibility and makes it easier for users to read and comprehend the content, resulting in a better overall user experience.
Incorrect
When evaluating the suitability of body text size in mobile UX/UI design, it's essential to consider factors such as readability and user experience. While the second option may seem like a good choice initially due to its smaller font size, it can lead to significant readability issues for users, especially on smaller screens. A font size of 13px may prove to be too small for users to read comfortably, leading to eye strain and frustration.
On the other hand, the first option presents a better solution with a body text font size of 16px, which is within the recommended range of font sizes for body text on mobile devices. This font size provides sufficient legibility and makes it easier for users to read and comprehend the content, resulting in a better overall user experience.
%20(1).webp)
Selecting the right font size for body text can make a significant difference in how users interact with and consume content. Text that is too small can strain the user's eyes and make it difficult to read, while text that is too large can take up too much space on the screen and may require excessive scrolling.
As a general guideline, it's recommended to use a font size of around 16-20px for body text on mobile devices. However, there are exceptions where you may be able to use smaller font sizes, such as when the typeface has larger characters or when using uppercase letters. In such cases, you can go as small as 14px, but it's important to avoid going any smaller than that as it can cause readability issues.
In addition to selecting the right font size, it's also important to choose a font that is legible on smaller screens. Sans-serif fonts are typically a good choice for mobile design as they are clean, simple, and easy to read at smaller sizes.
Correct!
Incorrect
-min.png)
-min.png)
Correct!
In the second option, the smaller font size doesn't provide enough contrast with the body text, making it difficult for users to distinguish between the heading and the rest of the content. Furthermore, the heading is too small, which can cause it to be overlooked by users who are skimming through the content.
In contrast, the first option offers a better solution. With a heading font size of 32px, it falls within the recommended range for H2 font size on mobile devices. This provides a good level of contrast with the body text, making it easy for users to differentiate between the heading and the rest of the content. Additionally, the font size is large enough to grab users' attention, making it more likely that they will engage with the content.
Incorrect
In the second option, the smaller font size doesn't provide enough contrast with the body text, making it difficult for users to distinguish between the heading and the rest of the content. Furthermore, the heading is too small, which can cause it to be overlooked by users who are skimming through the content.
In contrast, the first option offers a better solution. With a heading font size of 32px, it falls within the recommended range for H2 font size on mobile devices. This provides a good level of contrast with the body text, making it easy for users to differentiate between the heading and the rest of the content. Additionally, the font size is large enough to grab users' attention, making it more likely that they will engage with the content.
%20(1).webp)
On mobile, you have less room to display your content. Additionally, users typically hold the devices closer to their eyes than they would a laptop or desktop screen - which means your typefaces can (and should) be smaller than on a desktop.
While large headings have become popular in digital typography, you should be cautious when using them in mobile apps. Although they provide contrast with the main text, using large font size for headings in mobile apps can result in headings being stretched to 3-4 lines with only 1 or 2 words per line. This can make the headings look cluttered and difficult to read.
As a general guideline, it's recommended to select a heading size that contrasts with the body text and fits on average 2-3 lines. On mobile devices, the ideal font size for H1 is typically between 40-48px, while H2 should be around 30-40px. This range allows the heading to be easily readable and stand out from the body text without being too overwhelming.
Correct!
Incorrect
Correct!
Option B has higher contrast which makes it easier for users to read the text on a smaller screen by increasing the difference in brightness and color between the text and the background. This makes the text more legible and easier to read, especially for users with visual impairments or in low light conditions. In contrast, the second design had low contrast and this can make it difficult for users to read the text, leading to eye strain and potentially causing the user to abandon the app or website.
The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text. The contrast ratio is the difference in brightness between the text and the background. A higher contrast ratio means that the text is more legible and easier to read. If you're unsure whether your text is accessible, there are many free online tools available to help you check the contrast ratio between the text and background.
Incorrect
Option B has higher contrast which makes it easier for users to read the text on a smaller screen by increasing the difference in brightness and color between the text and the background. This makes the text more legible and easier to read, especially for users with visual impairments or in low light conditions. In contrast, the second design had low contrast and this can make it difficult for users to read the text, leading to eye strain and potentially causing the user to abandon the app or website.
The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text. The contrast ratio is the difference in brightness between the text and the background. A higher contrast ratio means that the text is more legible and easier to read. If you're unsure whether your text is accessible, there are many free online tools available to help you check the contrast ratio between the text and background.
.webp)
Typography plays a crucial role in mobile UX/UI design as it directly affects the readability and overall user experience. When selecting typography for a mobile interface, you must consider various factors such as legibility, readability, and visual appeal. It's important to choose the right font that suits the interface's overall style and enhances its usability. Good fonts for mobile UI design are ones that are easy to read on small screens and have clear, sharp lines such as Inter, Open Sans, Roboto, and Lato.
Contrast is another important factor when working with typography in mobile design. Choosing colors with high contrast is important for making text stand out and ensuring that users can read the content easily. This is particularly important for users with visual impairments, who may find it difficult to read text that lacks sufficient contrast.
TIP: To create a cohesive and aesthetically pleasing design, use a lighter shade for body text compared to headings. This approach establishes a visual hierarchy and helps to differentiate between the two types of text.
Correct!
Incorrect
.webp)
.webp)
Correct!
Option B is better optimized for mobile.
Option A's navigation is well-suited for desktop viewing but may not be as effective for mobile devices. Its filtering options on the left-hand side occupy valuable space that could be better utilized for showcasing products. Designs that are not optimized for mobile devices, may have elements that are too small to be easily viewed or clicked on or may require excessive scrolling or zooming, leading to a frustrating user experience.
In contrast, Option B employs a common mobile UX design pattern with bottom navigation. The filtering options are positioned at the top of the page, freeing up more space for displaying valuable content. Furthermore, the larger photos enable visitors to view more details about each item before making a selection.
Incorrect
Option B is better optimized for mobile.
Option A's navigation is well-suited for desktop viewing but may not be as effective for mobile devices. Its filtering options on the left-hand side occupy valuable space that could be better utilized for showcasing products. Designs that are not optimized for mobile devices, may have elements that are too small to be easily viewed or clicked on or may require excessive scrolling or zooming, leading to a frustrating user experience.
In contrast, Option B employs a common mobile UX design pattern with bottom navigation. The filtering options are positioned at the top of the page, freeing up more space for displaying valuable content. Furthermore, the larger photos enable visitors to view more details about each item before making a selection.
.webp)
Mobile UX/UI design refers to the process of designing the user interface (UI) and user experience (UX) for mobile devices, such as smartphones and tablets. The goal of mobile UX/UI design is to create mobile apps that are visually appealing, easy to use, and intuitive.
Mobile UI design involves creating the visual elements of the app, such as the layout, typography, color scheme, and graphics.
Mobile UX design, on the other hand, is concerned with the overall experience of using the app. This includes how the app is organized, how the user interacts with it, and how the user feels while using it.
As of January 2022, there are nearly 5.3 billion unique mobile phone users in the world, and this number is expected to grow to 5.7 billion by 2025. With such a large audience, it is crucial to create mobile experiences that are enjoyable, efficient, and user-friendly.
Correct!
Incorrect
.svg)
-min.png)
%20(1).png)
.png)
.png)
-min.png)
-min.png)
.webp)
.webp)