Introduction to UX and UI Methods

AvatarBy Visual Meta 3 years agoNo Comments
Home  /  Tech Corner  /  Introduction to UX and UI Methods

What is UX and UI ?

For many people, the words UX and UI mean ‘something related to design’. This is correct, but the terms UX and UI also represent something much bigger than just design. User experience (UX) and user interface (UI) go hand in hand when we refer to product design – despite the fact that they are two completely different disciplines, they perfectly compliment each other – and help to create user-friendly and aesthetically rich products.

Before I explain what UX and UI are in detail, I would like to show you what the product creation process looks like (Figure 1).

Product creation process

Notice that the product creation process has many interactions. There are combinations of UX and UI methods used in every stage and UX is responsible for understanding and analyzing the problem that should be solved, knowing the audience for who we solve the problem, and determining how good or bad the solution that we designed is. UI stands more for visualization and using knowledge about colors, typography, spacing, proximity, consistency and other aspects in design.

My favorite explanation of what UX is versus what UI is and what the difference between them is, is shown below in Figure 2 and 3.

Understanding of UX and UI definitions

Importance of UX and UI in product creation.

Most common Methods in UX and UI

In Figure 1 you can see the relevant UX and UI methods listed below each stage of the product creation process. I would like to give you a more detailed view of the most common methods that we use at Visual Meta:

  • Persona and Storytelling
  • Sketch, Wireframe, and Prototype
  • User Test and Interviews, Usability test and Scenario
  • Pattern library and Heuristic analysis

Persona and Storytelling

Assuming you already conducted some user tests, you have an understanding of your user and which problem he or she has. What comes next? The next step is to create a persona. Creating a persona is similar to how you create your character in a computer game. You need to define the demographic characteristics of the persona, the motivations, what are his or her fears, which brands or social network he or she uses, and any other aspects that are important for your user understanding.

It is important to create the right persona, because the persona always reminds you who you are creating the product for. Without keeping this critical information in mind you can get lost implementing a variety of features and functionalities, just because it is possible. It is best to create a strong focus, and creating the right persona helps you to do this. As I heard at a Design Thinking workshop that I recently participated in:

“Don’t try to create a product for everybody. Focus on one target group and if they like your product, most likely other people also will find it useful”

A great example of this principle in action is the story of cabin luggage creation. Cabin luggage was initially created for air stewards and stewardesses who needed a small bag that was easy to carry and could fit all of their essentials for the flight. The air stewards and stewardesses were the target group first using cabin luggage – but many other people also found it to be useful, and nowadays everyone uses it!

When we need to develop a product with a human to computer interface, a scenario is also an important step. Using the scenario we can specify which screens need to be designed. A Frontend ready product with a fully interactive design requires a lot of work!. Therefore, we need to understand how, when and in which situation the user would interact with our product. Which screens step by step he or she will see.

To create a scenario we usually use a whiteboard split into areas for each screen. Together, the screens tell a story that the design team has created out of millions possible stories.
“User opens our app and clicks a button to log in. He sees the login screen…”
Storytelling gives us a clear understanding of how many screens we need, which screens exactly they should be, what is included in the screens, and which functionality we need to include in our prototype.

The Storyboard leads us to the stage of prototyping.

Sketch, Wireframe, and Prototype

There are a lot of tools for prototyping. Starting from paper drawing, Lego and Powerpoint continuing with professional prototyping programs like Sketch, Figma, Adobe XD. Based on the tool you use for prototyping it can be either a low- or high-fidelity prototype. The more interaction close to reality and design understanding a prototype can provide the higher fidelity it has. Look at Figure 6 below.

User test and Interviews, Usability test and Scenarios

Testing is a method that can be used at any stage of product creation. The more often a company conducts tests, the better quality product will be developed with less time and development costs because it is always easier to fix a problem as early in the product creation process as possible, for example, before a design goes to development.

At the understanding stage, a user test approach is mostly used. It is a method of collecting data about our users, more generic information about how they do this or that. The biggest difference between a user test and usability test is that during the first one you listen to what the user thinks he does. For the second approach, you observe what the user really does despite what he thinks he does. Sometimes you can see that actions are different compared to thoughts.

User testing and usability testing

In order to conduct effective User or Usability tests it is very important to know how to conduct a good interview and how to create a good scenario. An interview can be led by an Interviewer or by a  user, meaning either you ask questions that you have prepared and follow your list or you create an open conversation with the user and ask questions based on the information from his answers.

Tips for a good interview:

✅ Avoid YES and NO questions. Instead, create questions that are impossible to answer briefly with yes or no. For example, ask “What do you think about this?” rather than “Do you like it?”

✅ Give the interviewee time to think and tell you everything, try to feel if the interviewee is just pausing, or if they have completed their answer.

✅ Don’t include answer or options in your question because an interviewee may stick to an option and forget about their own opinion. Asking “How often do you shop online” is better than asking “Do you shop 2 times per month or more often?”

✅ If you feel there can be more information provided by the interviewee, or the answer is too short, don’t be afraid to ask WHY questions?
User: I don’t really like offline shopping. You: Why don’t you like it?

Tips for a good scenario:

✅There is no wrong and right answer. I would even say that a user is always right.

✅Adopt a position of neutrality towards what a user says or does. Don’t encourage him or her by showing a positive or negative reaction.

✅Don’t lead the user by giving to much information, for example, give a task, but do not describe how to complete the task.

✅Ask the user to speak out loud during the test, and express their thoughts and emotions about anything he or she sees.

Pattern library and Heuristic analysis

A pattern library is a kit of common interface components such as Forms, Pop-ups, buttons,and text inputs, designed based on the best UX practices. Using a pattern library can help you to create better UX with fewer interactions, and supports consistency of your product from one design task to another. Our Style guide at Visual Meta (Figure 8) is an example of a pattern library that we have developed.

Visual Meta Style Guide

“Ten Usability Heuristics by Jakob Nielsen” is one of the first articles that UX and UI specialists read at the beginning of their career. These ten simple but very useful rules not only help analyze an existing product on the usability aspects but also decrease the number of usability mistakes during development. I really recommend that all people involved in the product development process read this article.

A short list of these rules:

  1. Visibility of system status.
  2. Match between system + real world.
  3. User control and freedom.
  4. Consistency and standards.
  5. Recognition rather than recall.
  6. Error prevention.
  7. Flexibility and efficiency of use.
  8. Aesthetic and minimalist design.
  9. Help users with errors.
  10. Help and documentation.

Thank you for your time, I hope this article explained some of the Usability mystery and aroused your interest to learn more about this wonderful topic

Article written by Irina Ziborova. Irina is an UX/UI Designer at Visual Meta. She studied a Master’s program in Computer Graphics and Web Design, including courses about human-computer interaction, user-oriented design and usability product design.

  Tech Corner
this post was shared 0 times

Leave a Reply

Your email address will not be published.