HOME!

TUTORIALS
FREEBIES
HOT DEALS
SNIPPETS
WORDPRESS
UX

58 signs of a good user interface

BY GUEST JANUARY 28, 2015

Oferta para Foz do Iguau

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

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

To search type and hit enter

ADVERTISEMENT

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

MOST POPULAR
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 Designing

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 its
obvious, but if you are to someone well treated, in his eyes, your

The Perfect Logo For Your Brand

9 amazing material design
frameworks for modern website

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,

ADVERTISEMENT

TOPICS

UI kits

Reviews

miscellaneous

Inspiration

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. Use 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.

7. One Recommendation 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, 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 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. Use fewerinput 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, do 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. 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. 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. 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 input field at once 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.

23. User fewer 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 function

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

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. Request 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. Usevisual 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 users 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. Its 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. Use group elements within the meaning

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. Fewer 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. User Customization

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. Larger Element

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. Use Shortcuts, not only 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 peoples 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.

45. Unobtrusive 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 users 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. Use Multi-function 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 shows 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. Use 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. Reassure 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, 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 people 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 users 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. Use 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.

Aliana Francesa

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

Share this:

Twitter

146

Facebook

676

LinkedIn

217

Pinterest

Google

Guest
We thanked those amazing people who shared their excellent
thoughts with us.

Print

PREVIOUS STORY

NEXT STORY

Adam Scribble Web Font

Free Graphs & Charts UI Pack

PSD

YOU MAY ALSO LIKE...

What is user
experience design?
20 DEC, 2014

How to Avoid Ecommerce Design

Blunders To Ensure
You Arent Ditched By
Customers
2 MAR, 2015

Interesting News and

Useful Tools for UX
Designer #1
2 FEB, 2015

1 Comment

WBD - A Web Design Blog

Share

Recommend 1

Login

Sort by Best

Join the discussion

YuryHoyos

15 days ago

really interesting... thanks for the article

Reply Share

WHAT'S THIS?

ALSO ON WBD - A WEB DESIGN BLOG

26 Good examples of responsive

web design for 2015

Free iPhone Tab Bar Icons (PSD,

AI, PNG, SVG)

1 comment 2 months ago

3 comments 2 months ago

Webdesigners Responsive design

Mundstrm awesome!

increasing reason is valuable

compared to other design trends.

10 original web design with creative

horizontal scrolling for 2015

12 Watercolor textures Freebie

(JPG,PAT)

3 comments 2 months ago

1 comment 19 days ago

AvatarNick Burman Thanks Tanvir.

wlaedimir this is so awesome, thank

you very much guys! <3

WRITE FOR US

About

Partner With Us

This is a Web Design Blog. We are

If you want to offer exclusive deals to our

ARCHIVES
Select Month

passionate
resources

about
for

creating

web

amazing

designers

and

readers

or

creative

premium

quality

resources you want to offer Get in Touch

developers.
Learn More

ADVERTISE
WEB DIRECTORY
ABOUT
PRIVACY POLICY
CONTACT US
FTC DISCLOSURE
We Build Design 2015. All Rights Reserved.