Code Bytes

UI and UX

By February 9, 2018 No Comments

“Let’s make this button pale red, centered, and CAPITALIZED, as well as apply shadow.”
vs.
“Do we even need this button?”

Let’s talk UI and UX

Since the beginning of time, we have been changing things based on how we can use them to achieve maximum productivity with minimum effort. Initially, we would use tools and systems exactly as intended, but in time, we would slowly improvise, changing the way we use these things or entirely abandoning them for something better, just like how your ex-partner slowly changed and dumped you because you don’t have a good UX, right?

The UI Designer

They build flashy, shiny, badass and awesome-looking user interface or UI (not all of them). They will make the website or application look good for sure. Margins and padding are cautiously placed. Colors are carefully selected. Even blank spaces between content are perfectly measured, but UI designers are neither concerned with how screens link to each other nor how someone interacts with a digital product. They don’t care about your user experience, your functionality, your feelings, your personality. So you’re good looking? Then you’re good! (We’re still talking about UI design, by the way.)

UI designers are responsible for designing each screen of the website or a product to successfully communicate with the user. They are also responsible for building a cohesive style guide and making sure that the design language applied across the product is consistent. They are more concerned about how the user feels when looking at the product than how the user feels when actually using the product.

The UX Designer

User experience (UX) designers’ primary concern is how the product feels. (Yes, they have feelings and don’t ask them about it. They’re kinda sensitive.) Also, they need to ensure that the product logically flows from one step to the next.

UX designers will list different possible solutions for a single problem and will refine and iterate to create the best user experience by doing in-person user tests. Another thing that will give a UX designer a headache is that there’s no single right answer for a given design problem. A right-handed person might use a product with ease while the left-handed struggles.

Why do we need both?

Imagine a website that looks good, amazingly good, like you, from font face, graphics to colors. Then you have to read a long message, BUT the website scrolls horizontally towards the right, and you have to scroll far back to the left every time you move to the next paragraph.

Imagine using Facebook (just like how you usually do during working hours), but all the text used are the same size and color, a dry black and white page with no life in it.

How about opening your favorite torrent application (that usually eats most of our internet bandwidth causing laggy and slow anime streaming) and checking for that download, say a movie, but you have to look for it in an ocean of other files you’re downloading? And there’s no search or filter functionality. Would you be able watch it immediately?

(P.S. I relate to most of this.)

The best UI will never be that good without a carefully thought-out UX. According to Kujala’s article in Interacting with Computers; UX Curve: A method for evaluating long-term user experience, a web designer should always prioritize the process of enhancing customer satisfaction and loyalty by improving the ease of use, usability, and pleasure provided in the interaction between the customer and the product followed by the look and feel, presentation and interactivity of a product.

A good UX should also backed up with a good user interface. A painter will never come up with a good masterpiece by just throwing paint in the canvas and hoping for it to look good. It has to be painted carefully.

The two should always work together in order to build the best digital product.

Let’s do it again

Fast forward to after successfully publishing a product. Eventually users might complain or compliment your product. You’ll realize then that your product may not be enough. You might also find out that some users are using the product without a problem but using it differently from how it was intended. Some users might also suggest or request a functionality that will make them use the product faster and easier. The feedback you’ve collected are the user experience you will want to analyze to further improve the product. This process could continue until your product no longer has room for improvement.

The Me Experience

If you don’t want to read this part, it’s fine. Feel free to move to the next article and miss the not-so-secret message I left in this section.

Web design to me seemed to be just a header followed by navigation and content, and then a footer at the bottom. Well, those were the days before Chromedia.

I learned that consistency is a must to follow to achieve good design. It’s a golden rule in design. To provide quality experience, it’s important to be consistent in both content and design of the product. Consistency is the biggest factor that separates a good user experience from the bad.

Less is more

Clutter is something every designer deals with, whether it’s for a client or their own product/website. A good user interface should maximize a product’s purpose by enhancing the focus on the content. Taking the extra time to make sure the right details are left behind will result in an effective and attractive product. This is one of the most beautiful lessons I learned from web design. It’s like looking good by removing all your fancy clothes and accessories, and then wearing the one you’re most comfortable in.

Whitespace

It’s just space, why should we care about it, right? Content on a page need room to breathe. I learned that giving more space will emphasize the content. Whitespace is good for attention. If you want the user to look at what’s essential, giving that content space is one of the easiest ways.

User First

this is the most important thing I learned. Designing in your favorite graphics app is not special. Many graphic artists can do that, but creating design that every user will understand is something. When we say User First, it means designing the product based on the user’s needs. You’ll have to put yourself in their shoes.

Think Responsive

Modern websites are not only designed for a single screen size. It has to be adaptable to different sizes. It’s difficult learning responsive design because your precious design doesn’t always work on other sizes. It takes time, practice and a deeper understanding on how web elements behave on different screen sizes. Responsive design is awesome. It’s another layer of fun when designing a good user experience.

Not-so-secret message alert! Under the PS4, you’ll see a small paper, 100 is written on every corner.

Web design is more than what users see on their screens. It’s also about how they feel and what they do when they interact with your digital product. Furthermore, web design evolves based on our needs just like the rest of modern technology. The best UI/UX designs of today might just be another relic in our digital basement tomorrow, so keep learning, stay hungry and expand your imagination.

Arthur

Author Arthur

More posts by Arthur