UX

58 signs of a good user interfaceBY GUEST JANUARY 28, 2015

A good user interface and high conversion it simple to use. That is,

Oferta para Foz do IguauVoe para Foz do Iguau a partir de R$ 127. Desconto Reservando Online!

ADVERTISEMENT

To search type and hit enter

HOME! TUTORIALS FREEBIES HOT DEALS SNIPPETS WORDPRESS

it is good for business, and for the people using it. Here is a list ofideas weve 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 designof a multi-column there is a risk of distraction from the main taskof the user page.

2. Give something instead of immediately trying to sell

Gift is a friendly gesture. But other than that, it is a powerfulhidden persuader factor working for reciprocity. Even though itsobvious, but if you are to someone well treated, in his eyes, your

Mega Flagship Icon Set - Freebie(PSD, AI, SVG, EPS, SKETCH)

58 signs of a good user interface

20% off Sketch 3 for Mac

5 Key Principles For DesigningThe Perfect Logo For Your Brand

9 amazing material designframeworks for modern website

MOST POPULAR

score increases.

3. Combine similar functionality, but do not fragmentUI

Over time, easy to create a number of different sections, elementsand functions that perform the same. Track duplicate functionality,as it loads the user. The more of these takes, the harder the user touse your service.

ADVERTISEMENT

TOPICS

UI kits

Reviews

miscellaneous

Inspiration

4. Provide evidence from other people, not just a storyabout yourself

Another great tactic of persuasion, which directly affects theconversion. Approval of your proposal encourages others to takeaction. 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 berepeated on different pages. It should not be on the same pageshowing 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 nextmove.

6. Use clearly distinguishable contrasting styles insteadof blurry

Visual design color, depth, contrast can be used as clues to helppeople understand how to work with your interface: where I amand where I can go. Styles of your clickable elements selectedelements and text to be different from each other and be the samefor all interfaces. In the example I chose blue for all clickableelements, and black for everything that can be allocated or forwhat tells your location.

7. One Recommendation instead of several equivalentvariants

If you provide a few options to choose from, it would be nice toemphasize some of them. The more a person has a choice, the lesslikely that he did do it. To prevent such a paralysis of choice, selectone of the options.

8. Cancel action instead of confirmation

Opportunity to cancel the action looks like respect for the intellectand allows user actions take place without hesitation. Constantconfirmation look like you think that the user does not know whathe wants. I assume that most of the actions committed by peopledeliberately, 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 canundo their actions, and if they will not be at every step to askconfirmation.

9. Highlight audience service, and not to offer it to alland sundry

You want all users, or you know your audience? Clearly explainingwho may come in handy your product, you can achieve the bestresults, while hinting at the exclusive services. There are risks oflosing the audience. However, transparency creates trust.

10. Be decisive

You can say anything uncertain trembling voice, or you can say itwith confidence. Ending with question marks and suggestionsusing the words may, youre 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 interfacedistinguishes these actions visually. The contrast achieved bydifferent methods. Some elements can be made lighter, the otherdarker. We can ensure that some elements seem to be situatedcloser than others (shadows and gradients). You can pick adifferent color for contrast enhancement.All together shouldclearly separate the call to action from the rest of the page.

12. Instead, a general description specifics about theorigin of your service

Disclosure of the origin of the service at the same time talkingabout it more and Translation communicate on a more intimatelevel. Mention the country, state, city it is a natural way forpeople to introduce themselves. If you do the same thing, you lookmore friendly. Often such references improves the quality of theproduct in the eyes of the people.

13. Use fewerinput fields

Man avoids the time-consuming nature of the activities and thisincludes filling in form fields. Each new field increases the risk offailure visitor from your service. Not all print equally fast. Printingon mobile devices is inconvenient. Think about what fields arereally needed, and remove all the rest. If you really need a lot ofoptional fields, try to move some of them to the next page. Thesmaller the field, the greater the conversion.

14. Shows the possibility, do not hide them

Each drop-down menu hides range of options. If these features areimportant for your product, it is best brought them to light. Leavevypadushki for obvious things that do not require proceedings(calendars, geographical location).

