Mobile UI/UX Best Practices

Tulip is working on some exciting new things for mobile! Ahead of these new features and tools, we’re releasing a new Tulip UI Template for Mobile Apps.

As a designer at Tulip, I also wanted to share some best practices for designing mobile apps:

  • Keep it Simple
    Mobile screens are small. Keeping content to a minimum allows users to focus on what’s important. This applies to widgets, text, and navigation. If a step is feeling cluttered, consider breaking it up into multiple steps and editing out content.

  • Small Screen ≄ Small Components
    On phones and tablets, users generally interact with apps using their fingers. Keeping tappable components above 44px x 44px will make them more user-friendly. Text is harder to read when small, especially when someone is holding their phone far from their face. The smallest font size you should use is 13pt, but consider going larger.

  • Test Before Publishing
    Always test your app in as close to the environment the app will be used in as possible prior to publishing. Visual elements and interactions will look and feel different on a mobile device than on the computer you’ve built the app with. Is this app going to be used at a single station? Are users going to walk around with their devices? What is the lighting like? This will help you verify everything is readable and usable.

If you’re interested in learning more about mobile UX, one of my go-to resources is the Nielsen Norman Group. Just about any question about user experience can be answered in their articles or videos. You can find a list of articles about designing for mobile and tablet on their website.

What other resources for mobile UX/UI best practices you’ve found helpful?

3 Likes

Very interesting, thank you. I am looking for training, best practices, … to learn how reduce cognitive load of frontline workers and try to reach a new step for our Tulip apps. Some ideas?

The first tip around keeping it simple definitely applies to reducing cognitive load. Reducing visual clutter is really helpful for focus. Using a template (either from the Tulip Library or making your own) or some other form of a design system can help. When the UI is consistent from step to step and app to app operators will have to spend less brain power processing the UI.

Here are some other resources with helpful tips:

1 Like