Introduction to user experience design
Tags: beginners, design
Published: 2020-01-28 16:24:29

---
title: Introduction to user experience design
published: true
description: A brief introduction to user experience design
tags: beginners, design
series: FrontEnd Development Zero to Hero
---
There is a high chance you've stumbled on a website, and you are like &mdash; _Wow! This is beautiful!_, this means the _user interface_ designer did a pretty good job. Then you proceed to use the said website, and you are like &mdash; _Are you kidding me? you are supposed to show me this and not that_, you might hasten to close the page and look for a similar website. This means the _user experience_ was not taken into greater consideration.

When we talked about [user interface design in the last post](https://dev.to/ziizium/introduction-to-user-interface-design-4aho), we made it clear that it was about __building the user interface for the user__, _user experience_ is about __making the interface usable and to a greater certain extent enjoyable__ to the user by meeting certain expectations.

We'll take a general overview of user experience by giving some real-world examples then we'll take about _user experience_ as related to web design and development.

<hr>

Take a look around you, __everything is designed__ from the railways, parking garage, airports, and the buildings. When the _user experience_ is not good for any of the mentioned examples the user will complain and if they have a choice, they will gladly opt for it. In reality, you might not call a _building architect_ or an _engineer_ a _user experience_ designer but, if you take a close look at what they do, you might change your mind.

The next question you might ask is: What is _user experience_ design, and how is it related to UI design?

Historically speaking user experience dates back to a pretty long time, but __we are concerned about its history in Web design and development__.

The term _"user experience"_ was coined in a presentation by usability expert Donald Norman in the '90s. Over the years the field of _user experience_ design (abbreviated as __UX__ design) has gained traction in web development and currently, __the name is used interchangeably with UI design__. Now you might ask: what is the difference?

The difference is simple, and it goes as thus: When a UI designer designs a beautiful and stunning interface, a __UX designer ensures that the interface is actually usable__. That's it.

__In application development, both classes of designer work together to ensure the usability of the application__. The UX designer has one main job &mdash; __research__. The research includes everything that will make the product (application) a successful one from _user testing_ to _competitor analysis_ (if there is a similar product in the market).

There UX designer also ensures the UI designer follows the [recommended guidelines](https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb) when designing the interface. The guidelines include but not limited to:

* User control and freedom
* Error prevention
* Flexibility and efficiency of use
* Aesthetics and minimalist design
* Help and documentation

Let's have a look at some examples.

Take a look at the following mockup:

![A website mockup](https://dev-to-uploads.s3.amazonaws.com/i/ydidifp7oua6prz8i6oj.png)

Most users are used to this layout on their desktop computers which are the _website name on the left_, the _search form on the right_ with navigation links between them or below. Any designer that deviate from this approach should have a pretty good reason.

Now take a look at the following image which is a __big no to usability__.

![A website mockup](https://dev-to-uploads.s3.amazonaws.com/i/djbf3ist38o5f5qkihat.png)

__Most internet users access the web from their mobile devices__ (or smartphone), the UX designer also ensures that the application is designed with this category of users in mind.

Compare the layout given below:

![Smartphone layout](https://dev-to-uploads.s3.amazonaws.com/i/bjw2j86hq6i5t6mcyzpv.png)

The first _layout_ is user-friendly, but the second one is not because the user has to click and zoom to click the navigation links.

These examples are basic things that have to be taken into consideration when you intend to deliver a good user experience.

The _application flow_ is another thing to factor into the equation when you are designing, take for instance you are designing a banking application you should know if a user transfer funds they'll expect to see the _Transfer successful_ or _Error in transaction_ and not a _blank screen_ nor redirection back to the application's homepage.

User experience design is a multi-faceted field comprising so many things mostly theoretical in nature before the practical application, and we've barely scratched the surface here therefore further reading is required. Take a look at the following resources:

* [The Difference Between UX And UI Design - A Layman’s Guide](https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/)
* [What You Should Know About User Experience](https://theblog.adobe.com/what-is-ux-and-why-should-you-care/)
* [What Does a UX Designer Actually Do?](https://theblog.adobe.com/what-does-a-ux-designer-actually-do/)
* [User Interface Design Guidelines: 10 Rules of Thumb ](https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb)
* [UX Designer Job Description & Template](https://www.designerhire.com/ux-designer-job-description)

<hr>

Our next topic is another step towards designing a usable and accessible website and that is _web usability and accessibility_.

_Edited September 5, 2020: Grammar fix._
_Edited March 23, 2021: Grammar fix._
_Updated March 23, 2021: Added "UX Designer Job Description & Template" to the list of resources._