UX and UI design: purpose and differences. Everything you need to know about UX design Ux designer what

29.09.2017

User Experience or UX is a currently popular term in the technology and design industries. As UX continues to evolve and be defined, many people are still unsure what UX means and how to properly use the term.

You probably often hear about UX when it comes to the interfaces of websites or mobile applications. This is partly true, but a deeper look at UX is necessary to fully understand why user experience is so important and why it is so important to know about it.

What is User Experience (UX)?

UX stands for “user experience”. Experience is how people interact with a product.

You encounter UX everywhere. In theory, everything you come into contact with, starting with software to the on/off button and its shape are examples of elements that create UX. The sum of your interactions with a product becomes the experience you have using that product.

All objects around us have an experience of interaction - from touch-screen kiosks in the subway to elite coffee machines that allow you to pour yourself a cup of gourmet coffee. Possibility to use mobile phone or any other device on the go improves the UX, just as interacting with the car using the touch screen and voice commands makes driving easier and more convenient.

The success of a product is based on how users perceive it. When using a product, people typically rate their experience as follows:

  • Did I benefit from this product?
  • Is it easy to use?
  • Is it pleasant to use?

Whether people will become regular and loyal users of the product directly depends on the answer to these questions.

UX elements

Don Norman, co-founder of the Nielsen Norman Group, was the first to coin the concept of “user experience” in the 90s, saying “The user experience covers all aspects of a user’s interaction with a company, its services and products.”

“I coined this term because I thought that human interfaces and usability were too narrow concepts. I wanted to capture all aspects of the human experience with the system, including industrial design, graphics, interfaces and physical interaction.”

In this video, Don Norman shares his thoughts on the origins of the term UX.

Design is a rather broad and vague concept. When does someone speak? “I’m a designer,” it’s not immediately clear what he actually does every day. There are several different fields that come under the umbrella of design.

Professions related to design exist in a variety of fields - from industrial design (car and furniture design, etc.), print design (magazines and other printed publications) to web design (websites, mobile applications).

However, recently many new design professions have emerged, focused on developing interfaces for different types of screens. Jobs titled UX or UI designers are incomprehensible to the uninitiated and even often to designers themselves from other fields.

Let's try to understand what each of these terms means.

UX designer (USER EXPERIENCE designer)

A UX designer is primarily focused on how the product “feels” and is perceived by the user. The task given to the designer does not have one correct answer. UX designers try different approaches to solve a specific user problem. A UX designer's broad list of responsibilities includes making sure the product consistently moves the customer from one stage to the next. One way to achieve this is to conduct direct tests with a real user to be able to observe their behavior. By identifying verbal and non-verbal obstacles, UX designers improve the product and consistently come to the creation the best option user interaction with the product. The test version is necessary to ensure the most convenient use of the product.

An example of an experience designer's job description on Twitter:

“Define interaction models, user task flows, and UI specifications. Present various scenarios for the development of events, describe the process of use and interaction models from start to finish, and demonstrate samples to interested parties. Work with our Creative Director and Visual Designers to unify Twitter's visual identity and signature features. Develop or maintain designs, mock-ups, and standards as needed."

Work results: layouts of images on screens, storyboards, site plan.

Tools: Photoshop, Sketch, Illustrator, Fireworks, InVision

UI designer (USER INTERFACE designer)

Unlike UX designers, who are responsible for the overall experience of a product, a UI designer's job revolves around how the product is designed. These specialists are responsible for the design of every page or screen with which the user interacts, and must ensure that the UI visually matches the path laid out by the UX designer. For example, a UI designer creating an analytics dashboard may present the most important content at the top of the page, or decide that a slider or control button is more appropriate for the user's perception of adjusting the graph.


Typically, the UI designer is also responsible for creating a consistent style and must ensure that the appropriate design language is applied throughout the product.

Maintaining consistency across all visual elements and defining behavior (such as how to display errors or warnings) falls under the purview of a UI designer.

The line between these two professions is quite blurred, and often companies hire one person for these two positions.

Tools: Photoshop, Sketch, Illustrator, Fireworks

Visual designer (graphic designer)

