UI vs UX: Simplifying the Design

In this digital era, where everything we do involves technology, the user interface becomes one of the crucial aspects integrated into our lifestyle. Good applications whether they are web-based or mobile-based or even desktop-based always feature good user interfaces, ones that give the user a sense of joy in using. The quality of UI has now become part of the competition. And as design and engineering move forward with time, user interface gets more and more sophisticated too together with them.

During my time in high school and college, I began to learn web development with HTML and CSS. HTML described the layout of everything we see in the web, and CSS gives HTML styles and make them more eye-pleasing (i.e. they change the text color red, background color to black, font size, etc.). They were quite limited back then. It was the era of CSS version 1, and HTML version 2, 3, and then 4. I had many experiences with uploading files using hidden frames embedded in HTML, something that is unsafe and inconvenient to do based on today's standards. Sophisticated technology like AJAX was not prominent back then. And so, as UI implementation technology was very limited, UI design was limited too.

Back then, when I used to do company profile websites for freelancing jobs, I used to be fascinated (still am) by the UI design of award-winning websites. They were amazing. They contain so many cutting-edge technologies, so many powerful components that are very complex to implement. The texts move, the background animates like I have never seen before. Some designs were also so complicated that I don't know how to build them even with today's technologies. And from that on, I realize that nobody wants just a simple website that just "work". Even though they always said so. They always said that they want "simple things to cut cost". But deep down in their heart they yearn for things that make them happy. They want something that is not only useful but also beautiful. Nobody wants to look at ugly. Just like that common saying: beauty is relative, in which a common joke is added as an extension to it: but ugliness is absolute. Nobody wants to look at an ugly user interface, even though they are simple to use.

Introducing UX (User Experience)

The extension (or counterpart) of UI is UX. It is by no accident they are always written together as a single entity. User experience describes the feel that the user experiences when using a user interface. The UI part describes the look, while UX describes the feel. UI makes use of mostly (if not whole) our eyes, while UX makes use of all of our senses that are available. If an application can produce sounds, a game for example, then sound becomes part of the user experience.

Gone are the days where UI design used to be handled by designers only. Good UX comes not only from the looks but also the feel, something that may not be achievable with design alone. It is exactly like people. Eventually, people that are pretty but are annoying to be with are always left behind. Nobody wants to be with them. Just like technologies, just like applications. Everything in this world that makes use of a user interface also produce some kind of user experience.

It is difficult to point out which one comes first in popularity. It is like a chicken and egg problem. Good UI necessitates good UX, and good UX is not possible without good UI.

Even though they are sometimes like two sides of the same coin, they can also be opponents. More and more people start to realize that better UI designs don't always lead to increased quality of user experience. In fact, more sophisticated designs sometimes lead to worse user experience.

During my time in college years, I stumbled upon some websites that are stunning to look at. I was amazed by them for years. Until recently I realized that they don't really do anything much more than making the development cost up and getting awards. I saw animations that are difficult to implement, heavy websites with many elements that move following your mouse, applications that you can use to play games with as part of the user interface. Are the sophistication worth the effort? Most importantly, are all those efforts really lead to better user experience which ultimately lead to better sales or usage rate?

Simplifying the Web Design

For a few years we live with a web that incorporates some of those sophisticated design elements that I have mentioned. We included animations, difficult to implement layouts, disabled scrolling on our website, and so on. The time has come to simplify the design, in order to actually increase the quality of user experience of the site. This means letting go of many sophistication that has previously cluttered the design and embracing simplicity.

Letting Go of Complex Elements

It is probably not uncommon for you to stumble upon an amazing website which greets you with stunning animations in which text fades in and out of the screen. Previously, our company profile website was designed in order to greet the user with a sequential animation of elements that are played one after another. They are designed that way to give the user a "grand entrance" to our website. Unfortunately, applications and websites are more often than not like an entrance to a store and not to a gala dinner event. A retail store has simple doors with some AC units placed at the front. Some signage to indicate the way in and out, and some info about the store opening and closing hours. An entrance to gala dinner is often laid in red carpets with amazing decorations. We sometimes forget that gala dinners are frequent events that happen some time after another while a retail stores always need to open everyday.

Letting go of some complex animations is like letting go of many of the complex decorations in the entrance door so people can now walk freely with more room. Access to the site is now much faster. This leads to an increased UX quality as information are now rendered quickly at the page, so users don't have to wait. Imagine if a grocery store app utilizes a set of complex animations just to greet each customer as they pass by the cashier. That will just waste time which eventually lead to longer queuing time, which ultimately lead to worse sales. Sure the animations can be stunning, but people get bored easily and they will forget quickly about what they see and will start to demand a more straightforward application to use.

