UX and UI design for beginners: how to get started

UX and UI are fundamental strategic resources to increase sales, achieve goals and increase trust in your business! How is it possible? The choice of a website passes through 3 fundamental tests: aesthetics, usability and emotions. UX and UI design are the key to overcoming all of them brilliantly.

Aesthetics is the first impression, the visual impact: your website must be visually pleasing and reassuring. Usability is the second test: your website must allow users to reach their goals in the least number of clicks possible. Emotions are the ultimate test: you have to design a website that is meaningful and unforgettable.

Before continuing to read, ask yourself these questions: is my website easy to use? Is the interface pleasant and intuitive? Am I offering users a high-level experience?

Keep reading and find out the difference between UX and UI designs and how to best use them to make your website memorable!

What are UX and UI?

If your goal is to make your users perform specific actions on your website, UX and UI are equally important but they are not the same thing! These two concepts are often considered interchangeable because they coexist and work together, but still remain distinct. Let’s give a definition of them and see the differences.

The acronym UX refers to the User Experience, that is the design of the user experience and therefore the creation of an entire strategy that must respond to the needs of users and, at the same time, make your business reach the set goals. Behind the UX design, there is a real analysis process that accompanies a product from the design to the search of the target audience, the creation of a prototype and up to the marketing and validation of the final product.

The acronym UI, on the other hand, refers to the User Interface, which focuses on the functional and aesthetic aspects such as the visual and tangible elements with which users will interact. The UI therefore includes the architecture of the website, web design and the study of shapes and colours.

UX and UI work together to make your users’ browsing experience pleasant, easy and unforgettable; but what are the basic concepts and steps of UX and UI design? Keep reading to find out!

UX and UI design

Is it clear not what is the focus in the UX and UI design? The user! In fact, a successful design created without deeply understanding the needs, values and desires of users doesn’t exist. Usability is not enough because it is not enough to take the user from A to B, you have to overcome the superficial level and go through 3 fundamental principles:

Comprehension: you need to gain a deep understanding of the people you are planning for and the context in which they move. You must therefore identify users, collect material about them with questionnaires, workshops and interviews. In this phase, the UX plays the main role.
Creation: you have to identify all the possible solutions to the problems identified. Once you have found the best ones, you can move on to the creation of prototypes to test with users. In this phase, the UI intervenes.
Evolution: the winning key is to adopt a continuous improvement strategy consisting of observation, measurement and listening.

UX and UI design starts from comprehension to create valuable solutions that can evolve over time.

Comprehension phase

In order to create the best UX and UI design, you need to ask yourself and find answers to 5 fundamental questions:

What are my goals?
What are the needs of the users?
What is the user’s path to improve?
Who are my competitors?
What is the added value of my solution?

You must acquire a deep understanding of the users, of the context in which they operate and of the project to be carried out. For this to be possible, you can make use of 3 main tools:

Interviews;
Online questionnaires;
Observation.

Let’s see them together in detail.

Interviews

Why are interviews useful for UX and UI design? They are used to discover the information and sensitive data of the people who may be interested in the project: the buyer personas. And how do you do the interviews correctly? Here are some basic steps:

Identify and engage the interviewees, choose the place and method of interview;
Set the goals to be achieved with the interview, prepare text and tools;
Create a bond with the interviewee and make him feel as comfortable as possible;
Try to anticipate the answers and create follow-up questions (i.e., questions that allow the interviewee to add details and better visualize what they want) based on your goals;
Collect and synthesize the information collected to then analyse it and extract useful insights for UX and UI design.

It is very important to put yourself in the interviewee’s shoes, develop empathy and phrase the questions in the right way to achieve your goals. Here are some tips:

Formulate open questions that stimulate the dialogue;
Avoid closed or vague questions;
Don’t influence responses;
Respect pauses and silences;
Understand what are the real motivations behind the behaviours;
Ask questions that get users to talk about their problems and stories.

If you want to learn more about the topic, we recommend reading the articles “The Mom Test book: how to interview your target” and “Interviews with customers: tips to validate your startup idea” and visiting our page “Validate your startup idea”, where you will find some videos on this topic.