A visual designer is someone who does graphics. If you ask someone who doesn't design what a designer is, perhaps the first thing that comes to mind is graphic design er. Graphic designers have nothing to do with how screens communicate with each other or how someone interacts with a product. Instead, they focus on creating beautiful icons, controls, and other visual elements and choosing appropriate fonts. Graphic designers work on the little details that others don't pay attention to, and often work in Photoshop at 4X or 8X.

It is also quite common for UI designers to do double duty and create the final version of image elements. Some companies decide not to hire a separate graphic designer.

Tools: Photoshop, Sketch

Interactive designer (motion designer)

Remember that almost imperceptible bouncing animation when you refresh your email on your iPhone? This is the job of a motion designer. Unlike graphic designers, who work with static elements, motion designers create animations within applications. They deal with what the interface does after the user touches it. For example, they decide how menus should expand, what transition effects should be used, and how a particular button should respond. Well-executed motion design becomes an integral part of the interface, offering visual cues on how to use the product.

Motion Designer Job Description at Apple:

“Highly qualified in graphic design, motion graphics, knowledge of digital art, good perception of fonts and colors, general attention to materials and textures, as well as a practical understanding of animation. Knowledge of iOS, OS X, Photoshop and Illustrator, also familiarity with Director (or equivalent), Quartz Composer (or equivalent), 3D modeling, motion graphics"

Tools: AfterEffects, Core Composer, Flash, Origami

UX Researcher (User Researcher)

The goal of a UX researcher is to answer two questions: “Who is our customer?” and “What does our consumer want?” Typically, a researcher's responsibilities include conducting user interviews, researching marketing data, and generally collecting analytics. Design is a process of continuous improvement. A researcher can help in this process by conducting A/B testing to identify which design solution best meets consumer needs. A UX researcher is usually a mainstay in large companies, where access to a huge amount of information gives him enough power to come to meaningful conclusions.

Facebook UX Researcher Job Description:

“Work closely with product teams to identify research topics. Conduct research that simultaneously addresses both consumer behavior and consumer opinions. Conduct research using a wide range of qualitative and quantitative methods, such as surveys.”

UX designers periodically serve as UX researchers.

Work results: user profile, A/B testing results, behavioral user research/interviews.

Tools: microphone, papers, documents

Front-end developer (UI developer)

External developers are responsible for the functional implementation of the product interface. Typically, a UI designer passes a static mockup to an external developer, who then transforms it into a working, interactive product. External developers are also responsible for coding and layout of interactive graphics created by the motion designer.

Tools: CSS, HTML, JavaScript

Product Designer

Product designer is an all-encompassing term to describe a designer who is generally involved in the process of creating the image and perception of a product.

The role of a product designer is not very well defined and varies from company to company. A product designer may do minimal coding, conduct user research, create interfaces, or create visual elements. From start to finish, a product designer helps identify the initial problem, establish some criteria for solving it, and then create, test, and refine various solutions. Some companies that want to work in a more “fluid” collaboration specify this particular vacancy when searching for an applicant, in order to ultimately create a team of diverse designers and work on user perception of the product, conduct user research and create visual elements.

Some companies use "UX designer" or simply "designer" as a catch-all term. Reading the job description is the best way to figure out what your expertise will be.

Product Designer Job Description for Pinterest

“Proficiency in all areas of design: interaction, visual part, working with the product, layout. Creating templates for image elements and their layout.”

Looking for a designer

The most common phrase I hear from young startups. They are usually looking for someone who can do all of the above. They are looking for someone who could create beautiful icons, create landing pages, run A/B testing, logically place UI elements on the screen, and may even do some of the duties of a front-end developer. Due to the general nature of this position, we often hear that a company wants to hire just a “designer” without delving into the details and specifics of this profession.

The boundaries between each of these design trends are very blurred. It is expected that some UX designers will also work on interaction with the consumer, and some UI designers will also work on graphics. The best way find a designer - describe in detail what you expect from him as part of working for your company, and choose a job title that most clearly reflects the responsibilities of the designer.

Working with user experience helps bring a product or business to new level, because a UX designer thinks through the logic of the product and helps clients achieve their goals.

To start learning UX design, you need to understand how work on any digital project is structured and what exactly such a designer is responsible for during development.

Who is a UX designer and what does he do?

