Table of Content
In general terms, what does it take to create a successful mobile or web application? The answer can be summarized in two basic goals: Provide a functional and productive user experience complemented by an aesthetically pleasing user interface.
These elements are best known as User Experience (UX) and User Interface (UI). The terms UX and UI are frequently used together, but each has a different objective. While UX focuses on functionality, UI focuses on the aesthetic details of the visuals.
User Experience
User Experience (UX) encompasses everything the user perceives and feels while interacting with a product, website, application, interface, or service. To be clear, UX is not a concept exclusive to digital platforms. UX involves everything that a customer can use or experience, such as an ATM, a coffee machine, a thermostat, a car’s instrument panel, a store, a coffee shop, or a stove, for example.
In the digital world, specifically, UX involves everything related to the user’s journey: navigation, functionality, user-error prevention, troubleshooting, necessary information for performing specific actions, etc.
User Experience answers questions such as:
- How is the product used currently?
- How might the product be used in the future?
- Who is using the product now?
- Who might use the product in the future?
- In what type of environment is the product used?
- Whom do we want to use the product?
- What are the main tasks?
- Are the tasks easy to perform?
- How many steps does each task involve?
- What possible errors could the user encounter?
- What improvements can be made to the process to make the product easier to use?
User Experience addresses tasks such as:
- Analysis of Technical Specifications/Requirements: Research and study of technical documentation (manuals, charts, parameters, etc.)
- Business Objectives: Competitor analysis, marketing definition
- Persona Analysis: User research, target audience definition, user journey
- Content Planning: Language specifications, texts, wording, style, format
- Navigation: Definition and design of logical and arbitrary navigation
- User Flows: Navigation flows based on type of user
- Feature Flows: Navigation flows based on functionality
- Prototyping for Testing: Script definition, prototype creation, usability, A/B testing
- Functional Wireframes: Wireframe creation for technical, documentation, testing, or development purposes
- Platform UX Standards: Analysis of platform navigation, components, etc., to meet user expectations
- Product Optimization: Constant feedback, iterative analysis, and evolution
User Interface
User Interface (UI) encompasses all the technical details involved in the visual aspects of an application or web page: how it looks, works and “feels” visually. UI relates exclusively to digital platforms since it involves only visual and graphic elements. A quality UI design meets the criteria required to make the interface appealing (aesthetically and compositionally) to the end user, including technical aspects of design such as colorimetry, editorial design, branding adaptations, and interactivity.
Furthermore, as platform standards may restrict UI, it is crucial that designers consider industry parameters in order to develop an interface that applies to various platforms.
User Interface (UI) is an important component of User Experience (UX). A negative UI could result in a negative UX.
User Interface answers questions such as:
- Is it readable?
- Does it have enough contrast in layout, color, and size?
- Is the brand represented accurately?
- Are the graphics meeting platform criteria?
- Do the icons communicate what they represent?
- How does color contribute to the effectiveness?
- How will it look on smaller devices?
User Interface addresses tasks such as:
- Editorial Design: Typography selection, font size, paragraph alignment, layout
- Branding Application and Adaptation: Analysis of branding guidelines and digital adaptation (including creation of new branding guidelines)
- Graphical Layout: Definition of component sizes, placement
- Colorimetry Analysis: Use of color analysis, palette definition, accessibility
- Illustration: Creation of support graphics
- Interactive Graphics: Transitions definition, graphic creation, interactivity definition
- Graphic Technical Specifications: Creation of guidelines for the development team
- Platform Technical Specifications: Review and implementation of platform guidelines to artboards, assets, etc.
- Layouts (Responsive Design)
- Asset Creation
- Asset Sizes
- Image Treatment: Image (photo) preparation, export to mobile standards and quality
- Accessibility: Review and definition of interface to consider accessibility options
- Graphic Design Psychology: Use of psychology concepts to achieve effective composition results that most appeal to users
- Platform Standards: Review and analysis of platform standards related to UI elements such as components, visuals, bars, icons, buttons, etc.
User Experience and User Interface Together
So, how do the UX and UI disciplines work together in the field? Well, everything begins with the user experience—UX leads the process.
First, product functionality and user research must be considered. UX is charged with developing a product that will serve business purposes, achieve the technical and functional objectives of the product, and meet the users’ needs.
Based on research and product requirements, UX helps to define the navigation architecture of the mobile application. After the ideal user experience is determined, UI will propose a visual process by which the interface will most appeal to the user.
UI will work within platform standards and restrictions to create graphics that, when combined, will work with various screens. With the conglomeration of these screens, UI will shape the mobile or web application based on graphic language objectives, branding guidelines, marketing requirements, etc.
After developing the visual components, UI must also define and create technical guidelines for the interface in order to help developers achieve proper implementation. This process includes asset creation for each platform/device, exports, and graphic specifications (color, placement, size, fonts, etc.).
Measuring Success
In the end, how can we know that UX and UI have worked together successfully?
The answer is found in the product.
Is the product useful, understandable, pleasant, scalable, and sustainable?
The shared goal of UX and UI should always be to successfully engage users and lead them to accept and prefer the product, application, or website.
As with any process, there is always room for improvement, so UX and UI should invite ongoing feedback from users and their environments so the products can be continually improved and better adapted to user needs and desires.
