Skip to content

Front-end Best Practices for Mobile Apps

Published May 19, 2020

A guest post by Samantha J. Inguanzo (*)

Introduction

Beauty is in the eye of the beholder for most creative situations, however, there appears to be consensus on what constitutes beautiful mobile applications. With a plethora of options on Google Play Store and the Apple App store, it is critical for businesses to differentiate their products from competitors and provide an application that is visually pleasing, intuitive, responsive, and functionally captivating. Ideally this facilitates attracting new users by coinciding with psychological and neurological principles for societal expectations, and offering superior functionality and customer experience.

We will review best practices for front end mobile application design and development, inter-team collaboration, and expert checklists to ensure an app is engaging, intuitive, responsive and aesthetically pleasing. Following these guidelines in accordance to market behavior, can assist in maximizing organizational value propositions, generate a higher percentage of mobile application conversions, and produce a more successful app in terms of market acceptance, return on investment, virtual network creation, and long-term viability for firms.

Front End Best Practices

UX / UI Design

The front-end of mobile applications involves all aspects of client facing content. High quality mobile application designers must thoroughly consider every facet from interactivity, visual coordination, neurological influences, search engine optimization as well as all technical forms of mobile application performance. Psychophysics research claims to differentiate an app as superior to competitors the speed must appear to be 20 % faster than other applications. Design adjustment decisions should consult the Weber-Fechner Law which attests that a change must be 20% different to surpass the difference threshold and be perceived as being just noticeably different (JND). This calculation can be useful when determining if an adjustment’s target such as optimizing code to render their app’s load time to be 1 second faster or decide how to author code for optimal function experience. One such strategy for the latter is called regression allowance which allows code to be a bit slower while maintaining experience standards. Two key metrics to consider when designing are Time to Interactive (TTI) or the amount of time for the user interface (UI) to be interactive, and response time or how rapid user inputs will generate UI outputs. The UI has a slim 100 millisecond window to generate responses in order to be perceived as seamless and highly functional (Faller, 2020). 

Microsoft is paving the way to increased productivity and intuitive functionality being at the forefront of design by evolving its Windows 10 to include aspects of their new Fluent Design System which is used in applications and services on Android, Windows and iOS. Aaron Woodman, who is Microsoft’s director, claims that these design adjustments will be deployed gradually across various products. Fluent Design enhances the fluidity and movement within the user’s mobile experience, with an emphasis on depth, light, motion, material, and scale. A demo at the 2017 Build developers conference, formerly known as Project Neon, demonstrated enabling use of the inking tool for annotating PDFs anywhere across Windows, eliminating the need for an additional app, increasing productivity and decreasing time to accomplish tasks (Warren, 2017).        

Starkly contrasting the majority of mobile app designs which favor users spending ample amounts of their time interacting with the system, Microsoft claims their focus is assisting their users rapidly “accomplish goals” and resume their lives away from mobile devices. Fluent is touted as the only mobile-first system which utilizes years of Microsoft market research on phone usage in Europe, China, the Americas and India to determine optimal design integration, as well as interconnectivity and cross functionality among applications. More than 40 designers collectively contributed to this unified system which considers research findings that indicate only a small portion of the 4 hours users spend on mobile devices is spent on activities. Specifically, Jon Friedman, corporate vice president of design and research says only “20-30 seconds is spent doing something.” Designers have been mindful to increase device cross functionality to allow for a superior dual-screen experience when using iOS and Windows devices. Similarly, Microsoft has a partnership with Google to align Android devices connectivity and functionality while increasing UI convergence and consolidating visual design to a simplified universal “DNA.” Microsoft urges other leading technology and mobile application designers to follow suit in creating more fluid and useful designs (Warren, 2019).

When considering mobile app design user experience (UX) is imperative. Since a portion of the user’s storage will be used for downloading and storing the app, the experience must reflect value in order to justify it remaining. Studies indicate that 75% of apps are only opened once, doing little to serve either the app provider or the client, and targeting the app as a possibility for deletion if a more valuable one comes along.   

Development

As discussed, simplifying and enhancing UX requires a team of very qualified and creative designers and developers. It is often recommended to implement a front-end framework or structural scaffolding as the front end continues to evolve and grow in complexity. Frameworks assist in combating architectural issues that result from increased scale. The basic files creating a front end, HTML, CSS and JavaScript can often be convoluted into disorganized and unruly spaghetti code as an app’s scale continues to expand. Frameworks are pre-written code files and directories that allow for more rapid app creation by providing often reused boilerplate code, directory structure generally adhering to design structure, and typical design principles catering to your app. Examples of these kinds of opinionated frameworks are Ruby on Rails, CakePHP and Lift. These structures help to organize your code enabling editing and more streamlined maintenance as updates need to be made (Pekarsky et al., 2020).

