How to build a high-performance mobile user experience

In the new home a little bit settled down, but the heart or lack of practical sense of direction, cats are also some look forward to panic, to continue to habit; I hope everyone is well. The present candidate seems to have already had a translation, but as I said in "About Beforweb," I only pick what I like, my own learning and collection value, other factors that I do not have a half a dime relationship. No more, just get to the point.

In interpersonal relationships, good first impressions are important, people are willing to seek trust and honesty in each other, and expect to reproduce and enhance those feelings in the ensuing experience. The same applies to mobile apps or Internet products. In the process of creating a good brand reputation and lasting trust relationship with end users, "design" plays an extremely important role.

Mobile applications should be accurate, friendly and efficient in the expectation of users. However, the limitations of mobile devices do pose many challenges to the design of the product. To create a trustworthy mobile user experience, the performance of the product is a critical factor.

In this article, we will discuss the relationship between the design and performance of mobile applications and understand seven relevant design guidelines. These guidelines are our (English original author) team in various types of mobile applications in the actual project summed up, and hope they can also help everyone in the fall of the real demand for products, from the point of view of the performance of more reasonable planning and design.

Performance of

mobile applications

People need to use mobile apps to accomplish certain demand goals in a scenario, such as improving efficiency, comfort, or simply having fun. "Efficacy" is a core element of mobile applications that must be fast enough to provide functionality and value effectively in a variety of variable usage scenarios.

However, in reality we often find that for many mobile applications, the design and development cycle begins with a strong appeal for visual appearance: "It must look great!" "Admittedly, a good visual style can attract users with a good first impression, but the quality and performance of each is ambiguous, especially in terms of performance, to get the user's long-term appeal." Seeing a product that is not used will only destroy its own credibility, and users will soon be aware of its slow speed, or even the inability to use it because of unbearable load times or frequent crashes, which can be extremely damaging to product usability and brand perception. In the user's expectation, a application must first have a quick response, otherwise, the most direct result is in the App store to get a bad rating, the installation rate is poor.

The image below is a comparison of the interface between Twitter and Cookmate's two apps; Aside from the user base, even with dazzling visuals, Cookmate's user ratings and evaluations are not going to go beyond the simple simplicity of the Twitter client.

Performance and Brand difference

Every aspect of the product will affect brand perception. In general, the user's requirements are simple, they just want to find the most appropriate tools to help them to effectively improve some aspects of life. To make your products stand out in a colorful market, build a brand and really attract users, your application must be stronger than your opponents in some ways, or have features that other applications don't. As an important element in the mobile user experience, excellent performance will directly help your application at the brand level beyond other similar products. Further, if you can overcome some of the technical challenges, so that the relevant features can be smooth and stable operation, then this will definitely become your product is difficult to replicate the unique selling point.

Flickr's iphone app is a good example of this. Flickr once declared in his main station that their application has two main goals: helping users to display their photos and providing new ways to organize photos and videos. Their application is really good to do this two points, effectively enhance the brand credibility.

Therefore, in planning your application products, it is necessary to first analyze the market and ask yourself two questions:

How are our applications different from those of our competitors? What can we do better than our competitors?

After clarifying these directional questions, focus on the design and development of the product.

Performance and Design

No matter what kind of products to build, the right way is essential, this is the design and engineering guidelines for people to formulate the original intention. The design of a car will affect its aerodynamic performance, a bridge, in addition to have a beautiful appearance, the wind and traffic load bearing capacity is also in the design process must consider the core factor. The same is true in the design of mobile applications. The choice of design options affects all aspects of the application, including content rendering, interactivity, visual appearance, and, most importantly, performance.

We can see that many product teams throw performance responsibilities to technology developers; the most direct result of this traditional concept is that many potential problems involving performance are exposed only at the end of the design process and at the beginning of the development phase. In fact, the relevant role in technology development should be moderately involved in the project in the early stages of product creativity, and maintain the technical feasibility review of the design proposal.

The next few elements that are related to the performance of the user interface, and the seven design guidelines to be introduced in the second half of this article, will help you realize that the performance of mobile applications is not just a matter for technicians to consider, but also a very close link to design.

Performance elements in

Mobile application user Interface

The user's perception of performance of mobile applications comes from many aspects, including start-up speed, interface loading time, smooth degree of animation effect, response time to interactive behavior, and error status. The following diagram shows us some of the elements: applications (including visual images, interactions, content, functions, code algorithms, etc.) run on a mobile device in a system platform (iOS or Android) under certain hardware conditions (CPU, screen size, etc.). For many applications, they also need to be connected back to the server via the network (LTE, 3G, 2G). The two red areas above represent a part of a mobile application that is most susceptible to design and development decisions. The following two gray areas are part of the product design process to consider the containment factor.

