By Helga Moreno from Onextrapixel – Web Design and Development Online Magazine http://bit.ly/1mP6BYQ

Do you know that User Interface (UI) and User Experience (UX) are not the same concepts? Surely, they are closely connected, even mutually penetrated and rarely exist without each other. Would you like to study the differences between UI and UX design in detail? Read on and dig in.

We believe that it is impossible to become an expert designer without a strong knowledge of both terms. We promise that some definitions will seem fun to you; some of them will seem serious and in-depth. The info you are going to read is vivid and informal as we have based it on real web developers’ thoughts and expressions. We wish you an enjoyable reading.

The Difference Between UI and UX Design

The definitions

Let’s start with definitions as it’s always easier to proceed when you know exactly what you are talking about.

UI

The user interface is the space where interaction between humans and machines occurs. The goal of this interaction is the effective operation and control of the machine at the user’s end, and feedback from the machine, which aids the operator in making operational decisions. In other words, a user interface is the system by which people (users) interact with a machine. The user interface includes hardware (physical) and software (logical) components. User interfaces exist for various systems, and provide a means of:

Input, allowing the users to manipulate a system;

Output, allowing the system to indicate the effects of the users’ manipulation.

The main goal of human-machine interaction engineering is to produce a user interface which allows to easily (intuitively), efficiently, and enjoyably (user friendly) operate a machine in the way which produces the desired result. Actually, it’s great when the operator needs to provide minimal input to achieve the desired output, and also that the machine minimizes undesired outputs to the human.

With the increased use of personal computers, the term user interface is generally assumed to mean the graphical user interface, while industrial control panel and machinery control design are more commonly referred to as human-machine interfaces.

Types of UIs
There are lots of UI types, but we will name just the ones related to computers as there is no need to clog your brain with the information you might never need.

1. Graphical user interfaces (GUI) They accept input via devices such as a computer keyboard and mouse and provide articulated graphical output on the computer monitor.
2. Web-based user interfaces or web user interfaces (WUI) They accept input and provide output by generating web pages which are transmitted via the internet and viewed by the user using a web browser program. Newer implementations utilize Java, JavaScript, AJAX, Adobe Flex, Microsoft .NET, or similar technologies to provide real-time control in a separate program, eliminating the need to refresh a traditional HTML based web browser.
3. Administrative web interfaces for web-servers Servers and networked computers are often called control panels.
4. Touchscreens These are displays that accept input by touch of fingers or a stylus. Used in a growing amount of mobile devices and many types of point of sale, industrial processes and machines, self-service machines etc.

User Interface Design is the actual design of the interfaces that would best facilitate for great, seamless, pleasurable and rewarding interaction between the user and your product. Observing user behavior and making informed decisions based on data collected during your observation is a large part of the UI design work. UI design feels more like a craft, since you are actually building something beautiful and tangible using skills, knowledge and techniques acquired through experience. Some UI designers apply tools like Photoshop, Illustrator, Fireworks, Cinema 4D, ZBrush and lots of pen and paper to get things done. You are unlikely to become a good UI designer without having a grasp on what UX is.

UX

User experience involves a person’s behavior, attitude, and emotions about using a particular product, system or service. User experience includes the practical, experiential, effective, meaningful and valuable aspects of human-computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency. User experience may be considered subjective in nature to the degree that it is about individual perception and thought with respect to the system. User experience is dynamic as it is constantly modified over time due to changing usage circumstances and changes to individual systems as well as the wider usage context in which they can be found.

User experience design starts with a solid understanding of your user-base, generating ‘personas’ for the dominant character types within your user-base, then setting specific requirements for the project at hand. Sort out your information architecture through generating a data inventory and organize a solid information hierarchy which would help a ton once the prototyping process begins. Choose the best prototyping method that would be both cost-efficient and would allow you to gather feedback and reiterate in a fast and easy fashion. Prototypes could be horizontal (broad feature-set, less depth functionality-wise), vertical (deep functionality, narrow set of features), T-prototypes (much of the design is done at a shallow level while some features are implemented in great depth) and local prototypes (used to come up with design alternatives for particular interaction model). After choosing an appropriate prototype the iteration process begins. This usually varies greatly between working on software products, services or industrial design projects.

Thanks to Wikipedia and ask question sites, now we know exactly what UI and UX are. As you see, these are two absolutely different notions and each professional designer should know that the gap between them is as large as the Grand Canyon.

UI and UX design – the differences

In fact it’s rather difficult to segregate the two concepts as they are very closely related. A UI is often a part of UX. However, a UX can exist even without a UI. It seems to us as if we speak like heroes from Lewis Carroll’s “Alice in Wonderland” book. Riddles, mind games, word juggling… But in fact the answers are not as complicated as they seem. Below you will find a list of differences between UI and UX design the way professional web developers see them.

Before we enumerate the differences, let’s firstly highlight a few similarities between “UI Design” and “UX Design”

1. Both could be applied to (almost) any product (category type).
2. Both refer to solving the problem statement related to the “design” aspect of the product.
3. Both are targeted at the user’s comfort.

And finally, the promised differences
A UI is… (Gosh, it sounds exactly like the text hidden inside the bubble-gum “Love is…” pack):

