Part Three: The details · Screens

62 Start With the Feature

It feels orderly to design the navigation and the frame first. The thing people came for then gets fitted into whatever space is left.

A new product, or a new section of one, starts as a blank rectangle. The natural first move is to draw the frame: a logo, a navigation bar, a sidebar, a footer. It looks like progress, and it puts off the hard question of what goes in the middle.

The frame is a set of decisions about a product that does not exist yet. Does it need a sidebar? Nobody knows, because nobody knows how many sections there will be. Meanwhile the real work, the search for a flight or the form for logging an expense, is designed last, inside a box whose size was set before anyone knew what it had to hold.

People come to book the flight, and the frame is only how they get to it. If that one piece is clear and quick, they will put up with plain surroundings. If it is cramped and confusing, good navigation will not save it.

Adam Wathan and Steve Schoger make this the first piece of advice in Refactoring UI: start with a feature, not a layout. Take the most important thing the product does and design it alone, using real content. The navigation the product needs becomes plain once there are real things to navigate between, and it is usually less than you would have drawn.

In an old product the frame is a given, but draw the working part of a new screen first.

Before

Logo   Home · Trips · Deals · Help

Content goes here

After

From

Lisbon

To

Berlin

Date

Fri, March 6

Search flights

Before, a frame with a logo, a top bar, a narrow sidebar of grey bars and a small dashed box labeled "Content goes here". After, no frame at all, only a flight search form with From, To, Date and a "Search flights" button.

Therefore:

Design the thing people came to do before you design anything around it. Draw it alone, with real content, until it works. Add only as much navigation and framing as the features turn out to need.

In practice. On a blank page, draw only the working part of the next thing you have to design: the fields, the result, the main button. Do not draw a header until that part is settled.

Goes with. The feature you start with should be THE SMALLEST WHOLE THING (26), and it needs REAL CONTENT FIRST (65) to be judged. Once several exist, the frame's job is WHERE AM I (67).

Source: Adam Wathan and Steve Schoger, Refactoring UI (2018).