UI/UX Design Principles: Usability Fundamentals

UI/UX design guide

Scope of the guide

Short answer: UI/UX design principles; Consistency, feedback, visual hierarchy, error prevention, accessibility, and comfort zone are basic rules that help an interface be easily understood and used with fewer errors and are applied according to context.

I am Selçuk Aker; I have been doing graphic design and digital interface design for over 19 years. Coming from a graphic design background, I've seen this often: a screen can look great and still be unusable. Interface policies exist to close this gap. In this guide, I explain the basic principles, its origin and how to control it on one screen. For numerical values ​​I have linked to the official guides from Apple, Google and W3C; Since these guides can be updated, I recommend checking the source before applying.

Principle is not rule: context and task first

Design principles are generalizations derived from user behavior observed repeatedly over the years. Blindly applying a principle means ignoring context. A music application is not designed with the same intensity as a tablet interface used with gloves in a factory.

Before applying each principle, these three questions should be asked:

1. What is the user's primary task on this screen?
2. In what condition does the user use the screen: rush, one-handed, noisy environment, long-time work?
3. Does applying this principle make the task easier or just look neater?

Nielsen's 10 usability heuristics

The ten usability heuristics popularized by Jakob Nielsen in the 1990s are still one of the most referenced frameworks in interface evaluation. You can read the actual text on the Nielsen Norman Group page; I summarize it in my own words below:

These ten items work well as a checklist; but which one to fix first should be determined by the impact of the problem on the user task.

Visual hierarchy and reading order

If everything is equally important on a screen, nothing is important. Visual hierarchy ensures that the user's eye goes to the most important information first, then to the action. The tools for this are size, weight, color, space and position.

- Have a single primary action on each screen; Let secondary actions remain visually in the background. - Have a clear scale difference between the title, subheading and body text. -Spacing is the cheapest way to combine related elements and separate unrelated ones. - The reading habit that starts from the top left is valid in left-to-right languages such as Turkish; In right-to-left languages ​​the layout must be mirrored.

Typography is the basis of this hierarchy; For details, you can refer to the article What is typography and for the general principles of graphic design, you can refer to the graphic design elements and principles guide.

Consistency and design system

Consistency means that the user does not have to re-learn what he has learned once on another screen. There are two types: consistency within the product (the same button behaves the same everywhere) and consistency with platform habits (back gesture on iOS, system back button on Android works as expected).

It becomes harder to maintain consistency manually as the number of screens increases. At this point, the design system comes into play: a structure where color, typography, spacing and components are managed from a single source and usage rules are written. I discussed the subject in the articles what is a design system and what should be included in the design system delivery. There is a design system service page for projects that require a component library.

Feedback and system status

When the user taps a button, something should happen and appear. If the feedback is missing, the person will press the same button again, which can lead to problems such as double orders or double payments.

For each interactive element and each data request, the following states should be designed:

• Default, pressed, focused and disabled button states.
• Loading: Progress or skeleton view if the process is taking a long time.
• Success: Short confirmation that tells you what happened and what's next.
• Error: Message explaining what happened and how to fix it.
• Idle state: What the screen shows and where it directs the user when there is no data yet.

I explained with examples how these situations are reflected in the interface in the article Loading and error situations in API integration.

Error prevention and rollback

It is important to write the error message well; But it is even better for the user if the error does not occur at all. Error proofing is design decisions that make it difficult for the user to make mistakes:

• Not presenting invalid options from the beginning (out of date, size out of stock).
• Using examples and automatic formatting in areas that require formatting.
• Putting a clear confirmation step in irreversible transactions (deletion, sending, payment).
• If possible, offer revocation instead of confirmation: "Message deleted. Revert."

When writing an error message, three questions should be answered: what happened, why did it happen, and what should the user do now? "Error code 402" doesn't tell the user anything; "Your card seems to have expired. You can try with another card." It gives the problem and the solution together. The message should be displayed right next to the field where the error occurred, and the information entered by the user should not be deleted.

Recognition, remembering and Gestalt

A person is better at seeing and recognizing something than at remembering it. Therefore, using text labels next to icons, leaving menus visible instead of hiding them, and remembering recent selections reduces the user's mental load. An action described only with an icon may not have the same meaning for everyone.

Gestalt principles explain how humans group visual elements. The ones that work best in the interface are:

• Proximity: Items that are close to each other are perceived together. The form label should be closer to its own field than the next field.
• Similarity: Items that look the same are assumed to have the same function. That's why painting non-clickable text with the link color is confusing.
• Common area: The items in a card or box are read as a group.

