Principles of UI/UX Design

While every client and every design is unique in their needs and wants, there are some universal design philosophies and concepts that help create a user-friendly experience.

View the Digital Design Principles Deck

‍

Occam’s Razor

When you have several options to choose from, most often, the simplest option is your best option.

Simple Bank stripped away all of the bells and whistles that banks are expected to have: fees, CD’s, savings accounts, credit cards and more. And they just started with checking accounts. That’s it! But they put so much thought into their checking accounts that people were flocking to bank with them in droves. Slowly but surely, they’ve been adding new features to their product but only after refining them and making sure they did things the way they NEEDED to be done not the way people expected them to be done.

Hick’s Law

The time it takes to make a decision increases as the number of alternatives increases.‍

Limiting buttons, tabs and choices will make a viewer more apt to participate and return to a website.

More choices = more anxiety

Fewer choices = more control.

Anyone ever been to Don’s Seafood and couldn’t decide what to get after looking at it for 20 minutes? Anyone ever eaten at Canes

When it comes to designing information architecture through your sitemap and content outline, arranging content so that the number of items in the navigation is no more than 5 is a good rule of thumb to make sure the user is not overwhelmed.

Gestalt Principles

When there is a lot of information to digest, we tend to look for ways to digest it more easily.

• Similarity — when items are similar, they are perceived as a unit.

• Continuation — Continuation is the principle through which the eye is drawn along a path, line or curve, preferring to see a single continuous figure than separate lines.
• Closure — Closure works where an object is incomplete or the interior space of an element is not fully closed, but the viewer perceives a complete shape by filling in the missing information.
• Proximity — Proximity uses the close arrangement of elements to create a group association between those objects.
• Figure & Ground — This principle describes the eye's tendency to see and separate objects from their surrounding background.
• Symmetry & Order — this principle says that a composition should not provide a sense of disorder or imbalance, as otherwise the viewer will waste time trying to locate the missing element, or fix the problem, rather than focusing on the message or instruction.

Fitt’s Law

The easier the target is to identify and the shorter the distance to that target, the quicker the task can be performed, and the more pleasant the experience.‍

For websites, creating larger more noticeable buttons for functions they wish to encourage and smaller, less obvious buttons for choices they wish to discourage just makes sense. You can also place them in parts of the screen that are quicker to access, for example, the corners of your screen are easier to access on desktop because your mouse snaps into the corner with a flick of your wrist. While on mobile, especially with larger screens, buttons closer to the thumb are easier to press.‍

The Pareto Principle

For many events, roughly 80% of the effects come from 20% of the causes.‍

In practical application, on a website, if 80% of the viewers only use 20% of the supplied information, tabs, buttons, etc., then that information should be highlighted and the information only used by 20% of your users can be minimized or eliminated for a cleaner, more efficient model.‍

The Mental Model Law

The human mind constructs small-scale mental models of reality that it uses to anticipate events.‍

Learning becomes much easier when you can build upon a model of something that is already familiar. Computer designers tapped into this when they incorporated familiar terms such as desktop, files and folders into word processing programs. Any time you can use a familiar experience as a model or introduction to a new development, the opportunity for success is increased and the stress level is reduced.

This is why coming up with navigation titles like “Ready to do this?” is stupid when what you really need to say is “Contact Us.” It’s clear and familiar.‍

Tolerance for Error

Minimize the inevitable problems and negative consequences that follow accidental or unintended actions.‍

Have you ever been filling out an online form only to hit submit and it deny you without telling you why? You’re left wondering, what did I do wrong? Whereas, if you filled out the form and it denied you saying, “Uh oh! You forgot to fill out your last name.” suddenly you feel like you have clarity on what to do next.‍

Signal to Noise Ratio

An identification of the balance between the message and the background noise that could limit it or weaken its impact.‍

A 1:1 ratio means the amount of signal is equal to the amount of background noise distracting from it and therefore in need of correction. Correction may involve turning up the primary focus, which could be either an audio or visual communication. It could also entail turning down or eliminating distractive sounds or visual complexities.

Letting important and useful information have center stage and reducing false or irrelevant information will produce more positive results.