A UX designer is a designer who makes digital products understandable and logical. It studies the user’s experience of interaction with a product - website, application, program. The goal of a UX designer is to help the user achieve their goal. To do this, the project is divided into stages and each of them is worked through.

First, designers analyze the product's audience, exploring their goals and fears. Then they conduct interviews with real people and observe competitors’ websites and applications. After this, prototypes are created, shown to users and the files are transferred to developers.

If you look at each of these stages in detail, it’s easy to understand where to start learning UX design.

Who can become a UX designer

Often web designers come to UX who decide to delve into the field of user interaction. They have already worked with users, know the basic principles and know how to visualize information.

However, being a web designer is not necessary to work in UX. All processes in this area are primarily based on logic, the ability to think critically, communication with people and the ability to analyze.

One of Google's designers, Fiona Yong, said that in her team there are only a few specialists with a designer's education. The rest previously worked in related fields or other industries. Some were in cognitive science, some in psychobiology.

Therefore, architects, engineers, and programmers can become good designers. The main thing is to understand the basics of interactive design and understand how the logic of work in UX is built. This can be done independently or in special UI/UX design courses.

Where to begin

You can start learning UX design with courses, books and articles. The main thing is to draw up the right training plan, formulate goals and move from the general to the specific.

The process of working on a product consists of several stages. At each of them, a UX designer is engaged different things. To understand what knowledge is needed for work, you need to consider each of the stages in detail:

Study

A UX designer makes sure that the future website or application performs a useful action - selling, advertising, helping users.

But it's hard to create good project, if you don’t understand the problem. Therefore, first the designer collects data about the future product. Researches competitors, plans functions, thinks about the logic of work.

A good research method is to talk to real users. When creating a service for purchasing tickets, it is better to go to the station and interview passengers. Find out whether it will be easier for them to purchase tickets via the Internet, whether it is convenient to pay with a card, how they want to choose seats in the carriage.

During the research phase, the UX designer should actively talk to potential users and ask what they need.

Data analysis

When the product's objectives are clear, the designer thinks through the logic of interaction.

From target audience choose the most prominent representatives and talk about them. They try to imagine what is important for this person in the product. What problems will he solve, and in what way? This stage, creating personas, helps the designer imagine specific people and work for them.

It will not be possible to satisfy the requirements of the entire target audience, but you can work on the desires of the most prominent representatives. Then the chance increases that others will also be comfortable using the product.

The designer creates use cases for each persona. The important thing here is to imagine how a specific person might interact with the product. What functionality is needed and what can be discarded at the first stage.

Creating scripts helps you think through the structure of an application or site, as well as the basic elements.

Design

At this stage, all collected data is visualized. They build the structure of the application, arrange elements for each screen.

Designing is not about creating a finished design. These are quick sketches that are shown to users. They conduct testing and find out whether the product in this form will solve the problem.

Layouts at this stage can be completely different - low-detailed and black and white or bright and interactive. Some work with paper and pen, others use special programs. Some designers immediately work in graphic editors.

The design phase helps save significant time. It is faster to show a sketch to the user and ask his opinion than to draw and program the product from scratch and then eliminate the shortcomings.

Design

The UI designer is responsible for creating the final version. But often you have to draw the final version yourself. Therefore, it is useful to gain basic skills and learn UI design.

At the stage, visualizations are created from prototypes and wireframes, work with color, composition and typography, and design content.

Suitable for this graphic editor where designers work:

  • Adobe Photoshop,
  • Adobe XD,
  • Sketch,
  • Figma.

The task for a UX designer is to monitor the usability of individual elements and pages as a whole. Make sure that when adding visual effects, the main meaning of the product is not lost.

Metrics analysis

After publishing the first working version of the product, the UX designer monitors the actual behavior of users. For this purpose, analytics systems and various metrics are used.

They work on the product - conduct usability and A/B tests. Improve user experience and add new features.

How to Learn UX Design

UX design consists of different directions and disciplines. This includes visual design, working with users, and testing results. Some UX specialists work in one area, some in all areas.