Online questionnaires

Why are they important for UX and UI design? Online questionnaires are a winning tactic for engaging a large number of users in a short time. If with interviews you obtain quality feedbacks, being able to ask many open questions, with the online questionnaires you aim for quantity: you will be able to collect the opinion of hundreds of users, but you will not have the same degree of in-depth analysis obtained with interviews.

Here are some tips for creating an effective questionnaire:

The purpose of the questionnaire must be only one: clear, simple and well defined;
The selection of questions must be useful for the purpose;
The questionnaire must be fast and stimulating;
The questions must be simple, straightforward and understandable;
Don’t influence responses;
Use a tone of voice in line with your project ad that makes users feel at ease;
You can use both open and closed questions, but in both cases the answers should be short and easy to elaborate;
Do not enter too many open questions (they can reduce the completion rate);
Always use the present tense to ask your questions.

There are many complete and easy-to-use tools to create online questionnaires. The best known is certainly Google Forms: it is a completely free Google application that allows you to create, customize and share your questionnaires. You will also have a graphical representation of the responses in real time.

In case you want to find an alternative to Google Forms, here is a list of tools for creating questionnaires that I recommend you to try: JotForm, SoGoSurvey, SurveyLegend, SurveyMonkey, Typeform, Zoho Survey.

Observation

Observation allows you to investigate the true intentions of users, i.e., you can find out the difference between what they say they do and what they actually do. In this way, you can make the UX and UI more sincere and closer to your target audience. How to do it? Follow these three basic steps:

Field study: you must carry out research activities within the context in which your user moves. To do this, you can choose two ways: observation (you will limit yourself to observing his behaviour) and interaction (you can intervene by interviewing him).
Contextual inquiry: also in this case, we are talking about a search within the context of the user, where you can observe and interview those directly involved. Unlike the first point, however, this is an ethnographic study.
Shadowing: it is a qualitative research method. You will have to assign some goals to your users and then follow them and observe them just as if you were a shadow!

During all phases of observation, it is necessary to take notes, which will then be useful for you to extract the information you need.

Creation phase

After completing the comprehension phase where you conducted the research and completed the analysis of the information obtained, you can move on to creation. At this stage, you will have to create and take care of the visual aspect of your website down to the smallest detail, taking care of design and architecture. So, between UX and UI, who will be the protagonist? That’s right, the UI!

Here are some tips to make your UI design infallible:

Insert graphic elements that make users orientate easily;
Use a tone of voice with which your target audience can recognize itself;
Use consistent graphics across all devices (desktop, mobile and tablet);
Prevent errors to facilitate the user experience;
Make the interface efficient, so that the user reaches his goal in the shortest possible time;
Choose a refined and minimalist design that avoids any kind of disorder and confusion;
Allow your users to browse your website without help, by inserting guides and useful content about it.

But let’s get to the practice. In this phase, we can define three main moments:

Concept and identification of the solution;
Content and interface development;
Tests with users.

Let’s see them together in detail.

Concept and identification of the solution

In this first moment of the second phase of UX and UI design, you must define the problem that the user may encounter in the website and collect as many ideas as possible to offer him the best solution.

Once you have identified the problem, you have to imagine it as an opportunity for improvement and turn it into a question to ask yourself. You have to give space to creativity; here are some ways to do it:

Brainstorming;
Identify as many ideas as possible in the shortest time, but remember that variants of the same idea are not acceptable;
Compile a storyboard, drawing and describing your ideas.

At this point, all you have to do is choose the best ideas. How to do it? Ask yourself these three questions:

How innovative is this idea?
How complex can be its realization?
What impact can it have on the user experience?

Once you have selected the best ideas, you just have to put them into practice!

Content and interface development

The first step to take at this point of UX and UI design is to define and plan the path and actions that the user can take within the website. A good practice to do this is to create flowcharts in which to identify all the moments in the user’s journey, the sequence of actions, the choices he can make and the crossroads in front of which he can be found.

