The high-performance mobile user experience is achieved in this way !, Integrate mobile users

The high-performance mobile user experience is achieved in this way !, Integrate mobile users

In interpersonal relationships, a good first impression is very important. People are willing to seek trust and honesty from each other and expect to reproduce and enhance these goodwill in the next experience. The same principle applies to mobile applications or Internet products. "Design" plays an extremely important role in building a good brand reputation and its lasting trust relationship with end users.

In users' expectations, mobile apps should be accurate, friendly, and efficient. However, the limitations of mobile devices have indeed brought many challenges to product design. To build a trustworthy mobile app user experience, the performance of the product is an extremely important key factor.

In this article, we will discuss the relationship between the design and performance of mobile applications, and understand seven relevant design principles. These guidelines are gradually summarized by our team in various mobile application projects. We hope they can also help you meet product requirements, more reasonable planning and design solutions from the perspective of performance.

Performance of mobile applications

People need to fulfill certain needs in certain scenarios through mobile applications, such as improving efficiency, comfort, or simply seeking fun. "Efficacy" is a core factor in mobile applications. They must be fast and stable enough to provide functions and value effectively in various variable use cases.

However, in reality, we often find that for many mobile applications, the design and development cycle begins with a strong demand for visual appearance: "It must look great !" It is true that an outstanding visual style can attract users through excellent first impressions. However, to make an application favored by users for a long time, the quality and performance of each aspect are vague, especially in terms of performance. Looking at unused products will only undermine its credibility, and users will soon notice its slow running speed, even because of the unbearable loading time or frequent crashes, this application cannot be used at all. This is a great damage to product availability and brand awareness. In users' expectation, an application must first be responsive. Otherwise, the most direct consequence is poor rating in the App Store, with a low installation rate.

It is the interface comparison between Twitter and Cookmate. Aside from the basic user factors, even if they have visual effects, cookmate user ratings and comments cannot go beyond the simple Twitter client on the interface.

Performance and brand differences

Each aspect of the product affects brand awareness. Generally, users' requirements are simple. They just want to find the most suitable tool to help them improve some aspects of their lives. To make your products stand out in the colorful market, establish a brand, and truly attract users, your applications must be stronger than your competitors in some aspects, or have characteristics that other applications do not possess. As an important element in the mobile user experience, excellent performance will directly help your applications surpass other similar products at the brand level. Further, if you can overcome certain technical challenges and make relevant special functions run smoothly and stably, this will definitely become a unique selling point that cannot be copied in your products.

With this in mind, the iPhone app of Flickr is a good example. On his main site, Flickr once declared that their application has two major goals: to help users display their photos, and to provide a new way to organize photos and videos. Their applications have indeed achieved these two points, effectively improving the brand credibility.

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

• What are the differences between our applications and competitors?
• In what ways can we do better than competitors?

After clarifying these problems, we will focus on product design and development.

Performance and Design

No matter what kind of product is built, the correct method is crucial, which is also the original intention of people to develop design and engineering standards. The design of an automobile will affect its aerodynamic performance. A bridge must have a beautiful appearance, the ability to withstand wind and traffic load is also the core factor that must be considered during the design process. The same principle is embodied in the design of mobile applications. The selection of the design scheme will affect all aspects of the application, including content presentation, interactivity, visual appearance, and the most important thing-performance.

We can find that many product teams will sacrifice performance responsibilities to technical developers. The most direct result of this traditional concept is that, many potential performance problems are exposed only at the end of the design process and the early stages of development. In fact, relevant roles in technical development should be involved in the project in the initial stage of product creativity to maintain the technical feasibility review of the design scheme.

The following are some elements related to the performance of the user interface, and the seven design principles that will be introduced in the second part of this article, which will help you to understand a little bit, the performance of mobile applications is not only a concern for technical personnel, but also closely related to the design.

Performance Elements in the mobile app user interface

Users' perception of mobile app performance comes from many aspects, including startup speed, interface loading time, smoothness of animation effect, response time to interactive behavior, and error status. The following shows us some elements: applications (including visual images, interactions, content, functions, code algorithms, etc.) under certain hardware conditions (CPU, screen size, etc) running on a mobile device of a System Platform (iOS or Android. For many applications, they also need to connect to the server through the network (LTE, 3G, 2G. The above two red areas represent the most vulnerable part of a mobile application product to design and development decisions. The following two gray areas are the factors that need to be considered during the product design process.

The decision of each factor shown in the figure will affect the performance of the final product. Any form of combination, enhancement (such as advanced visual effects), or restrictions (such as poor network connection conditions) will increase product complexity, reduce performance, and damage the user experience. For example, to enhance the visual effect, the application must be at a low speed, connect to the backend server to obtain more resource files-this is a combination of conditions that will inevitably reduce product performance.

Seven Design Guidelines

