Within a site or an application, you have certainly already experienced similar annoyances:

“Where are the contact details? I can't find the contact page.“
“Did the click work? Nothing seems to happen.”

It seems obvious: an interface^[1] should be intuitive and easy to use. But an effective platform does not happen by chance. It is the result of a user-centered approach: UX design (UX for User Experience).

User experience design is a set of elements that must be satisfied in order to obtain a fast, fluid, pleasant,... interface. The field is vast and UX design includes dozens of disciplines. Nevertheless, Peter Morville outlines the main factors influencing the user experience:

User experience: Peter Morville's honeycomb structure.

Each facet of the diagram corresponds to a fundamental UX attribute. The structure encourages us to ask the following questions:

• Useful: Does the product/service meet a need? Without a need, the user has no reason to use it.
• Usable: Is the product simple, easy to understand and handle?
• Desirable: From an aesthetic point of view, is it pleasant to use?
• Findable: Is it easy to navigate through the interface? So that the user can find what he needs immediately.
• Accessible: Is it accessible to people with disabilities?
• Credible: Does the product/service inspire confidence in the user?
• Valuable: Does it have value? That value is the sum total of all the other factors.

This is where the UX/UI designer comes in: he brings together the conditions to create the best possible user experience. At B12, the designer enters the scene at the very beginning of a project. This first step is to discuss with the Client how they (or their end-users) work and to find out what difficulties they are experiencing.

At this stage, the aim is to understand who the users are, what their problems are and what they need.

Once this has been defined, the prototype phase can begin. After analysing the information gathered, the designer makes proposals and presents them in the form of wireframes and mockups. The prototypes provide a concrete communication medium between users and designers.

The different types of wireframes (from left to right): low fidelity wireframe, medium fidelity wireframe, high fidelity wireframe (or mockup).

Wireframes are the skeleton of the application. They allow us to focus on the structure of the application and to constitute the user's path. They can be drawn by hand or using dedicated software. One of the many benefits is to quickly gather feedback and adjust accordingly.

As for the mockups (or high fidelity wireframes), they reflect a very faithful vision of the future project. And for good reason, the graphic charter is now applied to them: the colours, typography, iconography, logo, photos, texts, etc.

At B12, we test prototypes with end users (usually the Client). This is to ensure that the future application meets their expectations and avoids unnecessary development.

One challenge was to design the navigation of an entire interface within a single mockup. The user accesses a large amount of content and an impressive series of actions. A well-organised structure will then show him exactly where he is in the interface despite the multitude of filters and tabs available. The arrangement of information also allows the user to view the details of a list item simultaneously with other lists of content, which is very relevant to his daily tasks.

Then, when the visual mockups are validated by the Client (after a cycle of feedback, brainstorming and modifications), the development starts.

As soon as a new functionality is formulated, the designer and the developer discuss it. They check that the adaptations can be carried out successfully and that they fit in with the rest of the system.

The result? If the user is able to complete a task quickly and smoothly, he is a satisfied user!

Of course, the user experience is not limited to the time spent exclusively on the application. It encompasses all the interactions that take place before, during and after the time spent on the platform.

For instance, when a person creates a new account on a platform, she usually has to validate the registration via a link received by email. The quality of the email already influences the user's experience: a clear message, the use of the graphic charter, a clearly visible action button, etc.The visitor already has a first impression of the product before he has even logged on to the platform. As long as it is optimal...

Note also that UX and UI design should not be confused. UI design (UI for User Interface) is a component of UX. UI is concerned with the aesthetic aspect of a project. This is one of the characteristics of Peter Morville's diagram: "Desirable". The UI ensures that a layout arouses positive emotions and makes people want to linger on it.

Conclusion

In any website or application assignment, the impact of UX design is obvious. It contributes to the success of the product. If users enjoy interacting with a product, they will adopt it. Better still, they will talk about it and become fans of the product.

B12 places great importance on UX design and includes designers from the team in many of its projects. The clearer and more user-friendly the interface, the greater the user satisfaction.

‍

HARTSON R., PYLA P., The UX Book 2 : Agile UX Design for a Quality User Experience, Morgan Kaufmann, 2019, p. 405 à 411

‍

^[1]An interface can be a web application, a mobile application, a website, etc. ↩︎