Tips and Best Practices for Mobile App Design
Due to the growth in native application (app) usage, it is certainly a must for designers and developers alike to follow established best practices. Adhering with design guidelines is pivotal in delivering compelling experiences, particularly to people with special needs (accessibility), and those relying on older devices. Apple (iOS) and Google (Android) made it easier by providing own design and development guidelines. These are being updated as technology advances. This extensive article carries a variety of tips and best practices. Some of these were already proposed, whereas others are suggested after dealing with specific use cases.
TIPS AND BEST DESIGN PRACTICES
USER-RELATED
Know your user: Different users mean different mental models and various users interpret things differently depending on previous experiences. Users may anticipate different outcomes while interacting with specific elements within the app. Therefore, get to know your users first and understand their needs and also their expectations before embarking on the design journey. On the other hand, relying on competitive analysis could prove its benefits, however, keep in mind that what works fine for the competitor may not work well for you.
Don’t re-invent the wheel: A good design is useful and fulfills users’ goals. Many apps succeed because they follow an existing design convention. As one may notice, the various functions of one app tend to be consistent with other apps regardless of the use case. Nowadays, users have a refined mental model of how apps work. In order to reduce the learning curve, ensure that obvious functions and design elements are consistent, intuitive, convey meaning and serve a purpose.
Consider critical scenarios: Presumably, many of you encountered urgent situations where you had to load an app to find quick answers like checking transport schedules. Ensure that the critical elements constituting the primary purpose of the app are easy to access with minimal efforts. For example, if the app is about ticket reservations, ensure that relevant functions are easily accessible.
Cater for interruptions: We often get distracted while executing an action such as reserving a flight. In such an occurrence, we minimize the app to prioritize other matters. Many apps don’t retain idle processes and get refreshed regardless of the device RAM. Thus, it is ideal to set the app to prevent unnecessary reloading, as long as sensitive data (e.g. finance) is not involved. In return, call-to-action is facilitated, and users wouldn’t have to recall the process and start over again.
Allow Personalization: Personalization is nowadays a key aspect that guarantees success, product usage, and acceptance. Bear in mind that users may utilize only a portion of the app. For example, in e-Commerce, customers tend to search for specific product categories, not all. Therefore, for maximized experiences and prompt call-to-action, grant the user the ability to personalize the app.
DESIGN AND INTERACTION-RELATED
Stick to established standards: Guidelines such as those by Apple (iOS) and Google (for Android) are there to ensure compliance and consistency in the app. Nowadays, users are already used to default design elements like the ‘tab bar’ (iOS) and the ‘navigation drawer’ (Android). Following these guidelines not only ensures acceptance in the app marketplaces but also ensures that the learning curve is minimized.
Onboarding: If you’re designing an app that carries uniqueness and complexity, good onboarding screens are a must. These allow users to obtain an early understanding of how to utilize, and what to expect from the app.
Minimalism: Think of a mobile app as an express method to execute actions. In this part, I will cover the following:
· Interface design - If the app is intended to handle a wealth of content like imagery and descriptive text, keep the interface design clean and rely on minimal use of colors. Have you ever noticed why many service-related apps tend to be plain? A minimal UI design is less distracting and allows users to focus on important content.
· Elements and content - Start by addressing the app’s main purpose (e.g. finding and booking a taxi). Then list down and fill the canvas with the core elements required to execute the intended action (e.g. to find and book a taxi, I need to set my departure, destination, payment options and communicating with the driver). Like that, you will come up with a great minimum viable product (MVP) with key features tailored for the use case. Later, keep on iterating as required in accordance with both business and user needs.
Place important elements within reach: Newer smartphones are getting bigger, and most users use one hand to navigate the app. The bigger the device is, the harder it is to reach screen areas. Therefore, it is encouraged that essential elements are placed within reach so as to reduce undue efforts required from the user.
Prioritize content (consider critical scenarios follow-up): It is easy to accommodate content on desktop interfaces but mobile requires strategy. To minimize undue exploration, time waste and cognitive-load, ensure that essential content is given priority for instance by having it displayed within visual and easy reach.
Foldable elements: Content-rich apps could benefit from foldable elements for instance accordions. Like that, various content excerpts are displayed and supported by an option to expand for more information. Like that, users can easily focus on the content of interest while preventing undue scrolling.
Navigation: Architecting a navigation structure within mobile environments is challenging because these must be intuitive enough so users can understand how to use the app at first glance. The navigation is the core driver for app exploration and usage. Therefore, it should be easy to access with one tap (i.e. taping the menu icon) to two taps (i.e. first tap on the back arrow and second tap on the menu icon). Navigations should display important links upfront. Rich navigations should clearly tell the difference between ‘primary’ and ‘secondary’ links to avoid confusion. When categories are present, it is encouraged to make these collapsible to reduce clutter and cognitive load.
Clutter: Feature-, and content-rich apps combined with persistent elements (e.g. tab bars) are painstaking especially in smaller smartphone devices due to the overwhelming clutter. This causes distraction. frustration, and (again) cognitive load. One way to overcome the issue is to set persistent elements to hide on the moment users resume scrolling.
Reduce unnecessary steps: Lengthy journeys are tedious in mobile environments and painful with an intermittent internet connection. Quite often, long journeys are the result of why users abort the activity even on desktop environments. Therefore, eliminate unnecessary steps and keep journeys simple. Simplified journeys make the overall experience better and faster.
Case: Recently, I conceptualized a retail e-Commerce mobile application by ensuring consistency with the desktop site version. As the original checkout journey is split into 6 steps (which is quite long), it was eventually reduced down to 3 stages to simplify the process for the end-user (refer to images)
Iconography: Images and icons are worth a million words. However, these are subject to different (mis)interpretations. One icon can be interpreted in many ways depending on the user’s mental model.
Case: While conducting a summative review for a product, I had an interesting situation when a ‘catalog filtering’ icon was perceived as an equalizer by several participants, both happened to be musicians.
It is fundamental to support icons with descriptive text where possible. Like that, misinterpretations are avoided. From the aspect of accessibility, users with ‘aphasia’ struggle in deciphering icons unless descriptive texts are provided.
Typography and contrasts: Body text carries information that drives call-to-action. Selecting appropriate font-family is crucial to ensure legibility. Thin fonts should be ideally avoided as these impede legibility especially if combined with improper contrast levels, particularly on a dark UI. Therefore, it is recommended to use font variants that are user-friendly and tailored for small screen resolution.
Font size: Needless to say, sizing is pivotal for legibility. Use appropriate headings (e.g. H1, H2, H3…) and split the difference between titles and body text. Some apps allow zooming (pinch-in) though at the expense that other elements get hidden. To avoid this, use an adequate font size that fosters legibility. If possible, include a text-resizer feature. Lastly, if the interface design requires minuscule fonts, ‘pixel fonts’ might be the best alternative.
Button dimensions: In mobile environments, button dimensions must be proportional to fingers; especially the thumb (for one-handed navigation). Adequate spacing should be applied between multiple buttons and elements to prevent outcomes like tapping unwanted areas, or the inability to tap any given button due to inadequate dimensions.
In fact, a study by Touch Lab by MIT found that the average adult has an index finger size of about 16–20 mm — which converts to 45–57 pixels.
Chunking, line space, and white-spacing: Chunked content facilitates consumption which is effective when coupled with an adequate line-, and white-spacing (e.g. paragraphs, padding). Poor element spacing induces cognitive-load whereas inadequate line-spacing is strenuous to the eye especially on dark layouts. Therefore, apply ample spacing accordingly, but don’t overdo it as it can disrupt information flow.
Default actions: Specifically to forms, ensure that each field triggers relevant functions pertaining to the action. For instance, if the field requires a phone, house, or credit card numbers, ensure that the ‘numeric keyboard’ is invoked instead of the ‘text keyboard’ following the action (finger tap).
Remembering (frequent) actions: Not everybody is versatile with mobile environments and many processes can be tedious, such as tapping letter by letter to input information (e.g. a long URL). For better experience and enhanced user performance, allow the app to store recent information to reduce the time needed to execute an action particularly in rush hours and urgent scenarios. For login screens, unless a degree of security is involved, allow the app to preserve the session until users opt-out.
Status and (tactile) feedback: Specifically to mobile, communicating simple meaningful messages through status, and alert dialogs are crucial in keeping users updated. Make sure that the app communicates clear and concise alerts and status, so users can make informed decisions while avoiding unwanted outcomes.
Tactile feedback (e.g. vibration) also serves as a bonus to communicate feedback. However, you should not rely on this added feature as users tend to disable these for power preservation.
Errors: These alerts should tell where an error has occurred and how to rectify it. For example, in a form page, the app should locate and highlight the error while providing clear instructions to solve the occurrence.
Gestures and micro-interactions: Great experiences are fortified via micro-interactions, which are basic interface responses and behaviors that communicate an event, a message; and tell more about how the interface works. From a psychological aspect, these express a sense of amusement, achievement, and satisfaction. Micro-interactions call for strategy by relying on user needs.
Micro-interactions are invoked through specific gestures. One simple element carries various functionalities that are performed depending on the interactive gesture (e.g. tap; tap and hold, swipe, etc.). Given their versatility, micro-interactions should only be applied as long as they: i) are relevant to an action; ii) serve a purpose; and, iii) make sense to the user.
Dark mode: Dark-themed interfaces gained momentum because of intrigue and accessibility; hence the reason why nowadays many apps carry a ‘theme-switcher’. Producing a dark theme of an existing UI design is not simply about switching colors from light to dark! There is more to it. For some users, particularly those suffering from visual impairment, the dark mode serves as a means to enhance the user experience, and, depending on the use case, even the level of usefulness. If poorly designed, dark themes can bring more harm than good. Situations I often encountered in dark mode-enabled apps relate to high contrasts, small font sizes, and color saturation.
When designing a dark theme interface, be considerate about contrast levels, color saturation, font families (e.g. sans-serif vs serif), their variants (e.g. thin, bold), and spacing (character spacing, line-spacing, white-spacing). As well, be considerate about environmental factors because it is nearly impossible to view an app in dark mode under direct sunlight.
(For more information and tips about dark-themed interface design, check my other article entitled ‘Dark Interfaces: Design Tips and Guidelines’)
TECHNOLOGY-RELATED
Permissions: Often, apps require permission to access device functions like geolocation, camera, microphone…and at times (for some odd reasons) even the address book. In light of enacted regulations (e.g. GDPR), it is encouraged to tell users why the app requires access to these functions; and where possible, communicate the ‘terms of use’.
Images compression: Needless to say, if the app relies on imagery, ensure these are compressed so the app wouldn’t be taxing on the loading time.
Wi-Fi vs. default internet connection requirement: Specific apps require a default internet connection. This is often the case with apps that handle highly sensitive data for instance banking. For added security, these apps require ‘device registration’ so as to restrict access down to one device only. However, I had a situation where an event-finding app required a default internet connection for trivial matters like providing a date of birth during registration. Ensure that the app requests a standard internet connection only when it is critically required.
Autoplay: Some media-related apps tend to autoplay videos by default. One example is the Facebook app where videos play automatically out loud as users scroll. Although Facebook has the option to disable autoplay, this practice is not compliant with the WCAG accessibility standards. Even worse, unwanted media streaming consumes bandwidth and slows down older devices. By default, autoplay should be disabled.
CONCLUSION
Despite its length, I hope you find this extensive article useful, especially in case if you are planning to design and develop the next app. If there is anything you think I missed out, please feel free to comment.
