What's the Difference Between UX and UI Design?
In the IT world, User Experience Design (UX) and User Interface Design (UI) are terms that are often used interchangeably. They both relate to the design of software, websites and applications, so the distinction can be blurry.
What fits under UX?
User Experience Design is about understanding your users. It’s figuring out who they are, what they are trying to achieve and what is the best way for them to do that. It answers the question of ‘what value are we providing to the user?’ and ‘what’s the best way to do that?’ UX concentrates on how a product feels and whether it solves the problem for the user.
UX usually involves tasks such as:
- Researching user behaviours
- Creating personas
- Determining user stories
- Drawing user flows and wireframes
- Usability testing
(Information Architecture and Content design are sometimes grouped under UX, but are better considered as a separate role.)
What fits under UI?
A User Interface is often the final product of going through the UX process. It’s the actual screens, the set of combined elements on page that users directly interact with. UI design concentrates on how the product looks and is laid out.
A UI is made up of:
- branding and style guide
- particular graphics and imagery
- layout and visual hierarchy
In a nutshell
UX is the action: what the user wants to accomplish.
UI is the tool used to accomplish that action.
Why do I need both?
UX and UI are part of the same process to create the best possible experience for the users.
It’s often tempting to concentrate solely on creating a sexy interface, to make something flashy and assume that good usability is the same as looking good, but UX is needed to build the foundation for a good UI. Alternately, UI is often the end deliverable of the UX process. Without a good interface the usefulness of great function won’t have a place to shine through.
Users want engaging experiences that save them time and frustration. The quality of the experience reflects on the trust that users put in a company and their overall perception of it.
A potential workflow example
A company is creating a new web application: A problem to be solved and a vision for the project have already been defined and marketing research has been done to identify potential customers.
The UX work begins with some user research: looking at the market and what is unique about those users. User profiles are created to represent typical users of the application and then tested against actual user data.
The UX designer then creates user stories, based on the goals and needs of the users identified in the profiles. These are then built into user flows (diagrams of how the user will interact with the application).
The UX designer will then create some low-fidelity wireframes to indicate where functionality fits in the application and how the user will interact with it. These designs will be user tested and iterated many times.
Now, the UI designer comes in to work on the actual screen design, determining layout, look and feel and use of branding. The output will be high-fidelity mock-ups and a style-guide.
The UX and UI designers will work together to finish the design and continue testing until a suitable final product has been created.