15. Displayed in an explicit form, the materialcontinues pages, instead of using false endings page

False end kills the conversion. It is not necessary to pretend thatthe page ended when just over section. If your pages need to scroll,try to visualize a pattern that shows the rhythm and stuff going onthe page. Also beware of large empty spaces surrounding the basematerial, 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 aboutwhether you need so many links.Each link increases the risk ofleaving the customer with the right path to a particular action. Tostrike a balance between pages with a general description ofservices and pages, leading the client on rails to action. Removeexcess links and you increase the chances that the customer clickson 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 goodway to user feedback display the status elementov.Sostoyaniyahelp the user to understand that he should continue or should notdo.

18. Explain 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. Thesubscription can not see immediate benefits. Conversely, thesubscription process requires energy and is generally associatedwith long forms. The idea is that the buttons promoting benefitsmay lead to higher conversion. Alternatively, information aboutthe benefits you can place near the button to remind the user towhy he should push the button. Of course, remain the buttons forfunctionality, but they should be reserved for those places of thesite where you want to make more repetitive activities and lessconviction.

19. Direct manipulation instead of the menu withoutcontext

Sometimes it makes sense to create interface elements, with whichthe 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 theline with the data can turn it into the input field. These capabilitiesreduce the number of steps that must be done to execute thedesired action.

20. Shows input field at once and do not hide them on aseparate page

When creating Landing you can try immediately to show fields forentering information, cross Landing with the registration form.There are several advantages. First, we remove the extra steps andthat the registration takes less time. Second, showing the numberof fields, we immediately tells the user how long it will take him toregister.Of course, it would be an advantage if our form containssome fields.

21. Smooth animation instead of sudden jumping

Often interface elements appear, disappear, move, in response touser actions. It is often easier to understand what happened whenthese events do not occur instantly when they are stretched intime. Of course, we must note that repetitive actions can be veryslow on the contrary lead to irritation. If something needs to bedone quickly, artificial delay only hinder perception.

22. The gradual involvement of user

Instead of immediately require registration, why not ask the user toperform a task, through which we will see the advantage of yourservice. The product can show a little face and personalize. Whenthe user has experienced the benefit of the product and tried it onhimself, he will be more inclined to consume. It is a way topostpone registration, while allowing the user to try your product.

23. User fewer frames and borders

Frames attract too much attention. Caution a valuable resourcebecause it is limited. Of course, the framework clearly delineateand demarcate the elements, but they also spend our cognitiveenergy. To determine the relationship of various elements of theinterface and not procrastinate too much attention, the elementscan be grouped together, align, ask them clearly distinguishablebackground or similar typographic style. Sometimes a line or twohelps determine the overall look of the interface, but try toconsider other methods of visualization.

24. Sell benefits, not function

Principles of Marketing people need not product features andbenefits that he has brought them. Chris Guilbaud in the bookhundred-dollar startup writes that people want to have morelove, recognition and free time and less stress, conflict, strife anduncertainty. Featuring functional and explains the benefits of it.

25. Develop a design for the case when there is no data

The lists of elements is 10000, and 10 is a 1 and 0. Generally, evendata accumulates and the data sets are from zero to a few pointsand more. Often the designer forgets when information yet andthere is nothing to show. In this case there is a risk alienating user.When he looks at your application and see just an empty placewithout any prompting you lose your chance. Zero amount ofdata a great chance to start learning by showing him what to donext. Good interface scalable interface.

26. Confirm the default

Let users will be able to take part in anything by default, withoutthe need to perform any action. Often the user is asked to dosomething before you take part in anything or get anything. Thefirst embodiment is better for several reasons. Firstly, it reducesthe resistance to movement because the user does not need to doanything. Second, it provides a recommendation, implyingaffiliation to something that is normal and usual. All the othersare doing it, so why should not I do the same. Of course, badmarketers often abuse this technique. For example, reducing thereadability of the text confirming the action or specially confusinghim, they shoved that any user who does not understand what he issigning. Therefore, such an approach requires a crystal clarity.

