Jargon comes with all technical areas of expertise. However, when you become immersed in your craft, you often lose sight of what is common knowledge, and what is industry terminology. Whether you're an aspiring UX designer, or simply wish to better understand the language of user experience design, this glossary will offer simple explanations to some key terms.
User Experience (UX).
Starting with the term itself, the user experience (UX) refers to a user’s emotions, attitude, and perceptions about a product, system, or service.
In other words, it is how you feel while interacting with an app or website.
Great UX makes a product easily usable, highly useful, credible, and accessible. Combining all these aspects leads to a desirable product, which is undoubtably good for business.
User Interface (UI).
Secondly, the UI is the set of visual components that a user needs to interact with a product, made up of UI elements.
The UX A-Z.
A/B Testing.
By comparing version A, and version B, this practise of split testing allows you to test a single variable to discover which value performs better.
For example, it could be testing whether green or red buttons gain more clicks, or it could be changing the font alignment to see if user retention is higher.
Accessibility.
To make designs accessible, your aim is to ensure your work is universal.
Traditionally, this covers cognitive impairments such as colour-blindness, deafness, or even considering various levels of education.
For example, red text on a black background written to university standard will alienate those with smaller vocabularies and also those with daltonism.
Adaptive.
When designing, we have to be aware of the varying range of devices that will view our products. An adaptive interface is a collection of layouts that are curated for specific display types and devices.
This means, when a user visits your website or app on a tablet, they'll see a display that is optimised (adapted) to fit their device.
Affordance.
User interfaces utilise 'affordances' to help communicate to users what can (and cannot) be done.
Such elements could be buttons on interfaces, to prompt users to press them to perform a certain command. Clarity with affordances is always useful, such as labelling buttons to indicate exactly what they'll do.
Agile.
Hugely popular in recent years, 'Agile' is an approach of building and developing software incrementally. This is done by breaking down the product into small chunks of user functionally, and then assigning them to two-week cycle iterations.
The benefit of Agile, is it allows an overwhelming large task to make progress at speed—with a hyper focus on quality for each individual section of the build.
Analytics
To better understand UX, we use various analytics to measure human behaviour. As users interact with a product, we can collect data to help us interpret and understand behaviour patterns—and then use such analytics to draw meaningful conclusions.
API.
This refers to 'Application Programming Interfaces'. These pieces of software allow different applications to interact and communicate with one another. By developing an API, you let users access and read information on their server easier.
An API enables a web enabled application to fetch data from a server. The app communicates with the server via the API to let the server know what data it needs and in what form. The server then sends the requested data back to app via the API.
-Crowdbotics
Avatar.
An avatar is essentially a profile image or character to represent a user or identity.
Back-end and Front-End Development.
Back-End Development refers to elements such as databases and servers. These are the cogs that support the front-end development—which in contrast, is the interface that users interact with.
For example if a website wanted to add an online store, the back-end development would involve creating a database of all their stock, pricing, and important details about each product. The backend system would have to link up to how the front-end works, which would be the glossy webpages that users can browse through and purchase items at their leisure.
Backlog.
To organise tasks, a backlog is often created. This particular list of tasks is ideally organised by priority to ensure all team members in the project are aware of upcoming tasks and general expectations/timelines.
Beacon.
These are little Bluetooth radio transmitters that are used to share information by communicating with the user's smartphone.
Bloo.
This is the tool we use to manage our projects. It is a team management software to organise tasks and improve communication. Our UX designers can showcase work to clients directly through Bloo, while collaborating easily with the team whenever required.
Bots.
Stemming from 'robots', bots are artificial intelligence solutions. A common example of these are 'chatbots' that allow users to have automated conversations with a brand, website, or app. They're ideal for addressing FAQs and replacing the need for large customer service teams working at all hours.
At Mäd, we utilise Landbot.io for our chatbot needs.
Bots are also capable of much more advanced functions, and many digital tasks can be replicated at high speed and accuracy by these artificial wonders. You can even utilise bots for creative tasks like iconography and SEO copywriting.
Breadcrumb.
Much like fairytale literature, breadcrumbs offer a navigation path to help users understand their location on a website or app. Following the 'breadcrumbs' will show a sequence of steps to take to reach a specific goal.
Bug.
In UX, a Bug is a problem. It refers to an issue or mistake that causes the design to behave in an unexpected and unintended way—or to glitch, and/or crash entirely.
Cache.
This is temporary data storage. Common examples of Cache memory include usernames, previously visited website text and images, or even recent search terms—this allows for an easier repetition of common tasks or interests.
Clickstream.
A clickstream is the path taken by clicking through a site, app, or product, to complete a task or accomplish a goal. For example, you may wish to path out the clickstream a user would take from landing on your website, to downloading your free E-Book resource.
Conversion Rate.
The percentage of users that complete a desired action make up the conversation rate. For example, if our goal is to encourage newsletter signups from viewers of a certain insight, then the percentage would signify the amount of users that signed up compared to the overall amount of viewers.
CRM.
This stands for 'Customer Relationship Management'. Typically this term will refer to software solutions that will aid businesses with managing processes such as customer interactions, data, and sales.
CSS.
Cascading Style Sheets (CSS) is a programming language that is used to define the style of a website. It sets rules and contains information on elements such as colours, fonts, layouts, graphics, and spacing—guiding how each element should be applied to the website.
Customer Experience (CX).
The customer experience is the entire journey that a customer has with your product. This is not limited to the usage of your product.
For example, if you're selling a piece of design software, the customer journey will typically start with either the user deciding they want a new software solution, or some form of brand awareness alerting the user to your product (such as advertising, PR, or word of mouth). The customer may also research competitor brands, and trial various other software before making a decision and eventually purchasing your software.
The entire customer experience journey references all variables and interactions related to your brand, including how the user feels during each interaction. Mapping this out can highlight key improvement areas.
Dark Patterns.
Dark patterns are deceptive framing techniques used in websites and apps. They make people make the developer's choice, not theirs.
For an example, the user interface may purposely steer people towards signing up to an additional feature by auto-selecting it in advance, or by making the opt-out choice difficult to find and cumbersome to confirm. We've written about various Dark UX Patterns in depth in the following guide:
Frazer MacRobert
Data Science.
Simply, Data Science is the practice of analysing data to form valuable insights and improve decision making. Analytics are easy to come by, but the art is in meticulously examining your data and making sense of it to guide meaningful change and progress.
Design Debt.
In an ideal world a product would be launched will all features working perfectly. However, during development there are often sacrifices made to meet timelines and get the product to market at a desirable speed. When design concepts are skipped over in favour of meeting timelines, a 'design debt' accrues.
Creating a minimum viable product is often done with future growth in mind, so even if you have to skip certain features or elements at first, work can still be done to map out their place in future releases.
Design Thinking.
This is a creative problem solving practice, it seeks to view a problem from the eyes of designers—focusing on the end users, and aiming to solve real problems with impactful and thoughtful work.
- Empathize: To understand the challenge.
- Define: To clearly state the problem.
- Ideate: To create various solutions through brainstorming.
- Prototype: Build a working version of your solution.
- Test: Test your solution internally and externally to analyse its effectiveness.
Diary Study.
This is a qualitative research method that involves participants journaling over a defined length of time. It allows your team to collect valuable data, noting common behaviours, needs, and problems.
Empathy Map.
By mapping out user behaviours, attitudes and feelings, designers can collaborate better to make meaningful decisions. An empathy map is typically split into four sections:
- What the user is saying.
- What the user is thinking.
- What the user is doing.
- What the user is feeling.
A separate empathy map is made for each user persona, and any data collected through user research is assigned to the appropriate quadrant.
End-User.
The 'end-user' is the person the product is designed for, i.e. at the end of the design process.
Flat Design.
This style of UI design is characterised by simple, 2D elements. It creates a simplistic and minimal feel to designs, which reduces the risk of overloading the user with information.
Flowchart.
A flowchart is a step by step process to illustrate how to reach a certain goal, like completing a task on a product.
Gamification.
The process of 'gamification' uses gaming principles and elements within products to drive user engagement. This can be by turning a simple task into something more fun and competitive by awarding points, and comparing scores with other users.
Frazer MacRobert
GitHub.
GitHub is the largest collaborative development platform (hub) for developers.
Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.
Gutters.
Often, UX designers will use grid systems. These are organisational tools that help us arrange content on the screen. The horizontal lines are referred to as 'Gutters', while the vertical lines are known as columns.
Heat Map.
Heat maps display the 'hot' areas of your product that receives the most user attention. The red areas display the highest interaction, while the 'cooler' parts of the colour spectrum show the least used sections of your design.
As an example, newsletter software might highlight the most engaging CTA sections by heat mapping the most to least clicked buttons throughout your publication.
HTML.
This is the standard programming language used to create websites. It stands for 'HyperText Markup Language'.
HCI.
This stands for Human-Computer Interaction. It is a field of study focused on the design and use of computer technology, concerned with how users interact with various interfaces and computing solutions.
Hybrid App.
A 'Hybrid' app is one that simply combines technologies. By using a mixture of HTML, CSS, and JavaScript it is able to combine native and web technologies in a single solution.
Information Architecture.
Much like building a physical structure, digital structures have underlined architectural considerations. The information architecture arranges the content of a product in a sensible manner.
For example, websites will plot our menu bars to aid user navigation throughout their site, perhaps making certain pages only accessible via CTAs at the end of related other content.
IxD.
Also known as Interaction Design. It is the practice of designing interactive digital products and exploring the way users will interact with them.
Iteration.
An iteration is simply a section of a product. By breaking the development of a project into iterations, teams can hyper-focus on quality and structure timelines in a programmatic manner.
Javascript.
Javascript defines how HTML and CSS should behave. It can thought of as the programming language that helps us make page elements interactive.
KPI.
This stands for Key Performance Indicators.
These are measurable values that help us track how well a product is doing. Common UX KPIs include user error rate, task success rate, and time taken on task.
Landing Page.
When a user visits a website, the first page they arrive (or 'land on') is considered a landing page. Whilst your website home page may be the most common organic landing page, there are multiple other ways users can arrive on your website—and extensive opportunities to utilise landing pages for success.
For example, when running advertising campaigns you will have likely targeted specific users with a specific need—by linking the campaign to a bespoke landing page, you can speak directly to their needs without having to change anything else on your website.
For Bloo, the project management tool we use at Mäd, there could be multiple landing pages with focused purpose. Here's an example:
- A page directed at recruiters, where the copy is entirely directed towards how Bloo can help the recruitment process and management of clients. The navigation bar could be removed, and the landing page would appear to be a stand alone website purely highlighting the relevant information for this target market.
A separate landing page could then be created for SMEs, or even further, a duplicate of that page could be rewritten to speak directly to the Marketing Manager(s) or the CFO.
Emanuele Faja
Lean UX.
Much like the 'Agile' approach, Lean UX is a collabroative approach that is user-centric. It prioritizes "Learning Loops" over design documentation, this covers: Building, Learning, and Measuring, through iterations.
Material Design.
Developed by Google and used on Android devices, Material Design is a specific design language. (Often reserved to purely as 'Material').
Mental Model.
A simple reference model that maps out an individuals thought processes about a particular real-life scenario, such as their approach and behaviours when interacting with a particular interface.
Frazer MacRobert
Microcopy.
Referring to small bits of texts throughout apps and websites, such as labels on buttons or error messages. These 'micro' pieces of copy can have big impact on your product's UX, for example including concise and instructive placeholder text in input fields to guide users more effectively.
Mobile Web.
Simply, this is accessing the internet on a mobile device. Mobile Web behaviours and needs can vary compared to traditional computer access.
Mockup.
A mockup is a static representation of a product. Unlike prototypes, mockups can't be interacted with and are purely illustrative.
MVP.
A minimum viable product (MVP) is basically the bare minimum requirements and functions that your product would need to be able to go live and take on real users.
Frazer MacRobert
Open Source.
Making something open source means it is freely available for public use and modification.
Pairing Development/Programming.
Two developers can collaborate to take turns writing and revising code, this is known as Pairing Development or Pairing Programming.
Persona.
A user persona is a representation of an individual in the target audience.
These can be fictitious characters made from your market research findings, or you can pick real people to use as a persona case study.
Pixel.
A pixel is a tiny square used to construct digital images, it is the smallest controllable unit available on screens.
Prototype.
This is a simulation sample of a final product.
Prototypes are made for testing and showcasing purposes. Prior to the launch of a product, a prototype allows the design team to test their work in depth and highlight any remaining issues. By testing prototypes, teams can save valuable time and money pursuing options that wouldn't be desirable for the final market version.
Prototypes can be as primitive as sketches on paper, or high-fidelity working digital examples.
Refactoring.
The process of tidying code without affecting functionality is known as refactoring, this improves code quality and is typically done in incremental steps.
Responsive.
Unlike adaptive, websites that are responsive will change to fit the device that they are being displayed on. The difference being that it is a single layout that responds by changing to suit the device type—rather than a collection of layouts of the same website.
SaaS.
'Software As A Service' is a software distribution model.
Software is licensed on a subscription basis, and hosted online. (For example, Bloo).
Scrum.
This is a framework to allow people to address complex adaptive problems, while creatively delivering products of the highest possible value.
Scrum is a lightweight framework that helps people, teams and organizations generate value through adaptive solutions for complex problems.
Often, teams may choose to use 'Daily Scrums' to organise their work and keep the team aligned.
SDK.
Otherwise referred to as a 'Software Development Kit'. This is a software package containing tools required for developing products on a specific platform (or operating system).
Using SDKs allows developers to work at speed by adapting prewritten code within their designs.
SEO.
Search Engine Optimization refers to making content more discoverable. The most optimised content will rank highest on Search Engines, showing up first in search results.
This is achieved by having a deeper understanding of user search keywords and terms—and working them into your website content and copy.
Frazer MacRobert
Site map.
A site map is a visual representation of a website’s pages and hierarchy.
Storyboarding.
The aim with storyboarding is to visually represents a scenario or a narrative in a chronological manner. It is done to visualize the interactions between a user and a product or a service.
Think of storyboards as informative comics, to guide your team through the product build and any potential opportunities or hurdles.
SVG.
Scalable Vector Graphics are 2d graphics that can be manipulated and animated with code. They're ideal for their low file sizes but high use potential.
Task Analysis.
This is the process of listing steps/tasks that a user takes to complete a particular goal—from the user's perspective. By performing a task analysis during the preliminary stages of development, we can discover problems within the UX that need addressing.
Technical Debt.
Much like design debt, this refers to ideal development that was put on hold. Technical debt concerns coding, often this will occur when the easier solutions are chosen due to speed benefits...but unfortunately easy coding often leads to messy work that needs cleaned up and made more robust at a later stage.
UI Element.
An element on a user interface is an item able to be triggered in some way. To give a few examples, this could be input fields, push buttons, clickable links, radio buttons, or toggles.
UI Pattern.
Solutions can be created and reused within UX/UI design. A UI pattern, is simply a reusable solution to a common usability problem that is expressed by a collection of UI elements.
For example, if we were to construct a login screen we may use a UI pattern containing two input fields and a button. This would allow users to enter their username and password, then click 'continue' to submit their information.
Usability Testing.
This is a research method to allow us to evaluate the ease of a products usability. It is done by testing the product with a group of representative users, and documenting the outcome.
UCD.
We're a HCD (human-centric design) agency, and UCD simply refers to this in another manner...making the humans more 'digital' as users.
User-Centric Design is an iterative design framework that keeps users (and their needs) at the core of every decision.
User Flow.
This is a set of steps that a user needs to take to complete a particular goal on a product. It is usually accompanied by descriptions of what happens at each step, and the intended outcome.
User Journey Maps
To visualise the process a user goes through in order to accomplish a goal, we can creative narrative documents called 'User Journey Maps'. This process is commonly referred to as Journey Mapping.
This documents the stages that a user will go through, including the tasks executed at each stage and how the user emotions may alter throughout the process. It helps highlight product opportunities.
User Scenario.
During initial discovery stages of product development, 'user scenarios' can be used to outline the needs (or context) that will bring a user to the product. These typically include information on who the user is, why they'd be interested in the product, and what their goals are.
User Stories.
Following a set formula, User Stories share the actions that different types of users can take in a product. These can be crafted as follows:
“As a [user type], I want [insert action or feature], to be able to [insert intended or desired outcome].”
Waterfall.
Not all tasks can begin at the same time. Some team members may rely on others to finish their work before the baton is passed and they can develop it further. This process is known as waterfall development, whereby each phase must be completed before the next can begin.
White space.
Also known as Negative Space, this refers to the blank or unoccupied spaces on a page. Empty space can become as useful as occupied space, with designers cleverly finding ways to incorporate the unused sections of their canvas within their designs.
Wireframe.
Think of wireframes as the blueprint of a screen. They are a low-fidelity representation of a website’s layout and content.
Request a Proposal.
If you would like to #workwithmad then send us an email at hi@mad.co and let's Make It Happen.™