• UI design deals with the specific user interface(s) of a product or service
• UI can be a component of UX, but many user experiences have nothing to do with Uis
• The design of a UI will be heavily informed by the UX design
• UI is responsible for the look of the website
• UI is a tool, a certain point of interaction, a medium of communication between a person and a system
• UI describes how users view, navigate and interact with a particular product – including everything the user sees and interacts with on the screen and uses as a device
• UI shows how beautiful an app you are going to interact with is
• UI design shows how the user interface would look
• UI is what you see (visuals)
• UI is how elements appear on a website
• UI is the control panel
• UI is a byproduct of UX design
• UI = output
• UI designer focuses on designing the user interface, often a screen, touch screen, keyboard and mouse
• UI is more tactical in nature
• UI design is a real thing, which can be designed based on the rules/laws of typography, architecture and logic
• User interface design is the design of websites, computers, appliances, machines, mobile communication devices, and software applications with the focus on the user’s experience and interaction
• UI is a point of interaction
• User interface design is the part of the product that faces the user when he looks at the site
• When designing a user interface, one considers layout, display, flow, look, etc.
• UI is part of the discourse of software architecture
• User interface is the front-end “look and feel” of a product
• UI design is the process of making the actual interface of a product
• Interface is the point of contact with a product
• UI is a skin, shape and color
• UI is design elements, tech, wireframes, etc.
• UI design focuses on optimizing the interface of a digital product. It uses typography, color and layout to create the best possible user experience on an individual web page or app screen
• UI is a part of the end product
• UI design is the bits on the screen, how they look, etc. The UI implements the UX design
• UI design is the design of the user’s interaction with a single artifact. It has no inherent good/bad guiding concept and at worst might be merely functional to allow a user to perform some task. At best it might produce a good experience. But UI design only fails if a user can’t perform a task that the UI was designed to support
• UI design is pixels
• UI design is a component of UX design
• UI is typically a combination of visual design (the look and feel) and the interaction design (how it works)

Image credit: Bigstockphoto

Are you ready to take the right-hand fork in the road and see what they’re saying about UX?

• UX can encompass a wide range of disciplines, from industrial design to architecture to content
• UX design will be less informed by the UI
• UX design shows how convenient the app is for the user
• UX design deals with the overall experience associated with the use of a product or service
• UX is the result of the combined direct and indirect interactions with a brand
• UX is responsible for the functionality of a website
• UX can be improved by improving the UI
• UX design deals with the overall experience associated with the use of a product or service, which can include a UI
• There are many other components that play into the experience, therefore, UX design is a more holistic view of a product’s experience from the customer’s perspective
• UX design is emotions
• UX is what you remember
• UX design is the design of a whole experience from the point of view of the user to produce some affect or emotion. As such it determines and constrains the UI design of anything that the user might interact with, and it should result in good UI design
• UX design is how the program works, how the humans interact with it, the information architecture, usability, etc. Based upon the UX design, the UI designer renders those designs
• UX is what a user feels about what he/she saw when going on a website
• UX is the outcome of using the product
• UX design is an ‘umbrella’ term. It covers a range of processes and skills that shape a user’s experience of a digital product. These include: research, usability, information architecture, interaction design, visual design, content
• UX is the result of traversing/interacting with your UI
• UX is emotion, feeling, experience
• UX is the big picture, the blend of design, usability and architecture
• UX can be improved by improving the interface. But there is more to UX because there is also a “flow” of doing things
• UX is the experience resulting from using a product. UX can be affected by other actors beside the UI, but it cannot be designed per se. For instance, having to scroll all the way down to add an answer onsite is a UI decision that results in bad UX
• UX is a combination of all elements in any document website including color theory and navigation that make up what an end user experiences as a whole. Though many UX designers can code, they are more or the creative director of a project
• User experience is how customers interact with the product across specified and measurable (quantitative and/or qualitative) categories: ease of use, navigation, task completion, branding etc.
• User experience is love
• UX is part of the discourse of HCI. It is a reflection on what it’s like to be a user – the user’s perspective
• When designing a user experience, one considers the psychological state of the user as they attempt to achieve a task
• UX is making the button big enough so that the end user saw it at first glance
• UX is how they feel when they look at the site
• UX is the interaction itself
• User experience design is any aspect of a user’s experience with a given system, including the interface, graphics, industrial design, physical interaction, and the manual
• UX design is the new term for so called usability – a buzz word, which many people use to make themselves feel better/sound smarter. Also, it helps people who don’t know a thing about UI to get in a way of UI designers
• UX is more strategic
• UX takes a wider approach where you consider other factors than the UI and computer. Often you also look at cultural factors, organizational factors etc. So you are designing the whole user experience – not just the UI. The whole user experience can e.g. involve calling customer support, getting a letter with snail mail etc
• UX = input
• UX is how it makes you feel
• UX is the decision where to put elements based on priorities
• UX design is how should a user experience after using the interface
• UX is the overall experience a user has when working with a product, extending beyond the user interface. In addition, User experience includes many other things that users do in the course of performing in their natural routine and environment, including interactions with other people, other systems, and their physical surrounding. Thus, the user experience can be “expressed by the user’s enjoyment, satisfaction and even social aspects of working with products.”
• UX is the overall experience
• UX is a combination of various interfaces, with UI being an important one among them
• UX thrives to address everything perceived by a person

We hope that you have enjoyed many of these definitions as some of them are really fun, but what is more important – they are straight to the point. We are absolutely sure that as of the present moment, you’ll never be confused with the terms.

Conclusion

All of us have already understood that a UI and a UX are not the same concepts; however, they are to be combined for a greater purpose – to interest the users in your product or to convey certain information to them. The intrigue is that a UX can exist and work very effectively having a poor UI. For example, you can have an application with a stunning design that is hairy to use (good UI, bad UX). You can also have an application that has a poor look and feel, but is very intuitive to use (poor UI, good UX). We hope that now you understand the difference between these interrelated concepts and can clearly imagine a huge gap between their meanings.

Nevertheless, for justice sake we would like to mention the following. Current UI design trends, tendencies and technologies are being developed with one and the same aim: to make online UX better, easier and more intuitive. In other words, UI developers finally began creating for people, so it’s safe to say that today’s user interfaces are aimed on excellent UX. So, if you want to create a stunning app, you should learn the principles of both (UI & UX) design types.