🌼 The Ultimate UX Design Glossary
🌼 What Are UX Design Principles?
🌼 What Are the Laws of UX?
- A/B Testing: A/B testing can be used to compare the performance of a webpage, app, email, or advert by pitting a control, ‘A’, against a test variant, ‘B’.
- Affordance: Affordance is a property or feature of an object which presents a prompt on what can be done with this object. In short, affordances are cues which give a hint how users may interact with something, no matter physical or digital.
- Agile UX: Agile UX stands for collaboration-centered practice between designers and developers while they work on the product. This approach brings all the best from Agile development to UX design processes.
- Backlog: A backlog is a list of tasks required to support a larger strategic plan. In a product development context, it contains a prioritized list of items that the team has agreed to work on next. Typical items on a product backlog include user stories, changes to existing functionality, and bug fixes.
- Card Sorting: Card sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them and they may also help you label these groups. To conduct a card sort, you can use actual cards, pieces of paper, or one of several online card-sorting software tools.
- Ethnography: Ethnography is a study through direct observation of users in their natural environment rather than in a lab. The objective of this type of research is to gain insights into how users interact with things in their natural environment.
- GUI: A graphical user interface (GUI) is an interface through which a user interacts with electronic devices such as computers, hand-held devices and other appliances. This interface uses icons, menus and other visual indicator (graphics) representations to display information and related user controls, unlike text-based interfaces, where data and commands are in text.
- Guide Tour: Allow users to learn at their own pace using tooltips, overlays, models, and alerts hinting optimal use of an interface within the context of everyday use. Connect hints with clear completion states.
- IA: Information architecture is the half-art-half-science process of deciding how the content of a digital project will be organized and labeled. Great IA comes from having a profound understanding of the project itself and its intended audience. It’s an IA designer’s job to make sure the entire team understands the blueprint.
- Interaction Design: Interaction design can be understood in simple (but not simplified) terms: it is the design of the interaction between users and products. Most often when people talk about interaction design, the products tend to be software products like apps or websites. The goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible.
- Mental Model: Mental model is what the user believes about how a user experience works. Mental models are built in a user’s brain and are based on what they know from past interactions with websites, mobile phones, and other interactive products.
- Lean UX: Lean UX is focused on the experience under design and is less focused on deliverables than traditional UX. It requires a greater level of collaboration with the entire team. The core objective is to focus on obtaining feedback as early as possible so that it can be used to make quick decisions. The nature of Agile development is to work in rapid, iterative cycles and Lean UX mimics these cycles to ensure that data generated can be used in each iteration.
- Metaphor: Metaphor is a set of user interface visuals, actions and procedures that exploit specific knowledge that users already have of other domains. The purpose of the interface metaphor is to give the user instantaneous knowledge about how to interact with the user interface.
- MVP: Minimum viable product (MVP) is a process for creating a production-ready product based on collaboration with users that undergoes continuous iterations and improvements until a “final” product is created. MVP design iterations are based on quantitative data and qualitative customer feedback.
- Object-Oriented UX: The philosophy of OOUX is to encourage us as UX Designers to think about our core content as objects, and to think about this before considering any procedural actions. So before we dive straight into technical workflows and think about how the interface will function or appear, we can consider how our users will think about data as objects and align the product with a user’s mental model.
- Onboarding: An onboarding experience is a way to introduce users to a new product, app, or feature. Onboarding UX is the design of a flow or series of flows that give the user a guided introduction to the product, set up some initial preferences, or point out critical UI elements in an interface.
- Paper Prototypes: Paper prototypes are a way to test your design concepts without mocking up the interface digitally. You sketch how you imagine the screens in an interface to look, then you can move the screens around depending on ‘user input’.
- Persona: Personas are archetypical users whose goals and characteristics represent the needs of a larger group of users. Persona representations include behavioral patterns, goals, motivations, skills, attitudes, and background information, as well as the environment in which a persona operates.
- Prototype: A prototype is a primitive representation or version of a product that a design team or front-end-development team typically creates during the design process. The goal of a prototype is to test the flow of a design solution and gather feedback on it from both internal and external parties before constructing the final product. The state of a prototype is fluid as the team revises the design iteratively based on user feedback.
- Scenario: User scenarios are stories which designers create to show how users might act to achieve a goal in a system or environment. Designers make scenarios to understand users’ motivations, needs, barriers and more in the context of how they would use a design, and to help ideate, iterate and usability-test optimal solutions.
- Scrum: Scrum is a framework that helps teams work together. Much like a rugby team (where it gets its name) training for the big game, scrum encourages teams to learn through experiences, self-organize while working on a problem, and reflect on their wins and losses to continuously improve.
- Sprint: The design sprint is a five-day process for answering critical business questions through design, rapid design prototyping, and testing ideas.
- Task Analysis: Task analysis is a process that helps UX designers learn how users actually go about completing tasks with a product.
- UI: User interface(UI) is the graphical layout of an application. It consists of the buttons users click on, the text they read, the images, sliders, text entry fields, and all the rest of the items the user interacts with.
- UX: User experience(UX) design is the process design teams to create products that provide meaningful and relevant experiences to users.
- Walkthrough: A product walkthrough appears when you use a product for the first time. It’s like someone taking your hand and guiding you through how a product works so that you don’t get confused.
- Wireframing: Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.
This guide is for anyone who designs software products as part of their work. You may be a full-time designer, a UX professional or someone who has to make decisions about UX in your organization's products. Regardless of your role, the principles in this guide will improve your products, help you to serve your users' needs better, and make your customers more likely to return to you.
Only amateurs call typefaces "fonts", you know? "Proper" design professionals call them "typefaces" Fonts are the files on the device that the software uses to render the typeface. Fonts are the paint on the palette, while the typeface is the masterpiece on the canvas. Regardless, too often designers add too many typefaces to their products. You should aim to use two typefaces maximum: one for headings and titles, and another for body copy that is intended to be read.
Yes, your corporate brand font is lovely. It's so playful and charming but it takes an extra three seconds to load the page, as the font needs to be downloaded from the server and rendered—and nothing appears until it loads—driving your users crazy.
This is a simple, but effective, method for organizing your views and making them instantly understandable for a wide range of users. Let's look at an example of how not to do this in an imagined "Calendar" app user interface. Simply by altering the type size by a noticeable factor, we can show the user the most relevant information first.
If you're trying to get an integer (a whole number) from a user—for example the number of widgets they want to order or the number of days an event runs for—it makes no sense to offer them a free text input field.
The best apps allow users to back out of such actions, either with undo controls or by giving users the ability to edit actions before they're final. Google's Gmail has had an optional "undo send" feature for quite some time. This stores your sent message in a "buffer" for 20 seconds, giving you that short grace period to cancel sending. If you just ignore it, you know the message will be sent shortly. This particular feature has saved me many times.
The screen is the user's viewport into your app and it forms a mental model of how they see your interface. By showing the edges of items, it's possible to show the user that there's more to be seen just off the screen.
Infinite scroll should be limited to only a few types of content. If applied to finite lists (messages, emails, to-do items, and so on) then the user has no way of determining a beginning, middle, and end to the content. When used with this kind of content, infinite scroll is confusing and slower to use, so save it for feeds.
Although the technical implementation details can be challenging, it's worth putting in the effort to avoid disorentating users. Viewing a product then navigating back should always return the user to the point where they left off.
A blank slate is usually some helpful text, hints and maybe a friendly graphic or icon. Now, because these views can appear on a per-feature basis, it's easy to be very task-oriented in the advice you give. If the user views the to-do list, you can give advice on making the first to-do item.
Too often apps force users to view their "getting started" guide or "tips for beginners" They are often good for new users, but if you're coming back to an app you've used before then they're incredibly frustrating.
Providing a "show password" toggle is not only great for usability, but also improves security: users can enter longer, more complex pass-phrases and be confident that they can retype them correctly. Default to obfuscating the password, but provide a checkbox or toggle that allows the user to see their password.
It's a good general rule across the board to not interfere with standard system behaviors (copy, paste, find, zoom, right-click, and so on), as they are all basic interactions that the user will have grown accustomed to over years of working with various devices. To deliberately disable these behaviors on your product is nonsensical, yet it still happens. Designers think that they can improve security, reduce plagiarism, or other factors that aren't user-centric.
Validation on a form means showing the user visual feedback that there's a problem with some of the information they've painstakingly entered. Validate data entered into a field as soon as possible, when the user moves to the next field, so you know they're done typing in the current one.
Consider whether you would like the user to upload multiple images. If so, allow them to do this in one go, rather than lots of separate selections. Give the user "crop" and "rotate" controls when the image is previewed. It's super useful to be able to trim and rotate an image with a couple of clicks, rather than using another tool to do so. Try to accept a wide variety of image formats: JPEG, PNG and GIF at the very least. Tell the user that the image is uploading and show them the progress (uploads can be slow).
it's a great idea to let users know how long they're going to be waiting for.
Screen-reader software often has a mode where the user can "skim" the page for clickable links, and these links need to make sense out of context. In this case, the first link would be read aloud as "click here", while the second would be dictated as "download our brochure"—much more usable.
- To download our brochure: click here. (Bad)
- You can download our brochure here. (Good)
People suffering from partial sight, color blindness, or visual deficiencies, may have problems differentiating certain colors. If all the information is color-based, then they won't be able to access it. Adding an icon or image next to the content may be a good solution in some cases. It will boost the use of color to convey information, and it's fairly easy to implement.
It's worth thinking through carefully how users can customize or disable certain types of notifications (or all of them). The events that each user considers important, or notification-worthy, will vary and may even change over time. A user probably doesn't want an audio notification every time someone likes their Instagram selfie. Perhaps they do want a notification of a direct message because they get them less frequently.
The classic anti-pattern here is users thinking, "Have I saved these settings or not?" On macOS, changing the settings and then closing the window saves the settings, while on (older) Windows applications, the user must press "save". In some more obscure systems, the user must click apply and then save. The user is never sure whether this journey (to change a setting) has ended or not, so make it clear to them.
Google is so good at ranking search results that users have come to expect this level of quality from all their search experiences. Unfortunately, the "out-of-the-box" site search on many modern web platforms is a little lacking. You will need to work hard on your product, and consider the whole search experience deeply, to deliver the kind of quality your users expect.
Show the viewer (or user) the situation and let them work out how they feel. It's also a great mantra to repeat to yourself if you're working on the experience of onboarding, feature guides, or other tuition—showing users how to use your product is always better than telling them. Users don't read text. Really, they don't. Time and again, in user test after user test, I've witnessed this with my own eyes—users simply don't read onscreen text. You have to show them how to use the product, not write a description using words.
The words (or copy) that you write in your product have a dual purpose. The first is the most obvious: they label items and views and tell the user which elements are which. The second is less obvious, but more important: the words you use become a very precise and descriptive language for your product. Understanding and parsing this language is essential to a user forming a mental model of how your product works.
Too often, terminology in software is written from a systems-oriented or organization-centric point of view. We often see menu options like "edit customer" or "create new customer", but stop and think about this for a second—customers are people and we don't create them. The first option doesn't actually edit a customer and the second doesn't create a new customer. For the developer, customers are just database records, so of course it makes sense to edit them and create new ones, but for the user, these options should be better named: "edit a customer's details" and "add a new customer".
The power of default settings is often overlooked, but they have huge potential to affect the UX of your product. When I get into my car, the default sound output of my phone switches from handset to in-car speaker. I can change it, but the default is sensible. Sign in to an analytics product and the selected date range is "this week", with a comparison date range of "last week." Imagine if the default was "today" and showed no data—useless, right? How many users you think (or know through research) want this default setting.
Your users have spent many years using products just like yours, so should your product work just like those other products or radically differently? The answer is—"just like those other products".
In UX, this is the polar opposite of best practice. Consider Jakob's Law of Internet User Experience, which states, "Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know".
Jakob Nielsen utterly nails it with this one. Your users spend the vast majority of their lives not using your product. They spend that time on other sites, other web apps and other mobile apps. The product with which they're least familiar is your product.
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
The time to acquire a target is a function of the distance to and size of the target.
The time it takes to make a decision increases with the number and complexity of choices.
The average person can only keep 7 (plus or minus 2) items in their working memory.
Be liberal in what you accept, and conservative in what you send.
People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
Users often perceive aesthetically pleasing design as design that’s more usable.
The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
Tesler’s Law, also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced.
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.