Developing a website or an application is impossible without communicating with your internal team and contractors. As a product owner, you can’t just hire a UI/UX designer and wait till the product is ready. To feel comfortable and to be able to offer, discuss, accept or decline different design ideas at each step of the product design process you have to understand basic UI/UX terminology.
Eleken is a SaaS design agency and we believe that clear and transparent communication between the customer and the designer determines a great deal of the final product’s success. Just take a look at reviews from our clients. For each of them, communication played an essential role.
To help you talk about designing stuff with your employees, colleagues, or other experts freely, we have compiled a list of the most important UI/UX terms. Now, whenever you hear a buzzword in the office, read a blog post on a design-related topic, or see some gibberish in Slack from your designer, refer to this UI and UX design vocabulary to make sure you got it correctly.
UI/UX glossary
Here you will find answers to such basic questions as “what is UI/UX design?” and more specific ones like decryption of acronyms SWOT or MVP.
For your convenience, we grouped all terms into several clusters. Each cluster contains topic-related terms sorted alphabetically:
- General terms
- UI/UX acronyms
- UX design process and methods
- Design elements
- The language of developers
Let’s start with the most essential UI/UX design terminology.
General terms
This cluster contains basic vocabulary that you will often encounter when talking about design.
Accessibility
A set of practices that makes the interface easy to interact with to a wide range of people, including people with disabilities. It uses a balanced color scheme, alternative keyboard controls, special page layouts, customized versions, and other tools to help people with disabilities use the product.
Design system
A set of brand values, tools, and components that makes it easy to create, test, visually, and technically update products, while ensuring their consistency.
Read about the design systems of well-known companies to see what it is in practice.
Design thinking
A method of developing products and services aimed at solving the existing problems of potential customers. Design thinking is a creative process of generating and implementing ideas, the main task of which is to think outside the box to create a valuable design solution.
Flat design
A minimalist style of user interface design. It is characterized by a focus on the use of simple 2D elements with vibrant colors.
A great example of flat design is the Dropbox Basic landing page. As you can see, the UI elements are so minimalistic that they highlight the content of the page.
Gamification
The technology of applying design elements and principles that are typically used in games to non-game processes for greater user involvement.
Human-centered design
An approach that focuses on solving design issues by placing users at the center of the design process and identifying their needs, pain points, goals, and behavior to create a product that effectively solves users’ problems.
For deeper understanding take a look at how popular companies apply human-centered design in their products.
Information architecture
The process of organizing information, which includes structure, design, layout, and navigation. It allows users to find and manage the information they need. For example, information architecture determines the placement of elements on a page, their navigation, and the relationship between the pages.
Landing page
A one-page site created for an advertising campaign with the aim of selling a product or service. There are several objects on the landing page that call the user to action - for example, click a button or leave a request.
Onboarding
A process of creating a friendly environment for new users by making it easier for them to start interacting with the product. The design of the onboarding process for the site/app is usually limited to the first-use scenario.
Read more in our guide on SaaS onboarding.
Responsive design
Responsive design adapts the size of the website to any device screen, orientation, and platform. This design allows you to resize the site's page to fit any screen with the help of flexible layout, grid, and images.
UI/UX design
The design of any user interface in which usability is as important as the look of the app/website.
If your mind is blowing when you think about UI, UX, UI/UX and the difference between all these terms read our article UI vs UX.
Usability
An indicator of the simplicity and ease of use of the site/app.
User Experience (UX)
A set of impressions and emotions the user gets from interacting with the interface of a software or a website.
User Interface (UI)
UI determines what the interface looks like and what physical characteristics it acquires. It determines what color your product will be, whether it will be convenient for a person to hit the buttons with their finger, whether the text will be readable, etc.
UX design
UX design is responsible for product functionality and user experience. The simpler and more intuitive the interface, the easier it is to reach the desired result and complete the targeted action.
UI/UX acronyms
API (Application Programming Interface)
An interface that allows different software components to interact with each other. When you use an app like Facebook, send a direct message, or check the weather on your smartphone, you are using the API.
CTA (Call to Action)
A graphic element that motivates and encourages site visitors to take a specific action: buy, download, subscribe to the newsletter, etc. CTA tells what exactly the visitor should do and what the developer of this page expects from them. Usually, a CTA looks like a button, which can have various visual effects that draw attention to it.
KPI (Key performance indicators)
A measurable value that demonstrates how effectively a company is achieving key business objectives.
MVP (Minimum viable product)
Refers to the basic set of functions with which we can launch a product to get started. Products are often launched as MVPs to quickly release and collect valuable user feedback.
PM (Project Manager)
A member of the project team that tracks how the work is being delivered, communicates with the client, tracks deadlines, and monitors the budget.
PoC (Proof of Concept)
The process of demonstration of a certain idea or concept to show/verify its feasibility and value.
PR (Pull Request)
Allows developers to share with others what code changes have been made on GitHub.
QA (Quality Assurance)
The team member that has the responsibilities of testing a product and reporting to developers/designers what needs to be changed, fixed, or improved.
SS
A screenshot
SWOT (Strengths, Weaknesses, Opportunities, and Threats)
SWOT analysis is a method that aims to develop a business strategy (for an enterprise or product), that takes into account four main factors of successful growth: strengths, weaknesses, opportunities, and threats.
UX design process and methods
Here you will find the most widely-used methods and deliverables produced by designers during the product design process.
A/B test
A method that involves showing two versions of a product to users in order to compare them and see which one performs better. It allows you to confirm hypotheses for making potential improvements in comparison with the original version and see what works better for your audience based on statistical performance analysis. A/B testing can also be called split testing.
Card Sorting
A technique that helps designers to evaluate the information architecture of the product. The respondent must combine the groups of data placed on the cards according to certain criteria. There is a closed and open type of card. With a closed sorting, the respondent groups the cards according to the already specified criteria, while in the open sorting respondents themselves formulate the criteria for grouping data.
Competitive audit
A research method that involves analyzing and comparing competitors’ products (their features, target audience, etc.) to understand the industry trends, and opportunities to improve your product.
Customer journey map (CJM)
A visualized experience of the client using the product that takes into account thoughts, emotions, and goals. The map is drawn from the customer’s point of view and looks like a graph with points of the client’s interaction with the product. CJM reflects the customer journey to the product, identifies problem areas, and advises on how to increase conversion and customer loyalty.
Eyetracking
A technology that allows you to observe and record eye movement. It is widely used in many areas, including UX research of websites, mobile applications, and branding. Eyetracking is primarily used to understand where users are looking and how they interact with a product.
Focus Group/User Interview
Groups of potential users of your product that are formed to get feedback from them. Participants express their opinion on prototypes, tasks, strategies chosen to create a product.
F-shaped pattern
The most common crawl path for block-based content. The F-pattern gained widespread acceptance after the Nielsen-Norman Group conducted a study of eye movements when reading web content. During the study, more than 200 users studied thousands of web pages. It was possible to identify a pattern in user eye movements when studying different sites: the general trajectory of crawling content resembles the letter "F".
Mockup
Static representations of a product. You cannot click on it or interact with it. In essence, they represent a picture of what the final product will look like.
Moodboard
A collection of visual materials that help define a specific style of a product through images, text, colors, and other branding elements. It gives an idea of the style of a particular project, design, or brand.
Prototype
A detailed representation of the final product that simulates the interaction between the user and the interface. The interactions must be accurately modeled and have significant similarities to the final experience. It allows users to assess the basic functions of the product and product owners to test the viability of their business idea.
Sketches
A design method that allows designers to communicate, evaluate and refine their ideas quickly and with minimal resources (usually only pen and pencil).
Storyboard
A visual representation of the user experience with a product or problem space. This technique was adopted by the designers, and it is very similar to the creation of comics.
Target audience segmentation
The division of the audience into groups, where they are united on the basis of similar needs. With the help of segmentation, you can study patterns of behavior, problems of certain groups of users, compare with other groups, and also design further development of the product, taking into account the needs of these groups.
Usability testing
Usability testing is performed with end-users. It shows how the product matches the expectations of the target audience, identifies problem areas in the interface, and makes it possible to look at the product through the eyes of users. In the process of usability testing, the user performs typical tasks with the product in the lead testing mode.
Use case
A description of how users will perform tasks on the website (from the user’s point of view). It shows how the system will respond to the user’s requests. Use case looks like a sequence of simple steps that starts with a user’s goal and finishes when that goal is fulfilled.
User flow
The order of actions that a user performs on a site or application. User Flow helps you understand whether all processes in the product have a logical order. The main task is to show the process of user interaction with the product.
User stories
A way of describing the requirements for the system that is under development formulated as one or more sentences in the user's everyday or business language. The text of the story should explain what the user is doing, what they feel, and what kind of result they want to achieve.
UX research
The starting point for any project. UX research helps to understand users: their behavior, goals, needs, and motivation. It also shows how people navigate the site, where they have problems, and how they feel from interacting with the product.
Wireframe
A low fidelity design image clearly showing the main content group, information structure, basic visualization of the interaction between the interface and the user.
Z-shaped pattern
The trajectory of crawling content on the page from left to right and top to bottom, thus, the trajectory of the gaze is in the form of the letter "Z". This pattern works because this is how most people read books: top to bottom and left to right.
Design elements
Breadcrumbs
Navigation aids that tell users where they are on a website. They allow users to repeat their steps on multi-level websites.
Chatbot
A program that simulates a real conversation with a user. Chatbots allow you to communicate using text or audio messages on websites, messengers, mobile applications, or by phone.
Grid
A system of vertical and horizontal lines that help designers arrange content on the screen.
Layout
The order of visual elements on the page aims to correctly communicate the main message and logically present the information.
Navigation
A form (link system) that helps the user find the needed information on the site or mobile application.
White space (negative space)
A part of the page with no text or images.
Widget
A display element that users interact with. Examples of widgets: sliders, calendar tools, buttons, contact forms
The language of developers
Here you will find some terms that are essential for the product development process.
Agile
A collective term for several different types of methodologies for software development. The focus is on keeping your code simple, testing frequently, and delivering functional parts of your application as soon as they're ready.
Backlog
Scope of work to be completed. The Agile Product Backlog is a list of priority features.
Back-end (development)
The hardware and software part of the service. It is a set of tools by which the logic of work of a website/app is implemented. This is what is hidden from our eyes, that is, it happens outside the computer and browser.
Front-end (development)
A front-end developer creates a visual interface for an application or website. It creates functions visible to users.
Framework
A platform for developing software applications. It provides a basis on which software developers can create platform-specific programs. For example, a framework can include predefined classes and functions that can be used to process input, control hardware devices, and interact with system software. It simplifies the development process because programmers don't have to reinvent the wheel every time they develop a new application.
Library
A software library generally consists of pre-written code, classes, procedures, scripts, configuration data, and more. Typically, a developer might manually add a software library to a program to achieve more functionality or to automate a process without writing code for it.
Sprint
In agile software development, a sprint is a specified period of time within which an assignment must be completed. A sprint can last anywhere from 1-3 weeks depending on the business. In design, a sprint is a unique five-day process of testing ideas and solving big problems by prototyping and testing ideas with clients.
UI Pattern
Reusable solutions to common usability problems presented as a collection of user interface elements.
To sum up
Working with UI/UX designers and getting to know their terminology is almost like learning a new language. Still, in the process of delving into the topic of UI and UX design, your vocabulary will expand significantly. Until you are a design expert, refer to this glossary to quickly find the answer to the needed question.
And to be even more profound in design-related topics read our blog post about UI/UX trends.
Top Stories
Need User Feedback for Better UX? Customer Support Can Help
As the name suggests, user experience design starts from understanding user expectations.
For UX specialists, the most common way to understand what users feel is to run UX research, like a user interview or a usability test. Conducting user research means building an algorithm to figure out an answer to the questions the designer has. Any research is a big job that requires money, time, and effort...
… that could have been spent in a more productive way, like designing actual products.
At the same time when UX designers leave no stone unturned looking for problems that users want them to solve, somewhere nearby a customer support agent is sitting on a pile of shiny free-of-charge insights.
Support agents are people who are working at the frontline. They are the first to listen to users who find a bug or complain about the last update. They already know all the problems people want technical UX to solve. So why don't we just draw insights from customer support?
Why even run UX research if support knows all the answers?
In some cases, asking support officers for help is not an option. Like, when you’re designing a product from scratch, it rarely has good end-user support and customer service — the company is just building a technical support team. And even if you are doing research for working products, getting to the truth through support tickets can be challenging.
The role of technical support services is initially one-sided — to solve the customer problem. Help Center may burst with information, but it is usable only when structured, discoverable, and tailored to answer the designer’s questions. In practice, the customer support database usually looks like a barrage of useless tickets design teams prefer to ignore.
Think of a service desk that handles an average of 200 tickets a day. It makes 4,400 tickets per month and 52,800 tickets per year. Conducting a specific UX research would be faster and cheaper than digging through thousands of conversations seeking an answer to one specific question.
The support communication flow can be made two-sided, tailored to solve both customers’ and products problems, but it will require some modifications.
Let’s see how top SaaS companies learned to use their user support to improve customer experience.
How to talk to support specialists and shadow them
The simplest thing you can do is to talk to support officers. When our designers from Eleken agency start working on product redesigns, they always try to interview support people. Thus, they obtain first-hand information on issues that users face.
Setting up interviews with frontline staff works for internal products as well. For example, Shopify designers asked their support colleagues to review the existing buyer personas and explain how they would interact with each persona.
Another way to deepen the general understanding of the product and the users is to spend a day on the frontline, alongside the customer service support team. GitLab, for instance, has a shadowing program available to all team members outside of support to learn, collaborate, and work together with the GitLab support team.
How to detect a problem in a haystack of user feedback
Even the best professionals sometimes deliver designs that are less-than-perfect. Results that make people less-then-happy. When something goes wrong with the product, users vent their frustration to support, and the most natural thing for UX teams is to seek feedback from the support team.
Sure, you can run a survey instead, that may be an easier and more controlled way to find the truth, but would it be accurate enough?
Sabrina Gordon, former Customer Support Manager at Intercom, explains the difference between survey feedback and support feedback in one precise metaphor. Imagine you own a restaurant. A few days after guests visited your place you send them an email wondering how they liked the soup. Compare such feedback to the situation when somebody was eating in your restaurant and then tapped a waiter on the shoulder saying the soup was a bit salty.
So, Intercom prefers to gather feedback from support. Besides, Intercom is a multi-million dollar SaaS company with a customer support team of 55 people running astonishing 22,000 conversations every month. How do they make such an overwhelming information flow actionable for their product team?
One thing that helps Intercom to manage client interface experience is tagging each ticket. A team tag means the product team that owns the feature, and a category tag means a type of request that the user had. Thus, Intercom turns a barrage of qualitative data into data that can be displaуed on a dashboard to track the dynamic and sudden spikes in user activity.
Here's an example to show how it works. Once the Intercom team noticed that the volume in conversations tagged “team acquisition” is consistently high. That meant the customers consistently stuck on something within the onboarding UI and were forced to write to support. Intercom examined those complaints in greater detail to figure out people who are trying to get started couldn’t make a messenger appear.
For the Intercom messenger to show up, users need to take two steps:
- install a little piece of JavaScript into their sites;
- and sign up for one of Intercom’s products.
If you miss either of the two, you’d see nothing. That’s where a lot of users got confused.
The solution was to make a popup telling users when one step was a success and another step is yet to be completed.
How to turn qualitative comments into quantitative data
Shopify offers another way of turning unmanageable feedback piles into actionable dashboards — they made users tag their feedback for them.
It all started from a technical support website content with a feedback form that looked like this:
It consisted of a five-point scale measuring user sentiment and an open-ended field for comments. While the five-point scale worked well enough, free-form comments were hard to translate into actionable insight. Parsing all written comments was fully manual, labor-intensive and time-consuming.
The solution was to turn an open-ended question into a multiple-choice question. The new form proved to map exactly the same trends as those recorded by manual analysis of past results but in automatic mode.
How to be proactive with users’ requests
Users contact technical customer support not only to complain. People who love the product often write to help it become better.
Kate, Eleken’s marketing guru, has been using GatherContent, an app for content management. Once she realized that the app lacked one little feature, like the ability to assign people to workflow steps. Luckily the app had a feature request platform specifically for Kate to share her idea.
Kate’s suggestion has received many upvotes from other users, and a product team started working on the feature soon. Kate could monitor progress on the public roadmap and felt excited when her brainchild went live. Since then, she has shared many other ideas with GatherContent.
Letting users suggest and vote on feature requests is the most sophisticated way to turn user feedback into actionable insights:
- It gives you an instant look at the top feature requests in priority order;
- It shows which customers care about which feature requests;
- It gives you a ton of ideas ready to implement;
- You don’t even have to lift a finger to get those ideas.
Most successful SaaS apps have already adopted such an approach in one form or another.
GatherContent has its feature voting board powered by customer feedback app Canny. Buffer manages feature requests through an old-school mix of Trello and Typeform.
Salesforce took feature requests to a whole new level with its Trailblazer community of millions of users who team up to learn, connect and share their ideas with the company.
Summary
Product designers are ferociously focused on two things: the product and the customers. Customer support is what keeps a strong bond between these two parts of the business. So why don’t we make customer support help UX?
But remember that support feedback is no panacea, it doesn’t substitute for UX strategy, UX research and UX audit. Ihor, UI/UX designer at Eleken warns against mindlessly following user suggestions:
“Data from customer support often indicates low-level issues, like buttons that are hard to find or popup that is hard to read. There’s an obvious solution in making buttons brighter and fonts larger, but let’s not forget about the big picture. Probably we can eliminate the need for a popup at all.”
That’s all for now. If you want to start a project with designers who can see the big picture, let’s make a short introductory call. If your project is something we can help you with, we'll provide you with a designer and a one-week trial free of charge.
Principles of Design Examples: Boost Your Design Skills
There are no universal solutions knowing which will automatically make your design beautiful and effective. Still, there are basic principles that can help you improve each of your creations.
For example, understanding the laws of color, the principle of unity, and the correct use of white space helped us to create a consistent and harmonious website for Handprinter, a unique project that prompts people to make positive impacts on the environment. (check out the case study).
It's difficult to define exactly how many web design principles there are and which of them are more important than others. The good news is that you don't need any special art education to understand them. Moreover, I guess you already know some of them and use them intuitively.
In this article, we are going to tell you about nine key principles of design. Each of them will be accompanied by principles of design examples to give you a clearer understanding. Let's start!
Hierarchy
The principle of hierarchy is achieved by putting elements on the page in the order of importance: elements that matter most are put first, less significant elements go after. As well, more important components are usually bigger, bolder, and sometimes brighter, so the viewer understands that it is something they should pay attention to.
Evernote
Evernote shows us an example of a hierarchy of a title, subtitle, and body copy. When we visit the website, we immediately understand that the title is more important in relation to the subtitle and the rest of the content on the page. In its turn, the subtitle is smaller but also stands out from the rest of the text. This way the hierarchy is created.
Apple
Apple's website shows a nice example of the principle of hierarchy in its "Compare iPhone" section. All the data about different iPhone models is placed in the order of importance. General information at the beginning is bigger, more contrasting, and has icons that support the text, while the copy of more detailed technical information is smaller and not so contrasting.
Contrast
Contrast allows you to attract the viewer's attention to the specific design element. To create contrast, you should put two completely different elements together. They can differ by color (classical black and white tones; bright and dull, etc.), size (small and large objects), font style (light and bold), etc. Contrast helps to properly organize the information on the webpage.
DocuSign
The first example of contrast in design is DocuSign. The white, bold headline on the DocuSign website contrast with the dark background, so that it becomes clearly visible and easy to read. As well the bright yellow CTA is impossible to miss because of the use of contrast.
Slack
The whole design of this popular cloud-based messenger is bright and contrasting, we can even note it "pops" with color. According to Andrew Wilkinson, one of Slack's designers, "to get attention in a crowded market, we had to find a way to get people’s attention." And they did it by using a lot of contrasting elements in their application and website as well.
ClientJoy
The ClientJoy (former Gridle) was designed by our team (check the case study).
Bright blue CTA on the white background is an example of how contrast helps to attract the reader's eyes to an important design element. As soon as the reader opens the website, they see the "Try Clientjoy for Free" button which stands out well.
Balance
Balance is the juxtaposition of elements that creates steadiness and harmony. The state of balance is intuitively comfortable for the viewer and makes the design look attractive and complete.
We can divide balance into symmetrical and asymmetrical.
Symmetrical means that the visual weight is equally distributed in all directions. You can imagine a vertical or horizontal line across an image or layout, and the visual balance still remains perfectly symmetrical.
Asymmetry is an intentional step towards creating a sense of movement in a design. It is usually expressed when different elements are unevenly distributed in the image or layout. And although one side outweighs the other, the viewer still has a sense of balance.
Hubspot
The elements on the left side and on the right side are mirroring each other. It is the simplest example of symmetrical balance.
Intercom
Illustrations on both sides of the layout are of equal visual weight which makes this part of the website layout a good example of symmetrical balance.
Appcues
The big image on the right is balanced with the text of the title, subtitle, and the CTA on the left. It’s the classical way to create asymmetrical balance - one bigger object is opposed by several smaller objects.
Proof
Different design elements are scattered through the whole layout and still together they create a balance.
Emphasis
The emphasis as a principle of design is put to enhance or decrease the importance of certain design elements. Contrast colors, size, space, lines, or shapes help to create emphasis.
DocuSign
Here the emphasis is achieved with the help of size and contrast. The reader immediately pays attention to the numbers as they are big and bold.
Carmax
Carmax's website has an interesting example of emphasis put on the "Find your car" CTA. First of all, the button is of contrast yellow color that stands out well from the white background. As well, the lady in the car is watching in the direction of the CTA and is pointing her hand towards the button and this way increases the emphasis.
Repetition
Repetition enhances the design by uniting the separate elements. Repetition creates consistency in the design. It can be reached by things like color, shape, font, or even texture.
Precog
The above example shows the repetition of headings. Each of them has the same font, style, and color which helps to unite blocks of information and show the reader that they are of equal importance.
Figma
Here you can see the illustration of the repetition of the blocks in the layout. This example from Figma's website is interesting as it shows not just a repetition of images on the right side, but a mosaic made of several pictures. It creates complexity and makes the repetition not so obvious.
White space
When you try to put too many elements on one page, the design becomes cluttered, difficult to perceive and concentrate on. To avoid this we use the white space principle of design. White space is a zone of a design that is not loaded with any text or visuals. It helps to create a focus on a certain design element and contributes to creating a simple, minimalist design.
Adobe
A lot of white space on Adobe's website makes the design "light" and minimalistic, and all the information on it readable and easy to perceive.
Gamaya
Another example of the use of white space is Gamaya's website, designed by Eleken. Thanks to this principle, each page on the website is clean and minimalistic, all the elements stand out and the page looks less cramped.
Unity
The next principle of design is unity - when each piece of design harmoniously match together.
HandPrinter
We've already mentioned Handprinter at the beginning of the article. It is a unique project designed by our team. Check the case study to learn more about it.
The color scheme, fonts, and illustrations across the whole Handprinter's website create a perfect example of unity that leads to harmonious and aesthetically pleasant design.
Pattern
We can explain the pattern in two different ways. First of all, the pattern is a principle of design when certain visual design elements like lines, shapes, or colors are repeated. The most common example of a pattern is wallpaper.
Secondly, we can call established design standards for certain elements a pattern. For example, we are used to the fact that navigation is placed in the header, and language settings are usually in the footer, and when you click on the logo in the header it will redirect you to the homepage. These are design patterns.
Brandalmanac
In the background of this website, we can see a pattern. It consists of small dots and stars floating around and it gives a reader the feeling of space. The logo of the website has a form of a planet, that's why the pattern on the wallpaper complements the overall website concept.
Movement
Movement is how design elements influence the direction of the viewer's eyes through the composition. This design principle helps to interest the reader and keep them engaged.
Memberstack
A dashed line that links three steps together prompts the reader to follow it and creates a movement in this design element.
As you open Google’s website all you see is a copy on the white background. Designers decided to add a small blue line that hints to the viewer that there is something more here when you scroll down the page. This tiny object creates a principle of movement.
Conclusion
To some extent, the design is a matter of taste. However, it is also a skill that requires constant mastering. Design is full of principles, techniques, and rules understanding of which will come to you with practice.
But if you're a beginner in this field, keep these nine principles we've discussed today in mind. Every time you see a poster, a website homepage, a logo or some other piece of design try to analyze what principles the designer applied when creating them.
Still, state skeptical about each “rule” and only apply it where appropriate. Design is constantly evolving and changing, and each specific case is unique and requires its own design solutions.
Check some more of our articles that can inspire you on creating your own great pieces of design:
Human-Centered Design Examples for Better User Experience
Your email has been submitted successfully. Check your email for first article we’ve sent you.
