• Docs/
• Selected guides/
• User interface design basics

---

User Interface Design basics

Design Groundrules

1 Less is more

Start with the absolute minimum, add only if necessary. In all aspects. This prevents the interface from cluthering and keeps code maintainable.

The quote dates back to designer and architect Mies Van de Rohe. Though not entirely new, minimalism had an immense impact. Especially through fine art, design and architecture, it shaped the world of today. Accompanied with the "form follows function" this is probably the most known design mantra.

Ever heard of Occam's razor? A scholar back in the Middle Ages already stated that "simpler solutions are more likely to be correct than complex ones." In science this has since been the basic rule of judgement.

2 Obvious always wins

If a user has to dig through everything looking for a link or piece of information, he or she will not stay very long and probably never return.

Keep in mind that almost any user will spend more time on other websites or apps than yours. They will therefor most likely want yours to behave the same way they're used to from those others.

Spacing

A consistent spacing makes your page readable. Make sure elements align and pay attention to the spacing of grouped items.

Using a grid system is thé fundamental principle for building a cohesive whole. It offers a structure for all graphical elements and information.

Responsiveness

Since the web had to adapt to small screens, the general rule became the mobile-first approach. From a design perspective, this seems rather limited, but in development it makes perfect sense: we start by defining all properties for the smallest screens, adding/overwriting as the size grows.

Usually we will start by giving the content of a page some spacing so it won't stick to the edges of a screen. Below is a very basic example of responsive scaling setup.

html, body {
  width: 100%;
  font-size: 16px;
  line-height: 1.4rem;
}

section {
  width: 90%;
  margin: auto;
  max-width: 1400px;
}

Media Queries

Next, we start adding properties for bigger screens. We take the following standard media querie breakpoints:

• 320px - mobile portrait
• 768px - tablet portrait
• 1024px - tablet landscape
• 1200px - laptop/desktop
• 1900px - (extra) large monitor

The first breakpoint of 320px is the transition from phone to tablet, the 768px breakpoint is the avarage width of a tablet in portrait, and so on... For example, we might want to set the base font-size bigger on larger screens:

@media only screen and (min-width: 1024px) {
  html, body {
    font-size: 17px;
  }
}
@media only screen and (min-width: 1200px) {
  html, body {
    font-size: 18px;
    line-height: 1.8rem;
  }
}

The objective is to make these transitions as smooth as possible. The exact resolution of different devices will vary, so we need to make sure it looks good on every screensize. Maybe the above breakpoints are to far apart, or irrelevant for a certain project. When in doubt: Ask!

Responsive sizes

Now, to continue this responsive mindset, we will be using relative units. The examples above show some already: rem and percentage. Keep the amount of absolute values to a minimum in order for the page to transition smoothly.

Use relative values for optimal responsive scaling.

The rem ("rooted em") unit is relative to the root font-size. In the above example the root font-size is 14px on the smallest views, a div with height and width 2rem will result in a 28px by 28px block. When the page is between 1024px and 1200px wide, the same 2rem will translate to 34px.

Em is relative to the parents fontsize. This offers far less control than rem does as the nesting of sizes may cause unexpected results.

Grid

When we talk about a grid, we refer to a construction of columns and rows. Columns divide the width, rows the height.

Thinking about the responsiveness of a page, we start with the smallest and add divisions when needed. In other words, first make the narrowest view with only 1 or up to 3 columns. As the screen size increases, extra columns can be provided to build a more complex structure. On a medium sized screen, like a tablet resolution, a 6-column grid may give the extra space to rearrange elements. Moving on to a desktop we divide again into 12 columns.

The 12-column structure offers a lot of flexibility. Elements can be equally spaced when they span 1, 2, 3, 4 or 6 columns. Combined with the unequal configurations, like 2-5-3-2 or 3-8-1, the options are more than sufficient.

Css made the use of a grid system very simple with display: grid.

.grid {
  display: grid;
  column-template: repeat(6, 1fr);
  grid-gap: 1rem;
}

The above example will create a 6-column grid with each column of equal size and a gutter of 1 rem. Usage is well documented online. Sites like learncssgrid and css-tricks explain step by step what the options are.

Grouping

The proximity of items creates a sense of grouping. In other words: Placing items close or adding space around them, lets the users understand they belong together.

