The difference between UX and UI
Getting started with web design, through core components of a website’s experience!
Have you ever heard the acronym UX/UI altogether, making them seem as a whole? I’m sure you have. After all, the two roll well together, both referring to design, right? Well, not so fast.
Nowadays, the difference between UX and UI becomes increasingly blurrier as we unconsciously say “UX/UI design” rather than distinguishing the two complementary disciplines. It has lead them to being interchangeably used but mostly, confused in how one fits into the other.
Throughout this article, UX and UI design will be respectively defined, as well as exposed into how they tie together in the design process of a website.
To get started, think of your website as a physical store.
UI Design: the face of your store
Place yourself in the store owner’s shoes. You will definitely engage in making your store front as most attractive as possible. Grab your passers-by’s attention with unbeatable value offerings, such as flash sales, brand new products or even competitive prices, and all of that…exclusively through the aesthetic display of your window! Getting creative through catchy and interactive designs can only weigh in your favor!
With nowadays’ overcrowded number of online offerings, the users’ likeliness to remain on a website is estimated to be decided within seconds. So, how can you grab the user’s attention in such little time? You focus on UI design.
User Interface Design, or UI Design, is about providing good visuals to your interface. It takes responsibility in translating the value proposition as most appealing to the eye of the user through interactive graphics. The challenge hereby is to provide responsive, guiding and accurate visuals for the user to navigate through the platform as effortlessly as possible.
How important can the color of a button be? Its placement? Its shape? Well actually, these are very important and should not be neglected.
Every small detail counts and it starts with your landing page, the ‘showcase’ of your platform.
According to Norman Nielsen Group, a pioneer in web design, the visitor’s first peek will not fixate on the content line by line, as its 10 seconds attention span will be enough to ‘scan’ through your page seeking for noteworthy items. The UI’s attempt is then to instantly convince the user of the website’s credibility and trigger his interest in “entering the store”.
Site items should all remain consistent and smooth to the eye, while keeping flashing ones to attract the users’ focus onto the most worthy items for a concise, yet efficient scan. Any ambiguities, sloppiness, illogicality, meaning the purpose of the item is unclear, or merely difficultly in finding relevant information in time might just lose the users and as a result, have them leave your interface.
Frequently travelling, I have noticed how the UI affects my overall experience in the booking journey, depending on which website I visit. Booking’s interface overwhelms me with lots of information, using many different colors, font, and shapes. Not to miss anything crucial, I have to spend extra time scanning the whole page and processing all of this data, as no particular item strikes to my eye. Airbnb, however, using a cleaner and minimalist design, gives me a much more straightforward experience as only the necessary information for making my booking decision is displayed.
Visual design is a relevant means for you to trigger the user’s curiosity at its first glance. Being neat and logical will indeed seek to bias the user in perceiving your interface as easy to navigate, preparing them for what they would expect to be a seamless experience. Then, what happens next?
The UX Design: the user journey inside the store
The pedestrian has now entered the store. Picture UX as all the interactions on which judgement could be drawn upon, from the doorstep to the point of purchase. Any misleading items or obstacles hurdling the customers’ path would most likely disorientate them and in worst cases show the exit of your store quicker than you would expect it.
Are the items within the store well arranged and easily accessible? How does the user feel in your store? Think of the music volume, the lighting, the decoration, the furniture, you get the idea. More importantly, how are you assisting your customers in their buying journey? Are you strategically displaying your products, thus enticing the customer to spend more than he had planned to?
Now that we’ve set the UI as the face of the website, let’s understand what UX stands for.
User Experience Design, or UX Design, is clearly expressed as overarching the end-to-end interactions between a customer and a company, its services and its products, according to Don Norman and Jakob Nielsen.
It is a user-focused discipline aiming at designing a seamless experience. It goes without a doubt that a painful experience can only result in repelling your users to go elsewhere, hence sentencing your business to fail.
The objective is to imagine, from aesthetics to “behind the scenes”, a website that will best accommodate your target audience’s needs. A large amount of research is then required to make the underlying functionality easy to use, functioning and even better, efficient, as well as a good representation of the offering sticking to the user’s mind.
Among others, important considerations to take are:
- Usability
- Functionality
- Design
- Branding
The thinking process involves filling the user’s shoes to provide the most logical usability path to its needs and requirements. So what does that imply? In-depth research, which will help identify your users’ needs and motives to use your product. In other words, if the users understand the below, the experienced will be enhanced:
- The Why: why would individuals adhere to your value proposition?
- The What: what are you offering?
- The Where: where can it be found?
- The When: when would users need it?
- The Who: who are the target users?
- The How: how can they use or benefit from it?
To sum up, UX takes part into excelling at all the interactions the user might have with your offering, which goes even beyond the purchase, hence forging its opinion about its value.
Now, let’s link UX and UI back together to picture how they not only differ, but also collaborate on defining your website’s usability.
How do UX and UI tie together then?
The iceberg principle can assist in putting these two terms into perspective.
As expected, only the tip of the iceberg floating on the surface of water will be noticeable, just as the UI design of a website is to the user.
However, the tip should never be considered as standing on its own. It would undoubtedly not float or be shaped as suchwithout the massive hidden underwater component. This shows how what we perceive is usually only the result of much larger underlying work, which compares the UX to the UI.
UI is the tip of the iceberg directly interacting with the users, while UX designs all the surrounding interactions shaping the experience the user will have with the interface. A patchwork of processes “behind the scenes” are then coordinated to polish the value offering and ensure user satisfaction end-to-end, UI design included.
That’s right! Visuals are only a small subset of many disciplines participating in the optimization of the experience. Nevertheless, it is not to be undermined as being the starting point of a user’s encounter with a business, and the core of a logical, interactive, yet seamless user experience.
One does not go without the other. On one hand, a website might look very nice and appealing, if the logistics behind do not follow through; users will be left disappointed. On the other hand, a badly design interface will frustrate users, thus instantly discouraging them to carry on the journey.
To conclude, UX design acts as the umbrella encompassing all the underlying processes polishing every aspect of customer-facing journey. A part of this journey is the interaction between the user and your interface, which is its look.
It is crucial for UX and UI to work hand-in-hand in the creation of a website to set a clear and consistent message, and deliver it accordingly. The looks must appeal to the customer to have a chance at pitching the idea, while the functionality, being the core of the offering, must deliver to definitely convince the user of its incremental value.
Here is my first article, I hope you liked it! Feel free to give any feedback or comments.
I will now be writing monthly, follow me or connect with me on LinkedIn for more content. See you next month!
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.