Everything I Know About Designing Interfaces

Till now this was just a disconnected collection of notes, bookmarks, articles and general principles. They would float around in the back of my mind every time I worked on a project. I am putting this together so that I can consolidate and share what I know.

There will be no examples of my work. I am not going to pretend I was doing this stuff all along. This is more like the framework I would like to follow for my next design project.

Here goes…

Collect

Gather all your bits before you start.

Bits are forces that shape projects.

Most bits are usually concerns. Jobs to do. Problems to avoid.

Other bits are your competition.

Some bits are just related websites. Websites that people use when they use yours (like trip advisor if you run a hostel).

When redesigning a website the old website will have a bunch of bits. The layout of the interface, the colour palette, the logo, these are all forces that will shape your project.

Collect everything.

Connect

If one bit impacts another then but, place them together.
Two or more bits make a chunk.

Chunking makes it easier to understand everything your website needs to do.

Don’t worry about the end game, just figure out which bits connect to each other.

Prioritise

Super important chunks should be red. Necessary chunks are orange. Green chunks are nice to have.

People will come to your website to do a job. If a chunk is critical to getting that job done, make it darker.

List out all your chunks from dark red to light green.

Design

Design the darkest red chunk first. It will help establish rules for lighter chunks later.

By the time you get to the lighter chunks, spacing and placement patterns are set and chunks will start designing themselves.

Spend most of your time getting the red chunks right. If you mess everything else up, you will still have an interface that gets the job done.
Pick patterns that will help people use things. A good design pattern considers why people want to use a chunk, it understands what the chunk helps them to do, and predict what will happen after they use it.
Smart and original is good but obvious is better.

Aim for the obvious.

Shape

Every screen should support a single action of real value.

This one primary action should be obvious twenty feet from the screen.
Secondary actions should stay on secondary screens. Defer decisions to secondary screens by revealing information as necessary.

This makes things easier to learn, easier to use, easier to add to and easier to build on.

A simple way to make good decisions is to design your website for someone who is blind.

Press command + F5 on a mac to turn on voiceOver. You can then tab through a web page to understand how a blind person would experience it.
Designing for a better voiceOver experience makes things fantastic for people who can see.

Another good way to make great decisions is to design for a mobile screen first. The lack of real estate will force you to focus on the essential.

When designing for mobile, a good rule of thumb is to accommodate the most constrained grip. People should be able to use your interface no matter how they hold their device.

The thumb offers the most convenient range of motion with the least possible effort. Make sure important buttons are within a thumb’s reach.

Consistency

Elements that behave the same should look the same.

It is just as important for unlike elements to appear unlike and be inconsistent.

Users should never wonder whether different words, situations, or actions mean the same thing.

The obvious almost never is.

Following established conventions prevents unnecessary confusion.
Some conventions are global. For example, most people are used to in-line links being underlined. It is rarely a good idea to break these conventions unless you have a solid reason.

Some conventions are local to your industry. Conventions can relate to the content, a function or purpose, or the look and feel. Those bits you collected about your competitors and related websites should help now.

A good reason not to follow a convention is when it threatens control and freedom.

Control gives people the freedom to do the things they want to do. Think of a ‘back’ button. This is a good global convention. People should always be able to “go back” and fix mistakes without hassle.

Improve on conventions that force people into unplanned interactions, confusing pathways, and surprising outcomes.

There is no room for confusion.

Typography

Once each screen has a shape, begin with typography.

Most of what you see on a screen is type. Type is in the content, the navigation, it’s on buttons, in the headings, and everywhere else.
Unless you know what you are doing, stick to three typefaces of less.

• Display Type – These are your H1’s, this they should look great large.
• Secondary Type – This is your byline, the H2, this should pair well with your display. It helps if it looks good in all caps because it usually ends up on buttons and in the navigation.
• Body Type – Must be legible at small sizes. Pick one typeface to capture the tone you want (delicate, masculine, friendly, modern, etc).

Pair the primary type with a matching typeface. Look for variation to provide contrast, but similar enough that it’s not jarring. Only if the pairing feels unfinished should you pick a third typeface to bridge the gap.

Stay away from pure black and pure white. A light or dark grey typeface will always look better than black or white. Aim to keep the contrast between the light and dark greys above a AAA contrast rating.

Colour

Leave colour till last.

Using contrast instead of colour keeps your website accessible to people who are colour blind.

Designing in greyscale then lets you add colour with a purpose.

The simplest strategy for an effective colour scheme is to only use one colour.

A monochromatic colour scheme gives you lots of shades within a single hue.

Single colour schemes are the hardest to mess up and the easiest to understand.

If you must work with more colours, there is a great article in the notes about building analogous, complementary, triadic and tetradic colour schemes.

Design as an Error Correcting Process

I should have just made a checklist. A simple 32 point process. Just check everything off and you have the perfect interface.

This is a fantasy. One I have had many times.

Fortunately, there is no formula.

I watched Ryan Singer talk about design as an error correcting process. It stuck with me because it is a beautiful way to look at the tensions at play when designing.

Design solves problems. When you push a design out into the world, it collides with reality and a whole bunch of people have a problem with it.
The errors you chose to focus on and the way you make them easier to handle defines you as a designer.

This was a list of guidelines that I want to follow. I am sure it will change over time.

Notes

• The first few steps all belong to @rjs. He wrote a piece in 2004 called An Introduction to Using Patterns in Web Design and it had a huge impact on me. I’ve struggled to find anything on his blog that is not fantastic. The talk I mention at the end, where he discusses design as an error correcting process, is called Designing with Forces: How to Apply Christopher Alexander in Everyday Work.
• I try and keep photography and the use of graphic elements to a minimum. Not because of some minimalist ideal, but because of load times. The faster a page loads, the quicker someone can use it. When I do work with photography I try and follow the 7 Rules for Creating Gorgeous UI. This is a delicious two-part post by @erikdkennedy that should be on everyone’s reading list.
• The colour and typography section was all stuff that I learned from a great course called The Better Branding Course by @ckelso.
• Color Theory For Designers: Creating Your Own Color Palettes by @cameron_chapman (https://twitter.com/cameron_chapman) is a great introduction to colour theory.
• The bit about designing for thumb flow came from an article called How We Hold Our Gadgets by @bigmediumjosh.
• The 10 Usability Heuristics for User Interface Design by @NNgroup is essential reading.
• GoodUI.org is a great resource for evidence based design patterns.
• Most of the accessibility pointers came from a course called User Experience (UX) Design For Engagement by @thebrainlady.
• Contrast is an OSX app that came out with a great guide to contrast ratings.