Understanding UI design and its principles

Wireframes. Mockups. HTML. Fonts. Elements. Users. If youâre familiar with user interface design, these terms will be your bread and butter.
An integral part of any website or application, user interface design is also arguably one of the most important. This is because your design is what your users see and interact with. If your site or app functions poorly and looks terrible, thatâs what your users are going to remember.
But isnât UX design and UI design the same thing? Or is there just an extremely blurred line between the two? Whatâs involved with UI design and, more importantly, what makes good design?
What is UI design exactly?
If youâre wondering how to test UI on your website, itâs a good idea to first learn some of the differences between UX and UI design. Although UI design and UX design look similar when written down, theyâre actually two totally separate things. However, they should most definitely complement each other.
How about we just put UX and UI into a cage and end this argument, once and for all?
â Jared Spool (@jmspool) May 3, 2016
UX design, according to Nielsen Norman Group, âencompasses all aspects of the end-user’s interaction with the company, its services, and its products.â Meanwhile, UI design focuses more on a userâs interaction, the overall design, look and feel of a system. The two still sound similar, right?
For those of you still trying to wrap your ahead around the difference, Nielsen Norman Group has a great analogy up on its site that helps to explain it: âAs an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios.â This just goes to show the complementary relationship between the two and why itâs so important.
User interface was popularized in the early 1970s, partly thanks to Fuji Xeroxâs âXerox Alto Workstationâ â an early personal computer dubbed âthe origin of the PCâ.
This machine used various icons, multi windows, a mouse, and e-mail, which meant that some sort of design and design principles were needed to create consistency for the future. It was here that human-centred UI was born.
UI design also covers graphical user interface design (GUI design). A GUI is the software or interface that works as the medium between a user and the computer. It uses a number of graphical elements, such as screen cursors, menus, and icons so that users can easily navigate a system. This is also something that has stemmed from Fuji Xerox back in the late 1970s and early 1980s.
Since then, UI has developed quickly and so has its design principles. When the Xerox Alto Workstation was first born, Fuji Xerox came up with eight of its own design principles. These were:
- Metaphorically digitize the desk environment
- Operating on display instead of entering on keyboard
- What you see is what you get
- Universal but fewer commands
- Same operation for the same job at different places
- Operating computers as easily as possible
- No need to transfer to different jobs
- System customized as desired by users
Over time, these principles have evolved and now youâll likely find many more added to this list. Here are just a few of the most important ones identified in âCharacteristics of graphical and web user interfacesâ by Wilbert Galitz.
UI design principles:
Principle #1: Clarity
Usability.gov says that the âbest interfaces are almost invisible to the userâ.
Everything in the system, from visual elements, functions, and text, needs to be clear and simple. This includes layout as well as the words used â stay away from jargon and complex terms or analogies that users wonât understand.
Aesthetic appeal also fits into this principle. Ensure colors and graphics are used in a simple manner, and elements are grouped in a way that makes sense.
Principle #2: Consistency
The system should have the same or similar functions, uses and look throughout it for consistency. For example, the same color scheme should be used throughout an app, or the terminology on a website should be consistent throughout. Users should also have an idea of what to expect when they use your system. As an example, picture a retail shopping app. Youâd expect that any other retail shopping app out there will have similar basic functions: a place to log in or create an account, account settings, a way to navigate and browse stock, a way to purchase stock at the press of a button. However, this doesnât mean copying another app or website exactly; there should just be consistency so users know what to expect when they encounter your system.
Apple even states an âapp should respect its users and avoid forcing them to learn new ways to do things for no other reason than to be differentâ.
Principle #3: Flexibility and customizability
Is there more than one way people can access your system and its functions? Can people perform tasks in a number of different ways, too?
Providing your users with a flexible system means people are more in control of what theyâre doing. Galitz mentions this can also be done through allowing system customization.
Donât forget use on other kinds of devices, too. In a time when Google is using mobile-friendliness as a ranking signal, and research from Ericsson shows smartphones accounted for 75% of all mobile phone sales in Q4 2015, you know that being flexible is important.
Examples of good UI design
For a list of some of the best user interface examples, check out last yearâs Webby Awards category for Best Interface Design. The 2016 category winner was the Reuters TV Web App, while the Peopleâs Choice winner was AssessYourRisk.org.
As an aside, this is the second year that the Webby Awards introduced this category â just goes to show how important it is to have good UI design!
While you donât want your site or application to look exactly the same as these winners, you still want yours to function well and be aesthetically pleasing. To help you get there, there are a number of UI design tools and UI software available.
Hereâs a list of some of the many out there:
- UXPin – An online UI design tool that allows you to create wireframes, mockups, and prototypes all on one platform.
- InVision – A prototyping and collaboration tool. More in-depth than Balsamiq, and it allows you to go from mockup to high-fidelity in minutes.
- Balsamiq – A simple mockups tool for wireframing, which allows users to test out ideas in the early stage of interface design.
- Atomic – An interface design tool that allows you to design in your browser and collaborate with others on your projects.
Have you got any favorite UI design examples, or tips for beautiful design? Weâd love to see them â comment below and let us know!
Further reading:
- âUI, UX: Who does what? A designerâs guide to the tech industryâ – An article from Fastcodesign that provides a breakdown of some of the design roles in the tech industry.
- â7 rules for creating gorgeous UI (Part 1)â – A great guide from Erik D. Kennedy for creating good UI design, with some fantastic tips to help you get started.
- â10 usability heuristics for user interface designâ – An article from Nielsen Norman Groupâs Principal Jakob Nielsen explaining some of the key principles to keep in mind when designing a user interface.