User Interface
We will talk about User Interface Design in a while; let us take a look at User Interfaces first.
User interface (UI) is that space where interaction between a human and a machine take place.
User interface allows a human to effectively interact with a machine to achieve a desired goal. The user interfaces are what we use to run and control computers, machines, tools and other processes. We provide the inputs to the machine, and the machine in turn also provides feedback which helps us in monitoring or running the process smoothly.
The actual design of this interface is known as User Interface Design, sometimes also known as user interface engineering. Good interface design would mean designing an interface that is very easy to use and not overly complicated. It should not include unnecessary steps or interactions, but only those that are necessary and make the interface easy and efficient.
These days we see so much of computers and computing devices that we think of User Interface solely in terms of these devices. Though the term actually is applicable for other heavy machinery such as those used in industries. But since we are into computing, we will discuss it in term of graphics or Graphical User Interface (GUI).
Graphical User Interface (GUI)
Graphical User Interface, as the name suggests, are interfaces that are primarily designed using graphics, icons, images, text labels etc. Command line interfaces as we used to have in primitive computers were difficult to learn and operate. To start a process or open a program one needed to give it commands from a command prompt. Unless you were versed with that system or memorized the commands, it would be difficult to use them. They were not very user friendly to begin with.
Graphical user interface on the other hand are more intuitive and easy to understand. The graphics, icons or text labels would explain what that command would execute. So it became easier to understand and use them. The goal of any graphic user interface design is to maximize usability and to enhance user experience.
Usability & User Experience (UX)
We have thus far discussed on what user interface design is, i.e. the UI part of it. Now let us take a look at what we actually mean by Usability and user experience, i.e. the UX part of the interaction between a human and a UI design.
When you look at any graphical interface, how does it make you feel? Do you feel confused? Does it look friendly? Does it arouse any emotions? UX is how you feel when you actually interact with an interface, such as a website. Since we are talking about graphical interfaces, therefore, I have taken the example of a website. As perhaps, a website does have more graphical elements than most UI interfaces we can think of. So a website is a good example to go with here. Though, a graphical interface could be anything from an ATM machine screen, to the interface on your mobile device, to the navigation system on your car dashboard, to the graphical display on an airplane.
A good UX design should make interacting with an interface effective, efficient, and satisfactory. It should not be confusing. Continuing with the example of a website, it should be easy to navigate through the complex system of a website. Easy to reach the inner most pages, within a few clicks. Of course, not to forget the mobile user’s experience! This would again be a part of a good UX design, i.e. taking the user’s experience into consideration when the user sees the site on a mobile device versus on a desktop. It is important to see that the page layout (UI) renders properly on smaller screens.
Can you image how you would feel, if two buttons were so close together that if you clicked on a button, it would accidentally click on the one next to it? On smaller screens it becomes more important to pay attention to clickable buttons, tabs & objects and their placement, so that overall it makes for a good user experience. The UX here is the usability factor.
Graphic User Interface Design Principles
There are no fixed rules or guidelines but rather a set of user interface design principles that are generally accepted as good practices to follow. Interface design is all about comfort, pleasing aesthetics, consistency, efficiency etc. The interface should not be confusing, easily understandable, segregated into groups, should be intuitive and easy to use.
-
Emotionally Pleasing To Look At
Emotions or feelings do take precedence when we decide whether we want to stay on a site or not. If something appeals to our emotions positively, then at a subconscious level we would be inclined to stay longer and interact with the site longer. Positive emotions may also tilt our decision favorably towards buying into whatever the website wants us to do; whether it be a sale or a simple sign up. So apart from a well-designed site, it should appeal to our emotions and feelings.
To make it aesthetically pleasing to the eye, we may want to use colors that provide meaningful contrast to the different elements on a screen. Make sure you group similar elements or topics together, so that the user can scan quickly through the page and decide what & where he wants to focus on. Pay attention to alignment so that the eye flows effortlessly across different elements or sections. Pay close attention to typography, like the size of each heading. You would want the H1, the most important heading tag, to be a good size and yet comfortable and easy on the eye. You would want the subsequent header tags like H2, H3, and so on, to be subsequently smaller in size, so that the user can understand that these are of lesser importance. Maintain consistency throughout the site between the elements, images, layout, alignment etc. And in the midst of all this, make sure that the colors and graphics create a strong positive emotional mix that appeals to the users psyche.
Additional reading: https://uxdesign.cc/interface-design-playing-with-emotion-24f19e92ad28
-
Design Should Have Clarity and Be Easy To Understand
Clarity in the design is of outmost importance. It should be obvious at the first glance itself what the website is all about. If you leave room for guessing or there is ambiguity, there is a high probability that the user would leave the site, not able to decipher what to do.
You should have prominent visual elements or cue that tells the user what the site is all about. Placing these items above the fold in case of websites are a good idea. As it would give clear indication on what is being offered or what is expected of the user. Additionally, using highlighted words, text, icons should help clarify the purpose of the site at a glance.
The design should help the user to understand what is expected of him. Suppose the website sells a service like web design or content writing. And there is information regarding that particular topic on the homepage and images make it clear on what is being offered. A prominent call to action button placed visibility, ideally highlighted with contrasting color, would make it obvious, what the user is supposed to do. It would be obvious to him, that he can click the button and perhaps request for a quote!
-
Design Should Be Consistent Throughout The Site
Consistency makes for a good user experience (UX). Which is of course the primary goal of good User Interface design (UI). Keep the same colors throughout the site, so that the site looks and feels the same. The user shouldn’t feel that he has landed on a different site when he navigates to your inner pages. The placement of elements should also remain constant throughout. If your logo is on the top left corner, and phone number and call to action button on the top right. You should keep the placement same on other pages too. That way, the user would know where to look, when he is actually deciding to push that call to action button. Lack of consistency could potentially confuse and frustrate the user.
Another obvious but important thing to note is that functionality or actions associated with elements on the screen should not change. It will go a long way in creating a good user experience.
Additional reading: http://www.uxpassion.com/blog/the-importance-of-visual-consistency-in-ui-design/
-
The User Should Always Be In Control
Again it is all about good user experience, letting the user be in control at all times. That is, designing an interface keeping the users comfort in mind. A good way to create a good user experience is not to interrupt the user unnecessarily using pop us, and modal windows. Ideally any action should be initiated by the user himself. If there is a sign up form, it is better to let the user to decide whether he wants to sign up by clicking that button explicitly or not. Any action on the website, should be performed quickly and efficiently. If it is a feedback or a quote form, it should have minimal fields to fill in. Longer forms see lesser engagement and does not create a good user experience.
Sometimes for a business site, it becomes essential to try to collect the only medium for contact with a user at a future date i.e. the email id of that user. Otherwise, that user may be lost forever. In such a circumstance, I believe, one to two harmless popups can be forgiven. Remember to keep it super simple to be able to dismiss those popups, should the client not be interested in signing up. Ideally, do not show the popup once the client has shown his intent.
Also, errors should be avoided at all costs on the website. If there is an error, it should be recorded in a log file, but never shown on the site.
Additional reading: https://msdn.microsoft.com/en-us/library/ms976529.aspx
You can find a more detailed list of good practices and GUI design principles here: https://en.wikibooks.org/wiki/GUI_Design_Principles
We discussed on what User Interface (UI) is and how a good User Interface can create a good User Experience (UX). We discussed more specifically about Graphical User Interface design or GUI design; and a few principles that can be used to create a good user experience.
Now it is your turn to let me know what you thought of the article in the comments below. If there is anything you would like to add or something you agree or disagree on, please feel free to let me know in the comments below.