Fitts and Hick's laws

Fitts' law states that the time to reach a target increases as the distance of the target increases, and decreases as its size increases. The interface is simple: frequently used and important actions should be large and accessible; Dangerous actions should not be placed right next to frequently used buttons. That's why the area within easy reach of the thumb on mobile is important.

Hick's law (also referred to as the Hick-Hyman law) explains that as the number of options increases, decision time increases. This doesn't mean every menu needs to be shortened; It is better to separate the options into meaningful groups, provide a default selection, and show only the necessary options in the first step.

Touch target size

The finger is not as sensitive as the mouse cursor. Small touch areas lead to incorrect touches and serious difficulties, especially for users with limited motor skills. The platform guides recommend:

A visually small icon can be made to fit these dimensions by enlarging the touchable area around it. It is equally important to leave enough space between adjacent targets.

One-handed use and access zone

When the phone is held with one hand, the area that the thumb can easily reach is the bottom and middle part of the screen; the hand needs to be slid to reach the upper corners. This difference becomes more noticeable as screens get larger. Therefore, a common solution is to place frequently used actions at the bottom of the screen, for example in the bottom tab bar or on a primary button anchored to the screen.

This is not a rule, but a trend. The user can use the application with both hands at the table; A tablet requires a completely different way of holding it. The important thing is that the most frequent and important action should not be left to the most troublesome point. Actions that are difficult to reverse, such as deletion, should be presented with a clear label in a location that is easily accessible but not accidentally touched.

How to use platform guides and policies together?

General principles answer the "what" question: give feedback, be consistent, prevent error. Platform guides answer the "how" question within the habits of that platform. Apple's Human Interface Guidelines covers how to navigate, use system components, and typography in iOS; Google's Material Design 3 document describes the behavior, color system and layout rules of components on the Android and web side.

The correct approach for a designer is to apply the general principle with the pattern suggested by the platform manual. For example, the principle of "give control to the user" is met by swiping back from the edge on iOS, and by system back gesture on Android. It is possible to go beyond the guidelines; But this needs to be done with a conscious decision and testing.

Accessibility: WCAG and contrast

Accessibility means that the product can be used by people with visual, hearing, motor or cognitive differences. The main reference is the W3C guidelines WCAG 2.2. Main points to be checked during the design phase:

• Text contrast: At AA level, a contrast ratio of at least 4.5:1 for normal size text and at least 3:1 for large text is required (contrast description).
• Non-text contrast: At least 3:1 for elements such as form field borders and meaningful icons.
• Not relying on color alone: Indicate error status not only with red color, but also with icons and text.
• Focus visibility: The person navigating with the keyboard should be able to see which element they are on.
• Alternative text: Description of meaningful images to the screen reader.
• Motion reduction: Simplification of large animations if motion reduction is selected in the system setting.
• Font size enlargement: The layout is not disrupted when the user enlarges the text.

For web-side controls, you can see web standards and accessibility.

Micro text and UX writing

Button labels, error messages, idle status descriptions, and permission requests are part of the interface. Writing "Confirm order" instead of "OK" clearly tells the user what they are confirming. Screens designed without real content may become distorted when Turkish text length is added; That's why it's important to start the design with real or near-realistic content. For details, you can check out UX writing and testing with real content instead of lorem ipsum.

Checking policies in one screen: checklist

Before deeming a screen complete, ask these questions:

• Is the primary function and single primary action of the screen clear?
• Is there a clear hierarchy between title, body and action?
• Does the same action have the same name and appearance as other screens?
• Are loading, empty, error and success states designed?
• Is there approval or reversal for irreversible transactions?
• Are the icons supported by text?
• Text contrast 4.5:1, do large text and controls meet the 3:1 threshold?
• Do the touch areas comply with the platform recommendations?
• Isn't the order disrupted when the text is enlarged and with long Turkish text?
• Do error messages state the problem and solution?

I explained the place of these principles in the process in the what is user experience design guide, their mobile specific application in the what is mobile application design guide, and the ability to use the principles at work on the UI/UX designer skills page. For a more in-depth introduction to interface fundamentals, see user interface (UI) design and UI/UX design homepage.

Do you have a digital product project?

This guide gives information about UI/UX design. You can share your current screens and goals for your digital product.

• Target user of the product
• Prioritized task and flow
• Platform (web, iOS, Android)