To learn UX design, you need to imagine the entire product development journey and improve the skills required for each stage."

  • Live Feedback with teachers
  • Unlimited access to course materials
  • Internship in partner companies
  • Thesis project from a real customer
  • Guaranteed employment in partner companies for graduates who have defended their theses
  • When studying theory, do not forget about practical skills. Create a website layout or come up with mobile app. Divide the project into parts and work on each one carefully: do research and analysis, then do design and design. Only practice helps a designer become a good specialist.

    Creating the best chocolate brownies will require both UX and UI. I'm serious. To get started, you will need a recipe, ingredients, kitchen utensils and an oven. Then: mix, bake, cut, put on plates, serve and eat.

    But which of this is UX and which is UI? The process of making is UX, and the process of plating and serving is UI.

    What about eating? This is UX; except when it's not UX. Would the consumer have a different experience if the cakes were served straight from the pan or presented beautifully on a plate? I would say yes, the latter would be preferable.

    In this article, I will share with you five differences between UX and UI design. Let's hope that by the end of it, you will have a better understanding of them. Let me say right away that although you will notice differences, some of them will be very similar to each other.

    With that disclaimer, let's take a look at some of the differences between the two.

    UX is not UI

    UX design, or user experience design, is the process by which a need is identified. A rough prototype is then drawn, which is later validated (or not) through testing. When both the business model and value proposition are confirmed, the product is ready.

    UI, or user interface design, can be thought of like this:

    User Interface Design = Visual Design + Interaction Design.

    Visual design is how a site looks, its personality, if you will; brand. Interaction design is how people interact with your website. When someone presses a button, does it change in a way that makes it clear that it has been pressed?

    While both UX and UI designers create interactions, UX designers can be considered macro-interaction architects, and UI designers can be considered micro-interaction creators who deal with the details.

    According to designer Nick Babich:

    “The best products do two things well: function and detail. Features are what attract people to your product. The details are what hold them together.”

    A UX designer would rather design user flows, the steps a user would take to, for example, sign up for a newsletter. What steps will they follow and how will they know they succeeded?

    The project then goes to the UI designer. The UI designer will enhance these interactions by adding color and highlighting the original design, giving them hints, and showing direction to the newsletter.

    UI makes interfaces beautiful

    A useful product satisfies a need that the market has not yet encountered. The UX designer's research process includes competitive analysis, developing personas and then creating a minimum viable product; a product that will be valuable to your target audience. This is confirmed by testing throughout life cycle product.

    Once the user flows and wireframes are prototyped and tested, the process moves on to the UI designer - his job is to make it all look good. This includes choosing a color scheme and design that is both beautiful and easy to use. However, color choices, design, and interactions are not based on the designer's personal preferences, but on clearly articulated persona-specific reasons developed by UX designers. With their help, UI designers implement a visual hierarchy that will serve as a guide for users, explaining to them what and when to do to achieve their goal.

    A well-designed hierarchy will highlight one main goal on the page, letting users know where they are on the site and what they can do at any point. this moment time. The hierarchy handles this by using conventions and patterns that are already familiar to users. These patterns will give users direction.

    UX helps users achieve their goals

    UI creates emotional connections

    People come to your site to do something. Perhaps someone is looking for a dog for a small apartment.

    The UX side of things can look at people as dog lovers and try to understand what is important to them. What do they value or need when seeking help in choosing their furry friend? To understand this, they begin work. They ask questions, observe people, interview them, maybe do prototypes and some guerilla testing to see if they can help them.

    Once you've got your basic usability in place, according to Aaron Walter, author of Design for Emotion, the loyalty of your users will depend on the personality of your interface. A vibrant design can attract people to your site, and they may even linger if there is something to do there. And when is it formed personal connection– they are on the hook. Does your interface make them laugh? Does he grab them? How cocky is he? Aaron says, “People will forgive your shortcomings, follow you, and sing your praises if you reward them with positive emotions.” This is where the UI designer comes in.

    First the UX design is created

    Then (sometimes) the UI design is created

    How do UX and UI designers work together throughout the design process?

    Typically, UX design and research are the first steps when deciding to create a product or application. UX designers conduct much of the research that confirms or disproves a product's initial ideas and guides its development.

    Once the prototype has been tested several times and is almost ready, the UI designer comes in and starts working on visual design and micro-interactions.

    However, this path is not always linear and depends on many factors. For example:

    • Who does UX and UI?
    • The same person, or someone different, and a different team?

    UX is used in all products, interfaces and services

    UI refers only to interfaces

    User experience design is a vast field and is becoming more popular every day. Nowadays, not only companies using the web, but many others developing products or providing services are beginning to grasp the value of understanding their users and validating hypotheses before the creation process begins.

    User Interface Design is about user interfaces. This doesn't mean it's graphically limited. user interface computers, tablets, and mobile devices. These days, interfaces can be found in many other products, such as watches, washing machines, dashboards in cars, vending machines, and more.

    I recently read about an iPhone app that will unlock your car door. It turns out that this set of interactions involves many more steps than simply using a key to open a door. Whether we're designing for the interface or the experience, we must ensure that our users remain at the heart of the process.

    conclusions

    It is almost impossible to separate UX from UI or UI from UX.

    But if you try, you can conclude that:

    • UX design helps users complete tasks across multiple platforms and services.
    • UI design creates attractive and aesthetic interfaces that connect with people.

    Translation of an article by Don Sklecht

    When asked what is the difference between a UX designer and a UI designer, people like to answer in the negative. You know, such a literary device. Like “UX is not about the interface, it’s not about graphic design, it’s not usability, it’s not analytics, it’s not a prototype.” Today we will briefly show the difference, tell the history of the appearance of the terms and explain why the two concepts, even after so many years, are so willingly merged into one - UX/UI.

    Briefly about the difference

    A UI designer (user interface) is an interface designer in an ideal environment who draws buttons, icons, forms, selects fonts and makes a harmonious and beautiful layout out of everything. A website, an application, anything that the user will interact with - even the screen of a station terminal. And he doesn't think about anything else.

    A UX designer (user experience) is not a designer, but a designer (it’s just that in English the word designer has just the second meaning). He studies the needs of users, builds logical diagrams of the interface, tests prototypes on real people, and writes technical specifications for the design. In other words, this is such a marketing engineer: the input is analytics, the output is the principles of creating an interface, the logic of work, layout, content. It does not concern drawing as such.

    That's all.

    Why did it have to be complicated?

    As it was before: the designer received the task of “drawing a website.” All sites were more or less the same: home, about the company, catalog, then down the list. The designer asked: “When will they give us the content?” Never, comrade spirit, this is an army.

    And the designer was simply called “designer.” Without overseas prefixes.

    What happened later: agencies wanted to receive more money, and the world gradually began the transition from “just websites” to complex web services. And a service is not only a unique interface, it is also a special business process behind it. For example, remember the Airbnb website - without deep study of the subject, not a single graphic designer could immediately create an interface.

    Since there was more work, there was a need to divide one profession into several. Now the UX specialist (we'll call him that to avoid confusion) researched and designed information architecture, the prototyper did the functional part, and the graphic (UI) designer created the final product: modern and pleasing to the eye.

    The same thing has already happened in the industry. For example, “programmers” were simply divided into “frontend” and “backend”. And frontenders into true frontenders and “just layout designers.” By the way, .

    The reason is always the same: one person is not enough to big process. Let's move on.

    Who is a UX/UI designer

    What’s funny: job vacancies often include UX/UI designer positions, just like that, with a slash. Even Tinkoff is looking for such a combo specialist:

    On the other side of the barricades, designers all began to refer to themselves as UX/UI. Because being just a designer is ugh, unfashionable.

    Who is UX/UI in an ideal world? A superman who carries out the entire cycle of UX work, and then still manages to draw everything with several iterations of edits (make the UI).

    What exactly is UX/UI? Just a good designer. For those who consider it their duty not just to “make mock-ups”, but to approach each project individually, starting with analysis, questions, clarifications, sketches, diagrams, etc. This is not a full-fledged UX examination, but, as a rule, it is enough to support a ready-made service or develop “just a website.”

    So if you see an amazing UX/UI mutant, know this:

    • This is a designer who approaches a project with his head, and not just clicking his mouse and beak.
    • This is a guy who has read a lot of smart words and now calls himself UX/UI.

    It can be checked simply: ask the designer to tell you why he chose this particular arrangement of elements, this sequence of screens, etc. A good designer does not make a single interface decision just like that - everything has a logical justification.

    By the way

    This article is the second in the series “how one web specialist is different from another.” What prompted us to the idea of ​​making a directory of all professions from the web, with different options their names. So that the client (and all of us, for that matter) can live more clearly.