Aligning elements has a similar effect. The users eyes won't have to jump all over the page looking for the next piece of the puzzle.

Only add space to the bottom.

This way you only need to adjust it on a last child for consistent spacing. Top items will always line up.

To make things easy you could think of it exponentially. Let's say we put some items in a container. The space between these children could be 8px. The space between this container and the next one could than be 16px. To group these containers in a section, the space between the next section could be 32px.

Make good use of patterns.

Nesting is key. Define reusable components in stead of copy-pasting small elements into large one-time components. Take a look at the example mentioned above. Do you see the patterns? Items in a container, containers in a section.

Text

Hierarchy

It's all about directing the user. He or she must instantly know where to look and how to interpret the content displayed on the screen. Plain text is dull and quite a hassle to get through. When we start putting some contrast in, it signals importance to the reader.

Use simple, meaningful steps. Change only 1 thing at a time. Make a title bold or increase the font size but leave the rest untouched.

Always think of the ground rules. Start with the absolute minimum, add as little as possible. Some basic assumptions to keep in mind:

• Bold text seeks attention: "This must be important."
• Italics are subtle: "Probably a detail or description."
• Big text jumps at you. Keep it short and people will have read it before they realise it.

Max-width

For maximum reading comfort a line of text should be between 40 and 90 characters. When lines are to long, most people wont even bother reading them. Some designers may experiment with it though.

Set a max-width for standard paragraphs.

If no font has been chosen yet, this is a safe fallback. Most fonts in a standard size range will fit. So unless a designer tells your otherwise, use the 700px standard.

Make lines of an intro shorter.

Getting a person to read the first few lines will increase the chance of him/her reading the whole text. Inserting an image or increasing the font size are some classic techniques for this.

Messaging

Give relevant information.

When an error occurs, point out exactly what went wrong. Think of it as talking directly to the user. Most people don't like reading manuals. Make it obvious.

There's a significant difference between designing for a user you assume to be dumb and lazy or treating them as such. The first case will make sure the majority of your users will intuitively understand your webpage or app. The second will scare most away.

Color

Hierarchy

Colors can help guiding the user through a webpage or app, if you don't overdo it. You're eyes will first scan the page. It's in this blurry phase, the whole hierarchic arrangement of elements plays it's biggest role.

Accents indicate importance.

Giving a noticeable different color to an item will trigger the attention of a user. Again: think of the ground rules. Choose one color, add only where necessary. An overdose of colors undermines this effect. The user won't be able to scan the screen properly.

Similarity creates a connection.

Intuitive grouping is based on spacing and appearance. For example: a user will assume all buttons with a similar look to behave the same way.

Text color

Use a 'soft' black.

Choose a very dark grey, like #333, in stead of the hard #000. It makes text more readable. It's easy on the eyes and smoothens the edges.

Backgrounds

Use variations of the same color.

Don't just use the same color with low opacity. Search for a lighter color that will enforce the accent color. There are numerous tools online, like paletton or Adobe color wheel, to help you find different shades that work well together.

Keep contrast in mind.

Make sure the text stands out from the background to remain readable.

RGB vs HSL

Newton discovered the composition of white light. By now we know more about the waves and our interpretation of them. We know that there are 3 primary colors: red, green and blue, which can be mixed into all other. (This applies to light only, mixing pigments works differently.)

Based on this knowledge the most obvious way to translate color into code was by setting the values of red, green and blue. Both hex and rgb are set in this logic. This makes perfect sense, right?

Mixing colors based on code gets rather complex. Hex being the most cumbersome as it uses numbers and letters. This is a rather handy system when you only need shades of grey for example, #ccc or #666, or when all colors are already decided, but not to quickly find a variation to use as a background.

With rgb you can mix all colors by assigning each a value from 0 to 255. Mixing this way demands a good understanding of the mechanics behind it. This is still quite an abstract, mathematical approach.

There is an other option however: using hue, saturation and lightness to determine a color. This logic actually makes it easier to control your variations and contrast.

Hue

Hue is the range of pure colors. In stead of mixing the primaries, all pure colors are arranged in a circle and can be targeted with a number from 0 to 359. The placement of the colors is based on their physical attributes. Red being the longest waves, green medium and blue shortest.