27. Serial interface that does not require continuouslearning

Permanent interface means that the user does not need toconstantly learn to use it and spend the forces. Click on the buttonand moving the slider, we learn, how should look and work.Constancy helps facilitate the work, and as soon as we loseconsistency, we have to learn again. Constancy can be achievedthrough color, direction, behavior, location, size, shape, labels andlanguage. Unusual elements are important when we needsomething 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. Thisis a common technique assist the user in moving to forms. Worstdoes not happen when the user is asked the same data over andover again. Instead of empty fields that need to be filled again,better let it be already filled in the fields that you just have tocheck. The smaller the work, the better.

29. Standards and agreements instead of reinventingthe wheel

Agreement the elder brother of permanence. If the interfacesimilar elements are the same, the user must be less tense. Ifdifferent interfaces similar elements also identical, this moreconvenient. With the help of established agreements weremembered that close button is on the right at the top, and weknow how usually looks icon settings. Of course, not alwaysagreement makes sense, sometimes they are out of date. If youmove away from agreements make sure you have everything wellthought out.

30. Request to avoid losses instead of advertisingacquisitions

We love to win, but hate to lose. Under the laws of the psychologyof persuasion, people would rather not bear the loss than gain anadvantage. This fact applies to product and service offerings. Moreprofitable to advertise a product, how to protect the welfare andstatus of the user, rather than as giving any advantage or benefit,which they have yet. Do insurance companies sell insurancepayments, or the defense of what we already have?

31. Usevisual hierarchy instead of monotony

In a good hierarchy of important elements are separated from theless important. The hierarchy is constructed through alignment,proximity, color, spacing, font size, the size of the element, etc.Regularly spaced elements direct the users attention, holding itwhere necessary, and generally enhance readability. The hierarchycreates friction, which does not allow us to slip from the top to thebottom of the page. Because of this, we will hold on the page alittle more time, but in the end we will learn more about theproduct. Its like a journey if you drive on the highway, you arrivefaster, but if you choose the way prettier, you will see manyinteresting things along the way.Give an eye on somethingrelaxing.

32. Use group elements within the meaning

Group related things the main way to improve usability. Knifeand fork, open and save these things usually FLS together.Related things just have to be there to give the interfaceconsistency and reduce cognitive friction. Save time searching foritems this is not our method.

33. Checking the input on the site

When filling out forms better immediately identify errors than toshow them later. Showing the error immediately when it occurs(for example, the right of the input field), you give the opportunityto immediately correct it. When she found out later, for example,after submitting the form, people have to do extra work andremember what they have done.

34. Fewer input field

When the computer is more forgiving of errors to the user, itbecomes more humane. Farewell input fields allow for possibleerrors and variations, thus making the interface more friendly. Agood example a phone number. How many variants of its entrythere brackets, extension, hyphens, codes, etc. Let your codeworks more as a user less.

35. User Customization

Demonstration of urgency a tactic of persuasion, which causespeople to act sooner rather than later (or never).Often it involves adeficit when something is available today, will not be availabletomorrow. Besides, it works on the elimination of waste we donot like to lose opportunities. One could argue that this tactic ispersistent and not very acceptable but still it can be used, if youdo it honestly. Do not create a false sense of haste if you seethrough, it will lead to opposite results.

36. Deficiency instead of abundance

When something small, we appreciate it more. Deficit suggests thatbefore 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 ofconsignments. In developing the program, we forget about thedeficit because the bytes are easy to copy. The design of theinterface, however, you can use the deficit and show thelimitations of anything. Number of tickets for the webinar, thenumber of clients that can be serviced in the past month, thenumber of products that can be produced for a certain period oftime. Supply and demand. Less is more.

37. Recognition instead of remembering

Easier to recognize the existing option than to remember ityourself. Recognition is based on the helpful hints for workingmemory. Remember something from scratch is much harder.Perhaps that is why the exams with ready-made easier to pass thanthose serving to write the answer. Give users the ability to choosewith whom they have already encountered, instead of forcing themall to remember.

