SlideShare a Scribd company logo
UX DESIGN
Best Practices
Try A One Column Layout instead of
multi columns.
A one column layout will give you more control over your narrative. It should be able to guide your
readers in a more predictable way from top to bottom. Whereas a multi column approach runs some
additional risk of being distracting to the core purpose of a page. Guide people with a story and a
prominent call to action at the end.
Try Merging Similar Functions instead of
fragmenting the UI.
Over the course of time, it's easy to unintentionally create multiple sections, elements and features
which all perform the same function. It's basic entropy - things start falling apart over time. Keep an
eye out for duplicate functionality labelled in various ways, as it puts a strain on your customers. Often,
the more UI fragmentation there is, the higher the learning curve which your customers will have to
deal with. Consider refactoring your UI once in a while by merging similar functions together.
Try Social Proof instead of talking about yourself.
Social proof is another great persuasion tactic directly applicable to increasing conversion rates.
Seeing that others are endorsing you and talking about your offering, can be a great way to reinforce a
call to action. Try a testimonial or showing data which proves that others are present.
Try Giving a Gift instead of closing a sale right away.
A friendly gesture such as providing a customer with a gift can be just that. Deeper underneath
however, gifting is also an effective persuasion tactic that is based on the rule of reciprocity. As obvious
as it sounds, being nice to someone by offering a small token of appreciation can come back in your
favour down the road.
Try Repeating Your Primary Action instead of
showing it just once.
Repeating your call to action is a strategy that is more applicable to longer pages, or repeating across
numerous pages. Surely you don't want to have your offer displayed 10 times all on the same screen
and frustrate people. However, long pages are becoming the norm and the idea of squeezing
everything "above the fold" is fading. It doesn't hurt to have one soft actionable item at the top, and
another prominent one at the bottom. When people reach the bottom, they pause and think what to do
next - a potential solid place to make an offer or close a deal.
Try Recommending instead of showing equal
choices.
When showing multiple offers, then an emphasized product suggestion might be a good idea as some
people need a little nudge. I believe there are some psychology studies out there which suggest that
the more choice there is, then the lower the chances of a decision actually being made and acted
upon. In order to combat such analysis paralysis, try emphasizing and highlighting certain options
above others.
Try Undos instead of prompting for confirmation.
Imagine that you just pressed an action button or link. Undos respect the initial human intent by
allowing the action to happen smoothly first and foremost. Prompts on the other hand suggest to the
user that he or she does not know what they are doing by questioning their intent at all times. I would
assume that most of the time human actions are intended and only in small situations are they
accidental. The inefficiency and ugliness of prompts is visible when users have to perform actions
repeatedly and are prompted numerously over and over - a dehumanizing experience. Consider
making your users feel more in control by enabling the ability to undo actions and not asking for
confirmation where possible.
Try Telling Who It's For instead of targeting
everyone.
Are you targeting everyone or are you precise with your audience? This is a conversion idea where
you could be explicit about who exactly your product or service is intended for. By communicating the
qualifying criteria of your customers, you might be able to actually connect more with them while at the
same time hinting at a feeling of exclusivity. The risk with this strategy of course is that you might be
cutting yourself short and restricting potential customers. Then again, transparency builds trust.
Try Being Direct instead of indecisive.
You can send your message with uncertainty trembling in your voice, or you can say it with
confidence. If you're ending your messaging with question marks, using terms such as "perhaps",
"maybe", "interested?" and "want to?", then most likely you have some opportunity to be a bit more
authoritative. Who knows, maybe there is a bit more room for telling people what to do next in the
world of conversion optimization.
Try More Contrast instead of similarity.
Making your calls to action be a bit more prominent and distinguishable in relation to the elements
surrounding them, will make your UI stronger. You can easily increase the contrast of your primary
calls to action in a number of ways. Using tone, you can make certain elements appear darker vs.
lighter. With depth, you can make an item appear closer while the rest of the content looks like it's
further (talking drop shadows and gradients here). Finally, you can also pick complementary colors
from the color wheel (ex: yellow and violet) to raise contrast even further. Taken together, a higher
contrast between your call to action and the rest of the page should be considered.
Try Personality instead of being generic.
Introducing yourself or your product with a name, picture or place of origin is one way to make your
communication more personal. Mentioning the country, state or city of origin is surely a very human
like beginning. Even if you do so virtually then you just might be perceived as a bit more friendly.
Often, stating where your product is being made at also has a pretty good chance of making it feel of
slightly higher quality. It's a win win.
Try Fewer Form Fields instead of
asking for too many.
Human beings are inherently resistant to labor intensive tasks and this same idea also applies to filling
out form fields. Each field you ask for runs the risk of making your visitors turn around and give up. Not
everyone types at the same speed, while typing on mobile devices is still a chore in general. Question
if each field is really necessary and remove as many fields as possible. If you really have numerous
optional fields, then also consider moving them after form submission on a separate page or state. It's
so easy to bloat up your forms, yet fewer fields will convert better.
Try Exposing Options instead of hiding them.
Each pull down menu that you use, hides a set of actions within which require effort to be discovered.
If those hidden options are central along the path to getting things done by your visitors, then you
might wish to consider surfacing them a bit more up front. Try to reserve pull down menus for options
that are predictable and don’t require new learning as in sets of date and time references (ex:
calendars) or geographic sets. Occasionally pull down menu items can also work for those interfaces
that are highly recurring in terms of use - actions that a person will use repeatedly over time (ex: action
menus). Be careful of using drop downs for primary items that are on your path to conversion.
Try Keeping Focus instead of drowning with links.
It’s easy to create a page with lots of links going left and right in the hope of meeting as many
customer needs as possible. If however you’re creating a narrative page which is building on towards
a specific call to action at the bottom, then think twice. Be aware that any link above the primary CTA
runs the risk of taking your customers away from what you’ve been hoping them to do. Keep an eye
out on the number of links on your pages and possibly balance discovery style pages (a bit heavier on
the links) with tunnel style pages (with fewer links and higher conversions). Removing extraneous links
can be a sure way to increase someone’s chances of reaching that important button.
Try Showing State instead of being state agnostic.
In any user interface we quite often show elements which can have different states. Emails can be
read or unread, invoices can be paid or not, etc. Informing users about the particular state in which an
item is in, is a good way of providing feedback. Interface states can help people understand whether
or not their past actions have been successfully carried out, as well as whether an action should be
taken.
Try Benefit Buttons instead of
just task based ones.
Imagine two simple buttons displayed on a page. One button tells you that it will “Save You Money”,
while the other one asks you to “Sign Up”. I’d place my bets that the first one might have a higher
chance of being acted on, as a sign up on it’s own has no inherent value. Instead, a sign up process
takes effort and is often associated with lengthy forms of some sort. The hypothesis set here is that
buttons which reinforce a benefit might lead to higher conversions. Alternatively, the benefit can also
be placed closely to where the action button is in order to remind people why they are about to take
that action. Surely, there is still room for task based actions buttons, but those can be reserved for
interface areas that require less convincing and are more recurring in use.
Try Direct Manipulation instead of
contextless menus.
Occasionally it makes sense to allow certain UI elements to be acted upon directly as opposed to listing
unassociated generic actions. When displaying lists of data for example, we typically want to allow the user to
do something with the items in the list. Clicking on, or hovering over an item in this list can be used to express
that a particular item is to be manipulated (deleted, renamed, etc.). Another example of common direct
manipulation would be clicking on a data item (say a text based address) which then turns into an editable
field. Enabling such interactions cuts through the number of required steps, compared to if the same task was
started more generally without the context of the item - since selection is already taken care of. Do keep in
mind of course that for generic item-agnostic actions, there is nothing wrong with contextless menus.
Try Transitions instead of
showing changes instantly.
Interface elements often appear, hide, move, shift, and resize as users do their thing. As elements
respond to our interactions, it sometimes is a little easier to comprehend what just happened when we
sprinkle in the element of time. A built in intentional delay in the form of an animation or transition,
respects cognition and gives people the required time to understand a change in size or position. Keep
in mind of course that as we start increasing the duration of such transitions beyond 0.5 seconds,
there will be situations where people might start feeling the pain. For those who just wish to get things
done quickly, too long of a delay of course can be a burden.
Try Gradual Engagement instead of
a hasty sign up.
Instead of asking visitors to sign up immediately, why not ask them to first perform a task through
which something of value is demonstrated. During such initial interactions the product can both show
off its benefits, as well as can lend itself to personalization. Once users begin to see your product’s
value and see how they can make it their own, they will then be more open to sharing with you
additional information. Gradual engagement is really a way to postpone the sign up process as much
as possible and still allow users to use and customize your application or product.
Try Gradual Engagement instead of
a hasty sign up.
Instead of asking visitors to sign up immediately, why not ask them to first perform a task through
which something of value is demonstrated. During such initial interactions the product can both show
off its benefits, as well as can lend itself to personalization. Once users begin to see your product’s
value and see how they can make it their own, they will then be more open to sharing with you
additional information. Gradual engagement is really a way to postpone the sign up process as much
as possible and still allow users to use and customize your application or product.