UX is much more of a cognitive science paradigm and thus front end designs must work with engineers to develop an experience that feels efficient and directly interactive with all facets of a business represented by the app. This UX code then should be integrated seamlessly with the UI components including all the visual details of typography, spacing, color schemes, buttons, responsive design and branding. For example UI is the frosting and sprinkles on a UX cupcake, adding style and personality to the bare bones framework (Lamprechet, 2019). Although they have an integrated relationship when users are viewing and interacting, development is best when there is a separation of concerns, or each aspect of the program should operate in independence, have a well-defined single purpose and communicated through a clearly stated interface. Sometimes referred to as “consuming an API,” this principle declares that in an optimal situation that front end will be fully operational as its own application. In other words all back end requests, processing and displays are standalone. This allows developers to isolate various aspects easily, make edits and prevents issues from becoming widespread. Developmental concerns include determining which elements to make visible or invisible, when to display validation or error messages to users, styling outputs based off of data inputs, data requests, and when to send updates to the server (Pekarsky, 2020).      

Further, mobile apps’ UI has two primary goals which are creating a positive UX and combating potential issues during use. Businesses with effective UI apps include Amazon, WhatsApp and Facebook. By providing an effective UI and efficient UX, businesses are able to better promote their products and services, ideally leading to revenues and more social gravitas The three main aspects of mobile app development that need to be considered for an effective and positive experience are the server which holds all of the data and processes/sends requests, the client which is generally a browser requesting content from the server, and the user which is interacting with the content (Yevtushenko and Yalanska, n.d.).       

Implications for Business

Considering 90% of a user’s time on mobile devices is spent on applications there are significant opportunities for businesses that are looking to connect and convert digital audiences. While an average of 8.8 apps are downloaded each month by users, there is a sustainability issue with the typical Android app seeing a 77% reduction in daily active users (DAUs) within 3 days and a steep decline of 90% over the first 30 days. Additionally 45% of app users report low levels of retail customer experience and actually report disliking the UX offered within the app (Louise, 2020). In order to help mitigate this rapid drop off in DAUs organizations should consider offering an app that provides a unique selling position and value for users which will keep them engaged and benefiting from the service.

Profit by Acquisition

One example of phenomenally simple UX/UI design leading to profit by acquisition is WhatsApp. One founder Jan Koum, who once collected food stamps, capitalized on an opportunity he observed for messaging apps in the Apple store. By providing free messaging services and international phone calls minus ads, WhatsApp produced a value proposition that was unique and highly desirable to global markets. Whatsapp cultivated an enormous virtual community and eventually was sold to Facebook as a $16 billion Megadeal (Olson, 2014).

The deal was actually finalized to $19.6 billion. Facebook added $3.6 billion on top to retain WhatsApp employees, and the agreement terms were $4 billion cash and $12 billion in Facebook shares. Once regulatory approval was completed, Facebook shares skyrocketed from $68 to $77.56 leaving the final deal amount as a record breaking $21.8 billion, which translated into $55 per user. The significant user base that WhatsApp established facilitated this epic deal as Facebook’s primary goals are high user frequency and exponential growth. In 2014, WhatsApp had both.  DAUs were at an astonishing 70%, with over 500 million monthly users, and a growth rate of 1 million per day. These statistics offered Facebook enormous incentive  to purchase in spite of the deal costing one tenth of the company’s  market value. Additionally, this historic deal prevented other tech leaders, such as Google who made an offer half of Facebook’s, from acquiring access to a vast community of users and the immensely promising messaging platform (Deutsch, 2020).   

Team Collaboration

Facebook tacking on an additional $3.6 billion to the previously mentioned deal highlights the importance of team collaboration for mobile application success. The initial team for a mobile app is the founders or idea generators and designers and developers recruited to assist in the process. Having a clear business strategy, understanding of the target market and competitors in the app space is of monumental importance. If an app is not yet established such as this example would indicate, a timeline for producing, testing and enhancing a minimal viable product (MVP) is required to bring the new app to market. One of the most difficult aspects of collaboration is how differently members of a team can think, communicate, and approach problems. Specifically, designers and developers must overcome an inherent difference in how they approach front end applications (Design Talks: Better Team Collaboration with Aaron Walter, n.d.)

