Redefining mobile usability: Bringing desktop features for small screens

How often have you heard that a feature can’t be implemented on mobile due to its small screen size? “It’s more trouble than it’s worth,” they say. This mindset leads to missed opportunities for enhancing user experiences on mobile devices, particularly in the enterprise sector

The myth of mobile limitations

Enterprise SaaS users are often perceived as not needing a mobile app, with concerns about productivity loss, increased errors, and user frustration cited as reasons. These hidden costs of poor mobile experiences are frequently used to justify a limited mobile app scope compared to desktop versions.

While some of these hypotheses held true in the past, the trend is changing. In 2024, more desktop-centered SaaS products, especially enterprise apps, are now being transformed into mobile apps. New B2B SaaS entrants are adopting mobile-first designs, gaining a competitive edge in the process.

Innovative Mobile Design

Innovative design solutions now make it possible to implement features and tasks once considered too difficult for small screens. Whether you’re a SaaS founder, product owner, UX designer, or developer, this article will provide insights into designing powerful mobile experiences. We’ll analyze common use cases often deemed “too difficult to implement for mobile” through the lens of UX best practices.

Google Docs on mobile

1. Type the text: Start by typing the text you want to format.
2. Select the text: Double-tap the text and adjust the cursors to highlight the desired portion.
3. Scroll to the top bar: This step can be time-consuming according to Fitt’s Law, as the target button is not visible.
4. Open text formatting: Tap the text format icon to open the formatting menu.
5. Choose the heading style: Select the desired heading style.
6. Close the menu: Tap outside the menu to close it.

Craft reduces the steps from six to four, making it faster and more intuitive. This streamlined approach reduces cognitive load and improves overall efficiency for the user. It also allows the user's focus on writing instead of navigating through menus to apply a specific style, which improves user satisfaction drastically.

This streamlined approach empowers users to create polished and professional documents on the go, directly from their mobile devices.

Data management made easy

Managing data in tables is another challenging task on mobile. Tables are one of the most feared UI components when it comes to designing for mobile screens. Let’s see how Google Docs and Craft handle this. We will add a table in the same document for a pricing section.

Google Docs on mobile

1. Access the top bar: Scroll to view the top bar, which violates Fitt’s Law by increasing the time to reach the table insertion option.
2. Insert table: Select the ‘+’ button to open the bottom sheet drawer.
3. Choose table: Select ‘Table’ from the list of options.
4. Set columns and rows: Specify the number of columns and rows.
5. Insert table: Tap the CTA button to insert the table.

Steps 2,3 & 6 violate Occam's Razor. The process can be streamlined for faster table creation. Due to limited space on mobile, navigating menus and selecting small options gets cumbersome for the user.

Now that we have the table let’s try to add data in it

1. Add data: Double-tap each cell to enter edit mode.
2. No formulas: Google Docs lacks the provision to add functions in tables, hindering data management and clarity.

Craft on Mobile

1. Insert table: Select the ‘/’ icon from the toolbar above the keyboard. This directly accessible icon reduces steps.
2. Choose table: Scroll down and select ‘Insert table’ from the menu.
3. Set layout: Choose the desired row and column layout for the table.

Overall fewer steps in Craft follow Occam's Razor for a quicker and more streamlined process.

To add data to this table,

1. Edit cells: Tap to select a cell and double-tap to enter edit mode.
2. Additional functions: Use the three-dot menu to set header rows/columns and insert formulas.

Craft’s approach is quicker and more streamlined, adhering to UX principles like Fitt’s Law and Occam’s Razor. It also offers functionalities like headers and formulas, enhancing data clarity and management.

Mastering task management

Project management on mobile can be cumbersome. Traditional project management tools, however, can be clunky on mobile screens especially to set up a new project and then define the task details. Apps like Notion simplify this process. Let’s compare Airtable and Notion.

Airtable on Mobile

Setting up a project

1. Access settings: Select the name of the table from the top to access settings.
2. Rename the project: Change the title to the project name.
3. Customize fields: Scroll down to the tables section and select ‘Table 1’ to access table customizations.
4. Add start date field: Select ‘Add a new field’, edit the name to ‘Start date’, choose ‘Date’ as the field type, and save.
5. Add due date field: Repeat the above steps to add a ‘Due date’ field.
6. Save settings: Go back to the previous menu and select ‘Done’ multiple times to return to the main screen.

To add a task

1. Create task: Select the + button in the bottom bar.
2. Enter task details: Fill in the task name, notes, assignee, status, start date, and due date.
3. Save task: Close this view to return to the main view where the task is added.

These steps involve multiple back-and-forth navigations, which can be frustrating for the user. One can easily get lost and end up not using the mobile app to create a task or project.

Notion on Mobile

Setting up a project

1. Create new project: Select ‘New’ to create a new project.
2. Enter project details: Fill in the project information. Notion by default has pre-defined status groups, saving time. This avoids the repetitive field creation steps in Airtable following Occam’s Razor.

Adding a Task

1. Create task: Select the ‘+ New’ button in the respective status group.
2. Enter task details: Fill in the task name, assignee, due date, and priority.
3. Add custom fields: Tap “+ Add a property” to add custom fields like start date directly within the task view.

Notion’s approach reduces cognitive load and enhances user flow by avoiding repetitive field creation and excessive confirmations. This promotes clear hierarchy and navigation, making project management on mobile more efficient.

Visualizing Large Datasets

Visualizing large datasets on mobile is crucial, especially in the FinTech domain. With more users accessing their investments in stocks through mobile representation of the market indices in an effective manner becomes crucial on mobile screens. Apps like TradingView are optimizing complex features for touch-based interactions and smaller screens, employing UX principles for a more intuitive experience.

Traditional FinTech Apps

Apps like IndMoney typically provided basic functionalities for line and candle charts, reserving detailed chart analysis for desktop versions. This approach disadvantaged professional traders on mobile, limiting their access to tools for studying market trends effectively.

TradingView on Mobile

1. Access drawing tools: Select the drawing tool from the toolbar. The drawing tool icon leverages Gestalt Principle, promoting immediate recognition of the available tools.
2. Use bottom sheet drawer: The bottom sheet drawer presents drawing tool options in a touch-friendly manner, adhering to Fitt’s Law.
3. Select line type: Users can easily choose the type of line they want to draw with clear visual cues and minimal text labels, following the Prägnanz Law.

Despite offering powerful tools, TradingView maintains a clean and uncluttered interface, adhering to the Aesthetic-Usability Effect. By minimizing the need for extensive scrolling and keeping frequently used options readily available, TradingView reduces the time and effort required for users to select the desired tool.

Conclusion

In today’s competitive landscape, a well-designed mobile experience is no longer just a nice-to-have; it’s a critical component of business success. By leveraging UX principles such as Fitt’s Law, Occam’s Razor, and Gestalt Principles, you can create mobile experiences that not only meet user needs but also drive higher engagement and satisfaction.

From simplifying document editing and data management to streamlining project management and visualizing complex datasets, innovative design can transform how users interact with mobile apps. These improvements not only enhance usability but also contribute to achieving key business objectives like user growth, retention, and conversion rates.

For SaaS founders, product designers, and developers, the challenge is clear: embrace the potential of mobile platforms and innovate to provide superior user experiences. Your users—and your business metrics—will thank you.