By Ivo Weevers
A positive first impression is essential to relationships. People look for trust and integrity, and they expect subsequent encounters to reflect and reinforce their first impression. The same principles apply to brands and their products. Design plays an important role in building lasting relationships with end users and, thus, in supporting the brand’s promise.
Users expect mobile services to be relevant and user-friendly and to perform well. The limitations of the medium, however, impose significant challenges to designing products that meet all of those expectations. While often underestimated, performance is a crucial contributor to a trustworthy mobile user experience. Therefore, it should be considered a key driver in the design process.
In this article, we’ll discuss performance in relation to design and present seven guidelines that can help shape design decisions related to performance while accounting for the needs of end users and businesses. These guidelines are based on the experiences of our teams in designing native mobile apps for a broad product portfolio and on multiple mobile platforms.
Performance For Mobile
People use their mobiles to enhance productivity, comfort and pleasure, everywhere and at anytime: waiting for the bus, walking on the sidewalk, checking which platform their train leaves from. Mobile applications need to focus on a core utility, and they need to be fast and reliable in order to be valuable in those environments.
Paradoxically, we’ve noticed that many mobile design cycles start with requests for great aesthetics first: “It has to look amazing!” Of course, stunning visuals will attract customers by making a great first impression. However, a long-lasting relationship depends on the quality of each encounter, which is also heavily influenced by how the app performs. An application that looks stunning but performs poorly can damage integrity. Users quickly notice software that is slow or likely to break (whether because of downtime, crashes, etc.), and this impairs both usage and brand perception. Users expect an app to be fast and responsive. If it’s not, it will get poor reviews, low ratings and low adoption numbers.
The visuals in the Twitter app are not as rich as Cookmate’s (which are stunning), but reviews for the Twitter app in the App Store are much better.
Performance Supports Brand Differentiation
Every product encounter affects the brand perception. Users are looking for the best tools to enhance their lives. To attract a significant user base in a landscape that is becoming more populated each day, a mobile app has to stand out. It should do something no other app does, or do it better than others do. These benefits reinforce the brand. Because performance is an essential element in the user experience, it directly helps to differentiate the brand. Taking this one step further: making a technically challenging feature perform smoothly will give the product a unique selling point, one that will be difficult to imitate.
A good example is the Flickr iPhone app. Flickr states on its website that it has two main goals: to help people to make their photos available, and to enable new ways to organize photo and video. Guess what? That is exactly what its app does well, thus fulfilling its brand’s promise.
Flickr does a good job of optimizing the key brand encounters.
So, when planning an app, it is worth analyzing the market and trying to answer two questions. (1) What should it do differently from its competitors? (2) What should it do better than its competitors? Then, focus your design and development efforts on the resulting top three goals.
A Key Design Exercise
Crafting products of any kind requires an appreciation of the way they are built. Well-established design and engineering disciplines have recognized this for a long time. A car’s design influences its aerodynamics. A beautiful eye-catching bridge has to cope with wind and with traffic passing over and beneath it. The same applies to interactive mobile services. Design choices affect features, content, interactivity, graphics and, therefore, performance.
We’ve noticed on several product teams that performance is believed to be exclusively the responsibility of developers, and therefore it is considered too late in the design process. But in order to assess feasibility, development needs to be considered during the creative process. Applying the seven guidelines below and considering relevant factors for mobile UI (see the next section) up front will help to incorporate the topic of performance into design discussions. Achieving a high-performance experience is not just a coding exercise. It is a key design exercise.
The Erasmus bridge in Rotterdam, the Netherlands. (Image: Wikipedia)
Relevant Factors In Mobile UI Performance
The perception of performance is based on start-up time, page-loading behavior, smoothness of transitions and animations, errors, and waiting times. The diagram below illustrates these factors: the “app” (with its graphics, interaction, content, features and code) runs on a “mobile” device with certain technical capabilities (CPU, screen size, etc.) and a platform (Android, iOS, etc.). In many cases, the app connects over a “network,” with a set coverage and standard (LTE, 3G, 2G), to a “back end.” The two factors at the top are heavily influenced by the decisions of the design and development team. The bottom two factors are constraints that need to be taken into account.
Factors that influence performance.
Decisions for each factor will affect performance. Any combination, enhancement (such as advanced visuals) or limitation (such as poor network coverage) could increase complexity. For example, content being loaded from the back end in addition to advanced graphics traveling over a slow network are a combination of factors that will reduce performance.
Seven Guidelines
The last years have seen dramatic changes in the mobile platform landscape. New UI paradigms have emerged, screens and processors are becoming as advanced as desktop computers, and input mechanisms have been revolutionized.
Within these shifting constraints, designers should always try to create a look and feel that is cutting-edge, memorable and high-performing. This is not just a matter of reducing image sizes. Decisions made at various levels of the design and the design process will have a significant impact. Let’s look at seven guidelines that have proven to be helpful tools at all design levels to achieve high-performing mobile user experiences.
1. Define UI Brand Signatures
Each user interaction with an app should reflect the story of the brand and should increase recognition, loyalty and satisfaction. Identifying which elements contribute most to the brand’s identity is essential. Examples are features, visuals, wording, fonts and animations. Our design teams work on many different products on different product teams. This could easily lead to several design and implementation variations of similar UI elements. Defining the core building blocks encourages reuse and discourages reinvention and, therefore, optimizes the design and implementation of a set of components.
One approach is to define the UI elements that form the core building blocks of the user interface and, together, to create the interface’s unique character. In the concept phase, identify those elements that do the following:
- Differentiate the app (for example, the photo-viewing feature in the Path app);
- Represent key functions (for example, a check-out feature for a store);
- Set the pattern of the design language (for example, the header in the screenshot below).
Windows Phone 7’s Metro UI is a great example of how fonts, layout and interaction can establish a unique design DNA. (Image: Wikipedia)
The core signature elements need to be the most responsive. They will be seen by users over and over and will be reused in different product features. By focusing the design and implementation on this set of elements, each optimization will pay off multiple times.
Offering price quotes to potential clients can be one of the most difficult tasks a freelance designer faces. But the difficulty of quoting clients grows exponentially if those clients don’t even offer a ballpark budget for you to work within.
