The Importance of Designing for Mobile First

At work and for personal use, mobile devices are increasingly the go-to method for far more than just communication. Across shopping, smart home systems, to engaging with work apps, mobile devices are fast becoming the way many people run their lives. The number of smartphone mobile network subscriptions worldwide reached almost 6.4 billion in 2022 and is forecast to exceed 7.7 billion by 2028, according to Statista*.

Other research estimates that approximately 54% of all web traffic is from a mobile source. That means it is becoming critical for any organisation with apps — whether for internal or external audiences — to have a mobile-centric design process to ensure a better and more consistent user experience (UX) across all platforms and devices. 

Yet, a mobile-first design mentality is still not always the case. Many people will relate to trying to order a product, initiate a query with a customer service team, or find out more information from a mobile phone and find that the experience lags behind its web or desktop equivalent. 

Fortunately, while a mobile-first design can initially seem like yet another task for already busy app development and testing teams, some achievable steps can simplify the process and bring a better mobile UX experience within reach. 

A good starting point is to understand what mobile-first design means. Quite simply, designing for mobile-first is all about starting with developing a model of an app, commencing with the smallest mobile screen and then adding in larger screen sizes. This methodology differs from traditional development, whereby the process starts with desktop or web versions, and mobile was often an afterthought (if at all). Consequently, the mobile UX was a compromise, with certain aspects of the app not translating well to a more compact view and user interaction. 

Start small

Starting with the smallest screen sizes helps acknowledge the indisputable fact that there are multiple types of mobile devices in current use, both legacy and new, with a wide variety of screen dimensions and other features. Plus, mobile-first design is an excellent way of reducing unnecessary components, ensuring a cleaner design without certain design elements to deliver a more consistent, enjoyable UX.

A mobile-first design strategy starts with thinking small and considering what needs to be prioritised. For instance, in an app for a chain of banks with local branches, customers’ priorities are likely to include checking their main account. This would consist of a user-name field, a password field, a phone number, and an ATM locator. 

Of course, mobile usage is not just about apps on the phone; the UX needs to extend to accessing information via a handset’s browser or when using a tablet. Additional design aspects might include making the UX more visually attractive, such as a header image and maybe more detailed menu options. For instance, with the banking app example, the larger screen size could include current promotions. 

User experience 

Another essential consideration is to provide intuitive navigation to prevent a frustrating user experience. Features such as hamburger menus (typically three lines, like a burger between two buns: a minimal button that reveals a menu) to access secondary site information become highly useful. As a result, users are presented with the most crucial information but can quickly access more content if required. This prevents users from being overwhelmed.

Additionally, think about eliminating unnecessary pop-ups, which, when excessive, can be annoying on a larger screen — let alone on a smaller one. Another design consideration is accessibility, often referred to as A11Y. The mobile experience needs to be inclusive of everyone, including people who might have varying abilities or limitations. Design features include alt text, speech recognition, easy font size increases, and screen magnification. 

Real-world testing

A further vital point is to test an app’s performance under real conditions. Even with the best development and design talent, knowing exactly how an app will behave in real life is impossible to predict. With the sheer volume of devices, operating systems, browsers and versions, testing across all permutations can be challenging. It helps to start by knowing and prioritising what is currently most popular, which might vary according to country. For example, Perforce’s 2023 Test Coverage Guide found that while Apple has the dominant mobile market share in the US with 67.13% and the UK with 56.13%, that drops to 37.69% in Europe and just 4.95% in India. 

In addition to understanding where to place testing priorities, cloud-based testing labs enable app developers to simulate real-world device testing without having to acquire all those physical devices for themselves. By employing this virtual technique, tens of thousands of devices can be tested rapidly.

It is also important to test early and continuously throughout the development process because unearthing and addressing any issues early in the software development lifecycle (SDLC) translates to less time-consuming and expensive fixes at a later point (especially post-launch, when issues can adversely affect the consumer’s experience or even create security vulnerabilities). 

Shift Left and DevOps

Automating the test process and adopting a Shift-Left approach — a DevOps tactic to execute tests earlier in the SLDC — will go a long way in preventing any issues from evolving into problems. There are multiple types of testing, including functionality, compatibility, usability, security, localisation and international settings, error handling and recovering, installation and upgrades, data integrity and storage, network connectivity, compliance, negative inputs, unit, load, regression, and more.

One approach to automated, continuous testing worth calling out in particular is Test Driven Development (TDD). This approach involves developing tests based on the application’s requirements, together with ‘stubs’ (pieces of code that effectively stand in for the final code), and then immediately starting to compile and test the results. Initially, all tests will show as failures, but with each successive commit of a completed code change, fewer tests will fail. Once there are no longer any failing tests, then the project is complete. 

In addition, static code analysis is a technique that can be employed to automatically detect defective, vulnerable or inferior-quality code after it has been compiled but before other testing processes, meaning that issues are discovered and dealt with even earlier in the development process, further contributing to a Shift Left approach.

Testing and the rest of the design process must be as mobile-centric as possible, and the benefits outweigh the effort, leading to happier users and fewer security issues. With people expected to interact with mobile devices even more over the next few years, now is the time to create the foundations for a robust mobile-first app and web experience.

www.perforce.com

Reference sources:

https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/