Designing UIs When You’d Rather Be Doing Other Things

Abstract
The following is an edited version of a stream of text messages to Lorenz Kuhn. It is an attempt to summarize my notes on UI design, for which I claim neither completeness, nor coherence.

Think through the following questions, the fancy term for which is — I believe — information architecture.

1. What do I want to convey?
2. Along what dimensions will I want to convey this?
3. How will I map these dimensions to the tools available?

It goes without saying that if you’re not yet clear about what you want to convey, then the rest of the exercise is pretty much robbed of meaning.

Dimensions then are things like priority, relatedness, progress, actionability, causality, and so on. Commonly available tools are type, color, whitespace, opacity, iconography, animation. A straight-forward mapping might be the following:

Over time you will notice that many different tools can often convey the same dimension of information while incurring different costs to the design (most often a perceived increase in “business”).

I find for example, that unrelatedness is often best conveyed through whitespace. Should that be impossible — whitespace might already be used to convey something else, or there simply might not be enough space left — a color differential can do the trick as well. Only if all else fails will I reach for the brute-force solution and employ a border.

For an illustrated example of this see Data Looks Better Naked, by Darkhorse Analytics.

You want to be aware of situations in which more than one tool is applied to a UI component for no good reason. If there is one takeaway here, it would be this. There are very few good reasons to do much of anything in UI design. Every custom decision we impose on platform defaults takes time and brain power, and increases the surface area for accessiblity issues (many of which you will notice on this very website!).

A corollary of this: unless you are designing for robots, there is rarely a situation in which any specific amount of pixels can be motivated by a concrete information conveyance problem. So don’t use concrete pixel amounts in your designs.

That being said, there should always be time for some perceived arbitrariness, for character to shine through. Design inward-out. Pick your battles.

For everything else, pick rules and stick to them. Having any rule at all beats having the rule by a wide margin. Consistency simplifies both design and implementation, and reduces cognitive load for the user. In order to have any of your chosen rules work consistently, use a reset stylesheet.

In particular, have rules for whitespace and typography. Getting these two right is the kind of 80/20 solution that you could reasonably hope for, before having to hire a professional.

Typography

Pick any font family and a range of font sizes defined with respect to the browser font size (i.e. 1rem). The proper way to do this is to head to modularscale.com and procure yourself a range of font sizes, however I personally have regressed to navigating the exponential function with base 1.15. I aim for around twelve words per line of text, at a line height in excess of 1.35em for paragraphs.

The actual choices won’t matter nearly as much, as long as the goal is consistency. Once character and emotion enter your information conveyance vocabulary in earnest, it is time to hire a professional.

Whatever you do end up with, assign the results to slots in your toolbox (for starters, define major headings, sub headings, and text paragraphs).

From here, Butterick’s Practical Typography is a very well known resource on typography basics.

Color

Pick colors from pre-made palettes such as the ones on material-ui.com. One usually needs a base, a primary, and an accent color, one or two text colors and maybe something pleasing for balance.

Whitespace

Pick a scale (e.g multiples of .5rem) and use more whitespace if in doubt.

Borders

Avoid if possible. Too many lines give the eye too much to cling to. However this is your chance to use the word Gestalt in a professional context. Use whitespace, color, and type instead.

Again, Data Looks Better Naked and Clear Off The Table are great illustrated examples of this applied in practice.

Icons

Usually less clear and worse looking than a nice text button.