A/B testing involves randomly showing groups of users different variants of a product for statistical analysis, to identify which one performs better in the context of a business goal/objective.
Affinity Diagrams are brainstorming tools used to re-organising product insights, data and ideas into groups, so interconnections between them are easily identifiable. Great for creative product ideation and solving complex problems.
Affordances are cues or characteristics that give users an indication of how to interact with and use a product. The heart icon used to save a recipe is an excellent example of an “obvious affordance” in the example above.
Agile is an iterative framework in which multiple stages of the design process run in parallel, enabling teams to make faster designs and get quick feedback on their work. Although now practised in UX, software development teams traditionally use the agile approach to deploy and test code quickly.
An avatar is a graphical representation of a user persona, that in recent times has become increasingly popular as businesses adopt a more graphical approach to design.
Body-storming is an empathy-building technique which involves immersing yourself in the environment and physically experiencing a situation that users face, ultimately helping you build products/solutions that better address their needs.
Usually, in the form of a bar at the bottom of the smartphone display, this navigation type allows users to switch between multiple destinations in a single tap. Each destination has a corresponding icon or text.
Also known as breadcrumb trails and sitemap links, this popular navigation form shows visitors their position within a websites page hierarchy. It is prevalent in websites that have lots of categories, such as marketplaces and newsrooms.
Brutalism is a digital design style that is functional, but intentionally raw and unadorned in appearance. Commonly found in early websites, this style takes inspiration from the modernist architectural movement from the 1950s, in which consisted buildings were made of un-ornamented blocks of concrete.
Call to action (CTA / C2A)
CTA’s are interactive UI elements found on digital interfaces that entice users to complete an action, which results in a specific outcome/conversion. The “Add to Cart” and “Go to Menu” button are examples of typical call to actions you’ll find on many websites today.
Card sorting is a UX research technique in which you give participants topics to write down on post its/cards and ask them to organise the cards to make sense to them. The goal is to help teams evaluate and design a website or app’s information architecture to be user-friendly.
A carousel consists of several cards that display different content, usually, images, which users can shuffle through with ease. They allow design teams to place multiple content pieces in a single space, whilst minimising visual clutter.
A clickstream refers to the click path a user takes to complete a particular action on a website. Designers analyse this information to identify any potential issues that need addressing and changes required to improve the conversion rate metrics.
Colour theory consists of several rules, and best practices used to help guide designers in selecting colour schemes for visual interfaces.
Conversion rate is the percentage of individuals who visited your website/app and completed the specific action you wanted them to take. E.G. If 5000 people visited your website, and only 500 people signed up for your newsletter, the conversion rate would be 10%. If the conversion rate is high, perfect, if it’s low, you can use other analytical techniques to identify, address and solve the potential root causes.
The copy is the text that helps guide visitors through your app or website. Due to the vital role it plays in assisting users in navigating and completing specific actions, your copy must be creative, engaging, and most importantly reflect your brand identity.
Customer experience (CX)
CX is the perception and feelings a customer has towards your brand/product, based on every single interaction they have with it. Say you’re purchasing a car, the customer experience will encompass everything, from the parking available at the showroom, how the vehicles are displayed, the customer service offered by staff and the payment options made available.
Dark patterns are UI/UX interactions that purposefully manipulate human psychology to trick users into completing actions that are beneficial for a business, but not what they want to do. The example above is from the customer support section of the digital banking app Revolut. The “Got it” button directs users away from customer support and stands out. In comparison, the “Chat to Us” that opens up a customer support chat isn’t highlighted. A clear attempt to reduce the number of direct enquiries to real technical support staff.
Also known as UX debt, this refers to any design-related issues that are left unsolved and incomplete. Although mostly done to focus on short-term goals, these issues can spiral out of control and prove costly in the long run if not rectified.
The Design Sprint is a highly interactive, user-focused process spread over five-days, whose goal is to answer critical business questions through design, prototyping, and testing ideas with customers.
Design thinking is an iterative framework used by teams to build a shared understanding of and create innovative solutions for complex problems users face. The process consists of five stages; empathise, define, ideate, prototype and test.
Diary studies are qualitative research techniques in which you ask users to keep a log of their daily experiences over a prolonged time. The diary study’s goal is to get valuable insights about participants to help guide you during product development.
Empathy is the ability to understand and share another’s feelings, from their needs, motivations, problems and desires. Not to be mistaken with sympathy, which involves merely acknowledging others’ plight, usually manifested in the form of pity and sorrow.
Empathy Maps are handy visual tool used to organise all the important information you know about your users and identify any knowledge gaps that require further research. An empathy map aims to help create a shared understanding of your users’ needs and goals within the team.
Eye-tracking is a UX research and testing technique in which you use specialised tools to identify the areas on a web page that users’ eyes focus on. It’s a good technique to help you identify potential usability issues, the website content that users find most engaging and much more.
Known as an Ishikawa diagram, this is a tool used by design teams to identify individual root causes and the overall effect each one has concerning an identified problem. When creating an Ishikawa diagram, the problem is placed at the “head of the fish”, with each underlying cause forming the skeleton.
Identified by Psychologist Paul Fitt’s, this law states that time taken to reach an object is a direct function of its width and distance from an individual. The LinkedIn user interface is an excellent example of the application of Fitts law UX design. Notice how buttons for the important functions are a good size, placed in the bottom and top, close to the phone screen edges—making them quickly accessible when an individual is holding the phone in the palm of their hands.
Flat design is a minimalist interface design style that uses simple 2D elements, typography and bright colours. It rose to prominence in 2013 with the release of iOS 7, which saw Apple ditch the skeuomorphic style for more simplistic buttons, icons and design elements.
In essence, a full-stack designer is someone who has solid UI, UX and front-end development skills to complete the design and development of a product.
Gamification is process in which game-mechanics are inserted into a non-game system to evoke positive emotions and increase user engagement.
Gestalt Laws of Perceptual Organisation
Gestalt is a school of psychology consisting of a list of principles that describe our human ability to mentally organise and make sense of information encountered in everyday and extraordinary situations. Although developed in the early part of the 20th century, we still use these seven perceptual organisation laws extensively in digital product design.
Glass Morphism is a new trend in the look of user interfaces and the processing of information. For any given point where something should be clear, transparent, or clear-textured, Glass Morphism fakes it by filling the cell with a shade of grey and interpolating it with its surroundings. The design style takes heavy inspiration from liquid-crystal display panels and mimics the actual devices’ glassy look.
Grids systems are structures that divide a page into columns using vertical and horizontal lines. They play an essential part of the visual development and design workflow, facilitating the creation of beautiful responsive websites that are consistent across all platforms and devices.
Created by interaction designer Norman Cox, a hamburger menu is a button traditionally found on the top corner of app and website interfaces, whose function is to open up a side menu for navigation.
Designed by Google, the heart framework is a process that helps design teams test and improve the user experiences by evaluating their product UX against five user-centred metrics. These include, (H) Happiness, (E) Engagement, (A) Adoption, (R) Retention and (T) Task success.
In the context of UX design, a heat-map uses the warm-cool colour spectrum to provides insights on your website’s areas that users spend the most time on. These insights can help you identify usability issues and any changes needed to improve UX. Areas where users spend lots of time appear red, while the parts of the website that get little attention appear blue. Hotjar is an excellent data visualisation tool worth checking out to do this.
A hero image is the large and often oversized image positioned in the front and centre of a webpage. It’s the first thing visitors see, so must leave a positive impression and be engaging enough to keep them on a website.
Also referred to as a usability inspection, this process involves getting an expert to evaluate an interface’s usability against the 10 heuristics established by Jakob Nielsen. This exercise aims to identify problems or opportunities for improvement, so is useful in the early stages to provide insights on directions the design might take.
First theorised by psychologists William Edmund Hick and Ray Hyman, Hicks law states that an individuals’ decision-making time increases with the number and complexity of choices they’re given. Designers regularly use this principle in UX, but especially when designing pricing pages, which is why you usually only get between three to five options like in the example above.
- HTML – This language forms the building blocks for all websites, determining the structure and how a webpage is displayed.
- CSS (Cascading Style Sheets) – This language determines the colours, font, layout and practically all HTML document styling.
Infinite is a scrolling type found most often in blogs or newsfeeds. With this method the page will keep on loading more content as you scroll down the page. It’s considered to be amongst the most addictive features in websites and apps.
Information architecture (IA) is the method of structuring and organising content on an interface, so it’s easy to understand, engaging, provides a better user experience, and increases the likelihood of conversion.
IxD refers to the design of interactive systems such as digital services, products, environments and software applications.
First identified by German psychologist, Hedwig von Restorff, this theory states that when you group multiple similar items, the one that differs is more like to be memorable. An example of this is the purple “Try for Free” button, which stands out compared to all other design elements on the Slack homepage.
Iterative design is a process that allows multiple iterations of specific design features to be produced, tested, and revised before the final design is complete. The iterative design approach helps reduce risks and costs, leading to a better product overall.
Selected by a businesses management team, key performance indicators (KPIs) are a set of quantitative metrics used to monitor, measure, evaluate, and report business performance.
Law of the Internet User Experience
This law 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. Design for patterns for which users are accustomed.”Jakob Nielsen
So when your creating a website or app, its important that you use UX/UI elements that people are familiar with. The bookmark bottom button is a good example which you’ll find across multiple websites and apps.
Inspired by agile, Lean UX is a group-based and collaborative approach to designing digital products and services. It involves building and testing solutions with users in real-world situations, then iterating based on the feedback, to ultimately create digital products and services that deliver an excellent user experience.
Load More Scrolling
In this scrolling style, content is separated with “read more” or “see all results” button, which when clicked open up more content on the same page.
Created by Google, Material is a collaborative design system consisting of best practices, guidelines, components, and open-source tools that enable a more streamlined and efficient user interface design process.
Formed through previous experiences, a mental model refers to what users think and believe about how a product works. In UX design, the more a product’s functionality fits in with a users mental model, the more straightforward it is for them to use.
Microcopy is the name given to the small bits of text on a UI that helps users stay informed, navigate and complete an action on a website or app. Classic examples of microcopy include button labels, product descriptions and T & C’s.
Miller’s law states that an average human can only store the five, plus or minus two, bits of information in their working memory at a given time. So when designing interfaces, to be effective, you should group content and information into chunks or categories of ideally five and no more than nine. E.g. The Sifted website (Image Above) does this well, with around three to seven articles under each section.
Mockups are high-fidelity, non-interactive and static visual presentations of what a product will look like, and how it will translate in various devices. Starting with a mockup can help get you closer to a usable design in the least amount of time.
In UX design, a mood-board is a collage of text, images and UI elements used as a tool to set the direction and create a shared understanding of the visual identity of a product within a design team.
An MVP is a basic version of a new product created to collect and validate vital information about potential users with minimal time and capital investment. When creating an MVP, only include the necessary features and don’t spend time on aesthetics.
An onboarding flow consists of a number of screens shown to a users the first time they open up an app or website. The screens have many functions, but their main purpose is to inform and walk users through the important functionalities and features of an app.
An alternative to the infinite scroll, pagination involves dividing long lists of content into separate pages, which users can toggle between by clicking buttons usually located at the bottom of a webpage.
Pair design involves putting together two designers to collaborate and create solutions for a single problem. It’s becoming increasingly popular because it can help make the design process time-efficient and also yield more creative solutions/designs.
Personas are descriptive fictional profiles of target users built based on data and insights from user research. When done right, personas are a powerful tool that can help clarify a design project’s goal, build empathy, create a shared understanding and help provide focus for product teams.
Pickers are interactive design elements that allow users to select specific values or items from a long scrollable list. They’re typically found on the interfaces of alarm clocks and calendar apps.
Pixel-perfect describes a design that is of the highest quality, with a sleek, clean and sharp appearance.
A prototype is a first or preliminary model of a product, which is then refined for the actual, finished product. It helps in creating a realistic picture of how design is supposed to be. The prototypes you create differ based on the stage you’re at in the design process. In the example above, the first mockup is a wireframe, the second mockup is low-fidelity prototype while the far right one is a high-fidelity prototype.
Responsive design is when a web page’s layout automatically readjusts to ensure that design element presentation is in the optimum viewing order across all screen sizes and devices.
Serial Position Effect
Also Known as the primary-recency effect, this phenomenon states that individuals can remember items at the beginning and end of a list better than those in the middle. There are so many websites and apps that use this principle in their design. Instagram’s homepage is an excellent example, with all the important content and actions positioned at top and bottom of the screen, while the bulk of the content sits in between.
Sketching involves free-hand drawing any design ideas that come to mind, to then discuss and iterate with key stakeholders before important design-related decisions are made.
Taken from the film industry, storyboarding is a technique used to communicate the users’ experience visually. The process creates a series of sequential illustrations that detail the problems users face in the contextual environment and activities they undertake to achieve specific goals.
Usability testing is a method of evaluating products and services by observing end-users interacting with them. This research technique aims to understand user behaviours and emotions, identify potential problems and areas where product improvements are needed.
In modern product design, a user flow is a diagram that shows the path a user takes to get to a goal, while also highlighting actions they undertake at each stage. Creating user flows can help designers, managers, and other stakeholders visualise complex processes and user interactions with respect to their website or mobile application.
User interviews are fast and straightforward research exercises in which you engage real customers to get feedback on their perception of the design of your product, not the usability,
User Journey Map
A user journey map shows a visual representation of user goals when using a specific product or system. It illustrates the individual steps and interactions as a user performs a process from beginning to end, helping you identify your website or app components that are simple or confusing and exposing issues that might impede the users’ success and satisfaction.
User scenarios help designers understand how people currently use a site or app to achieve a specific goal, problems they encounter and what they do to move from one task to another. With this knowledge, design teams can then ideate and build optimal solutions enhance a products user experience.
A UX audit aims to pinpoint potential usability issues within a digital product, identify areas of improvement and suggest UX changes that could overcome these problems to enhance the overall user experience.
An integral part of the user-centred design process, user experience (UX) research describes and analyses how people interact with a system or service. It’s a multi-dimensional and holistic process of observations and interactions to help stakeholders understand better users’ needs, preferences, expectations, and experiences.
A UX roadmap communicates the future activities and tasks a UX team needs to conduct to solve a defined user problem and achieve strategic goals.
White space refers to the blank or negative space between the various design elements on an interface. It’s primarily used in digital products to improve legibility, reduce visual clutter, improve navigation, increase interaction rate and make important information/content you’d like to convey stand-out.
Wireframes are low-fidelity templates that show the layout and organisation of content on a website or app. They essentially act as a blueprint which designers follow to create more detailed designs.
Named after the Russian psychologist who first identified it, the Zeigarnik Effect states incomplete tasks are more memorable than complete tasks. The main reason for this is that unfinished induce a task-specific tension within individuals, which they can only overcome upon completion. The Zeigarnik Effect is prevalent in digital products in the form of gamification and UI elements such as progress bars/trackers.