UX and UI are not competitors

After we went through the history of user experience, that was first coined by Donald Norman in Apple and reviewed all sciences developed before UX. It’s time to dive into the User experience, its definition and why it’s important.

UX is a User-Centered design based discipline that studies the end to end experience of a user when using a certain device, tool or product.

2.1 UX is all around you

User experience is a discipline that is literally surrounding you. When using a device or any product, either you liked the experience or not, it’s all based on the user experience of the device.

You will encounter UX in cars when you are able to control your seat, the airbag for your safety, open door light and all those small things you may not notice but they actually affect your experience greatly.

One simple example for a bad UX, haven’t you ever pulled a door that should be pushed or pushed a door that is meant to be pulled! It’s a common bad experience that all of us had at least once.

To make it a good experience, people headed for putting a written label that indicates what the user should do whether pull or push.

Two main indicators that determine the good design from the bad one are discoverability and understanding.

Discoverability is the ability to discover what the actions you must take to accomplish your function when interacting with a certain device, where you will take those actions and how!

Understanding is how much you understand the device, what are the functions that this device is doing! And how to use it!

Once you are capable of doing those actions easily and on time, this would be a good design and a good user experience.

There are some designers who mostly concern about beauty, not utility, and that is what leads to the unsuccessful user experience.

As a result, you may, for example, find an elevator with a touch screen panel and you did your best to find a button to press but it has no sign where to press that button to go up or down or even close the elevator’s door.

Backing to doors problem, people had solved it by the pull and push labeling. This is called a signifier.

Signifier

The signifier is an important communication device that helps a recipient to use a device or tool.

The signifier is an indicator that specifies where or how to make certain actions in order to accomplish a task.

Examples of signifiers are push, pull, exit and direction arrows:

The signifier is a principle of interaction that Donald Norman has developed in his book The design of everyday things.

Another principle we will talk about is the Affordance.

Affordance

Affordance is the properties of a certain object and what the actions we have to take in order to interact with it.

Every object has its affordances that help users do something. For examples, we use chairs for sitting and cars for driving.

Feedback

When you push a button in an elevator and it’s colored to red when a microwave makes a sound that notifies it has finished heating food, and also the dishwasher when finishing its task. All of these actions are feedbacks.

Feedback is an action the device takes to communicate a result to the users. This feedback would be immediate as in the case of elevators or taking time as in case of microwave and dishwashers.

Conceptual Model

The conceptual model is an explanation of how a device is working and how to use it. The files, folders, and icons you see displayed on a computer screen help people create the conceptual model of documents and folders inside the computer.

The conceptual model will help you using new devices that are similar to an old one you have used before.

Everyone has a different conceptual model when using a device or a product. It depends on the mental model of that person. and that means a person could have many different mental models for the same device.

Every day we encounter new objects, these new things are sometimes similar to ones we have used before, others are completely new. These principles of interactions enable us to use and interact with those new objects and devices.

2.2 What is UX design

UXPin defines UX as a discipline that focuses on designing the end to end experience of a certain product.

User experience studies all the aspects in which users interact with a product. Every time you interact with a product, you are experiencing that product. Is it usable and accessible! What do you feel when using that product! Do you find it useful! Does it add value to your knowledge!

All these questions define the whole experience of the product and determine whether it is good or bad user experience.

Web design, for example, is all about UX, by identifying your users, their goals and motivations, you then create the experience that goes with your customers and your brand and also the experience that strengthens both of them.

But how to gain the best user experience for your users!

It depends on three items: Look, Feel and Usability.

Reference: Interaction design.

User experience

Look

It's the appearance that users will see and interact with. It also how your product or website looks like and whether it will express them or not.

Feel

UX depends deeply on the feeling. Basically, UX is the abstract feeling people get when using a website.

Usability

It's how well the product or website performs to serve its users and their goals. How it works and how usable it is.

As Steve Jobs once said:
“Design is not just what it looks like and feels like. The design is how it works.”

User experience aims at improving customer satisfaction and loyalty, ease of use and customer pleasure. It also aims at creating a successful experience based on what values your product add to users.

As we mentioned, UX is all about understanding your users, their goals and behaviors. Users are in the heart of UX.

When designing experience, you basically solve problems that encounter your targeted audience based on their abilities, how they think, how they interact with systems and their context. UXPin has developed a methodology for identifying user’s problem called C-P-S hypothesis.

2.2.1 C-P-S hypothesis

The key to success is listening to users. There is nothing more crucial to the success of any business than having an actual conversation with customers.

C-P-S hypothesis is a unified methodology that describes any product. It should be the startup of any business.

Firstly, you have to identify your customers, understanding their behaviors. Determining problems they encounter is the second step. And finally, finding solutions to their problems based on their context.

User Experience is about solving problems your customers have.

After conducting your search about this hypothesis, put it in a sentence. For example:

“People who are in need of implementing IT services. Everyone who needs web design, mobile application or branding services. Any person already has a business but in trouble of not having a marketing partner.

2.3 What is UI

User Interface is everything a user can see or touch. the user interface is anything a user can interact with visually when using a computer or software program. It determines the aesthetic sense of a web page based on typography, strokes, colors, and shadows.

The user interface also consists of interface elements that help increasing aesthetic feeling such as: according to Usability.gov.

Input Controls

Text forms, dropdown lists, checkboxes, list boxes, buttons.

Navigational Components

Breadcrumb, slider, search field, tags, icons.

Information Components

Tooltips, icons, progress bar, notifications, message boxes.

UI and UX are not competitors

Both of them are important elements that have to work together to best come up with solutions, these solutions help to create a good experience and as a result delightful users.

As mentioned before, all the elements, that the user would interact with, compose user interface (UI) whereas User Experience is about how the site works and how the user feels like when using it.

UXPin put it in one sentence .. UI is the vehicle, but UX should drive.

In the coming chapter, we will dive into the user interface. Reviewing what the best ways to design different site’s pages are.