In an inVision Design Better podcast with Aaron Walter, Miklos Philips claims in an interview that designers tend to gravitate towards viewing a project as a whole, complete system; while developers prefer to break it down into modular components. The most beneficial solution is to integrate every team member into the process, encourage idea sharing, creating a shared language and collective ownership of the project to help prevent work silos. He also attests that the biggest pitfalls for designer and developer teams are not maintaining shared goals, lacking a collaborative language and being on teams of disproportionate ratios of designers to developers. For example, one designer on a team of 70 engineers, which creates an imbalance and slows down production (Design Talks: Better Team Collaboration with Aaron Walter, n.d.). 

It’s also crucial to have design teams with both very experienced and more novice developers, designers and marketers. More senior team members can assist new members with concepts one-on-one until they are able to deploy skills on their own and amplify the production skills and capabilities of more knowledgeable members. Team collaboration ideally will consist of time sensitive design sessions, review of sketches and a majority of time developing prototypes applying styling and custom templates to wireframes and integrating SAAS or CSS templates to maintain color palette consistency throughout (Coburn, 2019).

Key Performance Indicators

Businesses utilize various key performance indicators (KPIs) to interpret how successful applications are based on the current UX / UI designs and these KPIs can vary according to what goals the firm is focused on achieving. The Ultimate Guide to Mobile App KPIs 2020 indicates that there are a total of 51 KPIs to consider, grouped into categories such as Engagement, Financial, User Experience, App Store Optimization (ASO), Marketing, and General Mobile App KPIs. Tracking KPIs is of paramount importance for attracting investors, assessing return on investment (ROI) and assists in creation of a mobile app valuation. Once a firm determines the most useful and valuable KPIs for their particular app, tracking of these should be integrated into both the long-term development and marketing plans. General KPIs that are universally valuable include: user growth rate, downloads, installations, registrations and crashes (Kurzweg, 2020).

Engagement KPI examples include brand awareness, churn rate, sessions, session length, daily active users, monthly active users, and social sharing. Financial KPIs include average revenue per user (ARPU), customer lifetime value (LTV), time to first purchase, customer acquisition costs (CAC), return on investment (ROI), and cost per install (CPI). User experience KPIs are load time, device type, OS, screen dimension/resolution, API latency, and channel breakdown among others. Examples of App Store Optimization KPIs are keywords, views to installs, reviews, and ratings (Kurzweg, 2020).       

In order to improve the functionality of an app from a technical vantage point there are 15 primary KPIs to focus on. For this particular discussion we will review the first five KPIs mentioned in the article. The first KPI is load time, as mentioned earlier in this paper an apps load time is highly crucial to its success. The average load time across industries currently ranges from 8 to 11 seconds; however the recommended optimal load time is under 3 seconds. Akamai’s 2017 Online Retail Performance report discovered that for every second of wait time there was a 7% drop off in potential customers. This can lead to additional problems affecting both profitability and app sustainability. The second is devices and operating systems. This is beneficial to consider when deploying personalized ad content and when testing the app for quality assurance and validation. Next KPI is screen resolutions, which is useful for similar reasons and can assist in developing and designing to suit the majority of users. Fourth most crucial KPI is crash reports since this is a prime indicator of what components are causing the issues, where the problem is resonating from and allows for expedient testing and issue resolution. Next most important KPI to resolve for technical efficiency is session length and depth which will assist in indicating how engaging interactions with the app are and can show which actions users take as well as how close they are to completing desired conversions such as making a purchase or registering a new account (Kononenko, 2019). 

Conclusion

To summarize mobile applications are dominating the digital experience both in business as well as in not-for-profit organizations. UX and UI design can make or break the effectiveness of an application, which in turn can affect a firm’s profits, reputation, ability to attract resources, and overall sustainability. When front end development coincides with a fluid or hybrid design that generates a positive and engaging experience, users are encouraged to continue daily or monthly use of the app, as well as incur an increased sense of loyalty to the brand since it is generating positive and memorable experiences for the user.

Firms can utilize a plethora of key performance indicators to assist in assessing the success of various inputs such as frameworks, design principles, and methods of developing. KPIs can also assist in troubleshooting mobile app issues and also serve to resolve problems hindering an effective user experience. When mobile app teams are collaborating well with a shared language, specific well-defined goals, acceptance and encouragement of idea sharing, as well as proportional ratios or teams or systems that allow for maximum productivity mobile applications can assist in creating vast virtual communities to deploy brand content, generate substantial revenues for businesses, and effectively communicate/or offer a value proposition to an uncapped amount of global users.      

References

(*) This blog post initially appeared as an essay for one of my courses at Florida Atlantic University. It is being shared here as a guest blog post with the author’s consent.
All views and opinions expressed in this post are those of the authors and do not necessarily reflect my opinion or the official policy or position of any agency, organization, or company.

Featured image: photo by Jonas Lee on Unsplash

Share this post:

LinkedInRedditWhatsAppPocket

Published in Mobile Apps

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top