How a good UI becomes a good UX

Photo by Tirza van Dijk on Unsplash

Last year (March 2017) I’ve made a design talk at GDGLisbon for an audience mostly composed by Developers.  (https://www.meetup.com/gdglisbon/events/238243199)

Mission: Trying to clarify some misconceptions about Usability, User Experience, User Interface, and also the importance of each one of these elements to build great products.

Good UI vs Bad UI

What are the conceptions behind a Bad UI or a Good UI? Is it Bad when Ugly? Is it Good when Beautiful? Is it just a matter of opinion? What makes us prefer one website over another?

Common misconceptions part I

If an interface has a good visual design it will be simple and easy to use

1st: Craigslist

Craigslist’s Homepage

Maybe we all agree that this is a poor interface just because there’s nothing catchy or funny there. Not a lot of colors or even an image. But what’s the goal of this interface? What’s the major task of almost 60 million Craigslist’s users?
Craigslist is a classified ads website that has community forums and ads for hundreds of subjects like sports, services, jobs, housing…
The User’s goal there is trying to find the fastest way possible for what he/she wants. So these groups with a list of URLs are what users need to accomplish their goal.
Content is the most important element of the interface. Information architecture is the key.

2nd: Reddit

Reddit’s homepage

Another example of a nonappealing interface. The same questions I’ve asked above make sense in this example. In this case, we have Reddit, an aggregator of news and web content, a place where people can discuss any type of subject. The User’s goal here is to follow subreddits, the trending ones but also the ones they like the most, to read discussions and participate in them. Is that a bad UI? Reddit has 542 million monthly visitors (234 million unique users).

3rd: Facebook

Facebook is a particular example because everyone in the world uses it. No matter the culture, no matter the instruction, the age, or even the social stratum. We can agree that Facebook doesn’t have an attractive interface, but it works well for 1.86 billion monthly active users.

Aesthetics in Design

Aesthetics is the last priority on a product/service design

First, you have to create and design a consistent product.

UX role in the process of building a product

Getting in the User’s shoes and knowing how to better achieve their needs.

We can say for instance that the main goal of the UX process is to add value to a product by establishing an emotional connection with the final user/client.

On the other hand, Usability is an important step to achieve a Good User Experience.

  • The usability goal is to make an interface simple and easy to use.
  • Usability tries to minimize the user effort to complete a task.

We can say that both Usability and User Experience are essential to a Product’s success.

So at the beginning of any product we first should try to answer these questions:

1. What problem this product /service is trying to solve?

2. Who are my product/service users?

3. What are their (the user’s) expectations?

4. What qualities they value?

5. What do they expect?

6. How/ When they use the product/service?

When relating UX to an interface we can establish that the goal is to emphasise the ‘feels like home’ sensation.

Common misconceptions part II

If an interface is easy to use it has good user experience.

UI role in the process of building a product

User Interface Design is an important step to achieve a Good User Experience.

Visual (UI) Design is the use of imagery, color, shapes, typography, and form to enhance usability and improve the user experience.

How can we improve “the experience” ??

  1. by giving users visual feedback

Communicating the results of interaction shows the user that the interface has been updated with his action. This makes the user feels in control.

2. by giving elements some extra space

Because white space can make the content more discoverable and readable.

3. by using responsive layouts

…to avoid scrollable elements for example.

4. by using a good copy

Good copy uses the sense of humor sometimes.

Working on a good copy is important to a product because:

• UI can be warmer and less mechanical with a human tone in the copy.

• Good copy also could be used to guide and help the user.

• Good copy is conversational instead of being directive.

So, in the end:

Don’t rely on visual design alone to save a bad experience, but don’t ignore visual design!
Visual Design is the User’s first impression of your product.

Visual design can be the strategic differentiator that encourages users to value one application over another equally usable.


Originally published in Medium

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by 293,189+ people.


Leave a Reply