A good user interface and high conversion it simple to use. That is, it is good for business, and for the people using it. Here is a list of ideas we’ve tested.
1 One column instead of a few
One column more accurately reflects what you want to convey. Members are from top to bottom at a predictable path. The design of a multi-column there is a risk of distraction from the main task of the user page.
2 Give something instead of immediately trying to sell
Gift is a friendly gesture. But other than that, it is a powerful hidden persuader factor working for reciprocity. Even though it’s obvious, but if you are to someone well treated, in his eyes, your score increases.
3 Combine similar functionality, but do not fragment UI
Over time, easy to create a number of different sections, elements and functions that perform the same. Track duplicate functionality, as it loads the user. The more of these takes, the harder the user to use your service.
4 Provide evidence from other people, not just a story about yourself
Another great tactic of persuasion, which directly affects the conversion. Approval of your proposal encourages others to take action. Try to show a response, or usage statistics service.
5 Repeat the call to the main action
Repetition appeal works better on the page length, or it may be repeated on different pages. It should not be on the same page showing the proposal for ten times. But now in vogue long pages, which does not hurt to repeat the offer from both above and below. When people reach the bottom, they stop and ponder their next move.
6 clearly distinguishable contrasting styles instead of blurry
Visual design – color, depth, contrast – can be used as clues to help people understand how to work with your interface: where I am and where I can go. Styles of your clickable elements selected elements and text to be different from each other and be the same for all interfaces. In the example I chose blue for all clickable elements, and black – for everything that can be allocated or for what tells your location.
Recommendation 7 instead of several equivalent variants
If you provide a few options to choose from, it would be nice to emphasize some of them. The more a person has a choice, the less likely that he did do it. To prevent such a paralysis of choice, select one of the options.
8 Cancel action instead of confirmation
Opportunity to cancel the action looks like respect for the intellect and allows user actions take place without hesitation. Constant confirmation look like you think that the user does not know what he wants. I assume that most of the actions committed by people deliberately, and only a small part of them happen by accident. Particularly unpleasant confirmation look at repetitive actions. Users feel that they are better control of the situation if they can undo their actions, and if they will not be at every step to ask confirmation.
9 Highlight audience service, and not to offer it to all and sundry
You want all users, or you know your audience? Clearly explaining who may come in handy your product, you can achieve the best results, while hinting at the exclusive services. There are risks of losing the audience. However, transparency creates trust.
10 Be decisive
You can say anything uncertain trembling voice, or you can say it with confidence. Ending with question marks and suggestions using the words “may,” “you’re interested in?”, “Do not want it?”, You seem indecisive. Add confidence!
11 Contrast instead of monotony
Calls for action to obtain an effective, if your interface distinguishes these actions visually. The contrast achieved by different methods. Some elements can be made lighter, the other darker. We can ensure that some elements seem to be situated closer than others (shadows and gradients). You can pick a different color for contrast enhancement.All together should clearly separate the call to action from the rest of the page.
12 Instead, a general description – specifics about the origin of your service
Disclosure of the origin of the service at the same time talking about it more and Translation communicate on a more intimate level. Mention the country, state, city – it is a natural way for people to introduce themselves. If you do the same thing, you look more friendly. Often such references improves the quality of the product in the eyes of the people.
13 Less input fields
Man avoids the time-consuming nature of the activities – and this includes filling in form fields. Each new field increases the risk of failure visitor from your service. Not all print equally fast. Printing on mobile devices is inconvenient. Think about what fields are really needed, and remove all the rest. If you really need a lot of optional fields, try to move some of them to the next page. The smaller the field, the greater the conversion.
14 shows the possibility, not hide them
Each drop-down menu hides range of options. If these features are important for your product, it is best brought them to light. Leave vypadushki for obvious things that do not require proceedings (calendars, geographical location).
15 is displayed in an explicit form, the material continues pages, instead of using false endings page
False end kills the conversion. It is not necessary to pretend that the page ended when just over section. If your pages need to scroll, try to visualize a pattern that shows the rhythm and stuff going on the page. Also beware of large empty spaces surrounding the base material, which can be misinterpreted as the end of the page.
16 to hold the attention and do not throw links
Easily reload the page links, leading to the left and to the right, hoping to catch as many customers. If you create a page narrative, which gradually brings man to the desired action – think about whether you need so many links.Each link increases the risk of leaving the customer with the right path to a particular action. To strike a balance between pages with a general description of services and pages, leading the client “on rails” to action. Remove excess links and you increase the chances that the customer clicks on that same button.
17 shows the current status of the service
In any interface, there are elements that can be in different states. E-mail messages can be read or not, bills paid or not, etc. A good way to user feedback – display the status elementov.Sostoyaniya help the user to understand that he should continue or should not do.
18 keys with explanations of benefits instead of the usual functional
Imagine that on one button says “Save Money” and on the other – just “Follow.” I bet that the first clickability above. The “subscription” can not see immediate benefits. Conversely, the subscription process requires energy and is generally associated with long forms. The idea is that the buttons promoting benefits may lead to higher conversion. Alternatively, information about the benefits you can place near the button to remind the user to why he should push the button. Of course, remain the buttons for functionality, but they should be reserved for those places of the site where you want to make more repetitive activities and less conviction.
19 Direct manipulation instead of the menu without context
Sometimes it makes sense to create interface elements, with which the user can interact directly. For example, showing a list of data, we can by clicking on the element allowed to edit it. Or click on the line with the data can turn it into the input field. These capabilities reduce the number of steps that must be done to execute the desired action.
20 shows at once the input field, and do not hide them on a separate page
When creating Landing you can try immediately to show fields for entering information, cross Landing with the registration form. There are several advantages. First, we remove the extra steps and that the registration takes less time. Second, showing the number of fields, we immediately tells the user how long it will take him to register.Of course, it would be an advantage if our form contains some fields.
21 Smooth animation instead of sudden jumping
Often interface elements appear, disappear, move, in response to user actions. It is often easier to understand what happened when these events do not occur instantly when they are stretched in time. Of course, we must note that repetitive actions can be very slow on the contrary lead to irritation. If something needs to be done quickly, artificial delay only hinder perception.
22 The gradual involvement of user
Instead of immediately require registration, why not ask the user to perform a task, through which we will see the advantage of your service. The product can show a little face and personalize. When the user has experienced the benefit of the product and tried it on himself, he will be more inclined to consume. It is a way to postpone registration, while allowing the user to try your product.
Less than 23 frames and borders
Frames attract too much attention. Caution – a valuable resource because it is limited. Of course, the framework clearly delineate and demarcate the elements, but they also spend our cognitive energy. To determine the relationship of various elements of the interface and not procrastinate too much attention, the elements can be grouped together, align, ask them clearly distinguishable background or similar typographic style. Sometimes a line or two helps determine the overall look of the interface, but try to consider other methods of visualization.
24 Sell benefits, not functional
Principles of Marketing – people need not product features and benefits that he has brought them. Chris Guilbaud in the book “hundred-dollar startup” writes that people want to have more love, recognition and free time and less stress, conflict, strife and uncertainty. Featuring functional and explains the benefits of it.
25 Develop a design for the case when there is no data, not only for those cases where the data is very much
The lists of elements is 10000, and 10 is a 1 and 0. Generally, even data accumulates and the data sets are from zero to a few points and more. Often the designer forgets when information yet and there is nothing to show. In this case there is a risk alienating user. When he looks at your application and see just an empty place without any prompting – you lose your chance. Zero amount of data – a great chance to start learning by showing him what to do next. Good interface – scalable interface.
26 Confirm the default
Let users will be able to take part in anything by default, without the need to perform any action. Often the user is asked to do something before you take part in anything or get anything. The first embodiment is better for several reasons. Firstly, it reduces the resistance to movement because the user does not need to do anything. Second, it provides a recommendation, implying affiliation to something that is normal and usual. “All the others are doing it, so why should not I do the same.” Of course, bad marketers often abuse this technique. For example, reducing the readability of the text confirming the action or specially confusing him, they shoved that any user who does not understand what he is signing. Therefore, such an approach requires a crystal clarity.
27 Serial interface that does not require continuous learning
Permanent interface means that the user does not need to constantly learn to use it and spend the forces. Click on the button and moving the slider, we learn, how should look and work. Constancy helps facilitate the work, and as soon as we lose consistency, we have to learn again. Constancy can be achieved through color, direction, behavior, location, size, shape, labels and language. Unusual elements are important when we need something to highlight or draw attention.
28 Smart controls instead of extra work
Smart or pre-filled form fields, which are based on known data, reduce the amount of work that needs to be done to the user. This is a common technique assist the user in moving to forms. Worst does not happen when the user is asked the same data over and over again. Instead of empty fields that need to be filled again, better let it be already filled in the fields that you just have to check. The smaller the work, the better.
29 Standards and agreements instead of reinventing the wheel
Agreement – the elder brother of permanence. If the interface similar elements are the same, the user must be less tense. If different interfaces similar elements also identical, this more convenient. With the help of established agreements we remembered that close button is on the right at the top, and we know how usually looks icon settings. Of course, not always agreement makes sense, sometimes they are out of date. If you move away from agreements – make sure you have everything well thought out.
30 are requested to avoid losses instead of advertising acquisitions
We love to win, but hate to lose. Under the laws of the psychology of persuasion, people would rather not bear the loss than gain an advantage. This fact applies to product and service offerings. More profitable to advertise a product, how to protect the welfare and status of the user, rather than as giving any advantage or benefit, which they have yet. Do insurance companies sell insurance payments, or the defense of what we already have?
31 visual hierarchy instead of monotony
In a good hierarchy of important elements are separated from the less important. The hierarchy is constructed through alignment, proximity, color, spacing, font size, the size of the element, etc. Regularly spaced elements direct the user’s attention, holding it where necessary, and generally enhance readability. The hierarchy creates friction, which does not allow us to slip from the top to the bottom of the page. Because of this, we will hold on the page a little more time, but in the end we will learn more about the product. It’s like a journey – if you drive on the highway, you arrive faster, but if you choose the way prettier, you will see many interesting things along the way.Give an eye on something relaxing.
32 Group elements within the meaning of
Group related things – the main way to improve usability. Knife and fork, open and save – these things usually FLS together. Related things just have to be there to give the interface consistency and reduce cognitive friction. Save time searching for items – this is not our method.
33 Checking the input on the site
When filling out forms better immediately identify errors than to show them later. Showing the error immediately when it occurs (for example, the right of the input field), you give the opportunity to immediately correct it. When she found out later, for example, after submitting the form, people have to do extra work and remember what they have done.
34 Farewell input field
When the computer is more forgiving of errors to the user, it becomes more humane. Farewell input fields allow for possible errors and variations, thus making the interface more friendly. A good example – a phone number. How many variants of its entry there – brackets, extension, hyphens, codes, etc. Let your code works more as a user – less.
35 Customize User
Demonstration of urgency – a tactic of persuasion, which causes people to act sooner rather than later (or never).Often it involves a deficit – when something is available today, will not be available tomorrow. Besides, it works on the elimination of waste – we do not like to lose opportunities. One could argue that this tactic is persistent and not very acceptable – but still it can be used, if you do it honestly. Do not create a false sense of haste – if you see through, it will lead to opposite results.
36 deficiency instead of abundance
When something small, we appreciate it more. Deficit suggests that before this was more of less today, and tomorrow will be even less. Pricing policy differs from wholesalers policy boutiques. Wholesalers sometimes deliberately limit on the number of consignments. In developing the program, we forget about the deficit because the bytes are easy to copy. The design of the interface, however, you can use the deficit and show the limitations of anything. Number of tickets for the webinar, the number of clients that can be serviced in the past month, the number of products that can be produced for a certain period of time. Supply and demand. Less – is more.
37 Recognition instead of remembering
Easier to recognize the existing option than to remember it yourself. Recognition is based on the helpful hints for working memory. Remember something from scratch is much harder. Perhaps that is why the exams with ready-made easier to pass than those serving to write the answer. Give users the ability to choose with whom they have already encountered, instead of forcing them all to remember.
38 Elements of a larger
References shape and easier to press buttons when they are. By law, Feith, the farther away from us and less element, the harder to click on it. Therefore increase the form input fields, calls to action. Also, the element size can be left unchanged, however increasing the area to which it responds pressing.
39 Reduce the load time
Speed is important, people do not like to wait. How quickly the page loads, or how quickly it responds to user actions, it is very important. Every extra second entails care users and reduces the conversion. You can reduce the download time technically, optimizing the code and images. And it is possible to reduce the perceived load time psychologically. Display indicator loading contributes to this, as a user to do anything at boot time.
40 Shortcuts, not just the button
When your product is frequently used, would be nice to recall the advanced users who come back to you and spend much time with him. People are looking for ways to perform repetitive tasks quickly. After memorizing keyboard shortcuts speed use interface dramatically increases. For example, Gmail, Twitter and Tumblr offer J and K keys to navigate as “previous” and “next”. In the button is not bad, but it is always good to have a supplement to it.
41 Depart from large numbers to smaller
People have a set of cognitive features that hard to resist. Studies say that our decision-making mechanism affects the first of the numbers that we met. If we start with a higher price, and come in a smaller, it already seems to be not so great. Moreover, generally the first number is not necessarily cost. A typical use in marketing – show the recommended value, followed by the discount price.
42 Leading progress instead of a clean slate
The closer we get to the finish line, the more we are motivated to complete the task. Make people feel that they have achieved something towards the completion of required tasks simply by visiting the website or by filling out the form.
43 The gradual disclosure of action
The gradual disclosure protects the user from an abundance of background information. Displays information portions. Usually this can be accompanied by an extension of something or a suitable animation. If a large number of fields discourages the user, try to show him gradually fields that are needed right now.
44 Small obligations
First, encourage people to take small obligations and large procrastinate. Serious commitment scare. Using obligations – a powerful persuasion strategy that works on people’s desire to save his face. It is understood that the man is easier to make a sequence of simple steps than one complex. With a few large consent should consent.For example, a site might give people a look around and familiarize yourself with something, instead of immediately forced to register or to the threshold of finding the love of your life or spouse. On the price of the services can be offered to small monthly payments instead of a large annual. It is also useful to make it clear to the user that they can withdraw at any time and leave, that there is no “contract” is not yet concluded.
Unobtrusive 45 queries instead of modal window
A modal dialog box or distracting. Sometimes it is useful to draw attention, but often with modal windows problems.Information windows close and block the user’s actions. Some hard to get out of them. Windows distract from the task when the user is absorbed and it is not ready to perform another action. Why not consider softer and less intrusive options that nevertheless attract attention.
46 Multifunction control elements instead of individual elements
The simplicity of the interface associated with ease of use. Too many controls violate perception. The more members, the more usability problems. One of the ways to achieve more with less – to create a multi-functional controls. For example, combine the box for entering a search query with the filtering mechanism. You can also cross the show’s rating and the rating stamped. Unfortunately, when one element of a number of functions, sometimes it is difficult for them to guess. It may be worth to reserve this approach for customers who are willing to learn a little bit. Use it wisely and do not overdo it.
47 icon label
Icons can be ambiguous, and supplementing them with labels, you can eliminate the ambiguity. For example, the down arrow icon – indicates whether it is an opportunity to move something down, decrease the priority or download? The icon with “x” – the removal, cancellation or closing? If we did not have enough space, a good idea to show all labels to icons when you hover over one of them (rather than for each separately).
48 Natural language instead of dry text
Natural language is less formal and has to communicate. Create a sense of what a computer user understands. To this there are two approaches. You can try to identify fuzzy queries or user commands. It is also possible to deliver information to the user, not as strict forms, but in the form of live communication.
49 Play on curiosity
Tactic is not to hide all the information, and give her a small part to incite curiosity. Chapter on trial, demo, trial, something free, available immediately. “To see the rest, to-do.” Intriguing users and customers probes can make them want to continue to use your product. But does not provide all the information immediately. Try to give them a test mode, not all features, and leave something for later.
50 assures users
Upon completion of the sale by calm, give him a guarantee, promise to meet his needs, tell us about the security of payment confirm free shipping, and the fact that they can cancel the order at any time. “All is well and all is well. Do not worry and relax. “Positive – a great tactic.
51 Price illusion instead of the normal price
You can let people judge your product yourself, but you can do it for them. Using irrational thinking, show your prices so that they look more attractive. Use of the word “all”, “accessible”, “affordable”. Price can be divided into parts – for example, 30 cents per page instead of 300 rubles for a book or a hundred rubles a day instead of 3000 per month. Also, use a well-known trick with prices ending in “9”. Show smaller numbers – 300 instead of 300.00.
52 Thank instead of a simple statement of completion of the transaction
Thanks for your use of the service shows that you care about customers and thank them. Thanks can also be used to continue the dialogue with the user. Therefore, the inscription “thank you” can always be converted into a proposal to take another step and take advantage of another opportunity. Thanks for reading this paragraph.
53 Think of it yourself, do not force the user to do it
The interface can make calculations and to prevent users from such a need. Suppose, instead of showing the balance in the system can calculate how many days are left until the end of your subscription. Or, in the lists at the points which need to assess how they are outdated, looks better inscription “3 minutes ago” than the “last updated at 15:47 on September 2nd.” Do not force the user to consider.
54 Confirm the user freedom of choice
You can force a person to do more if to confirm that the choice he makes. Users need to call to action, pointing out that it was “his choice” or “you can always refuse”, etc. This works best when such inscription is next to a call to action.
55 Changing remuneration
Ever-changing rewards may attract users. When the mouse button is too tight on the machines that give them pieces of food at random, they do so more often than in the case of predictable and consistent results. Many people love to constantly check incoming mail, because nobody knows what might be inside.
56 Manage user’s attention
It is necessary to direct attention to the most important actions. This can be achieved in various ways, starting with the increase in the size or contrast element. Other options – custom shapes, AF input fields, lights, floating elements and directional arrows. Of course, do not need to do a lot of bright and flashy elements on the page, but to emphasize the main calls to action stands.
57 Friendly and understandable comparison
Often changed need to compare with the previous content or more products to each other. You can make such comparisons more understandable and readable. Firstly, to limit the number of objects compared with two, preferably by placing them closer together. Secondly, the indication “improved” or “very fresh” things easier choice.Third, clearly show which properties have changed and what remains of the old. That is what is added (or improved) that removed (or worse), and that remains the same.
58 Sets of objects instead of individual
People tend to collecting. Physical or virtual. If a person sees an unfinished set, he seeks to complete it. Often the purchase of the complete collection of anything can be stimulated more by promoting certain synergistic benefits (as a whole cake tastes better than its ingredients). May show the things that have already been collected, serves as a description of the achievements of the user. Finally, the motivation for collecting all the items in the collection will be stronger if it is understood that their number is limited to the collection.
The post 58 signs of a good user interface appeared first on WBD.