Decisions about each of the factors shown in the diagram affect the performance of the final product. Any combination of forms, enhancements (such as advanced visual effects) or restrictions (such as poor network connectivity) can increase product complexity, reduce performance, and disrupt the user experience. For example, if you want to enhance your visuals, the application must connect to the backend server for more resource files at slow speed, which is a combination of conditions that is bound to degrade product performance.

Seven Design Guidelines

There has been a lot of change in the Mobile world in the past few years. New UI design styles are emerging, and device screen size and processor performance specifications are moving closer to the desktop, and the input method has revolutionized.

In this case, designers need to always try to be more sharp, distinctive features, excellent performance of the design program. What we call the relationship between design and performance is not simply the reduction of the size of the picture, but the various decisions at different stages and levels of the design process will have an impact on the performance and effectiveness of the product. Here, let's look at some of the design guidelines that can help us build high-performance Mobile User experience in combat.

1. Define the brand characteristics of the user interface

Every place in a mobile application that can interact with the user, whether it is a single interactive element, or a functional module as a whole, should help to enhance the product's brand awareness, customer loyalty and satisfaction; designers should be able to identify the most critical of them, such as feature features, visual styles, copywriting, Font or animation effects, and so on. Our team has handled many different products, although in the overall sense they have their own brand style, but most of these designs are derived from the same set of basic UI elements developed. We can combine the basic UI elements into an interface module, while the modular, reusable core interface modules can further form the entire user interface.

Therefore, by the style of these UI elements, we can gradually create the interface as a whole to reflect the unique characteristics of the brand style. In the conceptual phase, try to identify the UI elements that play a key role in the following areas:

helps improve product differentiation and competitiveness (for example, photo viewing in path, and so on). Product core features (such as checkout functionality in online shopping applications). A modular design language. The Metro UI for Windows Phone 7 is a typical example: a strongly styled pattern of fonts, layouts, and interactions forms its unique design gene.

These can embody the brand characteristics of the core elements, itself to be very strong responsiveness. They will be constantly seen and used by users and will be reused in different functional interfaces of the product, and their performance will directly determine the overall performance of an application. Focusing design and development on these key elements will be a multiplier.

2. Determine product priority

The understanding of the term "efficacy" can be increased to the whole product development cycle and market level. Most of the time, companies will want to quickly online a new product, or develop a product line (such as a variety of similar products based on a platform, or a single product for different platforms), or for the time and resources constraints, must be selected from a number of products to prioritize. In such cases, the work force for design and optimization must focus on the most important products. Priority matrices can help us clear our head.

The selection factors shown above include the system platform, current user volume, expected user volume, competitor situation, and of course, we can make trade-offs from other aspects that are more suitable for our own projects. If your product audience is mostly Android and your competitors are keeping an eye on them, it's better to focus on a simple and efficient Android application and get into the market as quickly as possible instead of sharing your energy among the platforms.

3. Identify user needs

Many of the projects that our team has experienced have been confronted with similar problems at the start: the list of functional requirements is too long, the focus is ambiguous, and it is difficult to get it done before the project deadline ... The customer or the demand side usually has the imagination of the product function, but often ignores the user's real demand.

For example, whether you're in a small town, or Oxford Street, or on the Internet, the essential purpose of shopping is to find the right product and buy it. A good user experience can bring more fun to the shopping process, but it must not undermine the core objectives of the event. Users want to quickly find a product through the application of a shopping class, and they can even ignore the extra features used to enhance experience and fun.

The following figure shows two design options for the Product Details page for a shopping application. The prototype on the left contains some "advanced" shopping features, for example, gifts, related goods and user evaluations; The prototype on the right simplifies a lot: It removes the gift feature, displays only the overall rating of the product, and clicks the link to view all comments if the user needs to. Save the space to display the full text of the product introduction, Users do not need to click further to complete the browsing.

Obviously, the right side of the program allows the team to focus on the core functions of design and development, from the product point of view, this is the most consistent with the user's immediate needs, the most performance-efficient solution. Those "icing on the cake" nature of the content and functions, even if it is necessary to exist, it should be in our product core functions to do the most adequate optimization and the most reasonable design, only after the debut, and can not affect the availability of core functions and performance.

4. Optimize user interface Processes and elements

Users don't like to wait. In Google's user experience of the top ten inherent principles, the time factor closely followed the "user needs" in the second place. The optimization of each interface process and its constituent elements can reduce the load and response time to varying degrees.

A. Enhanced visibility

In many cases, designers and developers do not control the performance of the product: The speed may be slow, the system may be running a multitasking, a feature may require a large number of system resources to support the operation and so on. In any event, we should at least let the user perceive that the application is still running when the delay occurs. Even in unpredictable bad conditions, reasonable design can also play a good role in communication.

The first step is to identify which functional processes may cause delays, such as those that need to get background data or perform a large number of operations. Next, add the necessary status feedback identifiers to these key processes, such as loading animation effects, or some copy tips.

The following illustration shows a more typical content search process:

The user has gone through four steps in this process:

Click on the Search button. See loading animation prompts. I see the text in the search results, and the picture is still loading. See all the text content.

