Ever landed on a website with thousands of bits of information but not the answer to your question? A mobile application that wigs out? An interface with interspersed visuals? Or have you ever caught yourself admiring the design of a web or mobile application? Congrats, you have had a user experience! But what's behind this experience? What exactly is UX/UI? Let's find out in this article!
What is UX vs UI?
Digital transformation and UX vs UI: a little background
As digital transformation affects a growing number of businesses, it is becoming more and more central and necessary within companies.
Indeed, we use many digital interfaces on a daily basis, and the user experience (what we live when we surf on them) is paramount. As "customer centric" approaches are becoming fashionable, companies have to think about what we, Internet users, experience through their online interface, by putting us at center stage of their strategies! This is where UX and UI comes in.
And yes! A bad user experience will tend to cause users to become bored—or even let down the application. They may close it without ever returning.
While UX and UI may seem very similar, you'll see that this is not quite the case! One thing's for sure: the most important thing is to produce the most pleasant, enjoyable user experience possible.
What's a user experience?
As we've just seen, user experience is the experience we have when we surf on a digital interface. When we experience something, there are several "criteria" to consider:
- Our feeling: How do I feel surfing on this interface? Do I like the way things are presented?
- Our environment: Is the environment around me conducive to a successful user experience?
- Our need and motivations: What do I need? What information am I seeking?
- The interactions offered by the website or mobile application: When I press here, what does it do? What action will be generated?
The secret to providing THE best customer experience
UX design places a great importance in offering an accessible, graphically qualitative, functional, practical, and ergonomic interface! It must impel users to stay and discover every corner of the web or mobile application... but that's not all! It must allow them to quickly find the information they're looking for, display a strong and positive brand image aligned with a quality visual identity, and present original and authentic features.
What is UX design?
We speak of UX design (user experience design) to define the design of the user experience. By "design," we mean mainly the "conception" of the user experience rather than the visual creation.
The role of a UX designer will be to think, reflect and design not only the product—that is, the user interface—but also the user experience that results from it.
To create UX designs, we must reflect on users' expectations, needs, and potential desires.
We could even define UX design as a process composed of different steps and characteristics:
I. The research and analysis phase
1. Understanding the need: Conduct user interviews to identify their needs, define objectives, and understand user expectations.
2. Personas: Create typical profiles to identify the highlights of their experience, their goals, their frustrations, etc.
3. Use cases: Understand the specifics of each persona and how to solve any problems to create the best possible user experience. Questions to ask include: "How would different people experience this? How would they use the proposed product or service?" This way, designing the strategy is made easier.
4. Customer journey map: Trace the user's journey through the interface and ask: "How does the user experience begin? How does it end?"
II. The brainstorming phase
1. User flow: These are diagrams that reconstruct the different stages of the user journey, those that lead to the achievement of a specific objective.
Example: An Internet user is looking for a drink on the website of a supermarket.
Here's what its user flow would look like:
- User is landing on the home page.
- They click on the "drinks" category.
- They're redirected to the "drinks" page, where they can choose the drink they want to buy by clicking on the corresponding icon.
- On the page of the chosen drink, they enter the desired quantity (1 bottle for example).
- They proceed to their online shopping cart to pay.
- After entering payment details on the site interface, they're redirected to a payment confirmation page.
- Once the payment is validated, the tab closes.
2. Wireframe: For the UI designer, the "wireframe" is a model of what the user interface will look like. Thanks to this, the UI designer will be able to build the visual framework of the interface more easily.
III. The implementation phase: this is where the UI designer comes in!
1. Prototypes: The role of the UI designer is based on the creation of more or less representative and/or interactive models representing the ideas of the UX designer.
2. Front-end and back-end development: Once these mock-ups have been validated, it's the developers' turn to tackle the project and build the interface with the code.
IV. Reporting phase
1. User testing (usability reporting): once the product has been implemented, it is tested by real users who will provide their own personal feedback on the user experience they have had.
2. A/B testing (split testing): the UX team is also led to test different designs and their impact on users.
3. Analytics reporting: analyze the statistics from these tests (e.g. average time spent on pages, bounce rate...)
Beware, UX design does not stop at the monitoring or reporting phase. In fact, once the reporting is done, the UX team will go back to the brainstorming phase—then loop back to the final version of the interface: the one that will be officially put online to give users the best experience!
What is UI design?
As we saw previously, UI design is integrated into the UX design process. UI design is located in the implementation phase. This is the component where the UX designers' ideas and prototypes come to life.
When we talk about UI design (user interface design), we're referring to the design of the user interface—and thus the resulting aesthetic experience.
What's the UI designer's job?
The role of the UI designer is to focus on the graphic and visual aspects of the interface, or the elements users experience and interact with. For example, the colors and sizes of buttons make them more visible, attracts eyes and make us want to click them, and fonts give a special feel.
So what's the difference between UX vs UI?
As you can see from the diagram above from papdan.com, UX is like the hidden part of the iceberg!
While UI focuses on visual design: the whole part visible to the user's eye with...
- graphic design: icons, shapes, and images to give meaning to the user's actions
- colors of the interface, illustrations, buttons, and text
- typography: fonts and styles such as bold, underlined, and italics
- page layout: spaces between blocks, number of elements on the graphic interface, etc.
... UX represents what is called the "science of the user", so everything related:
- strategy
- understanding the user's needs
- creation of prototypes, scenarios, etc.
UX designer vs UI designer: key skills
Teamwork vs. independent work
UX designers tend to work with many people across different departments in collaborative activities that lead to reflection on the experience itself. UI designers work in a more "autonomous" way—even if they interact with the project manager and the UX designer.
Project scope
UX designers focus more on the big picture and the overall problem, whereas UI designers focus more on the details, finetuning the interface from top to bottom, and adding finishing touches to make the experience as pleasant and productive as possible!
Soft skills
- UX designers: listening, observation, patience, reactivity
- UI designers: creativity, precision, attention to detail
UX vs UI: conceptual and visual in symbiosis
While these two disciplines are quite distinct, UX and UI are complementary and unavoidable for creating an excellent user experience. Let's take the example of the UI designer who determines the size and color of the button. The UX designer, on the other hand, will define its utility.
This is why a large part of employers looking for a UX designer specify "UX/UI designer" to recruit an expert profile, capable of conceptualizing and designing the user experience.
By simultaneously demonstrating these two skills, professional UX/UI designers are able to create interfaces that meet the criteria of responsive design. Thus, they're able to create applications that are usable and accessible across all user interfaces—no matter what the screen resolution is.
UX vs UI design: trends and tools
What are the UX vs UI trends in 2021?
And yes, the UX UI world is also subject to the changing moods of trends!
What can we expect this time?
- No more bright colors: we leave room for sobriety with soft and relaxing colors.
- Goodbye bright mode, hello dark mode! In addition to being better for our eyes, dark mode is both elegant and modern.
- Welcome to bold, eye-catching typography. Web and mobile applications created in 2021 are full of them...
- Preferred minimalism: Only the most important elements are shown!
- Animations, animations, animations: we like when our pages move and make us dream.
And for your viewing pleasure, here is a compilation of the best examples of UX design:
On computer
On mobile
Which UX vs UI tools should I use in 2021?
- Adobe XD: an all-in-one rapid prototyping tool for creating wireframes, interactive prototypes, and facilitating the design of web and/or mobile applications
- Figma: collaborative prototyping tool where you can work online, remotely, live, and with several people
- InVision: another collaborative tool that allows teams and customers to not only directly place their comments, but also to view earlier versions of the prototype
- Zeplin: an interface simplifying communication between teams and making it easier to find your way around by automatically generating all the colors, fonts, sizes, etc. in a style guide
- Marvel: a solution that helps quickly create animated models in just a few clicks. The Marvel application is available on Android and iOS to test live models in mobile version.
- Maze: a very efficient tool for performing questionnaires and user tests remotely to generate detailed reports more quickly and easily
- Miro: a virtual whiteboard perfect for combining productivity and collaboration between product and project managers, designers, web and mobile developers, and marketing teams
UX vs UI: what conclusion?
If you still have any doubts about the distinction between UX/UI after reading this article, here's a brief summary to clear things up:
UX designers are responsible for the entire user experience and for understanding user's needs. They help find solutions to improve this experience.
UI designers enhance the look and feel for users by representing the ideas of the UX designer while facilitating use and accessibility of the interface, helping users understand how to use the interface and guiding them through it (with calls to action, for example).
UX vs UI: to go further
Want to keep learning as you work? Join our part-time product manager training and learn how to develop a product from A to Z! Designed in partnership with Productized.co, this intensive, hands-on program will have you up and running by the end of your training. Discover our Product Manager syllabus now!
