User Experience Analysis: Design thinking transformation from web to mobile applications

"Editor's note" the author @ Liu Jin Legene with the rapid development of mobile Internet, many web product managers and designers have turned to mobile applications. What looks like a very relevant job may bring them a little trouble.

Many product managers and designers who have just come in contact with mobile applications are still accustomed to using the web as a way of doing apps. Zhangxiaolong said in his micro-letter: Never consider Web form, all considerations are based on the app. So what is the difference between mobile apps and the Web?

The following is the author of his work through the lessons of blood summed up a few things, in this share with you:

1. Single and focused

Innovative Factory has launched a application called "Pudding Love Life", which contains movies, food and other content, but after the launch has been flat. Later, these content was divided into different applications, but achieved good results. What is this for?

I think:

First, the mobile side of the screen is small, the scene is not fixed, too many functions will create a level of complex, difficult to operate, affect the experience. So the mobile end itself is not suitable for too many, too complex functions.

Second, from the scene considerations, users in the corresponding scenario, will think of the corresponding application. For example, when the user wants to see the movie, may search the element and the movie related application, but "loves the life" such product, generally will not take the initiative to be searched. Even if the user sees it, it doesn't know what it does. So do mobile apps, never "all-inclusive".

2, subdivide the demand and achieve the ultimate

Mo in micro-letter this formidable competitor before, how to survive and grow up? In addition, micro-letters can also be viewed nearby, shaking and other ways to contact strangers. Put aside the product positioning, marketing and other issues, I would like to compare the design differences.

When you open the application, on the micro-mail interface, you see the people you contacted recently, and their messages, and in the street, the first thing you see is the photos and personal signatures of strangers nearby.

Click "Find a Friend" on the micro-Letter tab, and then select "People nearby" to get to the list page of the following figure. But it is obvious that the micro-letter head is much smaller than the Mo Mo, the information is not as rich as the stranger. If you simply want to make a stranger, which application will you choose?

So my conclusion is that in the face of a strong opponent, find a subdivision of the demand point, to achieve the ultimate, nor is there no opportunity (regardless of marketing and other factors).

3, Function priority

The use of mobile applications, devices and the web has a huge difference. Therefore, the function of mobile applications, not only depends on the needs of users, but also consider the use of scenarios, equipment constraints and other factors. Do not migrate Web features directly to the app.

For example, the coupon product, the Web side more attention to print function, and mobile phone focus on the store display.

Micro-letter just out of time, many people feel strange: Tencent has a mobile phone QQ, why should we do a micro-letter? What's the difference?

After a while, I found that the original use of mobile phone QQ people have switched to micro-mail. Why do people think that on the phone, micro-letter than QQ easy to use it?

Then one day I finally got a little understanding:

Mobile phone QQ is a web-side function of the transplant, and the function of micro-letter more consideration of the characteristics of mobile applications (voice input, through the phone address book, QQ friends and other ways to add friends, shake a shake ...)

Therefore, when doing the app, it is necessary to fully consider the features of mobile application scene, equipment and so on to design the function and decide the function priority, rather than simply porting the Web function.

4. Simple and easy to use

When users use a Web site, they are usually sitting in front of a large screen, either using a mouse or using a keyboard, while using mobile apps, they may be using it while walking or in a crowded and rocking bus. Therefore the function of mobile application must be simple, the word must be big enough (word big can put content is less), the operation must be simple (to ensure the touch area) ... In short four words: simple and easy to use.

5, respect the platform characteristics and design code

Mobile applications are not like the Web side, the interface is large enough, the use of the environment is stable enough, even if there are difficult to understand the interface can also add a variety of guidance and hints. Even without any hint, users can try it on their own.

But the mobile application interface is small, hosting the content is very limited (web side of the content of a page, mobile applications may be divided into many pages to show, page jump Times high), the use of the environment is not stable, more difficult to operate, if the developers according to their "imagination" to design the interface, the consequences unimaginable.

Simply we have the design specifications of each platform can refer to. Design specifications to better maintain the consistency of different applications, so that users more easily understand, reduce the cost of learning, but also make the interface look more friendly. For product designers, careful study of the norms is also a learning process, to help us grow faster.

There was a PM who resolutely refused to look at the design specifications of each platform, that the product designers should not be bound by this, but should be bold to play. What he designed is really "Non-mainstream", and users are not easy to understand. I think that even if you really want to break any constraints, you should first fully understand it, and then on this basis to do a better breakthrough.

6, "Stupid and Big" UI style

Many former designers of web products, the first attempt to move applications are easy to make a mistake: the interface looks very beautiful, but it is not like the mobile application of the interface, how to see the shadow of the web. Why? Because designers tend to be smaller fonts, which makes the interface look more delicate and aesthetically pleasing.

But that won't work in mobile apps, and imagine how annoying it would be for users to see the dense print on a crowded, violent bus. So it's time for the designer to change his mind.

What are the characteristics of the UI style of mobile apps? In simple terms:

1. The word must be big enough to be at a glance

2. Layout is very regular, concise, more consistent, so it is easier to read

3. Less content, less color ...

These may be the web end of the designer is very annoying and repulsive things, but in order to make professional and easy to use products, we must adjust the idea in a timely manner.

7, unique style & exquisite interface

Although mobile apps look "stupid and stupid", designers are "bound" by platform specifications, but this does not preclude the emergence of many impressive mobile applications.

The mobile application interface should look more beautiful than the Web interface, and it would be a terrible thing to imagine an apple or an Android fuselage, with a rough, crude interface.

Moreover, on the small screen, the interface defects are more easily detected. The high-end users of these smart machines will not hesitate to delete your application with an unwanted expression.

So designers who do mobile applications often need to pay more attention to design details. Of course, this is based on the first understanding of platform specifications and design characteristics, on this basis to seek breakthroughs. Mobile apps actually give designers more room to play.

Not only to be exquisite, but also to be unique. Now the mobile application competition is very intense, the unique design is easier to let your application stand out.

8. Other

Mobile applications also have a lot of features different from the web side, such as input mode, horizontal screen mode, start, load, gestures, transitions, animation, and so on, these are not one of the narrative, you can find relevant content in the design specifications.

Summarize

Mobile devices are portable, small screen, inconvenient operation, but the use of scenes rich and varied, these characteristics are determined in mobile applications, not suitable for carrying complex functions and complicated content. Many times, we need to abandon the web side of the thinking, fully consider the characteristics of mobile devices, focus on thinking issues, in order to make more successful mobile applications.

Finally, the mobile application is neither a subsidiary of web-side products nor a replica of web-side products, and it should have its own unique vitality. It is not recommended that web-side products and client products be held by the same team, making it difficult to make professional and efficient products.

Author's Sina blog: http://blog.sina.com.cn/legene