Best UI/UX Practices | Part 1

On a scale of 1 to 10 how would you rate our service?

- “Don’t make me think” by Steve Krug

For sure, 2020 was tough so far and our lives have changed drastically. As many events are canceled or will be held online, more and more businesses start to realise how vital it is to invest in quality designed websites. The more technologies advance, the more our lives depend on them. Just five years ago no one could imagine that you can check your email or make a call through your smartwatch during your morning jogging session. Nowadays, this is called Monday morning.

Whenever someone thinks about tech evolution, the first picture that pops into our heads is a programmer, engineer or tech developer, sitting behind a desk. But actually, there is another person standing behind our everyday tech-routine – the UI/UX designer.

The term UX designer stands for User Experience designer and they are the people responsible for understanding the users’ needs, generating ideas to solve their problems, prototyping designs and testing them with users.

The UI designers or the User Interface designers focus on the users’ visual experience. They design all the screens through which a user will move and create the visual elements that facilitate this movement.

If you are interested in some of the best well-known practises that these designers use in order to make a fluent, responsive and beautiful design – then you are in the right place! In the following sequences of two articles I will share some of the most important things that you will need to stick to when creating web pages or apps. We are going to start with the UX part, as it is determining for everything that comes later in the visual one.

Ready? Here we start!

1. Know your User

The first very important thing is to make a user research, which means to identify your user target group and to identify their needs and demands. As it is said in the so called “Bible of User Experience Design”:

On a scale of 1 to 10 how would you rate our service?

- “Don’t make me think” by Steve Krug

The best way to identify and further satisfy a user’s needs is to simply ask.
Some common data collection methods include various forms of surveys – online surveys, paper surveys, mobile surveys and kiosk surveys, website interceptors, online polls, interviews and systematic observations. This form of user research may also include analytics, such as Google Analytics. Most of the time the research is conducted by online surveys.

Some of the most common online survey makers are:

2. Draw a sitemap

When the survey data is collected and processed, it is time to put the “backbone” of the webpage or in other words – to connect logically the user journey to our website. The simplest way to do this is to create a user map or a Mindmap. The Mindmap contains basic tasks and functions that can be performed on the webpage/app and their sequence. For example, if the user goes into the shop section of a shopping site, would it be mandatory to have a registration in the platform or he/she will be able to finish the purchase as a guest. All of these related actions can be visualised in the form of a mindmap. Some of the softwares which can be used for mapping are:

Xmind
Canva
Ai
Adobe XD/Sketch/Figma
Paint
Powerpoint
Microsoft Word

3. Clear Concept

The best way to clear the idea of design and functionality is to make some rough sketches and wireframes. Wireframes are a great way to introduce the design structure and idea to your team or client. Their biggest advantage is that they are perfect for clearing the overall logical hierarchy and at the same time are fast, cheap and easy to make and change. They can be made either on paper, graphic tablet or you can use a specialized software. Some of the most commonly used softwares are:

Adobe XD
Figma
Pencil
Balsamiq

4. Breadcrumbs

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or web application. Breadcrumbs are used for navigation in large websites and websites that have hierarchically arranged pages. For example, e-commerce websites, in which a large variety of products is grouped into logical categories. It is not a good idea to use breadcrumbs for single-level websites that have no logical hierarchy or grouping. The easiest way to check if breadcrumbs will benefit your user’s journey, is to look at your sitemap and then analyse whether breadcrumbs will be helpful.

5. Conduct User testing

A good way to know that you are going into the right direction is to engage users into tests on every important step. At this point, user testing can be performed using simple materials as paper cuts or a basic clickable prototype of the website. Send it to as many people as you can with the request to perform a simple task. You can also ask them to record a short video while they are trying to perform it. A short survey at the end of the task can help you understand every person’s opinion or struggles. Process the results and check where the test users struggle with the task. Discuss with your team what can be done in order to simplify the process and so on.

In general, these are the main principles and tools that you can use while building the UX part of your website or app. In theory, if everything here is cleared and done right, the UI designer will be able to “consider” all these logical relations and structures and visualise them the best way possible. Want to know how they do that? Some of the tips and tricks I will share soon in the second part of this article – Best UI Practises. Was this helpful to you and did you learn something new today? Feel free to share with us in the meantime while the second part comes out. 🙂