More Related Content

PPTX
Basic Visual Design Principles and UI Design Best Practices
PDF
What is good design?
PDF
The Ultimate Guide To Instagram Marketing
PPT
Usability: whats the use? Presented by We are Sigma and PRWD
PPTX
Landing
PPTX
Engage Users Along Their Journey
PPTX
Engage Users Along Their Journey
PDF
Content Structure & UX Guide by Kayak
Basic Visual Design Principles and UI Design Best Practices
What is good design?
The Ultimate Guide To Instagram Marketing
Usability: whats the use? Presented by We are Sigma and PRWD
Landing
Engage Users Along Their Journey
Engage Users Along Their Journey
Content Structure & UX Guide by Kayak

What's hot (14)

PPT
How to maximise email marketing in a social age
PDF
Machine Learning Makes Your Business More Human
PDF
Lean UX Secrets: 5 UX Hacks to Build Better Experiences, Faster
PDF
Ad parlor connecting creativity and data
PPTX
Using your User Experience (UX) Super Powers for Good or Evil - Theo Mandel, ...
PPTX
Best Practices for Increasing User Conversion
PDF
Online usability for conversion marketing
PDF
10 principles of effective web design
PDF
UX Lean & Mean (Internet Summit 2015)
PPTX
Lean UX Secrets: Engage & Delight in a Digital World (Digital Summit Atlanta)
PPTX
Form Design: Best Practices to Improve Conversions
DOC
Pack your copy with the right persuasive trigger words and boost conversions
PDF
Just Make Me a Dashboard!
PPTX
VIP session Content Marketing Lab
How to maximise email marketing in a social age
Machine Learning Makes Your Business More Human
Lean UX Secrets: 5 UX Hacks to Build Better Experiences, Faster
Ad parlor connecting creativity and data
Using your User Experience (UX) Super Powers for Good or Evil - Theo Mandel, ...
Best Practices for Increasing User Conversion
Online usability for conversion marketing
10 principles of effective web design
UX Lean & Mean (Internet Summit 2015)
Lean UX Secrets: Engage & Delight in a Digital World (Digital Summit Atlanta)
Form Design: Best Practices to Improve Conversions
Pack your copy with the right persuasive trigger words and boost conversions
Just Make Me a Dashboard!
VIP session Content Marketing Lab
Ad

