Understanding UX/UI Design
UX Design refers to the term User Experience Design, while UI Design stands for User Interface Design. Both elements are crucial to a product or website and work closely together.
UX Design refers to the term User Experience Design, while UI Design stands for User Interface Design. Both elements are crucial to a product or website and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different parts of the process and the design discipline. Where UX Design is a more analytical and technical field, UI Design is closer to what we refer to as graphic design, though the responsibilities are somewhat more complex.
There is an analogy I like to use in describing the different parts of a website: If you imagine a website as the human body, the bones represent the code which give it structure. The organs represent the UX design: measuring and optimizing against input for supporting life functions. And UI design represents the cosmetics of the body–its presentation, its senses and reactions.
But don’t worry if you’re still confused! You’re not the only one!
As Rahul Varshney, Co-creator of Foster.fm puts it:
“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.”Rahul VarshneyCo-Creator, Foster.FM
According to the Interaction Design Foundation, “User experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability, and function.”
In other words, UX design is studying the user and understanding their motives with the goal of designing better digital experiences.
Where most business struggle in building their websites is they soley look at it from the view of the business or brand and not the customer or user. While it is true a product cannot succeed with a healthy business, a business cannot succeed without a happy customer – and it is the job of UX design to be the customer or user advocate.
Utilize the UX Full Stack when designing
your new website.
Let’s walk through the full UX stack to see what questions UX can help you in the design of your new website, starting with the initial strategy and scope phases where the concept is taking shape.
- Do users need the product or service you are offering?
- Do they want it enough that they will either pay for it or if it’s free , spend time looking for it and learning to use it?
- Are you missing a key feature they will need?
- Are you spending time building features they will never use?
Once we have decided what to build we need to decide how. It is in the structure and skeleton phases where the project really takes shape and a good UXD can help answer some critical implementation questions:
- How should the content be organized so that users can find it?
- Will users find your website easy to use? Where do they get confused or lost?
- What content is needed and how should it be written to be most engaging?
Next, we need to focus on the surface of the product. What is the product going to look like visually? This is an important step because a user’s first impression is critical. UXD can help with the following:
- What should the visual tone of the product or service be?
- How do users feel when they see your product? Do they trust it?
- Is the product visually appealing and does it spark joy?
- Is the visual design usable and accessible
Lastly, always remember that users use products or services; they don’t use documentation. Design materials like wireframes, prototypes, and strategy documents are a means to an end, so don’t lose sight on improving your product or service.
”"To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse."Paul Rand
UI Design generally refers to the visual elements of a product or experience – the look and feel, the presentation and the interactivity of a product. It’s the interface that the user interacts with and (hopefully) makes the experience aesthetically pleasing.
For most product designers it’s the series of screens, pages, and visual elements that the user sees — like buttons and icons — that you use to interact with a device or product. We’d argue that UI is not restricted to visual cues but also to the non-visual cues and interactions that influence a user’s interactive decisions or choices.
The goal of the UI should be to make the interaction as simple and efficient as possible – to make it easy for the user to accomplish their goals, and solve their problems.
Understanding the principles of user interface design
01. Clarity is Job #1
Clarity is the first and most important job of any interface. To be effective using an interface you’ve designed, people must be able to recognize what it is, care about why they would use it, understand what the interface is helping them interact with, predict what will happen when they use it, and then successfully interact with it. While there is room for mystery and delayed gratification in interfaces, there is no room for confusion. Clarity inspires confidence and leads to further use. One hundred clear screens is preferable to a single cluttered one.
02. Interfaces Exist to Enable Interaction
Interfaces exist to enable interaction between humans and our world. They can help clarify, illuminate, enable, show relationships, bring us together, pull us apart, manage our expectations, and give us access to services. The act of designing interfaces is not Art. Interfaces are not monuments unto themselves. Interfaces do a job and their effectiveness can be measured. They are not just utilitarian, however. The best interfaces can inspire, evoke, mystify, and intensify our relationship with the world.
03. Conserve Attention
We live in a world of interruption. It’s hard to read in peace anymore without something trying to distract us and direct our attention elsewhere. Attention is precious. Don’t litter the side of your applications with distractible material…remember why the screen exists in the first place. If someone is reading let them finish reading before showing that advertisement (if you must). Honor attention and not only will your readers be happier, your results will be better. When use is the primary goal, attention becomes the prerequisite. Conserve it at all costs.
04. Keep Users in Control
Humans are most comfortable when they feel in control of themselves and their environment. Thoughtless software takes away that comfort by forcing people into unplanned interactions, confusing pathways, and surprising outcomes. Keep users in control by regularly surfacing system status, by describing causation (if you do this that will happen) and by giving insight into what to expect at every turn. Don’t worry about stating the obvious…the obvious almost never is.
05. Direct Manipulation is the Best
The best interface is none at all, when we are able to directly manipulate the physical objects in our world. Since this is not always possible, and objects are increasingly informational, we create interfaces to help us interact with them. It is easy to add more layers than necessary to an interface, creating overly-wrought buttons, chrome, graphics, options, preferences, windows, attachments, and other cruft so that we end up manipulating UI elements instead of what’s important. Instead, strive for that original goal of direct manipulation…design an interface with as little a footprint as possible, recognizing as much as possible natural human gestures. Ideally, the interface is so slight that the user has a feeling of direct manipulation with the object of their focus.
06. One Primary Action Per Screen
Every screen we design should support a single action of real value to the person using it. This makes it easier to learn, easier to use, and easier to add to or build on when necessary. Screens that support two or more primary actions become confusing quickly. Like a written article should have a single, strong thesis, every screen we design should support a single, strong action that is its raison d’etre.
07. Keep Secondary Actions Secondary
Screens with a single primary action can have multiple secondary actions but they need to be kept secondary! The reason why your article exists isn’t so that people can share it on Twitter…it exists for people to read and understand it. Keep secondary actions secondary by making them lighter weight visually or shown after the primary action has been achieved.
08. Provide a Natural Next Step
Very few interactions are meant to be the last, so thoughtfully design a next step for each interaction a person has with your interface. Anticipate what the next interaction should be and design to support it. Just as we like in human conversation, provide an opening for further interaction. Don’t leave a person hanging because they’ve done what you want them to do…give them a natural next step that helps them further achieve their goals.
09. Appearance Follows Behavior
Humans are most comfortable with things that behave the way we expect. Other people, animals, objects, software. When someone or something behaves consistently with our expectations we feel like we have a good relationship with it. To that end designed elements should look like how they behave. Form follows function. In practice this means that someone should be able to predict how an interface element will behave merely by looking at it. If it looks like a button it should act like a button. Don’t get cute with the basics of interaction…keep your creativity for higher order concerns.
10. Consistency Matters
Following on the previous principle, screen elements should not appear consistent with each other unless they behave consistently with each other. Elements that behave the same should look the same. But it is just as important for unlike elements to appear unlike (be inconsistent) as it is for like elements to appear consistent. In an effort to be consistent novice designers often obscure important differences by using the same visual treatment (often to re-use code) when different visual treatment is appropriate.
11. Strong Visual Hierarchies Work Best
A strong visual hierarchy is achieved when there is a clear viewing order to the visual elements on a screen. That is, when users view the same items in the same order every time. Weak visual hierarchies give little clue about where to rest one’s gaze and end up feeling cluttered and confusing. In environments of great change it is hard to maintain a strong visual hierarchy because visual weight is relative: when everything is bold, nothing is bold. Should a single visually heavy element be added to a screen, the designer may need to reset the visual weight of all elements to once again achieve a strong hierarchy. Most people don’t notice visual hierarchy but it is one of the easiest ways to strengthen (or weaken) a design.
12. Smart Organization Reduces Cognitive Load
As John Maeda says in his book Simplicity, smart organization of screen elements can make the many appear as the few. This helps people understand your interface easier and more quickly, as you’ve illustrated the inherent relationships of content in your design. Group together like elements, show natural relationships by placement and orientation. By smartly organizing your content you make it less of a cognitive load on the user…who doesn’t have to think about how elements are related because you’ve done it for them. Don’t force the user to figure things out…show them by designing those relationships into your screens.
13. Great Design is Invisible
A curious property of great design is that it usually goes unnoticed by the people who use it. One reason for this is that if the design is successful the user can focus on their own goals and not the interface…when they complete their goal they are satisfied and do not need to reflect on the situation. As a designer this can be tough…as we receive less adulation when our designs are good. But great designers are content with a well-used design…and know that happy users are often silent.
14. Build on Other Design Principles
Visual and graphic design, typography, copywriting, information architecture and visualization…all of these disciplines are part of interface design. They can be touched upon or specialized in. Do not get into turf wars or look down on other disciplines: grab from them the aspects that help you do your work and push on. Pull in insights from seemingly unrelated disciplines as well…what can we learn from publishing, writing code, bookbinding, skateboarding, firefighting, karate?
15. Interfaces Exist to be Used!
As in most design disciplines, interface design is successful when people are using what you’ve designed. Like a beautiful chair that is uncomfortable to sit in, design has failed when people choose not to use it. Therefore, interface design can be as much about creating an environment for use as it is creating an artifact worth using. It is not enough for an interface to satisfy the ego of its designer: it must be used!