{"id":20068,"date":"2022-11-16T09:02:56","date_gmt":"2022-11-16T08:02:56","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/?p=20068"},"modified":"2023-03-02T21:52:46","modified_gmt":"2023-03-02T20:52:46","slug":"ui-design-principles","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/ui-design-principles\/","title":{"rendered":"The Top 5 UI Design Principles You Need to Know"},"content":{"rendered":"

In today’s digital-first world, the importance of user interface (UI) design can\u2019t be understated. For the vast majority of people the world over, UI design shapes how we act and interact on a day-to-day, even a minute-by-minute, basis.\u00a0<\/span><\/p>\n

UI design<\/a> is the literal aesthetic design of the interface of a product: an app or website. Successful UI design enables users to easily navigate from one screen to the next, encountering all the right visual touchpoints along the way.<\/span><\/p>\n

So what are UI design principles?<\/strong><\/h3>\n

UI design principles are the guidelines that a UI designer uses to ensure a fluid, logical, and enjoyable user interface experience.\u00a0<\/span><\/p>\n

As the author Ben Shneiderman describes in his superb book, <\/span>Designing the User Interface<\/span><\/a>, high-quality interface designs are ones that users can understand, predict, and control.\u00a0<\/span><\/p>\n

Shneiderman highlights eight golden rules of UI design, but we\u2019ve focused on the most important five.\u00a0<\/span>Like any rule of design: while these principles aren\u2019t set in concrete, ignoring them is a huge risk.\u00a0<\/span><\/p>\n

To jump to a specific section, use this clickable menu:<\/span><\/p>\n

    \n
  1. Give users control<\/a><\/strong><\/li>\n
  2. Reduce the load<\/a><\/strong><\/li>\n
  3. Design an efficient layout<\/a><\/strong><\/li>\n
  4. Be consistent<\/a><\/strong><\/li>\n
  5. Steer toward closure<\/a><\/strong><\/li>\n
  6. Key takeaways<\/a><\/strong><\/li>\n<\/ol>\n

    1. Give users control<\/h2>\n

    It’s hard to say which is the most important UI design principle, but you’ll find this one at the top of most lists. <\/span><\/p>\n

    What use is a vehicle if the controls don\u2019t feel within reach and instantly intuitive?<\/strong> Good UI design should give users an immediate sense of comfort and control. This will allow them to learn and master a product quickly and easily.<\/span><\/p>\n

    By that token, user learning will be slowed when they grapple with a tricky-to-control product.\u00a0\u00a0<\/span><\/p>\n

    There is, however, a balance to be struck. Too much freedom of control, or unnecessary complexity, and the user will become overwhelmed and exhausted. Decisions demand brainpower, after all. So how much control is enough?\u00a0<\/span><\/p>\n

    \"screenshot<\/p>\n

    Source: Nintendo<\/a><\/em><\/p>\n

    Navigation<\/span><\/h3>\n

    An easily navigated interface is a crucial element of control within good UI design. Navigation should be made so clear and obvious that it becomes an unconscious, enjoyable experience for the user, rather than a nerve-racking one.\u00a0<\/span><\/p>\n

    This can be achieved by providing the user with information and context regarding where they are, where they came from, and where they are going next.\u00a0<\/span><\/p>\n

    Visual cues, prompts, and feedback will put the user in their navigation comfort zone. Bombard them with too many features and you may find navigation suffers as a result.\u00a0<\/span><\/p>\n

    Signposts<\/span><\/h3>\n

    User murmurs of “Where am I?”, or “How did I get here?” are signs of a UI design fail<\/a>. Clear signposting can ensure our user friends are never left wondering about their orientation within the interface.\u00a0\u00a0<\/span><\/p>\n

    Logical visual aids built into page architecture<\/b>\u2014such as page titles and highlights of recently selected navigation options\u2014provide this orientation.\u00a0<\/span><\/p>\n

    Feedback<\/span><\/h3>\n

    While signposts tell users where they are, information feedback keeps them abreast of interactions that are taking place <\/span>within<\/b> the product.\u00a0<\/span><\/p>\n

    These can come in the form of color-shifting buttons, audio prompts, or readable UI copy appearing in response to user actions.\u00a0<\/span><\/p>\n

    For example, a frequent and small action, such as hovering over a button, could result in a subtle shift in the color of that element.\u00a0<\/span><\/p>\n

    A more major, infrequent action, such as changing your email password or transferring money from one account to another, could trigger text prompts and warnings.\u00a0\u00a0<\/span><\/p>\n

    Undo<\/span><\/h3>\n

    Another way of minimizing feelings of jeopardy in UI is to incorporate a safety net of some kind into the interface.\u00a0<\/span><\/p>\n

    Knowing that any act (or even a long sequence of adjustments) can be undone\u2014and in turn, reinstated\u2014frees the user up to play and explore the interface, without risking a loss of work.\u00a0<\/span><\/p>\n

    This is very common in the realm of graphic design UI, e.g. the Undo and Redo buttons in Photoshop. Simple Back and Forward buttons in online forms provide the same feeling of security.\u00a0<\/span><\/p>\n

    Shortcuts<\/span><\/h3>\n

    For more seasoned users, the addition of shortcuts can provide new levels of mastery within a product.\u00a0<\/span><\/p>\n

    This loops back to our point earlier about the balance of control. Shortcuts offer a learning curve for users that want to take control of an interface up a gear, without overwhelming or excluding more novice users.<\/span><\/p>\n

    A classic example of a time-saving navigational shortcut would be Microsoft\u2019s inclusion of the Ctrl+Z, Ctrl+X, Ctrl+C, and Ctrl+V shortcuts for Undo, Cut, Copy, and Paste, in Windows circa 1992.\u00a0<\/span><\/p>\n

    While commands such as \u2018copy\u2019 and \u2018paste\u2019 have entered common parlance, combinations of obscure shortcuts still offer deep levels of control unavailable to casual users.<\/span><\/p>\n

    2. Reduce the load<\/h2>\n

    As psychologist George Miller famously posited in 1956, the human brain is only really capable of holding on to around seven pieces of information at one time.\u00a0<\/span><\/p>\n

    This has significant ramifications for UI design, and the need to not overwhelm the user\u2019s mental bandwidth as they navigate the product. To that end, this UI design principle has vital aspects to bear in mind:<\/span><\/p>\n

    Chunking<\/span><\/h3>\n

    Miller found that human memory separated information into chunks, rather than individual pieces of information.\u00a0\u00a0<\/span><\/p>\n

    That\u2019s why it is easier to memorize a phone number with a familiar area code (one chunk), as opposed to a long string of random numbers.\u00a0<\/span><\/p>\n

    These findings have huge implications for the way information is presented in UI design.<\/span><\/p>\n

    \"screenshot<\/p>\n

    Source: eBay<\/a><\/em><\/p>\n

    The magic number 7<\/span><\/h3>\n

    Browse any app or website, and you will almost certainly see chunking in action. It’s unusual in apps such as eBay or Netflix, for example, to see a carousel of more than seven images at one time. <\/span><\/p>\n

    A huge list of items is simply too much for the brain to compute at once.\u00a0<\/span>In order to aid the eye in taking in information, good UI design will compartmentalize information through the clever use of boxes, dividers, fonts, italics, bold, and so on.<\/span><\/p>\n

    You can read more about this in our guide to Miller\u2019s Law.<\/a><\/span><\/p>\n

    3. Design an efficient layout<\/h2>\n

    The screen is the UI designer\u2019s canvas, and an efficient layout on that screen is the bedrock of any product.\u00a0<\/span><\/p>\n

    But how do designers know a great layout when they see one? Where should the elements go, and how do they all knit together?\u00a0<\/span><\/p>\n

    Sticking to layout principles will allow users to neatly traverse your UI, while also taking in the artistry of its design.\u00a0<\/span><\/p>\n

    Emphasis<\/span><\/h3>\n

    Emphasis is one of the most important aspects of UI layout design. Emphasizing certain elements on the screen will draw the user\u2019s attention, allowing you to tell them which parts of the design are most important.\u00a0<\/span><\/p>\n

    This is crucial information for the user as they navigate their way through the product. Emphasis can be lent to items through the use of scale, positioning, different colors, arrows, bold, and so on.<\/span><\/p>\n

    Visual hierarchy<\/span><\/h3>\n

    By adding different levels of emphasis to elements throughout the UI, the designer is able to create what is known as a <\/span>visual hierarchy<\/span><\/a>.\u00a0<\/span><\/p>\n

    This totem pole of emphasis allows the designer to dictate the order in which users read the information on the page.\u00a0<\/span><\/p>\n

    \"screenshot<\/p>\n

    Source: teenage engineering<\/a><\/em><\/p>\n

    White space<\/span><\/h3>\n

    Looping back to our thoughts on navigation and cognitive load, white space is an invaluable tool in creating the basis of a calming, easily-controlled UI.<\/span><\/p>\n

    Without ample white space, the existing elements of your layout won\u2019t be able to breathe, and the UI design runs the risk of becoming cluttered and overwhelming.\u00a0<\/span><\/p>\n

    You can read more about the importance of design principles in UI and UX in <\/span>this article<\/span><\/a>.\u00a0<\/span><\/p>\n

    4. Be consistent<\/h2>\n

    As with design in branding, consistency in UI design allows the creator to emphasize a clear message about what the product does, and how the user can use it.\u00a0<\/span><\/p>\n

    It can be tempting to chop and change your design throughout the product, but this will only make for a steeper learning curve.\u00a0<\/span><\/p>\n

    Predictability<\/span><\/h3>\n

    If a user is unsure of a function or worried about clicking on certain elements, the UI can run the risk of becoming a bogged-down, anxious experience. Rather, navigation should be a natural, confident process for the user.\u00a0<\/span><\/p>\n

    Making things predictable is key to achieving this state. Incorporate visual cues into your UI, so users won\u2019t be left wondering “Should I press this button?”, or “Have I finished my task?”<\/span><\/p>\n

    Familiarity<\/span><\/h3>\n

    Creating a pioneering feature in your UI, such as an unpredictable menu system or unexpected navigational twists and turns, may feel like a brave move in UI design. It is, however, most likely to turn off your users.<\/span><\/p>\n

    Most users have become accustomed to how conventional patterns work, over decades of using interfaces. Breaking down these conventions will most likely cause a frustrating user experience.\u00a0<\/span><\/p>\n

    \"screenshot<\/p>\n

    Source: Audible<\/a><\/em><\/p>\n

    This also goes for terminology: don\u2019t reinvent the wheel linguistically in your UI design. This will only risk confusing users that have certain expectations about naming.<\/p>\n

    5. Steer dialogue toward closure<\/h2>\n

    Dealing with the concept of closure is the final key principle within your UI design. In a sense, it encapsulates the points we\u2019ve touched on so far.\u00a0<\/span><\/p>\n

    Closure is the endpoint that product users are navigated towards. All signposts, feedback, and shortcuts should aid the user in reaching this conclusion.\u00a0<\/span><\/p>\n

    A feeling of closure can also be offered to the user following a burst of activity, using feedback. <\/span>Without the promise of closure, a product may seem overwhelming.\u00a0\u00a0<\/b><\/p>\n

    As Shneiderman puts it:\u00a0<\/span><\/p>\n

    \u201cSequences of actions should be organized into groups with a beginning, middle, and end. Informative feedback at the completion of a group of actions gives users the satisfaction of accomplishment, a sense of relief, a signal to drop contingency plans from their minds, and an indicator to prepare for the next group of actions.\u201d<\/span><\/p><\/blockquote>\n

    6. Takeaways<\/h2>\n

    UI design is the craft of engineering a smooth, enjoyable experience for users as they interact with websites and apps. As the art of UI evolves, a list of UI design principles has emerged that designers refer to when creating their work.<\/span><\/p>\n

    In short, these are the key takeaways from our list of the top five principles:<\/span><\/p>\n