Viewers also liked (11)

PDF
GR_Sartorius_111516
PDF
Introduction to research
PPTX
PPTX
La historia de las tic en méxico dira.pptx
PDF
INFORME DE GESTIÓN Cartera académica Comunicarte Centro Interno
PPT
профорієнтація
PPT
моє захоплення
PDF
CH&Cie Cyber Security - CIB - Teaser
PDF
Factory Beautification
GR_Sartorius_111516
Introduction to research
La historia de las tic en méxico dira.pptx
INFORME DE GESTIÓN Cartera académica Comunicarte Centro Interno
профорієнтація
моє захоплення
CH&Cie Cyber Security - CIB - Teaser
Factory Beautification
Ad

Similar to GOOD UX (20)

PDF
How to Sell and Educate someone on Website Design and Development
PDF
El libro de la optimización de formularios Web, de ClickTale
PPT
Usability - 'What the heck!!'
PDF
Common Design Patterns for Mobile (part 2)
PDF
UX Design + UI Design: Injecting a brand persona!
PDF
Jayannarayanan uxdesignpresentation 141110023429 conversion gate01
PPT
SMX West 2010 - Conversion Optimization Tips
PPTX
Andys guidetoux v2
PDF
UX design presentation
PPT
E-commerce Checkout Design: Principles, Guidelines & Case Studies
PDF
Website workout - notes
PPTX
Targeted documentation STC Houston, Mar 20, 2012
PDF
Landing pages & User Acquisition - Gilles de Clerck
PDF
SoGal - 2017 Women in Tech Summit Part 2
PDF
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
PPT
8 Essential Usability and Conversion Optimisation Tips - How Do Future Commer...
PDF
Increasing online conversion through persuasive design
PDF
UI Design Principles : 20 Essential Rules for User Interface Design
PDF
20 Principles: UI Design
PDF
Landing Page Lessons
How to Sell and Educate someone on Website Design and Development
El libro de la optimización de formularios Web, de ClickTale
Usability - 'What the heck!!'
Common Design Patterns for Mobile (part 2)
UX Design + UI Design: Injecting a brand persona!
Jayannarayanan uxdesignpresentation 141110023429 conversion gate01
SMX West 2010 - Conversion Optimization Tips
Andys guidetoux v2
UX design presentation
E-commerce Checkout Design: Principles, Guidelines & Case Studies
Website workout - notes
Targeted documentation STC Houston, Mar 20, 2012
Landing pages & User Acquisition - Gilles de Clerck
SoGal - 2017 Women in Tech Summit Part 2
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
8 Essential Usability and Conversion Optimisation Tips - How Do Future Commer...
Increasing online conversion through persuasive design
UI Design Principles : 20 Essential Rules for User Interface Design
20 Principles: UI Design
Landing Page Lessons