Then, it is vital to take an inventory of all the content you need to complete the user journey you have designed.

And now? It is time to create your wireframe (or mockup)! It is the draft of your user interface project which serves to give an idea of the layout, design and fundamental elements to be included to make your project work correctly. To make it happen, you start with a first sketching phase during which you will only need paper and pen. In this way, you can try multiple solutions in no time. When the paper sketches are ready, you can bring them to life by switching to the digital version.

For the digital creation of your wireframe, you can choose among some of the excellent and simple tools that you can find on the market. Thanks to these tools, you can plan and develop your projects, create drafts, receive feedbacks and collaborate with your team. Here are some of the best: Adobe XD, Behance, Canva, Freepik, Mokups-design, Pixeden, Previewed, Renderforest, Sketch, Smartmockups, Unblast, Wireframe.cc.

Tests with users

At this point, the interface prototype is finished and ready to be tested. In fact, only by testing you will be able to receive feedbacks to reduce risks, understand if you have worked in the right way and verify that the UX and UI are really user-friendly.

But let’s get to the practice! To get to the end of this phase of UX and UI design, you need to test three basic categories:

Information architecture: it is necessary to test the content hierarchy and information tree. To do this, you can try the “card sorting test”, which is an evaluation test of the information structure of your website, and the “tree test”, a test to evaluate the tree and the availability of topics on your website.
The usability of the interface: this is the most important testing phase; it consists in observing real users put their hand to your project and find points for improvement. You will have to ask your user to rate and give his opinion on two parameters: quality (why a problem has occurred and how to improve it) and quantity (what is the problem and how often it occurs). A good practice is to insert the results into a report, in order to have a clear picture of the situation and understand how to act on the problems.
The aesthetic aspect (visual design): for this phase, we recommend starting with the “5 seconds test”, which consists of showing your prototype to users who in 5 second will have to choose whether it convinced them (aesthetically) or not. Then, you have to understand if your project is desirable. To do so, you can use the “Microsoft Reaction Card Method”, a test that measures and detects the emotional response of customers to your prototype. Finally, we recommend the “User Experience Questionnaire” with which users immediately express feelings, impressions and attitudes that emerge during interaction with your project.

We have come to the end of the second phase of UX and UI design. Are you curious to find out what happens next? Keep reading!

Evolution phase

At this point, the UX and UI design journey is almost at the end. Once the testing phase is over, you can make your project a reality, but it is not over yet! In fact, to grow and evolve you will always have to observe and listen to users.

Here are some advices: keep experimenting with new changes and analyse users’ reactions; always investigate the real motivations behind customer actions and don’t forget to ask for feedbacks. In addition, here are 3 best practices you can’t ignore:

Experiment with A/B tests and A/B/N tests;
Observe the analytics and understand where to intervene;
Use heat maps to track users’ movements and actions on your website.

Before seeing them in detail, here are some more advanced and structured tests to perform:

A best practice is to use platforms to test and receive insights on the UX and UI of your website. Some of the best ones are: Loop11, TryMyUI, Usabilia, Userbrain, Userfeel, UserTesting, UserZoom.
There are some other tools that, after scanning and analysing your website, will give you many useful tips to understand where and why to intervene: CrazyEgg, Google Search Console, PageSpeed Insights.

A/B tests and A/B/N tests

Why is it important to do A/B and A/B/N testing for UX and UI design purposes?

A/B test is a method that allows you to submit to users two different versions (version A and version B) of the same website or the elements that compose it. It is an experiment to understand what works and what needs to be improved to convert more. A/B/N test, on the other hand, is nothing more than an extension of the A/B test, with which you can simultaneously test more than 2 versions of the same website or element.

How to do A/B and A/B/N tests? Here are some basic steps:

Define the objective to be measured;
Define the target audience;
Decide how to distribute the experiment to the public (usually version A is submitted to 50% of the public and version B to the other 50%);
Decide what the variant element will be;
Decide the duration of the test.