The circle makes it easy to think of a pattern:

• 0 = red
• 120 = green
• 240 = blue

Looking for a secondary color?

• 60 = yellow
• 180 = cyan
• 300 = magenta

Saturation

Saturation indicates the range from colorless to pure color. In other words, setting this to 0 will turn it grey, subtracting all color, when assigned 100% the color will be displayed in its purest form.

Lightness

Not sure about colors? Make it black and white, turn saturation down to 0. By removing hue and saturation you get a grasp on the intensity. All colors on your page, picture, illustration, ... should turn in different greys. Keep the number of colors limited, add (variations) gradually and keeping the contrast in mind.

Lightness is very important for this simple reason: our eyes are biologically more capable of seeing the difference in contrast then interpreting color waves. People with impaired vision will still see the difference without knowing exactly what color they're looking at.

Navigation

This chapter considers the (header) menu, links and buttons as equal aspect of general navigation. A menu might not always be the best solution to help your guest navigate through a website or application. It depends on the goal, style or message.

Let's say you were building a website for a non-profit organization with a clear message, trying to raise money. Telling the story step by step can be more effective than offering a classic, corporate website with an "about" page hiding behind the corresponding menu item.

Have a convenient and obvious way to move between related pages and/or sections.

Home

All important information must be accessible from or on the home page. Also, make it easy to return to the home page as it is the central point of your navigation.

Present a clear hierarchy so the first time user instantly knows were to start. This page must not be confused with others.

Out of sight, out of mind

Our brains process information in chunks. A word for example will be remembered as 1 item. We don't need to remember every single character in it. Likewise, a menu will be remembered as a whole on a position. The less items that get removed from sight, the less we need to remember where they were or even existed.

In other words: if the menu items are hidden behind a hamburger icon that remains on the top left corner, a user has to go through quite a few steps to find a specific link. First he or she must know the significance of the icon. Next step is to remember where the icon was positioned. As it resides at the top of the page, the user must scroll up. Click it. Search for the correct link and click again.

Keep the main navigation element(s) visible.

This can go 2 ways:

• Keep the menu fixed at top/bottom of the page/screen. Most native apps have the main menu fixed at the bottom these days.
• Only show relevant options to the situation, those you want the user to consider at this point.

Minimize

The average person will keep 5 to 9 items in working memory. This is easy to test: Given a long list, the average of remembered items will be around 7. The first and last item of that list are most likely to be remembered.

Show maximum 5 items, with the most important ones first and last

The more options, the harder it gets to make a decision.

If you have more than 5 pages or elements to refer to in a menu, consider simplifying the content. Are all pages necessary or could some be combined?

How many steps are required to get from the home page to this information? The answer should be maximum between 2 and 5.

Scrolling and clicking

According to many, scrolling should be avoided. Yet we must not cluther the display with enormous amount of information. With tabs and links, we can make information accessible without constructing long pages. But, clicking takes more effort than scrolling. It makes one wonder what golden mean would be.

Avoid carousels and do not truncate thumbs.

When it comes to images, scrolling is preferable. Studies show that only the first two to three images get viewed when placed in a carousel. Thumbnails that are not visible in the initial view are often left unnoticed.

Menu

There are a lot of discussions about the appearance and positioning of menu's, both for desktop and mobile views.

Desktop

The most obvious standard, based on before mentioned guidelines, would be a fixed menu at the top of the page with a limited amount of items.

Large screens seem easy. Lots of space means lots of options. A lot of websites hide their menu on scrolling down. This leaves more room for the content, but not all users like this behavior. They find having to scroll back up to access a menu confusing.

Mobile

On mobile devices we have different cases, web based or native apps. The nowadays standard for native apps is a main menu fixed on the bottom. This has proven to increase engagement. All items are easily accessible as they stay in sight and within reach of the thumb.

Websites or webapps are viewed in a browser. This brings other aspects to take into account. Some browsers already have a menu on the bottom, being a native app. Stacking menus undermines the benefits. Hiding one or all of those stacked menus on scroll makes the usability even worse.

Another aspect to consider is how a phone is held. The fixed bottom menu assumes the user to be holding the device with one hand, thumb at the bottom. An obvious choice. However, many other options are to be considered. Handling a mobile browser already demands a different approach since the url input is usually at the top of the screen.