GOOD UX

  • 2. Try A One Column Layout instead of multi columns. A one column layout will give you more control over your narrative. It should be able to guide your readers in a more predictable way from top to bottom. Whereas a multi column approach runs some additional risk of being distracting to the core purpose of a page. Guide people with a story and a prominent call to action at the end.
  • 3. Try Merging Similar Functions instead of fragmenting the UI. Over the course of time, it's easy to unintentionally create multiple sections, elements and features which all perform the same function. It's basic entropy - things start falling apart over time. Keep an eye out for duplicate functionality labelled in various ways, as it puts a strain on your customers. Often, the more UI fragmentation there is, the higher the learning curve which your customers will have to deal with. Consider refactoring your UI once in a while by merging similar functions together.
  • 4. Try Social Proof instead of talking about yourself. Social proof is another great persuasion tactic directly applicable to increasing conversion rates. Seeing that others are endorsing you and talking about your offering, can be a great way to reinforce a call to action. Try a testimonial or showing data which proves that others are present.
  • 5. Try Giving a Gift instead of closing a sale right away. A friendly gesture such as providing a customer with a gift can be just that. Deeper underneath however, gifting is also an effective persuasion tactic that is based on the rule of reciprocity. As obvious as it sounds, being nice to someone by offering a small token of appreciation can come back in your favour down the road.
  • 6. Try Repeating Your Primary Action instead of showing it just once. Repeating your call to action is a strategy that is more applicable to longer pages, or repeating across numerous pages. Surely you don't want to have your offer displayed 10 times all on the same screen and frustrate people. However, long pages are becoming the norm and the idea of squeezing everything "above the fold" is fading. It doesn't hurt to have one soft actionable item at the top, and another prominent one at the bottom. When people reach the bottom, they pause and think what to do next - a potential solid place to make an offer or close a deal.
  • 7. Try Recommending instead of showing equal choices. When showing multiple offers, then an emphasized product suggestion might be a good idea as some people need a little nudge. I believe there are some psychology studies out there which suggest that the more choice there is, then the lower the chances of a decision actually being made and acted upon. In order to combat such analysis paralysis, try emphasizing and highlighting certain options above others.
  • 8. Try Undos instead of prompting for confirmation. Imagine that you just pressed an action button or link. Undos respect the initial human intent by allowing the action to happen smoothly first and foremost. Prompts on the other hand suggest to the user that he or she does not know what they are doing by questioning their intent at all times. I would assume that most of the time human actions are intended and only in small situations are they accidental. The inefficiency and ugliness of prompts is visible when users have to perform actions repeatedly and are prompted numerously over and over - a dehumanizing experience. Consider making your users feel more in control by enabling the ability to undo actions and not asking for confirmation where possible.
  • 9. Try Telling Who It's For instead of targeting everyone. Are you targeting everyone or are you precise with your audience? This is a conversion idea where you could be explicit about who exactly your product or service is intended for. By communicating the qualifying criteria of your customers, you might be able to actually connect more with them while at the same time hinting at a feeling of exclusivity. The risk with this strategy of course is that you might be cutting yourself short and restricting potential customers. Then again, transparency builds trust.
  • 10. Try Being Direct instead of indecisive. You can send your message with uncertainty trembling in your voice, or you can say it with confidence. If you're ending your messaging with question marks, using terms such as "perhaps", "maybe", "interested?" and "want to?", then most likely you have some opportunity to be a bit more authoritative. Who knows, maybe there is a bit more room for telling people what to do next in the world of conversion optimization.
  • 11. Try More Contrast instead of similarity. Making your calls to action be a bit more prominent and distinguishable in relation to the elements surrounding them, will make your UI stronger. You can easily increase the contrast of your primary calls to action in a number of ways. Using tone, you can make certain elements appear darker vs. lighter. With depth, you can make an item appear closer while the rest of the content looks like it's further (talking drop shadows and gradients here). Finally, you can also pick complementary colors from the color wheel (ex: yellow and violet) to raise contrast even further. Taken together, a higher contrast between your call to action and the rest of the page should be considered.
  • 12. Try Personality instead of being generic. Introducing yourself or your product with a name, picture or place of origin is one way to make your communication more personal. Mentioning the country, state or city of origin is surely a very human like beginning. Even if you do so virtually then you just might be perceived as a bit more friendly. Often, stating where your product is being made at also has a pretty good chance of making it feel of slightly higher quality. It's a win win.
  • 13. Try Fewer Form Fields instead of asking for too many. Human beings are inherently resistant to labor intensive tasks and this same idea also applies to filling out form fields. Each field you ask for runs the risk of making your visitors turn around and give up. Not everyone types at the same speed, while typing on mobile devices is still a chore in general. Question if each field is really necessary and remove as many fields as possible. If you really have numerous optional fields, then also consider moving them after form submission on a separate page or state. It's so easy to bloat up your forms, yet fewer fields will convert better.
  • 14. Try Exposing Options instead of hiding them. Each pull down menu that you use, hides a set of actions within which require effort to be discovered. If those hidden options are central along the path to getting things done by your visitors, then you might wish to consider surfacing them a bit more up front. Try to reserve pull down menus for options that are predictable and don’t require new learning as in sets of date and time references (ex: calendars) or geographic sets. Occasionally pull down menu items can also work for those interfaces that are highly recurring in terms of use - actions that a person will use repeatedly over time (ex: action menus). Be careful of using drop downs for primary items that are on your path to conversion.
  • 15. Try Keeping Focus instead of drowning with links. It’s easy to create a page with lots of links going left and right in the hope of meeting as many customer needs as possible. If however you’re creating a narrative page which is building on towards a specific call to action at the bottom, then think twice. Be aware that any link above the primary CTA runs the risk of taking your customers away from what you’ve been hoping them to do. Keep an eye out on the number of links on your pages and possibly balance discovery style pages (a bit heavier on the links) with tunnel style pages (with fewer links and higher conversions). Removing extraneous links can be a sure way to increase someone’s chances of reaching that important button.
  • 16. Try Showing State instead of being state agnostic. In any user interface we quite often show elements which can have different states. Emails can be read or unread, invoices can be paid or not, etc. Informing users about the particular state in which an item is in, is a good way of providing feedback. Interface states can help people understand whether or not their past actions have been successfully carried out, as well as whether an action should be taken.
  • 17. Try Benefit Buttons instead of just task based ones. Imagine two simple buttons displayed on a page. One button tells you that it will “Save You Money”, while the other one asks you to “Sign Up”. I’d place my bets that the first one might have a higher chance of being acted on, as a sign up on it’s own has no inherent value. Instead, a sign up process takes effort and is often associated with lengthy forms of some sort. The hypothesis set here is that buttons which reinforce a benefit might lead to higher conversions. Alternatively, the benefit can also be placed closely to where the action button is in order to remind people why they are about to take that action. Surely, there is still room for task based actions buttons, but those can be reserved for interface areas that require less convincing and are more recurring in use.
  • 18. Try Direct Manipulation instead of contextless menus. Occasionally it makes sense to allow certain UI elements to be acted upon directly as opposed to listing unassociated generic actions. When displaying lists of data for example, we typically want to allow the user to do something with the items in the list. Clicking on, or hovering over an item in this list can be used to express that a particular item is to be manipulated (deleted, renamed, etc.). Another example of common direct manipulation would be clicking on a data item (say a text based address) which then turns into an editable field. Enabling such interactions cuts through the number of required steps, compared to if the same task was started more generally without the context of the item - since selection is already taken care of. Do keep in mind of course that for generic item-agnostic actions, there is nothing wrong with contextless menus.
  • 19. Try Transitions instead of showing changes instantly. Interface elements often appear, hide, move, shift, and resize as users do their thing. As elements respond to our interactions, it sometimes is a little easier to comprehend what just happened when we sprinkle in the element of time. A built in intentional delay in the form of an animation or transition, respects cognition and gives people the required time to understand a change in size or position. Keep in mind of course that as we start increasing the duration of such transitions beyond 0.5 seconds, there will be situations where people might start feeling the pain. For those who just wish to get things done quickly, too long of a delay of course can be a burden.
  • 20. Try Gradual Engagement instead of a hasty sign up. Instead of asking visitors to sign up immediately, why not ask them to first perform a task through which something of value is demonstrated. During such initial interactions the product can both show off its benefits, as well as can lend itself to personalization. Once users begin to see your product’s value and see how they can make it their own, they will then be more open to sharing with you additional information. Gradual engagement is really a way to postpone the sign up process as much as possible and still allow users to use and customize your application or product.
  • 21. Try Gradual Engagement instead of a hasty sign up. Instead of asking visitors to sign up immediately, why not ask them to first perform a task through which something of value is demonstrated. During such initial interactions the product can both show off its benefits, as well as can lend itself to personalization. Once users begin to see your product’s value and see how they can make it their own, they will then be more open to sharing with you additional information. Gradual engagement is really a way to postpone the sign up process as much as possible and still allow users to use and customize your application or product.