With A/B tests and A/B/N tests you can discover relatively small problems, which can however have a big impact on UX and UI optimization. They help you find out what block users from completing a certain action; an example could be an excessive number of steps to complete a path. Here are some items we recommend you test:

Page design: position of texts and graphic elements;
Funnel: the series of steps to take to complete a certain action;
CTA (Call To Action): colours, shapes and characters;
Shape: design, layout and number of fields;
Texts: titles, subtitles and paragraphs;
Products: promotions, photos, offers and prices.

Remember that to get real results you must always test all the variable versions at the same time and do not modify the test until it has been submitted to a significant number of users.

Analytics

Observing analytics is important to understand where you are wrong and where you need to intervene. For this reason, a tool like Google Analytics is an important ally! In fact, it is a source of valuable information with which you can understand if users are using your services correctly, find out what problems they encounter, define your audience through correct data and much more.

Google Analytics provides a very large amount of data, which translates into many opportunities for improvement for us. For this reason, it is important to learn how to evaluate and cross-reference these fundamental metrics to optimize UX and UI:

Sessions: the total number of visits in a given period. A session corresponds to the time in which a user interacts with your website and is interrupted when the user changes traffic sources or after 30 minutes of inactivity.
Users: the total number of people who have started at least one session in a certain period.
Page views: the total number of pages viewed.
Pages/sessions: the average number of pages viewed during a single session (repeated views are also taken into account).
Most viewed pages: this data helps you to understand which pages are more successful and which less.
Average time spent on page: the average time a user stays on a single page.
Bounce rate: it is a percentage data that reports the number of users who have clicked on your website and then left. The lower the percentage, the higher the performance of the website.

Sessions, users and pages are metrics that help you get an overview, but only by integrating data on average time, bounce rate and most viewed pages you can build an effective intervention strategy.

If you are interested in learning more about the topic, we recommend reading the articles “Google Analytics: theory and practice for beginners” and “Google Analytics: advanced features to become an expert” on our blog.

Heat maps

Heat maps are visual graphical representations that help you understand with which elements of your website users interact the most. How? The maps give a visual and immediate representation of the data thanks to real spots of colour: the most interesting areas tend to warm colours, while the less interesting areas tend to cold colours. They are fundamental tools for optimizing UX and UI as they allow you to understand the behaviour of your users on your website. There are 4 types of heat maps:

Hover map: it traces the movements of the mouse;
Click map: it indicates where users have clicked the most;
Scroll map: it traces the scrolls made with the mouse, allowing you to understand if users go down to the end of the page or if they stay on the initial part;
Eye tracking map: it traces the user’s eye movement and help you better understand what is actually seen on your website.

There is no heat map more important than another and it is best to use them all because each one takes into account different data on user behaviour and the navigation process. With all these valuable data, you will be able to understand where and how to intervene to improve the UX and UI of your website.

The two most used and known websites for studying user behaviour are Hotjar and Microsoft Clarity. In this regard, we recommend learning more on this topic by reading the article on our blog “User Behaviour Analytics: a focus on Microsoft Clarity”.

Conclusions

As you can see, UX and UI design are fundamental resources that make the customer satisfied and help you achieve your goals and grow your business faster.

With this guide, we hope that we explained in a simple way the best practices for obtaining a UX and UI-proof website, without having to ask for the help of professionals.

Let’s make a summary of the fundamental points:

Fully understand users and the context in which they live;
Fully understand the nature of the project;
Do in-depth research using the right tools;
Define a strategy to offer a valuable solution to your users;
Understand the problem (it will be the starting point of your ideas);
Never stop at the first ideas, always try to go further;
Before developing the interface, define and organize the content and information and identify the user paths;
Before moving on to the digital version of your project, prepare some sketches with pen and paper;
Choose the right tool for creating your wireframe and bring your project to life;
Test as much as possible to get feedback and understand where to improve;
Keep experimenting with new ideas to have an always updated and optimized version of your project;
Never stop observing the reactions and behaviours of your users on your website.

Now it is time to put everything we said into practice. Good luck!