Obviously, it is much better to divide the process into a few short steps and give state feedback to the user experience than it is to go through a wait time from the first screen and then jump straight into the fourth screen. Even if the same time is spent in the middle, step-by-step design can make the application performance in the sense of smoother and more efficient.

Another typical scenario is when the application just started. The first display of a picture suitable for the application style and layout will reduce the user's perception of the load time, and it will work better with the loading animation prompts.

B. Optimizing UI elements

Any UI element will affect the performance of the product as a whole, and every bit of optimization can be a boost to performance. You can focus on the following:

Type of element: Different types of UI elements have different effects on product performance; optimization can be done at a priority level, such as the ability to centralize resources to process media files of the same type as audio, video, and map. The specification of the element: the resolution or color depth will affect the rendering time when taking picture files. In Android, any available drawing resources (JPG, PNG) will be decoded into bitmap format. So, each picture that is optimized for resolution or color depth can save a few kilobytes. The way the elements are exported: This can be done differently for specific situations, such as for applications that require an entire picture as a background, if the main content part has its own semi-transparent background style, then the large background picture is not necessarily all output. 5. Define the weight rules of the interface elements

The process of crafting a design plan is like exploring on a land full of obstacles, and we must always weigh and choose between features, appearance, usability, performance, etc. For some system platforms, designers have to make more compromises. However, regardless of the limitations of the system, the product must maintain its own brand characteristics.

We can determine the importance of the relationship between UI elements in a certain way. Some elements contribute a lot to the brand effect, and a reasonable removal of the relatively minor elements is also an effective way to improve product performance. In this perspective, our team classifies UI elements as follows:

essential: A core UI element that best embodies the brand's identity, such as a title bar that contains logos and product names. Replaceable: In relatively high-end designs, such elements can be replaced by relatively low performance loads. For example, remove the semitransparent effect of the title bar. Non-essential: Such elements are often used to enhance the user experience and can be simplified or removed when necessary. For example, the number of search result entries is reduced from 25 to 10.

6. Using the Information Panel

Information communication between teams is essential to creating successful products. We have experienced many projects, the design, development, marketing and other departments of the relevant staff of the same product understanding is very different. Various functional requirements and resource constraints from different functional perspectives will affect the performance of the final product, so it is important to keep the information communication smooth.

The information Panel is a solution for enhancing communication between teams. It can help us measure and monitor the current state of the product and set the target for the next stage; a glance presentation is more convenient for the team to communicate with each other about the product status, function expectation and design and development focus.

We usually identify the following factors in the information Panel:

Core functionality Requirements: Lists the core features that users will experience when using a product. Benchmark Score: Lists performance data on these core functions for the same products of key competitors. Current degree of Completion: Lists performance data on these core functions for your product at the current stage. Goal: To list the goals and expectations of your products in these core functions. Progress status: Indicates whether the current status of the product has reached the target expectations.

There are a number of similar methods and tools, including the Android SDK itself, or TraceView.

7.UI Engineering Technology

It is not easy to realize the excellent design plan through the corresponding technical method. In addition to the faithful restore design, to make the code can bring efficient performance, often requires expert level of technical capabilities, especially for mobile applications, the need for relevant personnel have rich experience in front and back desk, while the visual and interactive design has a profound understanding.

Layout, image, animation output and implementation are involved in the effectiveness of the problem, when you choose to implement a scenario, it is best to consider some specific aspects, such as:

Intelligent Content Loading: can be used in the appropriate place such as lazy loading, first load the contents of the current Visual section, and through the user's browsing behavior to trigger the loading of other content. This method can effectively improve the interface effect, so that the experience more fluid. Background graphics loading: the background of the implementation of the impact of the interface is also very important; In general, background graphics can be implemented through the whole Zhang Datu, thumbnail tiles, or pure style code. For different types of interfaces, the most appropriate implementation needs to be adopted.

In some projects, design and development and other related departments for a product of the responsibility is separate; In this case, the final product user interface in terms of appearance and performance is bound to be lack of uniformity. Because each team has their own goals, execution power is often not centralized in areas where there must be a concerted effort, such as user interface performance optimization. One of our solutions to this situation is to incorporate the functional role of front-end development into the design team, which can make development work related to interface reduction and front-end performance more consistent with user experience design work.

Summary

Through this article, we can understand that each level of design work on the performance of the product has a different degree of impact. Therefore, in the design process, the effectiveness of the factors are always need to be considered. Otherwise, potential performance problems will be exposed more and more in subsequent processes.

For these seven design guidelines, we have successfully implemented many products in the design process, and effectively improve the performance of the product experience, so that they look, use it is very good!

original site to compile the article. If you want to reprint, please specify: This article from the is for Web English original: http://www.smashingmagazine.com/2011/07/18/seven-g ... Translator Information: C7210-web design and front-end players, is now working in the Mass Comment Network product Department user Experience Design Group (UED)