In the digital world, the terms UI and UX have gradually become more and more popular to designate tasks or professions that existed before them, namely web designer for the first and web architect for the second (or “ergonomist”), which can be a source of confusion for experienced professional and late-comers.
To summarize as simply as possible before going into detail:
- UI or User Interface, is the appearance of a website or application.
- UX or User eXperience, is the way they work.
Of course, even if they are different, the two are intimately linked, which is why they are often put together in “Design UX / UI”. However, the professions or teams behind it do not necessarily work together at the same time, but rather in parallel.
Learn more about UX and the architecture of a mobile or web application
First of all, you should know that the term UX was coined by a scientist specializing in cognition, Dr. Donald Norman. Consequently, with UX, reasoning and brain functions are going to be central!
UX is a bit like the “blueprint” of the digital house you are going to build.
And moving around a house should be easy: the rooms and elements that compose it should be able to be used as simply as possible, by studying general norms and human behavior.
For example, in a house, we expect to have the handle of a door at hand height. In an application, the UX designer will place the main action (a validate button for example) within reach of the user’s thumb, or the closing cross at the top right of the window (or sometimes to the left).
In that, UX Designers are all about Intuitiveness, Ergonomics and Logic.
Several disciplines or tasks fall to the UX Designer, usually in the following order:
1. Behavioral Research and User Persona
This is almost a “Marketing” or “Neuromarketing” pan.
To design a mobile or other application, you first have to determine WHO you are going to design it for. Because indeed, according to ages, categories, countries, and cultures, uses may vary. It is therefore a question of understanding its target population in order to best adapt its design.
This step is not mandatory, but brings a lot in the app’s precision and therefore in its success. Small projects will therefore often avoid this one, because it mobilizes a lot of human resources and time, and therefore presents non-negligible costs.
In the absence of a real field study, we can call on hypothetical users, called “User Persona”. These are typical profiles that we assume will use the application.
If you can actually use these Persona Users as a basis, it is necessarily better to confirm your intuitions by creating a real test panel, or backing it up with data.
To do this, a sampling is carried out (as for any opinion survey), and this panel will serve as a test bed at the various stages of the project’s implementation, by providing feedback and feelings, the results of which will be integrated into the design.
This behavioral research can go very far, with for example measuring the user’s reaction time, or measuring the journey of their eyes on a screen using so-called “eye-tracking” tools or “heatmaps”. These tests often work on the principle of what is called A / B testing: between a solution A and B tested, which is the best?
Using this data, the UX Designer will adjust its work so that each user action takes as little time as possible without confusion, with speed of execution being a real holy grail in the UX quest.
2. The development of scenario
In parallel with this behavioral research, the UX designer will draw up a list of hypotheses that will have to be integrated into the design and practical tests.
These scenarios correspond to the list of functionalities offered by the application.
How to quit the application? How to modify such or such element? What if the app encounters an error? What steps must be taken to arrive at action X or Y? In short, all possible actions, all scenarios must be considered to be ready for any eventuality and to best satisfy the user.
Therefore, These scenarios can be behavioral (the actions carried out by an individual) and environmental. Example: What happens if the brightness changes? What if I get a call? What if I interact with another application? Etc.
3. Information architecture
Once we know who we are talking to and what are all the actions that can be carried out on a site or an app, we must now organize it all!
The UX designer will therefore group these actions or information into logical families, and within these families, set priorities. Some tasks are indeed less important than others. Mindmapping tools are therefore very useful at this stage.
This architecture is then done on two levels:
- At the global level, determining the list of all screens and their logical links.
- At the specific level, by determining within each screen a hierarchy of information.
In the case of an E-Commerce site for example, on a product sheet, the user must be able to view the product, the price, find out about the characteristics of the object, personalize it if necessary, modify a quantity, and add it to his basket.
But what is the flagship argument of the product?
Its price? Its design? Its technical characteristics?
Depending on the answer, the design will be modified to highlight the best selling point.
It is then up to the UX designer to transcribe the relative importance of each of these interactions and to place them in a logical order.
For example: I first look at the image, then the price, then I learn more about the product and its promises, and only once “convinced”, can I proceed to the act of adding the item to the cart.
Another example: Is it important to access your user profile? To the General Terms & Conditions of Sale? If yes, when? Where do people usually find these items? etc.
All of these questions will be resolved at this point.
4. Wireframing
Then comes the stage of the first mock-up.
A Wireframe is a model that has the elements and information determined previously on a screen (mobile, pc, or other).
The wireframe is the real “map” of the application or site, and its framework, with spaces thought to be “filled” by the UI designer, as in the example below:
Traditionally, software such as Sketch or Adobe XD is used to produce this wireframe.
5. Think in terms of interactions
Finally, the UX designer will imagine how to interact with the previously created model.
Animations, movements of the hands (swipes) or of the telephone (accelerometer), screen transitions, in short, everything that will add a plus for the immersion of the user will be “scripted” by the UX designer so that in the end, the UI designer can create the necessary resources, and the coder bring that to life!
Learn more about UI: The visual design of a mobile or web application
With the User Interface, we complete the work initiated by the UX and enrich it with visual elements that will create the true personality of the application or website.
Therefore, we use the usual design elements:
- Fonts
- Colors and palettes
- Logo, shapes
- Respective sizes and ratios of all these elements
- Illustrations, photographs, images of all kinds
- Motion Design
The purpose of the UI is to attract and captivate the user’s gaze, to encourage them to stay on the page they are visiting to promote engagement.
In his work process, a UI designer can go through the following steps:
1. Creation of a moodboard
A moodboard is a selection of influences that will guide the inspiration of the project.
This moodboard can be composed of works of art, objects, sites, or already existing applications, colors, and tints, in short, anything that can be attached to the “spirit” that we want to give to the creation.
Moodboards can come from:
- the sample panel
- UI designer or artistic team
- the study of current trends and fashions
2. Proposal of graphic guidelines
Based on the ideas discussed in the brainstorming sessions and illustrated by the mood boards, the UI design will then propose the basis of a graphic charter which is composed as follows:
- Fonts: often 1 to 3
- Colors: often 2 to 5
- Shapes or patterns to decorate it all
To this graphic charter proposal, can be added that of a logo and/or application icon.
3. Implementation of the graphic guidelines and improvement of the tools provided by the UX
Once the graphic guidelines are validated, the UI designer will be able to use the wireframe developed by the UX designer in order to create what will be the final mockup of the application.
During this work, the UI designer will bring his expertise to perfectly calibrate the whole ensemble, so that the application is as harmonious as possible to the eye.
It will also embellish it with definitive graphic elements created for this purpose: icons, illustrations, animated content, etc. and thus give life to the whole project.
4. Test the reception of the public, again and again
In an effort to perfect the mobile application, the UI designer will, like his UX counterpart, seek the opinion of his test panel in order to ensure that the public welcomes the design.
Several waves of modifications can then be considered in order to obtain the most successful finished product possible.
