DEV Community

Arina Nasri
Arina Nasri

Posted on • Updated on

What is UI/UX and what makes a good UI/UX?

While texting a good friend the other day, I was telling her about what it was like being in a coding bootcamp and she started asking me many different questions. One of those questions was about UI and UX and the difference between the two, and honestly, I came to a blank. After this conversation, I realized I don't even know what UI/UX is.

So what is UI and UX? Is it the same thing? My research points to no.

UI

UI is a shortened term for user interface. UI is the point of human-computer interaction and communication in a device a.k.a, it's display screens, keyboards, mouse, and the appearance of a desktop. It is also the way a user interacts with an application or a website. (Churchville).

Image description

Let's take a look at the UI of the tumblr page I created when I was 15. As you can see, the page has a title, a home button, a message button, an archive button, and a theme button. Then on the bottom, it shows all the posts I have on my page. When a user looks at the page, they are able to click on a button and it should take them to what that button represents.

Image description

So for example, if the user clicks message, they can now send me a message (yay) and if they click home, it'll take them back to the home page with all the posts. My tumblr contains a very basic example of UI, however it does show an example of UI thats easily accessible and visually appealing (I hope). Any user on the site would know exactly what pressing home, message, archive, and theme would entail with little difficulty.

The important aspects of UI would include its navigation and layout, input and output controls, feedback mechanisms, visual design, accessibility considerations, error handling and recovery, consistency standards, and personalization and customization. Navigation and layout includes helping users move throughout the app or website without any complexity. Input and output controls deal with getting data from the user through an input and outputting it through the output device. Feedback mechanisms is similar to receiving confirmation messages when buying something online. Visual design and accessibility considerations is just as it states. Error handling and recovery is like "incorrect password" if someone enters one and consistency standards is keeping the same sort of layout throughout the application or website, such as having send, submit, and next buttons on every page. Finally, personalization and customization is the ability to personalize the UI to fit every user's needs and wants. (Collins).

Furthermore, what makes a good UI? According to Tom Collins, these are the main components.

  1. Keep your UI simple to use
  2. Every element should be obvious and discoverable
  3. Elements should perform as per the expectations
  4. Use proper alignment for elements
  5. Save your users' time by minimizing the number of tasks in every action but focusing on the main function
  6. Provide a help menu
  7. Always provide the next step

UI is an extremely important aspect of being a software developer. If you work for any company, you're going to have to incorporate UI into your application or website if you need to make one, and it is best practice to implement all of the aspects listed above.

UX

UX is a shortened term for user experience. Essentially, it refers to the feelings users experience when using a product, application, system, or service. It can encompass anything between how well the user can navigate the product, how easy it is to use, and more. (ProductPlan).

The differences between UI and UX is that UI is what the users sees and how they interact with the product, whereas UX is more broad and is more dependent on what the user does related to the product. (ProductPlan).

However, UI and UX do work hand in hand. You could have a UI that is very advanced and implements so many new cool features, but if the features aren't what the user wants or are too complicated to use, the user's experience will be negative and make them less likely to use or interact with the app. The same goes the other way; if the user finds an application or website that is visually appealing or is exactly the kind of app or site they want, but it is too hard to navigate or the buttons don't work, they won't use the application or website.

In conclusion, the best sort of application or website is one that uses UI properly, while also taking UX into account. it is important to know the differences between the two so that when making an application or website, you make it be the best it can be so more users become likely to use it.

Sources:
Fred Churchville https://www.techtarget.com/searchapparchitecture/definition/user-interface-UI
Tom Collins https://www.browserstack.com/guide/what-is-user-interface
ProductPlan https://www.productplan.com/glossary/user-experience/

Top comments (0)