Design your APP interface like a designer

[[140382]]

In early 2014, the number of people using mobile devices to access the Internet in the United States officially surpassed that of desktop computers, and mobile devices have since replaced desktop computers as the mainstream terminal for the general public to receive information. As a result, more and more start-ups are focusing their products on mobile apps. However, with the explosive growth of the number of apps on the market, how to attract users from a large number of products and retain users, user experience design has become one of the most important links.

The scope of user experience design is very broad, ranging from understanding users, exploring their potential motivations to usability, aesthetics, etc. In layman's terms, how to make a product give users a pleasant feeling, the knowledge and methods involved are all so-called user experience design.

In the entire APP design, the interface and usage process are where users can most directly experience the quality of the product. Even if you have grasped great value propositions and problem-solving methods in the early research and ideas, if the last step in APP design - the interface and process give users a bad impression, all your previous efforts will be in vain. This shows the importance of interface design.

This article will show you how to redesign a simple APP interface, so that you can get familiar with the way of thinking in interface design. The entire design process includes:

• Define the scope of your design
• Organize your information structure
• Consider different states of information
• Consider the liquidity of information
• Use your sense of beauty

I will use the suggestions and modification plans on the interface of Phofun, a product I recently gave to a friend, as an example to encourage everyone to think about it.

Phofun is a social APP that allows friends to sell creative photos to each other. In it, everyone sets a price for each photo, describes the photo in one sentence, and then shares it with friends. Friends who receive the photo cannot see the photo at first, and can only decide whether to use the gold coins in the APP to actually view the photo based on the description and price of the photo. After viewing, users can give feedback and evaluate the photo immediately.

Simply put, this is a photo community driven by voyeurism and virtual economy. Recently, Phofun wants to expand the community from sharing among known friends to allowing strangers to share and sell photos with each other. In other words, it wants to establish a market where strangers around the world can buy and view each other's photos.

During the development process, my friend started developing the store interface without thinking about it carefully. The following picture is the interface under development at that time. After seeing this picture, how would you redesign it?

Doesn’t it seem like you don’t know where to start?

Come and follow me step by step to organize your thoughts and redesign it!

Defining the design scope

Before you start designing, ask yourself, "What is the scope of my design?" For some projects, you can start exploring needs from preliminary investigations, and for some projects, you have already set business goals and need to work from interactive design... Every time you design, you must first clarify the limitations of your design to avoid designing a product that cannot be developed in time or integrated into existing products.

In this case of interface design, I cannot redefine the requirements, the way users interact with the product, the product design language, etc. All we can do is the most basic interface design. At this stage, our design goal is to ensure that the interface expresses appropriate and suitable information so that users can clearly understand the way the interface interacts.

Organize your information structure

Before you pick up your pencil and start drawing an interface, think about what information your interface needs to present.

The first step is to organize your product's information architecture, that is, the relevance and hierarchical relationship of the information in your product, and then design how to organize and present this information to users.

In our case, the store sells photos, so we need to first think about what information each photo on the shelf presents, and at the same time think about the relationship between these information. For example, in the photo information, the selling price and the countdown time are together, so we can classify them to facilitate the interface design later.

The sorting result is shown in the figure above. Only with it can we understand what information this interface needs to present and the classification relationship of this information.

Why do you need to know these two points? Because only when you understand what information needs to be presented, you will know what information to put on the interface; only when you understand the classification relationship of this information, you will know how to put the information on the interface.

In the interface, we tend to put similar content and interactive elements together so that users can more easily understand the relationship between elements. Why does putting them together make it easier for users to understand? The reason is that there is a so-called law of proximity in Gestalt psychology. If two elements are placed closely together, humans will establish a relationship between the two things. Even dissimilar things may have a visual grouping effect because of their close distance. For example, there are circles on both sides of the picture below, but you will not regard these two circles as elements of the same group.

Consider different states of information

Next, we need to consider the different states of information on the interface, because the APP interface is not a picture drawn on a fixed-size paper, but can change part of its interface information through interaction with users. For example, in our case, each photo has the states of "I haven't bought it yet" and "I have bought it", and the evaluation information has different states of "I haven't rated it yet" and "I have rated it".

These states will change with user interaction and need to be presented on the interface for users to see. Through the information of these state changes, users can feel that they are interacting with the system and understand their own operating status.

Consider the liquidity of information

In addition to the different states of the interface, the difference between interface design and graphic design is that information is fluid, that is, the information on the interface is not of fixed length. For example, the length of each person's ID name is different, the length of the photo description is also different, the remaining countdown time is different, and the number of reviews is also different. These texts of different lengths may collide with other UI elements on the screen. For example, in the purchase interface below, when the product name is too long, it will cover the payment button.

There are three ways to deal with this problem:

• Limit Length

Length limits can be divided into input limits and display limits. Input limits limit the length of characters a user can enter when entering information. Display limits hide information that is too long when the information length exceeds the display range. The most commonly used method is to truncate the information and add ellipsis.

• Dynamic resizing

Dynamically shrink text according to different text lengths without losing readability. Make text adapt to its length.

• Dynamically adjust the display format

Some information can be expressed in more than one way. When the information is too long, you can use a shorter expression, such as September instead of Sep., 1200 instead of 1.2K, 1 minute 30 seconds instead of 90 seconds... and so on.

After thinking about the information to be presented on the interface, you can sketch on paper or use prototyping tools such as Axure RP and Balsamiq to draw wireframes.

#p#

Use your sense of beauty

Once you have finished your sketch and checked that everything is OK, open up Photoshop, Illustrator or Sketch to create a beautiful visual draft!

In the final solution, you can see how I presented the previously organized information on the interface:

I put the elements of the same group in the information structure together, for example, I put the price and purchase countdown time together in the upper right corner, so that users can know the purchase-related information at a glance. For the display of different states of the interface, I made the background of the photos that the user has purchased darken, indicating that the photos have been operated; the purchase information (price and purchase countdown time) is no longer meaningful to the user, so it is hidden and replaced with the word "purchased"; for the part of photo evaluation, I used the icon colors of small flowers, feces and comments to indicate whether the user has evaluated the photo, and for information of different lengths, I handled them differently:

• Countdown time: only display the time in the highest unit. For example, if there is 1 day, 20 hours and 5 minutes left, only display 1 day. The reason is that in the Phofun store, there is not such a high demand for time information as in the auction bidding application, so the time information that is not so important to the user is hidden.
• Number of reviews: Use the method of converting one thousand to 1K and one million to 1M, and limit the number of characters used in the number of reviews to less than three.
• Photo description: Users are limited to 70 characters, and the text size is dynamically adjusted according to the length of the characters. The font size is 16px for less than 28 characters, 15px for 28 to 56 characters, and 12px for more than 56 characters.

***I believe that the purchase number in the evaluation information is not an important indicator for users. What users want to know is whether other people think the photo is good or bad. Therefore, the number of small flowers, the number of feces and the number of comments are the important elements for users. Therefore, the purchase number information is removed, and possible operations other than purchasing and deleting the pictures, such as reporting, sharing, etc., are hidden in the ellipsis mark on the far right of the evaluation column. When the user clicks the ellipsis mark, a further menu will appear.

Start designing your own APP interface

After learning how to design an APP interface, are you itching to design your own APP? Start designing your APP UI now!

After you finish designing, leave a comment below to share and show off the APP interface you designed! If you encounter any problems in the design, you are also welcome to leave a comment below to ask questions!