In the past few years, there have been many changes in the mobile field. Some new UI design styles are emerging. The screen size and processor performance specifications of devices are gradually moving closer to desktop devices, and the input method has also undergone revolutionary changes.

In this case, designers need to constantly try a more advanced, distinctive, and superior performance design solution. The relationship between design and performance is not simply about reducing the image size. There are various decisions at different stages and layers of the design process, will affect the performance and efficacy of the product. Next, let's take a look at some design guidelines that can effectively help us build a high-performance mobile user experience in practice.

1. Define the brand characteristics of the user interface

Every place in a mobile app that can interact with users, whether a single interaction element or a functional module as a whole, should help improve the brand recognition, user loyalty and satisfaction of the product; designers should be able to identify the most important of them, such as special features, visual styles, texts, fonts or animated effects. Our team has handled many different products. Although they have their own brand styles, most of these design schemes are derived from the same set of basic UI elements. We can combine basic UI elements into interface modules, while componentized and reusable core interface modules further constitute the entire user interface.

Therefore, by setting the style of these UI elements, we can gradually create a unique characteristic that reflects the brand style for the interface as a whole. In the concept phase, try to identify the UI elements that play a key role in the following aspects:

• Functions that help improve the differentiated competitiveness of products (such as photo inspection in Path ).
• Core features of the product (such as the checkout function in online shopping applications ).
• Modeled design language. Windows Phone 7 Metro UI is a typical example: a strong style of font, layout, interaction, and other aspects of the model, constitute its unique design genes.

These core elements that reflect brand characteristics must be highly responsive. They will be constantly seen and used by users, and will be reused in different functional interfaces of the product. Their performance will directly determine the overall performance of an application. Focusing on these key elements of design and development is a matter of getting twice the result with half the effort.

2. Determine the product priority

The term "efficacy" can be understood at the entire product R & D cycle and market level. Many times, companies want to quickly launch a new product or develop a product series (for example, multiple similar products based on one platform or a single product targeting different platforms ), or, out of time and resource restrictions, You must select one product from multiple products for priority. In such cases, the power of design and optimization must be focused on the most important products. The priority matrix can effectively help us clarify our clues.

The options are system platform, current user volume, expected user volume, and competitors. Of course, we can also weigh from other perspectives that are more suitable for our own projects. If the product audience is mostly Android users and your competitors are keeping an eye on them, instead of allocating their energy to various platforms, instead, it is better to concentrate resources to create a concise and efficient Android Application and put it into the market as soon as possible.

3. Recognize user needs

Many of the projects our team has experienced are faced with similar problems when we started: the list of functional requirements is too long and the focus is not clear, so it is difficult to deal with them before the project deadline... Customers or demanders often think about product functions without any doubt, but often ignore the real needs of users.

For example, whether you are in a small town, Oxford Street, or on the Internet, the essential purpose of shopping is to find and buy suitable products. A good user experience can bring more fun to the shopping process, but it must not undermine the core goal of this matter. Users want to quickly find a product through a shopping application and complete the purchase smoothly; they even ignore the additional features used to enhance experience and fun.

Shows two design schemes for the product details page of a shopping application. The prototype on the left contains some "advanced" shopping functions, such as gifts, related products and user reviews. The prototype on the right simplifies a lot: the gift function is removed; only the overall score of the item is displayed. If you need the score, click the link to view all the comments. The space saved is used to display the full text of the item description. You can view the entire item without further clicking.

/>

 

Obviously, the solution on the right allows the team to focus on the core functions of design and development. From the product perspective, this is also the most suitable solution for users' direct needs and the most effective performance. Even if the content and functions of the "icing on the cake" nature really need to exist, it should be after we have fully optimized and rationally designed the core features of our products, and does not affect the availability and performance of core functions.

4. Optimize user interface processes and elements

Users do not like to wait. Among the top ten internal principles of Google's user experience, the time factor ranks second in terms of "user requirements. The optimization of each interface flow of an application and its components can reduce the loading and response time to varying degrees.

　　A. Enhanced sensitiveness

In many cases, designers and developers do not have control over product performance: the network speed may be slow, the system background may be running multi-task, and a function may require a large amount of system resources to support computation. In any case, when latency occurs, we should at least let the user perceive that the application is still running. Even in unpredictable bad conditions, reasonable design schemes can also play a good role in communication.

The first step is to identify the functional processes that may cause latency, such as those that need to obtain background data or execute a large number of operations. Next, add necessary Status feedback identifiers in these key processes, such as loading animation effects or text tips.

Demonstrate a typical content search process:

The user has gone through four steps in this process:

1. Click search.
2. The loading animation prompt is displayed.
3. The text in the search result is displayed. The image is still being loaded.
4. All text content is displayed.

Obviously, it is much better to divide the process into several transient steps and give Status feedback to the user experience than to go through a wait period from the first screen and then go straight into the fourth screen. Even if it takes the same time in the middle, the step-by-step design can make the application performance more smooth and efficient.

