The ABCs of UI design to win over your users
What is UI? To attract your customers, get them to adopt your product and keep them loyal, the user experience, or UX, is the key to focusing your efforts on differentiating yourself from the competition and satisfying your target audience.
But did we say we'd be talking about User Interface? Not User eXperience! Oops, spoiler alert.
Whether your product or web project is a website, a mobile application or online software, we can't explain what UI is without talking about UX, because these two concepts are part of the same digital marketing strategy.
How does UI contribute to user-centred design, and therefore to UX? What is the difference between UI and UX?
Ladies and gentlemen, to create or optimise your web product in line with the needs of your target audience, your brand values and your digital strategy...
... we'd like to introduce you to UI, the emerging part of UX:
What is UI?
UI stands for User Interface, but what exactly is it?
The interface is the part of the machine that is visible to humans, the device that enables the user and the product to communicate with each other.
The user issues commands that the machine responds to by clicking on links, menus and buttons, without the need for coding.
The UI is therefore the showcase that hides the complexity of the technology while allowing the user to operate it simply.
The challenges of UI design
As you can see, UI design is not just about aesthetics, although that is very important, but rather about functional design, optimising aesthetics for efficiency and user emotion.
For optimal web performance, UI involves :
- content placement
- navigation
- the positioning of menus
- the choice and style of images, animations and videos,
- the graphic environment: the choice of colours, fonts and buttons.
This is a cross-cutting issue that touches on web design, to meet the marketing and communication needs of the brand (storytelling).
Dieter Rams, renowned UI designer (at Braun) defines the rules to be respected for a user-friendly UI design. The interface design must be :
- innovative
- useful
- aesthetically pleasing
- understandable
- unobtrusive,
- honest,
- durable,
- attentive to detail,
- minimalist,
- environment-friendly (by being smart, it consumes very little, particularly in terms of servers).
Examples of mobile UIs on the uxplanet.org website:
Differences between UI and UX
The concept of User Interface is defined at the same time as that of User eXperience, because the former serves the latter.
Yes, the interface contributes to a good customer experience, among other things...
In other words, the UI is the form, the content the substance, and the UX is the perfect equation between substance and form.
UX is the result of the emotions generated when interacting with the brand or product.
In short, it responds to a strategy based on customer service and emotional intelligence, to achieve customer satisfaction and turn them into brand ambassadors.
The UI contributes, in part, to achieving these objectives.
Agence LunaWeb
The role of the UI designer
The profession of UI designer, sometimes UX-UI designer in smaller organisations, has emerged with the increasing graphic and interactive complexity of web pages: responsiveness (adapting pages to the size of the device used), animation, augmented reality, etc.
In short, the UI designer :
- studies user paths, ergonomics and information architecture ;
- takes into account and responds to the client's (or employer's) requests;
- translates them for web developers;
- designs simple, robust, aesthetic and secure interface models;
- selects the best tools and the best graphic and interactive components.
The necessary qualities include empathy, to be able to put yourself in the user's shoes, and graphic skills (illustration, motion design, 3D) to help the customer to visualise themselves, and ultimately the customer to adopt the product.
UI trends in 2020
To sell your product, you need to rely on UCD, or user-centred design.
This is a web design approach that focuses on the needs and expectations of end users.
Personalisation
How else can you be user-centred?
graphiste.com
Minimalism
Less is more : page loading times are faster, for a user who is always in a hurry.
Placepull
Animation
Micro-interactions improve user engagement.
e-commerce example © uxplanet.org
Augmented reality
Projecting is adopting!
ARKit by Ikea
Neumorphism
When 2D flat design meets subtle, minimalist realism.
uxdesign.cc
The UI designer's toolbox
At the genesis of the project
Before anything else, you need to start with :
- market research (benchmarking), in particular to understand the habits, needs and behaviours of your target population (via interviews);
- a graphic watch on UI trends: sites such as Pinterest, Dribbble, Behance or Awwwards are useful at this stage for thinking about the design of the visual identity;
- reading the specifications and specs (customer requirements) provided by the Product Owner, who is responsible for overseeing the web project;
- a study of the tree structure of the site or app;
- an ergonomic audit, if the web product already exists. The UI designer can, for example, use software such as hotjar to produce a heat map: the principle is to detect the hot zones on the page, where visitors linger, in order to understand the user journey.
Hotjar
A design sprint, a creative method inspired by the agile method and design thinking, can also be used to start from a problem and imagine a scenario to reduce the risks and uncertainties surrounding an innovation.
During interface design
1) The Product Owner, or UX designer, who has no graphic skills, provides the UI designer with a zoning plan, i.e. a very simple pre-model with the content blocks and spaces expected in the application, without any aesthetic considerations.
© E. Renaux
2) The UI designer then draws up the wireframe, a functional mock-up showing in greater detail the areas and components of the user interface.
They generally use traditional paper and pen, or software such as Balsamiq.
wireframe © twitpic.com
3) The next stage is the development of a more advanced model, also known as a mock-up, produced by a computer graphics artist to give concrete form to the graphic elements, or by the UI designer himself if he has illustration skills.
Several iterations (or versions) are produced, depending on feedback from the customer or employer.
Software references include Figma, Sketch and Adobe XD, as well as After Effects, Principle and Framer for motion design and 3D.
4) Finally, it's time to move on to prototyping. The interface will be tested in part by users and/or investors, to gather final feedback before the product is developed.
The InVision prototyping software is used here to carry out navigation tests by linking the JPEGs of the mock-up together, thus simulating the actual operation of the web pages interactively.
The prototype allows you to :
- optimise usability,
- understand the software and application development required,
- simulate how the website will work in advance, according to the initial objectives,
- validate the graphic elements,
- estimate development time and cost.
Throughout the project
Finally, to keep track of the progress of the project, from design to iteration monitoring and client approval, the UI designer uses a project management tool with a Kanban board:
Trello
To seduce your users, take care of your UI
The interface is what the user sees first, and surfing the web is an experience in its own right.
You have an emotional card to play, a special relationship to create with your prospects, who are increasingly demanding and volatile.
If your content and your offering are to meet their expectations, it goes without saying that a well-designed, intuitive shop window is the key.
The secret: put yourself in your target audience's shoes and carry out user tests.
And you, how are you going to make the difference?
Article translated from French