38. Larger Element

References shape and easier to press buttons when they are. Bylaw, Feith, the farther away from us and less element, the harder toclick on it. Therefore increase the form input fields, calls to action.Also, the element size can be left unchanged, however increasingthe area to which it responds pressing.

39. Reduce the load time

Speed is important, people do not like to wait. How quickly thepage loads, or how quickly it responds to user actions, it is veryimportant. Every extra second entails care users and reduces theconversion. You can reduce the download time technically,optimizing the code and images. And it is possible to reduce theperceived load time psychologically. Display indicator loadingcontributes to this, as a user to do anything at boot time.

40. Use Shortcuts, not only the button

When your product is frequently used, would be nice to recall theadvanced users who come back to you and spend much time withhim. People are looking for ways to perform repetitive tasksquickly. After memorizing keyboard shortcuts speed use interfacedramatically increases. For example, Gmail, Twitter and Tumblroffer J and K keys to navigate as previous and next. In thebutton 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. Studiessay that our decision-making mechanism affects the first of thenumbers that we met. If we start with a higher price, and come in asmaller, it already seems to be not so great. Moreover, generallythe 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 tocomplete the task. Make people feel that they have achievedsomething towards the completion of required tasks simply byvisiting the website or by filling out the form.

43. The gradual disclosure of action

The gradual disclosure protects the user from an abundance ofbackground information. Displays information portions. Usuallythis can be accompanied by an extension of something or a suitableanimation. If a large number of fields discourages the user, try toshow him gradually fields that are needed right now.

44. Small obligations

First, encourage people to take small obligations and largeprocrastinate. Serious commitment scare. Using obligations apowerful persuasion strategy that works on peoples desire to savehis face. It is understood that the man is easier to make a sequenceof simple steps than one complex. With a few large consent shouldconsent.For example, a site might give people a look around andfamiliarize yourself with something, instead of immediately forcedto register or to the threshold of finding the love of your life orspouse. On the price of the services can be offered to smallmonthly payments instead of a large annual. It is also useful tomake it clear to the user that they can withdraw at any time andleave, that there is no contract is not yet concluded.

45. Unobtrusive queries instead of modal window

A modal dialog box or distracting. Sometimes it is useful to drawattention, but often with modal windows problems.Informationwindows close and block the users actions. Some hard to get out ofthem. Windows distract from the task when the user is absorbedand it is not ready to perform another action. Why not considersofter and less intrusive options that nevertheless attractattention.

46. Use Multi-function control elements instead ofindividual elements

The simplicity of the interface associated with ease of use. Toomany controls violate perception. The more members, the moreusability problems. One of the ways to achieve more with less tocreate a multi-functional controls. For example, combine the boxfor entering a search query with the filtering mechanism. You canalso cross the shows rating and the rating stamped. Unfortunately,when one element of a number of functions, sometimes it isdifficult for them to guess. It may be worth to reserve this approachfor customers who are willing to learn a little bit. Use it wisely anddo not overdo it.

47. Icon label

Icons can be ambiguous, and supplementing them with labels, youcan 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 theremoval, cancellation or closing? If we did not have enough space,a good idea to show all labels to icons when you hover over one ofthem (rather than for each separately).

48. Use natural language instead of dry text

Natural language is less formal and has to communicate. Create asense of what a computer user understands. To this there are twoapproaches. You can try to identify fuzzy queries or usercommands. 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 partto incite curiosity. Chapter on trial, demo, trial, something free,available immediately. To see the rest, to-do. Intriguing usersand customers probes can make them want to continue to use yourproduct. But does not provide all the information immediately. Tryto give them a test mode, not all features, and leave something forlater.

50. Reassure users

Upon completion of the sale by calm, give him a guarantee,promise to meet his needs, tell us about the security of paymentconfirm free shipping, and the fact that they can cancel the orderat 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, but you can do it for them.Using irrational thinking, show your prices so that they look moreattractive. Use of the word all, accessible, affordable. Pricecan be divided into parts for example, 30 cents per page insteadof 300 rubles for a book or a hundred rubles a day instead of 3000per month. Also, use a well-known trick with prices ending in 9.Show smaller numbers 300 instead of 300.00.