Another typical scenario is when the application was just started. First, display an image suitable for the style and layout of the application, which will reduce the user's perception of the loading time. When combined with the loading animation prompt, the effect will be better.

　　B. Optimize UI elements

Any UI element will affect the overall performance of the product. Every bit of optimization can promote the performance improvement. You can focus on the following aspects:

• Element type: Different Types of UI elements have different effects on product performance. optimization can be performed based on a certain priority, for example, a centralized resource can be used to process audio, video, map, and other media files.
• Specifications and features of Elements: For image files, the resolution or color depth may affect the rendering time. In Android, any resources (jpg and png) that can be drawn will be decoded into bitmap format. Therefore, each image with optimized resolution or color depth can save several KB.
• Element output mode: This can be done differently based on the specific situation. For example, for an application that requires a whole image as the background, if the main content has its own non-translucent background style, therefore, there is no need to output all the large background images.

5. Define the weight rules of interface elements

The process of designing a solution is like exploring a land with obstacles. We must always weigh and choose from factors such as functionality, appearance, availability, and performance. For some system platforms, designers need to make more compromises. However, regardless of System Restrictions, products must maintain their own brand characteristics.

We can use some methods to determine the importance relationship between UI elements. Some elements contribute a lot to the brand effect, and reasonable removal of those relatively secondary elements is also an effective way to improve product performance. From this perspective, our team classifies the UI elements as follows:

• Essential: Core UI elements that best reflect brand characteristics, such as the title bar containing the logo and product name.
• Alternative: In a relatively high-end design scheme, such elements can be replaced by outputs with relatively low performance load. For example, remove the translucent effect of the title bar.
• Not necessary: These elements are usually used to enhance the user experience and can be simplified or removed when necessary. For example, the number of search results is reduced from 25 to 10.

6. Use the information panel

Information Communication between teams is essential for successful products. In many of the projects we have experienced, the design, development, marketing, and other departments have different understandings of the same product. Various functional requirements and resource restrictions from different functional perspectives will affect the performance of the final product. Therefore, it is important to maintain smooth information communication.

The information panel is a solution for enhancing communication between teams. It can help us to measure and monitor the current status of the product and set the target for the next stage; A clear presentation method makes it easier for teams to communicate product status, function expectations, design and development priorities in a timely manner.

We usually identify the following factors in the information panel:

• Core functional requirements: Lists the core features that users will experience when using products.
• Benchmark score: Lists performance data of similar products of key competitors in these core functions.
• Current completion level: Lists the performance data of your products in these core functions at the current stage.
• Target: 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.

There are many similar methods and tools, including the Android SDK itself or TraceView.

7. UI Engineering Technology

It is not easy to implement an excellent design scheme through corresponding technical methods. In addition to faithfully restoring the design scheme, to make the code deliver efficient performance at the same time, it usually requires expert technical capabilities, especially for mobile application products, relevant personnel must have rich front-end and back-end development experience and have a deep understanding of visual and interactive design.

Layout, images, and animation output and implementation methods all involve functional issues. When selecting an implementation scheme, you 'd better consider some specific aspects, such:

• Intelligent content loading: You can use a method like lazy loading in a proper place. First, load the content of the visible part and trigger loading of other content through the user's browsing behavior. This method can effectively improve the interface function and make the experience smoother.
• Loading of background images: The background implementation method also has a critical impact on the interface performance. Generally, the background image can be implemented by means of a large image, a small image, or a pure style code. The most appropriate implementation method is required for different types of interfaces.

In some projects, the design and development departments have separate responsibilities for a product. In this case, the user interface of the final product has a lack of uniformity in appearance and performance. Because each team has their own goals, the execution force is often unable to concentrate in areas that must be fully used, such as user interface performance optimization. In this case, one of our solutions is to integrate functional roles in front-end development into the design team, this makes the development work involving UI restoration and front-end efficiency more in line with the work ideas of user experience design.

Summary

Through this article, we can understand that the design work at each layer will affect the performance of the product to varying degrees. Therefore, in the design process, the functional factors must always be taken into account. Otherwise, potential performance problems will be exposed more and more in subsequent processes.

We have successfully implemented these seven design principles in the design process of many products, and have effectively improved the performance of our products in terms of performance and experience, make them look and use great!

Original English version: Seven Guidelines For Designing High-Performance Mobile User Experiences

Error Message
The Internet has produced a large portal website in this way. How can I ask the prawns?

I have bought this book online, and I have spent 95 RMB in Professional Books, a total of four Professional JAVA books; large portal websites are made in this way
This book is mainly for the SSH2 combination framework case developed by high-performance large-scale portal websites. It is comprehensive and in-depth. There are 906 pages. The author is Liu Bin, a senior online architect, this book also contains the comments from Zhou Ming, CEO of internet online. The purpose and positioning of this book are both described. This book contains a CDROM. Currently, there are case studies in the latest technical structure, is a professional book with strong combat ability;