What are the basic principles of UX design?

From EcommerceWiki
User ExperienceUser Experience and Design BasicWhat are the basic principles of UX design (visual design unity and variety)

What are the basic principles of UX design?

To idenitfy the key fundamentals of User Experience we have to define all Touch Points. These could be in fact everything, every ad, product, campaign between a company and a customer. To define they key principles, everything has to be as satisfactory, effective and efficient as possible. Some design guidelines: [1]

Be simple

Make live easy for your users. Avoid distractions, jargon and long loading times. Which of the two cockpit designs do you perceive as to be more simple?

Audi-virtual-cockpit.png
Audi virtual cockpit


Busy cockpit design.jpg
Lancia virtual cockpit

Be contextual

Ensure that users are contextually aware of where they are within their customer journey. An example of UX design which helps the user to determine where he is, is the breadcrumb. It shows in case of the Ecommercewiki in which topic and chapter he resides. For a webshop it helps determine in which product category he is if he is watching a product page.

Screen amazon-breadcrumb.png
Amazon helps users determine where they are within their product catalog

Be human

The design has to be approachable, trustworthy and transparent. Provide human interactions they expect. People want to have an idea they are not buying from a machine but from a human being.

Optimax laser treatment.png


Lasik eye treatment.png

Both eye laser treatment websites (no small thing to choose) offer several elements which may their websites more human:

  • Both show people looking towards the user
  • Both show ways to contact the company by phone, chat, store
  • Both use the color blue (=trust in most cultures).

Other simple elements like trust certificates, user reviews, testmonials, logo's of well known clients can realize a feeling of trust.

Be findable

Amazon look into the book.jpg
Amazon look inside the book wayfinder

Make sure users can find what you want them to find. This can be for your entire website but also for certain features within your website (like Amazon's look into the book example). In the example below LeadForensics makes very clear its wants visitors to try its software. The Get Started button is both shown in the navigation, on the right hand side as well as in the carroussel.

Lead forensics.png
LeadForensics makes very clear its wants people to try its software.

Keep in mind that most people to not arrive at your website via your home page but on a landingspage within your website. Having a clear logo and navigation structure at the top helps the user determine where he is. Other elements that help the user are clear headings, page titles and URL's. An example of a well designed website is that of the BBC.

BBC clear navigation.png
The BBC shows clear navigation on several levels

The Nielsen Norman Group recommends to ask people a few simple questions to test how findable your website is. Show people various pages at different levels of the website, one at a time, without navigating to them. Say: “Pretend you just arrived at this web page. Where are you on the website?”

  • If they give an answer (right or wrong), ask: “How can you tell?”
  • If they say they aren’t sure, ask: “What would you expect to see here to help you know where you are?”
  • If they are still not sure where they are, ask: “What would you normally do in order to find out?

Be easy

Reduce the user’s cognitive workload whenever possible. Be consistent and clear, and establish a strong visual hierarchy.

The simpliest way to reduce the user's cognitive workload is to keep to design standards. Do not try to reinvent the feel unless it really adds value to the user experience. Some design standards are:

  • The Logo of the company is always at the top left (and clickable to the home page).
  • The shopping basket is always at the top right.
  • Navigation on the top or across
  • Breadcrumbs (if used) below the navigation
  • The content is shown in the left, bigger column or centre of the page
  • Links in text are best kept blue.
  • Related material and promotions are shown on the right
  • Etcetera.

The same applies for common functions. If you check out different airline and flight ticket websites you will notice that the search system is nearly always the same. There may be features which make live easier at some sites but they are rarely completely different.

A strong visual hierarchy shows that which is important at the top and bigger than elements which are not (so) important. Below you see two examples of weak and good visual hierarchy.

Screenshot Williams-Sonoma.jpg
A weak visual hierarchy. It is not clear where the user should go.


Street-League-Skateboarding-Good-Visual-Hierarchy.jpg
A strong visual hierarchy. It is clear where to get tickets.

Be consistent

Consistency makes sites easier to use, because users do not have to learn new tricks as they click accross the website. The advise is to define a clear patterns for your whole customer journey, from the Facebook ads till the thank your for your order confirmation email. Learned patterns should be everytime the same.

Consistency is not only in navigation but also design (icons, images, fonts, colors) and language. Technically consistency also makes sense. It is a lot of work to create different templates and style sheets for each page.

Below again two examples which show that consistent design can be slightly boring but also quite attractive. More examples of consistent design can be found at WebDesignerDepot.

Styleboost-consistent-design.jpg
An example of a consistent design, although slightly boring.


Screenshot-tapbots-consistent-design.jpg
An example of consistent design, more playfull

Other Basic Principles of Design

The items listed above are not the only list. There are many other principles of design lists. Hereby a few:[2] Dieter Rams, Ten principles for good design:

  1. Good design is innovative
  2. Good design makes a product useful
  3. Good design is aesthetic
  4. Good design makes a product understandable
  5. Good design is unobtrusive
  6. Good design is honest
  7. Good design is long-lasting
  8. Good design is thorough down to the last detail
  9. Good design is environmentally friendly
  10. Good design is as little design as possible

First Principles of Interaction Design, Bruce Tognazzini:

  1. Anticipation
  2. Autonomy
  3. Color Blindness
  4. Consistency
  5. Defaults
  6. Efficiency of the User
  7. Explorable Interfaces
  8. Fitts’ Law
  9. Human Interface Objects
  10. Latency Reduction
  11. Learnability
  12. Metaphors
  13. Protect Users’ Work
  14. Readability
  15. Track State
  16. Visible Navigation

Previous - Up - Next

Page contributors

Host
TCBYC.png
Curators
Hannes Robier
CEO
Youspi Consulting GmbH
Joel Marsh
VP Marketing
Scrive
Experts

Share this paragraph

Comments

  1. , ' <http://www.uxmatters.com/mt/archives/2014/11/fundamental-principles-of-great-ux-design-how-to-deliver-great-ux-design.php> ()
  2. , ' <https://principles.adactio.com/> ()