Why do I carefully make pages that users don’t know how to use? Why is my page conversion rate so low? The problem is you don’t know what the point is.
Two days ago in the classical teacher’s article to see such a story.
In Switzerland, there is a long tunnel beside Lake Geneva. When it was put into operation, engineers had a problem: many car owners would turn on their headlights when driving through the tunnel, but when they got out of the tunnel, they would stop to take photos as soon as they got a good view. When they returned, they found that their battery had run out. The engineer decided to put up a sign at the exit of the tunnel to remind everyone to turn off their headlights. “Please turn off your lights.” However, there is another problem. Many car owners enter the tunnel at night. If they see the sign and turn off their lights, they may be in danger.
One person said the sign read, “If it’s night, keep the lights on; If it is daytime, please turn off your headlights when you come out of the tunnel.”
I imagined the scene and illustrated it:
This answer seems very comprehensive, if the car was going 120 km/h, by the time you read so many words, and then react, you would have crashed.
The engineer eventually turned the sign into a question: “Are your lights still on?”
Yes, you read that right, it’s a simple answer that creatively provides a solution. If it’s daytime, the sign reminds the owner to turn off the lights, and if it’s night, it reminds the owner to turn on the lights. It’s a very short sentence, and that’s what we’re going to talk about today
How to make complex pages easier to use?
In your actual work, you will often encounter the following question:
Why do I carefully make pages that users don’t know how to use? Why is my page conversion rate so low?
The problem is that you don’t know what the point is.
As a designer, we may not be able to change the amount of information sometimes, but we can control how users receive information. Without further ado, here’s an example:
This is a confirmation page for meeting room reservation. What do you feel when you see such a page?
Crash! Collapse!
It’s full of words, and you have to read every word carefully to make sure that the information is correct, and it’s quite laborious, it’s very brain-draining.
Let’s analyze the problems of this page:
1. The whole page of information is unfocused. What does the page want the user to see? Visual differences are not obvious;
2. The hierarchy is not obvious. It just makes a simple classification of reservation information and conference room information, which is too general and difficult to read.
We saw the problem, so how should we design the page from the user’s point of view? Let’s get this straight:
1, make your page look more hierarchical, put the content in a group, use intimacy, make the logic of the whole page look clearer; For the same kind of information to ensure consistency, different information to reflect the difference, otherwise it will cause misunderstanding, people naturally feel the same style of information is related;
2. Highlight key information and make clear what users want to see. What do you want the user to see? Do not overestimate the user’s attention, for key information, should be magnified ten times to treat;
3, the text is too boring, can be graphical text, easy to accept information.
So, the above page could also be displayed like this:
Three improvements:
1. Use different spacing to show the hierarchical relationship of the page content, so that the page looks more hierarchical. The distance between elements in the same group and each other should be 20px, and the distance between different groups should be 50px, and the fixed height should be defined.
2, focus, focus on information for booking the conference room, meeting room name, the time, who is one of the most important part of the book, so the font size is made for the important information, the processing of color changes, the time element in a similar calendar display in the form of the integral with difference color display, the user of information come quickly to accept;
3, the conference room equipment in the form of ICONS, at a glance.
We often see similar examples, such as:
1, affectionately
For personal information in the form of modular, the main content and secondary content is clearly separated, the distinction between each module is also very obvious, the entrance of each function is combined with the form of graph + text, so that the page appears flexible and diverse, highlight the characteristic module, relieve the user’s reading fatigue, directly cut the theme.
2, an
This is the content displayed on the first screen of the booking details page in Airbnb. On the simple white background, titles at different levels adopt different sizes and colors. The higher the level, the bigger the size. No doubt guides the main action on this page.
Mail Box
This is the inbox page of mailbox 163. For users, unread emails are more important, so the font thickness and color of unread and read messages are clearly distinguished, and the read messages are weakened. In addition, blue dots are added before the unread messages, while the read messages are removed. Let users see important information at first glance when checking email.
summary
A lot of times, when we get a prototype, we’re in such a rush to show information that we forget to think about the amount of information we get. What does the user want to see? If you want to present important information, keep these tips in mind:
- Break down the information to make the page hierarchy clearer;
- Make important information pop up by bolding the font, contrasting colors, dividing elements, etc.
- Try to make the text graphical and present the information in a fun way.
That’s probably why baidu has only one search bar and the big fonts are popular in IOS11.
All right, sharing is over. If you have any questions, welcome to further exchange.
This article was originally published by @next-door Liu. Everyone is a product manager. Reprint without permission is prohibited.
Photo from PEXELS, based on CC0 protocol