Bringing Back Natural Interaction

We were, at least back then, inspired by certain websites where the developers have disabled natural scrolling and instead opt to use transitions, much like a PowerPoint slide. When users scroll down, the view transitions into another view or another part of the page exactly like a PowerPoint presentation. Aside from being difficult to implement, it eliminates natural user interactions. This is important as in order for an application to have a good user experience, it must have all interactions be natural to the user. The hard part is that natural interactions are always relative. Different users have different saying about what interactions are natural. This key point is what we always use when designing a UI for an application.

Once we have a client in which they have been using command-line interfaces for a decade or more. They are so used of ncurses based user interface in which command-line (e.g. Command Prompt in Windows, or Terminal in Linux/MacOS) interfaces are implemented in such a way they produce a quite natural user interface (with buttons and inputs). The problem here is that most command-line interfaces do not support the use of mouse at all. Command line interfaces dated all the way back to the very first computers and monitors, in which mouses were not invented back then. People need only keyboard to type things and do simple things such as calculations and stuff. Time has changed and now we do increasingly complex tasks and command-line interfaces are starting to become obsolete for the amateur computer users.

However, as command-line interfaces were natural to them, keyboard-only interactions have become the only thing that the users know. But time has moved on and so that it is required for the company to rebuild the application to include new features. This obviously mean moving away from command-line interfaces written with old languages and embracing new technologies such as web, mobile, and desktop applications. Unfortunately, people don't like to change. Or at least suddenly. They may be willing to change, but only a step at a time. This poses a challenge in which we have to implement newer application but with extensive keyboard interactions. This means adding more keyboard shortcuts, in additions to the default mouse-based interactions existing already in web or desktop applications. Another important point is that command-line interfaces are blazingly fast. They are super duper light. They can only produce simple graphics but because of this, they are very very quick. This imposes a difficult requirement in which we must retain that speed also while maintaining a good UI design which makes use of newer and heavier technology based on web.

This means stripping a lot of complex elements, simplifying the UI, creating new framework and libraries. The same mindset is brought also in simplifying the design of our company profile website. A good UX is no longer a recommendation, it is now a requirement.

Including Enough Information (And Excluding Excessive Information)

For a while we have also lived by UI design mindset in which beauty is at the top priority. This ideology seems to bug many fellow designers in other fields as well, including architects, interior designers, and product designers. As designers we tend to omit a lot of elements that we deem too ugly to be included. In the context of application UI design, we can opt to omit some elements such as company certification badges, some client logos that we deem too ugly to be put on the website, certain cliche inputs such as subscription forms. The simple reason not to put them is probably because we have nowhere to put them. They break our layout, they break the theme, they break the design element. All the components were "in the zone" until those came up. But yet we always forget that those are always included for a reason.

Applications, websites, portfolios, are always there for a reason. More often than not they are needed for marketing reasons. This does not always mean for profit. But informational elements that might not match the design element of an existing UI still need to be included particularly for legal or marketing or many other reasons. The job of UI designers is now not to just create a good UI design but to also cope with these elements. This is why simpler design usually prevails. This is why simplifying a UI design more often than note will yield better UX quality. Simple UI design often incorporates flexibility in which there are always places to put marketing/legal elements in the UI. They also have to incorporate simple but flexible layout so these elements don't coincide with other design elements.

Have you ever analyzed the footer of a website? Just go to any website and scroll to the bottom. What do you see? 90% of the time you will see a footer containing some links, contact addresses, some ugly set of icons containing payment method icons, and so on. They are a mix of different colors and shapes, they obviously don't match in the grand scheme of incredible UI design. Yet they are there anyway. For a while we did not have a footer in our website. We were inspired again by stunning websites in which there are no footers. Information that are usually found in the footer are scattered around somewhere else. This is done because, well, footers are ugly.

However, footers are there for a reason. Just like footers in email, in physical mail, and in many other places. They provide a centralized place for users to find information. They may look ugly, but on the contrary, they more often than not hold much more information than the rest of the page. From this point, it is important to realize that ease of access to an information is an integral part of great UX.

Navigation

Other than per-page design elements we also did a lot of modifications to navigation. This means modifying some pages in radical ways including throwing away some pages and recreating new ones. This is because navigation (i.e. menu, header, etc.) strictly defines how information is organized for the whole site, not just in the page. Making navigation easier and clearer also helps SEO. In other words, making it easier for users will also make it easier for search engines to understand your content and promote better search results.

