Mobile Information & Container Components

Icons are metaphorical, graphic representations of ideas, objects, or actions that are pretty much a standard part of mobile app design. Users encounter them in navigation menus, forms, buttons, inputs — you name it. However, their aesthetic role is secondary.

Apart from making an interface more visually appealing, icons fulfill other roles:

• Help users identify actions and complete tasks faster
• Minimize clutter on the screen (especially relevant for mobile interfaces)
• Eliminate language barriers
• Improve brand recognizability

Many designers want to create unique sets of icons for their products. However, if people can't identify the icon's meaning at a glance, they slow down when completing their tasks and get frustrated.

Stick to generally recognized, familiar icons and avoid overdoing design. The fewer the details, the faster users recognize the symbols and move forward with their flow.

Push notifications are pop-up messages that appear on mobile screens to announce potentially relevant events.^[2] They're often the first thing you see after checking your phone in the morning.

Push notifications are a key mobile feature for engaging users and increasing app opens. Their primary purpose is capturing user attention and driving app re-engagement.

Users have multiple apps sending notifications to their phones. If notifications aren't compelling, personal, and well-timed, users will ignore or disable them.

What can make push notifications meaningful?

• Promote updates, sales, and new content. Terms like "free," "new," "sale," "last chance," and "be the first" grab attention by offering clear value to users.
• Avoid marketing language. Rather than marketing speak, use conversational and witty language as if talking to a friend. Humor works when it fits your audience.
• Use location. When users permit location tracking, send relevant notifications based on their position, like alerts about nearby stores or opportunities in new places they visit.
• Don't overdo it. Excessive frequency is the top reason users block notifications. While ideal frequency varies by industry, ask users their preferences when they grant permissions.
• Timing matters. Respect users' time zones and sleep hours. Send urgent notifications only for critical updates that require immediate attention.

There are two types of dialogs in interfaces: non-modal and modal. Non-modal dialogs appear without disabling content, letting users continue their workflow and sometimes even move or minimize the window.

Modal dialogs, however, demand immediate attention like a traffic stop — blocking the main content until users take action. They interrupt tasks and increase cognitive load, potentially making users forget their previous context. On mobile, modals can appear as:

• Pop-ups
• Partial screen overlays
• Full-screen dialogs

Though intrusive, modals are often necessary to prevent disasters. They're particularly useful for warning users about potential data loss or irreversible actions.^[4]

For less critical information, consider gentler alternatives. Snackbars automatically disappear, while banners stay visible until dismissed or until their triggering issue resolves.^[5]

Chats have several key advantages:

• Less personal than calls with lower emotional investment
• Allow users to compose and edit messages before sending, benefiting non-native speakers
• Enable multitasking while waiting for responses
• Provide time for thorough consideration of information
• Save conversation history for future reference via email

Designers often overlook chat functionality, particularly regarding mobile placement.

Chat links should be intuitive to find. While floating buttons in the bottom right corner are visible, they can obstruct important elements like search results, filters, or checkout buttons. Therefore, floating chat buttons should be avoided on mobile.^[6]

Better placements include the footer, settings page bottom, contact page, or navigation menu. Use clear labels to indicate the chat function.

An app splash screen is an introductory screen users see while the application loads in the background. They usually contain the company logo and may be accompanied by some text or more imagery that intensifies the first impression of users.

You may wonder why applications need splash screens at all if modern mobile apps typically load fast. Here are a few reasons:

• Welcome users: Splash screens provide an opportunity for an app to say hello to its users and encourage them to explore the app.
• Create the right mood: Brand colors, the company's logo, and the typography help create a positive first impression and set the right mood for app usage.
• Introduce the brand: Splash screens are what users see first when opening an app. It's a nice chance to introduce the brand's identity by adding a short animation or snappy, witty text reinforcing the brand's value.^[7]

Mobile e-commerce has evolved from browsing-only to dominant sales platform, with 72% of retail e-commerce sales were coming from mobile customers in 2023.^[9]

This shift demands e-commerce websites and apps provide frictionless mobile shopping experiences.

Well-designed product pages are crucial for converting browsing into purchases.

What makes a good product page?

• Primary product details: Key decision-making elements like name, price, size options, high-quality images, and ratings should be visible without scrolling.
• Clear images: High-quality, zoomable images are essential. Blurry or small images can deter purchases.
• Secondary product details: Include supporting information like features, benefits, and composition to aid purchase decisions.

Mobile carousels, like accordions, compress content into smaller spaces. However, they suffer from low discoverability and require sequential access — users must view items one by one to reach the last one.

Many mobile carousels also lack swipe functionality, complicating user interaction. Here's how designers can address these challenges:

• Limit to 3-5 items: Fewer items increase discoverability and maintain user interest
• Prioritize items: Place the most relevant content first to capture and retain attention
• Add indicators: Use arrows and dots to signal carousel presence and aid discovery
• Show continuity: Display partial images or text to indicate additional swipeable content
• Enable swiping: Users expect this familiar gesture when multiple items exist
• Keep content related: Unrelated content increases cognitive load and reduces predictability.^[11]

Snackbars are non-modal notifications that appear for a short duration on the screen, informing users of system status updates or changes. In contrast to modal dialogs, snackbars don't interrupt user flow. They can be dismissed by an off-screen swipe or automatically disappear on their own (after a minimum of 4 and a maximum of 10 seconds) or after user interaction elsewhere. Snackbars can also contain other actions like Undo or Cancel.

Visually, snackbars represent a rectangular container with a short text label inside and optional actions. Snackbars should be readable and noticeable enough so users won't miss them when they need to undo an action before it's too late. The best way to do this is to use contrasting text and background colors.

Additionally, ensure snackbars appear at the bottom of the screen and don't block any navigational components.