Basic principles of UI design

Basic principles of UI design will introduce critical issues that UX design and front-end professionals see to quickly gauge the quality of implemented user interfaces (UI). The fundamentals of “good UI” or “bad UI” revolve around four essential principles: Consistency, Context, Simplification, and Accessibility. Watch the video to learn more. 

Pega expects all members of the team to know what great user experience is, and why it is valuable: to practice empathy for the users of our products and to deliver them fantastic experiences. To do this, one must learn to see UI as a UX professional does.

Misalignment; Spacing problems; Data display errors; Scrolling flaws; and Language oversights: these are critical issues that UX design and front-end professionals see to quickly gauge the quality of implemented user interfaces (UI).

This module helps you see and describe frequently encountered issues and address them. The goal is to build UIs that help users accomplish their tasks with ease and efficiency and are frictionless.

Indeed, a well-implemented UI should feel easy and barely be noticed. Good UI is invisible. Bad UI is a distraction.

To accomplish this goal, it’s helpful to understand the difference between UI and UX. These terms have different meanings in software. UI (or user interface) refers to the technical elements on the screen that a user interacts with — buttons, links, fields, and so on. UX (or user experience) refers to the complete experience, which includes users’ workflow, what data should appear on a screen and when, the order and structure of that data, and how multiple screens fit together in a cohesive way.

This module focuses primarily on the basics of proper UI but also touches on a few essentials of UX as well. The overall quality of any design is ultimately determined by measurable outcomes: Are users of production applications efficient, productive, and accurate?

Indeed, “good-looking” UI doesn’t necessarily mean the feature was well-designed, but since even a good design will fail if poorly implemented—if the basics of decent UI are ignored—it’s important for us all to learn how to see and understand, at a glance, the essentials of good UI implementation as a designer or front-end developer would.

Let’s start with some basics. The fundamentals of “good UI” or “bad UI” revolve around four essential principles: Consistency, Context, Simplification, and Accessibility.

Consistency

Consistent application structure, data, navigation, alignment, and spacing reduce the amount of effort it takes to understand how to use an interface. This makes applications more efficient and successful. Applications that behave inconsistently demand constant focus on the interface from users. Instead, we want users to focus not on the interface itself, but on the content, the data, and the choices they need to complete their tasks. It is very important to provide our users with consistent ways of interacting with our apps. 

Context

Context refers to the set of variables needed to understand how to provide ideal outcomes from your software. This includes an understanding of who the users are, their roles, their experience with the application, or other applications, and which devices they are using. Providing familiar experiences to our users will drive productivity in our applications, and reduce expensive training time. Context can also be task-specific: Which application data or application interactions should be grouped so they form a logical collection that is prioritized by likely usage. Understanding the correct context is necessary for successful application design.

Simplification

Simplified software is easier to use than complicated software. There’s a law in UX called Hick’s Law, which states: The time it takes to make a decision increases with the number and complexity of choices.

While that may sound obvious, we sometimes see enterprise applications, which ignore this rule and end up with overly complex interfaces. Reducing the number of concepts a user engages with is the same as reducing the options for error and confusion, and the same as building more productive outcomes. We need to provide data and UI elements necessary for a user to complete a task, but we should strive to provide just what is necessary for the desired outcome.

What data is necessary for, say, a contact center representative to change a customer’s address, and at the same time, provide the best full engagement of that customer? How can we provide an opportunity for improved services, better options, etc. without providing so much information that the agent is overwhelmed, and as a result, underperforms? How can we simplify mouse or keyboard interactions so that the contact center rep does as little as possible while engaging the customer and solving the customer’s concerns?

Enterprise applications may always have a certain level of complexity, which can be difficult to reduce, but any attempt to produce the simplest experiences—simplifying information, text, and interactions will improve performance.

Accessibility 

The last critical principle is accessibility. Accessibility is the measure of whether our apps are usable by everyone. The rules of accessibility, while not spelled out in this module, are a legal necessity for most projects. Legality notwithstanding, building accessible UI is the same thing as building quality UI. Indeed, accessible UIs are easier for everyone to use, are more effective and productive, and are easier to upgrade. Pega has accessibility tooling, which you should take advantage of. By following the other principles of consistency, context, and simplification, you will be well on your way to solving many accessibility issues.

Check your knowledge with the following interaction.