52. Thank people instead of a simple statement ofcompletion of the transaction

Thanks for your use of the service shows that you care aboutcustomers and thank them. Thanks can also be used to continuethe dialogue with the user. Therefore, the inscription thank youcan always be converted into a proposal to take another step andtake advantage of another opportunity. Thanks for reading thisparagraph.

53. Think of it yourself, do not force the user to do it

The interface can make calculations and to prevent users from sucha need. Suppose, instead of showing the balance in the system cancalculate how many days are left until the end of your subscription.Or, in the lists at the points which need to assess how they areoutdated, looks better inscription 3 minutes ago than the lastupdated at 15:47 on September 2nd. Do not force the user toconsider.

54. Confirm the user freedom of choice

You can force a person to do more if to confirm that the choice hemakes. Users need to call to action, pointing out that it was hischoice or you can always refuse, etc. This works best when suchinscription is next to a call to action.

55. Changing remuneration

Ever-changing rewards may attract users. When the mouse buttonis too tight on the machines that give them pieces of food atrandom, they do so more often than in the case of predictable andconsistent results. Many people love to constantly check incomingmail, because nobody knows what might be inside.

56. Manage users attention

It is necessary to direct attention to the most important actions.This can be achieved in various ways, starting with the increase inthe size or contrast element. Other options custom shapes, AFinput fields, lights, floating elements and directional arrows. Ofcourse, do not need to do a lot of bright and flashy elements on thepage, but to emphasize the main calls to action stands.

57. Friendly and understandable comparison

Often changed need to compare with the previous content or moreproducts to each other. You can make such comparisons moreunderstandable and readable. Firstly, to limit the number of objectscompared with two, preferably by placing them closer together.Secondly, the indication improved or very fresh things easierchoice.Third, clearly show which properties have changed and whatremains of the old. That is what is added (or improved) thatremoved (or worse), and that remains the same.

58. Use sets of objects instead of individual

People tend to collecting. Physical or virtual. If a person sees anunfinished set, he seeks to complete it. Often the purchase of thecomplete collection of anything can be stimulated more bypromoting certain synergistic benefits (as a whole cake tastesbetter than its ingredients). May show the things that have alreadybeen collected, serves as a description of the achievements of theuser. Finally, the motivation for collecting all the items in thecollection will be stronger if it is understood that their number islimited to the collection.

Share this:

Twitter 146 Facebook 676 LinkedIn 217 Pinterest Google Print

Aliana FrancesaParcelamos em 4x sem juros. Descontos de at 60%. Estude agora.

GuestWe thanked those amazing people who shared their excellentthoughts with us.

YOU MAY ALSO LIKE...

NEXT STORY

Free Graphs & Charts UI Pack PSD

PREVIOUS STORY

Adam Scribble Web Font

20 DEC, 2014

What is userexperience design?

2 MAR, 2015

How to Avoid E-commerce DesignBlunders To EnsureYou Arent Ditched ByCustomers

2 FEB, 2015

Interesting News andUseful Tools for UXDesigner #1

26 Good examples of responsiveweb design for 20151 comment 2 months ago

Webdesigners Responsive designincreasing reason is valuablecompared to other design trends.

Free iPhone Tab Bar Icons (PSD,AI, PNG, SVG)3 comments 2 months ago

Mundstrm awesome!

10 original web design with creativehorizontal scrolling for 20153 comments 2 months ago

AvatarNick Burman Thanks Tanvir.

12 Watercolor textures Freebie(JPG,PAT)1 comment 19 days ago

wlaedimir this is so awesome, thankyou very much guys!

ARCHIVES

Select Month

passionate about creating amazingresources for web designers anddevelopers. Learn More

readers or creative premium qualityresources you want to offer Get in Touch

We Build Design 2015. All Rights Reserved.

ADVERTISEWEB DIRECTORYABOUTPRIVACY POLICYCONTACT USFTC DISCLOSURE