The ABCs of UI design to seduce 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 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.

Indeed, 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 notions are part of a single digital marketing strategy.

How does UI contribute to user-centered design, and therefore to UX? What's the difference between UI and UX?

Ladies and gentlemen, to create or optimize your web product, in line with your target audience's needs, your brand values and your digital strategy...

... we'd like to introduce you to UI, the emerging part of UX:

See all software Marketing

What is UI?

UI stands for User Interface, but what exactly is it?

The interface is the visible part of the machine for humans, the device that enables the user to communicate with the product.

The user issues commands, which the machine responds to by clicking on links, menus or 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 isn't just about aesthetics - although that's very important - but rather functional design, optimizing aesthetics for efficiency and user emotion.

For optimal web performance, UI involves :

• content placement,
• navigation
• menu positioning,
• the choice and style of images, animations and videos,
• graphic environment: choice of colors, typography, buttons.

It's a cross-cutting issue that touches on web design, to meet marketing and brand communication needs (storytelling).

Dieter Rams, a renowned UI designer (at Braun) defines the rules for user-friendly UI design. Interface design must be :

• innovative
• useful,
• aesthetic,
• understandable,
• unobtrusive,
• honest,
• durable,
• attentive to detail,
• minimalist,
• environment-friendly (by being smart, it consumes little power, especially on servers).

Examples of mobile UIs on uxplanet.org :

Differences between UI and UX

The notion 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, UI is form, content is content, and UX is the perfect equation of form and content.

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 structures, has emerged with the growing 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 customer (or employer) 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.

Among the necessary qualities: empathy, to put oneself in the user's shoes, and graphic skills (illustration, motion design, 3D) to help the customer project himself, and ultimately adopt the product.

UI trends in 2020

To sell your product, you need to rely on UCD, or user-centered design.

This is a web design approach that focuses on the needs and expectations of end-users.

Personalization

How else can you be user-centered?

© graphiste.com

Minimalism

Less is more : page loading times are faster, for a user who's 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

Project genesis

First and foremost, you need to start with :

• market research (benchmarking), in particular to understand the habits, needs and behaviors of your target population (via interviews);
  
• a graphic watch, on UI trends: sites such as Pinterest, Dribbble, Behance or Awwwards are appreciated at this stage for thinking about the design of the visual identity;
  
• reading the specifications and specs (customer requirements) communicated by the Product Owner, in charge of overseeing the web project;
  
• a study of the site or app tree structure;
  
• an ergonomic audit, if the web product already exists. The UI designer can, for example, use software such as hotjar to create a heat map: the principle is to detect the hot zones on the page, where visitors linger, in order to understand the user path.

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, i.e. a very simple pre-model with the content blocks and spaces expected on the application, without any aesthetic considerations.

© E. Renaux

2) The UI designer then proceeds to create the wireframe, a functional mock-up showing in greater detail the zones and components of the user interface.

He or she generally uses traditional paper and pen, or software such as Balsamiq.

wireframe © twitpic.com

3) The next stage is the creation of a more advanced model, also known as a mock-up, produced by a graphic artist to concretize 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 for prototyping. The interface will be tested in part by users and/or investors, to gather final feedback before product development.

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 enables :

• optimize ergonomics,
• understand the software and application development required,
• simulate how the website will function a priori, according to the initial objectives,
• validate graphic elements,
• estimate development time and costs.

Throughout the project

Finally, to keep track of project progress, from design to iteration tracking and customer approval, the UI designer uses a project management tool featuring a Kanban board:

Trello

See all software Marketing

To win over 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 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 do some user testing.

How will you make the difference?