For now, best solution seems to be using the fixed menu at the top for webpages and bottom for native apps.

Buttons & Links

Buttons trigger actions, links refer to internal/external pages or pieces of information.

Both links and buttons are crucial elements in the navigation through a page or app. They help create a clear hierarchy.

Buttons should look like buttons.

In HTML, both links and buttons can be given the same appearance. In fact it is possible to make them visually identical. Furthermore, an onClick() can be defined on both, so in both cases there is full control over the behavior when the link / button is triggered.

However, there is still an important difference between a-tags and button-tags that can drive end users nuts when not taken into consideration. A link (a-tag) has a context menu (right click menu), that allows opening the link in a new tab or adding the link location to the favorites. A button does not have this behavior, it simply triggers an action.

The looks of a button should be determined by its function:

• Call To Action: Most noticeable button, its draws the attention. As the name already indicates, this is a primary button, high in the ranking of your hierarchy.
• Ghost button: Often used as second option next to the previous. A ghost button has no set background, only a border and a label.
• Raised button: A button that can add some dimension to a page. These have no particular function or context associated.
• Text button: The most subtle of triggers. Typically used as a detail in stead of drawing attention.
• Toggle button: A toggle button can be either on, off or disabled. They can be used as a single option of within a group, like a range of filters for example.

Buttons should be easy to trigger with both a cursor, finger or keyboard.

Standard size to be clickable on mobile would be 10mm by 10mm according to the research by MIT Touch Lab.

Physical buttons have the advantage of a tactile indication. We can feel the edge and the change of state as we push them. Digital buttons don't feel different since they are merely displayed on the screen.

Practical advice: when creating a Button-component, make sure that it can function as a button and as a link, and that it independently can look like a button and a link.

• Add the props to (internal link), href (external link) and onClick (button), of which only one can be given at a specific time, to determine the underlying element to be used (React-Router's Link, a and button respectively).
• Add a prop flavor (which can have values like primary, secondary, link, outline, ...) to determine its appearance.

Furthermore, some other basic guidelines regarding links and buttons that don't need further explanation:

• RULE: Always gives feedback when buttons and links are clicked, focussed, hovered, ...

• RULE: use the hand cursor to tell the user that buttons are clickable.

• When a button is clicked, it typically performs an asynchronous operation. If the button is not disabled while this action is in progress, the action can be triggered multiple times, with buggy behavior as a consequence.

  RULE: disable buttons when the handler is in progress or when the buttons can't be used for any other reason.

Forms and inputs

Input fields

Consider input fields as direct channels between users and yourself. Like in a face to face conversation, direct feedback is preferable. Clear language, simple questions and some sort of signal when there is a problem.

Make good use of labels and states.

Users must be able to double check they are filling in the correct information. Keep labels visible, short and relevant. If the label is a question, keep it simple so everyone understands.

Define size based the expected answer.

A standard field has more padding on top and bottom for readability and clickability, but little padding left and right to leave space for typing. The width of the field can be determined by the expected input and will signal that same significance to the user. When asking for a date of birth for example, we know the length it will have in a given format: dd/mm/yyyy. Defining the width based on this given amount of characters will show the user what is expected.

Auto-format the entries, e.g. put currency symbols, commas, spacing, ... in place. Don't hide hints and use placeholder texts to give examples to clarify even more. In the previous example, the placeholder could be "dd/mm/yyyy". When filling in the numbers, the field should automatically add the backslashes.

Make sure not to confuse the user with the placeholder text: It must be distinct from a filled input field.

Appropriate keyboards.

Provide the user with a numeric keyboard when asked to fill in a number.

Forms

Details should be asked from a human perspective, not the application or database logic. Ask their name before their address.

Order the Form Logically.

Group fields.

As mentioned in the previous chapter, we process information in chunks. Grouping fields creates chuncs. This way the user gets a better overview of the required data.

Skip as many optional fields as possible.

Most people prefer not to be bothered with unimportant questions. Long forms are tedious. Keep it short and mark when a field is optional, not the other way around.

Mobile-first, but make it keyboard-friendly.

One should be able to tab through the fields and edit information with only a keyboard. Auto-select the first field too, that's another step spared for the user.

Show the user what's happening. Every action should trigger a reaction.