According to Jakob's Law:

“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.” 

This rule also applies to mobile applications, as users will have certain expectations for your app’s content and basic functions. Keeping Jakob’s Law in mind while designing the content of your app will help ensure that users can easily recognize the actions you want them to take.

Imagery

Choose the Best Widget Type

Image Widgets: Utilize image widgets to enhance your brand visually. Ensure the images you choose are clear and align with your brand identity. Avoid overloading your screens with too many images; instead, use image collection widgets to group multiple images together. Image widgets are normally displayed as cards or full-width banners but can be styled to appear as buttons.

Avoid repetition of graphic elements or prominent logos when using multiple images. Space out full-width images and use high-quality images that are relevant to your event. If styled as buttons, then the image widgets should resemble a button.

• Call To Action Button Widgets: These are perfect for incorporating CTAs without taking up too much screen space. They allow you to combine images with call-to-action buttons effectively. Multiple buttons can also be stacked together in one section to group similar redirects.

• Image Collection Widgets: Use image collection widgets to organize multiple links or images in a single widget, which helps in reducing visual clutter. This ensures that the images serve their purpose without overwhelming the user.

Best Practices for Image Content

• Single Detailed Logo: Highlight your detailed logo in one prominent image instead of repeating it across multiple images.
• Clear and Impactful Images: Choose images that are clear and have an obvious call to action. Avoid graphics that might distract users from the desired actions such as buying, signing up, or following.
• Limit Images per Screen: Avoid crowding a single screen with too many images. Use image collection widgets to manage multiple images efficiently, or button widgets to save screen space.

Hierarchy

Visual Hierarchy

• Text Widgets: Break up sections heavy with images by integrating text widgets. This adds balance and prevents the app from appearing cluttered.
• Variety in Image Sizes: Incorporate a mix of different image widget sizes to add visual variety and keep the layout engaging.
• Showcasing Popular Content: Use link and image collection widgets to present popular content in an attractive format. This helps create dynamic visual interest.

Best Practices

• Text and Image Balance: Ensure a balanced approach between text and images to maintain a modern and organized appearance.
• Mix of Widgets: Use a variety of widgets to break monotony and add visual interest.

Navigation

Effective Navigation

• Main Call to Action: Focus on one primary call to action per screen. For instance, if your app aims to sell tickets, highlight the ticket purchase option prominently on the home screen.
• Single Avenue for Actions: Provide a single, clear path for users to complete the main action. Avoid multiple links for the same purpose to prevent distraction.
• Content Segregation: Differentiate between primary and secondary content. Primary content, such as main offerings, should be prominently placed in leading positions like the bottom bar items or main page widgets. Secondary content can be linked together in a collection widget or placed as the fourth item on the bottom bar.

Best Practices

• Emphasize Main Content: Keep the main content easily accessible and avoid cluttering the screen with too many options.
• Clear Navigation Paths: Design navigation paths that are intuitive and lead users to the main call to action without confusion.

Icons in Navigation

• Keep Icons Varied but Similar: Icons can be a fun way for attendees to recognize important links or actions. Make sure the icons all come from a matching set, as icons with different weights or styles can confuse and distract users.
• Keep Icons Recognizable: It is important to also match your icons to the content they are linking to and keep the imagery of the icon relevant. A link to buy a ticket should use an icon that draws on the image of the product (tickets) or the action (purchasing). Keeping this rule consistent will allow users to easily recognize and navigate through your app quickly.
• Group Similar Content: Multiple links used in a Links Collection should also be similar in content, as actions that are different from user expectations will often cause confusion. If a link does not fit the group, consider using a different widget for that specific content or surface it elsewhere.

Best Practices

• Keep it Consistent and Expected: Content links should use relevant icons and link to what users expect.

Text Content

Supporting Text

• Informative Text: Use text content to provide additional information and context to your users. This can include titles for image widgets or extra details for call-to-action buttons.
• Strategic Placement: Place text content strategically to serve as visual breakpoints and enhance user understanding. Avoid unnecessary text that might clutter the screen.

Best Practices

• Contextual Text: Ensure that text content provides meaningful context and supports the primary functions of the widgets.
• Minimal and Effective: Use text sparingly and effectively to complement other visual elements without overwhelming the user.

Key Takeaways

Widget screens enable the flexible assembly of screens using images, text, and link redirects within the app.

• Design your app with familiar functions and recognizable patterns so users can easily recognize key actions.
• For images, avoid repeating logos; use high-quality images. 
  • Button widgets are great for main CTAs in areas that require less screen real estate. 
  • Use collection widgets to reduce clutter when linking multiple items. 
  • Focus on clear images with CTAs and limit the amount of images per screen to not overwhelm users.
• For hierarchy, use text widgets to balance image-heavy sections and vary image sizes for visual interest. Keep a balance between effective text and images for a clean layout.
• For navigation, keep it simple and focused. Highlight one main call-to-action per screen and provide clear paths for actions. Emphasize primary content in the leading tab items and push secondary content to less used tabs.
• For icons, use consistent, relevant icons and group similar content for more precise navigation.

Next article: Accessibility