We started off by replacing some pages that are not related to the current company profile, and adding some formal (sometimes cliche) pages such as contact and about pages. In some of the stunning websites we know, contact and about information are usually integrated among the rest of the designs. They are scattered and users need to do some interactions to see them. In addition, the modern "Single Page Application" websites have moved past the concept of "pages" and mostly update only parts of what is shown on the page. Contents on the screen are replaced one after another depending on interactions, exactly like a real application. With this concept, it is possible for example to show a contact information when user click "contact" somewhere on the home page, perfectly served to the user with animations and stuff. This is because in the design standpoint, those simple pages like about and contact are cliche and ugly. They are basically just a list of texts containing contact and address information.

We take the conventional approach and instead put contact and about page at the separate page. Although we have created and have been using our own Single Page Application (SPA) framework based on Dart in-house, and have been creating a lot of SPA, we designed our web to still feel like a simple conventional non-SPA websites. There are pages that you can look at, that are accessible through the menu. We do not hide or show contents based on interactions other than via the primary menu. Most SPA websites do still have pages but they more often blur the boundaries between pages and update only some contents inside the page to update the information that is shown on the screen. Because search engines crawl the web automatically with bots, bots tend to not have advanced capabilities like we do in browsing the web. Making it easier for bots imply making simpler designs in favor of the traditional page-by-page web design. However, as SPA is currently very popular, SEO bots like Google have provided excellent support for SPA and thus can crawl SPA-based websites. Even though Google does provide excellent support for SPA, it is still difficult to read SPA sites which include a lot of complex interactions, not to mention slow animations and transitions. It is, after all, a bot, which does not care at all about visuals.

Eliminating the Hover Interaction

The "hover" interaction (or event) happens when users hover their mouse pointer on top of certain elements. This is a very common design to open submenus or options. We have long ditched this interaction and have committed to design user interfaces without the use of hover at all, for a very simple reason: touch devices don't obviously support hover. The catch here is that: they actually do, but not in a way that you'd like. In order to produce "hover" event, you will have to tap a certain element on the screen, without actually doing the "click" or "tap" event. For example, imagine a video hosting website in which users are shown a list of videos in a feed. Desktop users can move their mouse pointer to one of the video and the video thumbnail will play a short clip of the video. This is a perfect use of the hover interaction. Unfortunately, clicking the video will take user to the video. Because of this, there is no way to produce the hover interaction when what you do is tapping on the screen, like in smartphones, without actually opening the video. To produce the hover interaction, you can tap and hold on the video and while still touching the screen you slightly move away your finger away, and then lift the finger. The hover interaction will stay there even though you have lifted your finger, something that is inconsistent with the hover behavior when users are using a mouse.

In these times, people no longer create different sites for desktop and mobile. They create the same site for both of them, and style them in a way so that they respond to screen size change. This is called responsive design. Because of that, desktop elements that make use of hover interaction usually still support the same interaction and behavior in mobile. As we have practiced responsive design even since the beginning of time when we started developing information technologies, we have decided to move away from using hover interaction and rely on click instead.

This means in order to open submenus and options, users still need to click on the element to open it. This is getting more and more popular as the popularity of touch devices grow in the 21st century, and as such hover interactions get less and less natural while click and tap interactions get more and more popular. A key point to understand here is that good UX can only be achieved in concert with the devices that users will most likely use. As worldwide web users are now dominated by mobile devices, it is obviously better to stay away from interactions which require mouse to be natural.

Reducing the Use of Photos

Photos are beautiful to look at. For years we have understood that photos are a cheap way in boosting UI design. Stunning websites always have great photos as a background. It is very common to see a website with a big photo greeting you from the landing page. A few years back we also make use of a lot of photos that we use as a background on a lot of pages just to fill in the empty spaces and keep the look clean and beautiful. We have decided to reduce the use of photos for a very simple reason: they are slow to load and handle.

Big photos are obviously big in size, so it is important not to overuse them. This not only eats the users internet bandwidth but also ours, while also forcing the user browsers to work harder showing those photos on the screen. Some stunning websites include a lot of heavy elements such as photos and videos that make it heavier to scroll. It is important to remember that slow websites hurt SEO so very badly. As mentioned before, Google SEO bot is just a bot, and bots don't understand about visual elements. They don't understand what the pictures are about. They understand only texts and codes that are easy to load. It is for this reason Google has included performance as one of its SEO requirements.

Performance is also one of the reasons we use all the technologies that we use today. We put the priorities in choosing technologies as follows:

1. Development experience and cleanliness
2. Performance
3. Stability
4. Ease of use (simplicity)

We have put ease of use or simplicity the lowest priority. It is not that they are not important, but we prefer technologies that are more difficult to use or implement as long as they can provide the best development experience (they allow our development teams to work effectively) and have good performance (they allow our users to have responsive systems). We will prefer Java over Python for example, as in some use cases Python can be slower even though it is much easier to use compared to Java. Even though this is just hypothetical question, the principle behind this is that good development experience lead to better product development (faster, cheaper, more efficient) and good performance always lead to better UX no matter what the system is.

Natural Layout

Implementing natural scrolling layout is important for UX. With today's technologies, in some complex websites, we often find PowerPoint-like layout in which whenever user scrolls down, the next slide comes out, just like our previous website. The others also incorporate technologies to detect how far users have scrolled to transition contents at the page depending on how far user has scrolled. We have chosen to use the most basic layout and instead removed all sort of complex layouts to provide a natural feel just like reading a standard PDF file.

Although we still use some kinds of animations, they are purely for decoration purposes and if somehow these animations don't load, no information is lost. It was designed this way so that contents don't need to heavily rely on how far user has scrolled. The contents are always there, in that exact position. They are there no matter the user has scrolled through or not. The layout is fixed like a PDF.

There are some advantages to conventional layouts like this. They are easier to implement, they are very natural, and they are very light. The only disadvantage is obviously simpler design, which might not actually be a disadvantage. We also see some stunning websites that use simple column-based layouts and make use of little to no animations and transitions. Some people tend to look at a website as an interactive display in which users are immersed in it to enjoy a spectacular experience. Some others see websites as a media of communication, to provide information. Both are right, obviously depending on the users. Another key point to remember here is that UX is relative. The users are the judge. It depends completely on the purpose of the application itself. Whether you choose to go with simple layouts or complex layouts full of transitions depend on what emotions you want the user to feel.

Many designers are idealistic. Whether they are UI designers, graphic designers, architects, interior designers, and so on. Many designers hold on to a certain ideology and use the same design mindset that is like a signature to them in all of their work. UI designers however, tend to forget that they are required to focus on the "user" part in UI. They are tasked to design an interface for users, most likely humans. For this it is not possible to implement a design without knowing who the users are. Smart UI designers can make use of different design mindsets depending on the users.

It is for this reason big applications such as Facebook, Instagram, and Google don't change their UI that much over time. They do it little by little, to get users accustomed by changes. They create reusable design elements to make design of their applications consistent, which also make development easier. Using complex layout can be disastrous, let alone changing them. People even get mad when a single button is moved away from the usual place in their favorite applications. This is obvious as the usual layout and element placement have become very natural for them and changing them force users to relearn their usual interactions.

Summary

Here's a list of UX key points that we have covered so far:

• Nobody deep down in their heart wants an ugly UI. But nobody in this world whether it's in their hearts or in their right minds, want a bad UX.
• Better UI design does not always mean better UX. Simpler UI design most of the time means better UX quality.
• Although animations are great, overuse of them can have detrimental effect on UX. People hate slow interactions, and having to wait for an animation to play to interact with things will surely hurt user experience.
• UX depends on interactions and what feels natural for the users. This can sometimes be relative depending on the user of the application.
• Performance and responsiveness are also integral parts of UX. Nobody likes to use slow apps, and so UX depends also in the power of each user devices. Making the application as light as possible will benefit the most users.
• Making a website easier for users will also mean making it easier for SEO bots, in terms of UX. This will improve your SEO quality.
• The choice of technology matters for UI and UX. If you choose technology that is difficult to implement, bloated, or slow, you will end up cutting a lot of corners developing a slow system, which is bad for UX no matter what the system is.
• UX depends on who the users are and the purpose of the application. Many people decide to go finding silver bullets, solutions that work in every use cases.

In conclusion, no matter how beautiful your application looks, it is not going to be usable if it does not take UX into consideration. Day by day we look at emerging UI inventions which incorporate new UI elements that we don't even know how to implement them. UI is one part of technology that should be slow to evolve. This is because people don't like change, and do not always like new things that might not be natural to them. The key to good UX is that natural feeling, which is difficult to provide if an application evolves too quickly in terms of UI.

At the end of the day, you don't need to create applications or websites that are incredibly stunning to look at. Ones that are simpler to use will always beat those that are more difficult. It is not a matter of looks, it is actually a matter of feel and how well it works for the users. Users will always choose applications that are simpler to them, no matter how pretty or ugly those apps are.

Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible. - Don Norman