6. User interface

§The interface is where the product becomes visible, and because it is visible it attracts opinions. Everyone on the team has a view on the button, nobody has a view on the information architecture, and the meeting about the button runs long. This chapter is about putting the interface in its place: important, last, and cheaper than it used to be.

§ 6.1Fidelity is a choice#

§The single most useful idea about interfaces at a startup is that fidelity is a dial, and the owner sets it per question.

§A paper sketch answers "do people understand what this is for?" A grey-box wireframe answers "can they find the next step?" A clickable prototype answers "where do they get stuck?" A polished screen answers "do they trust it and want it?" Each level of fidelity costs more and answers a later question. The mistake is not choosing low fidelity or high fidelity; it is choosing a fidelity that does not match the question, and then reading the wrong answer. A beautiful prototype tested for comprehension gets compliments about the design and no information about the comprehension.

§Steve Krug's rule from Don't Make Me Think is the one to keep at every fidelity: a screen should be self-evident, and if it cannot be self-evident it should be self-explanatory. That is a scope-and-structure property that the surface can only reveal or hide. If a wireframe needs a paragraph of explanation, more polish will not fix it.

§ 6.2Borrow a design system#

§A design system is a set of reusable parts and the rules for combining them: type scales, colours, spacing, components, states. Large companies build their own because they have hundreds of screens and dozens of designers who need to agree. A startup has neither, and building one is a way of spending months on consistency before there is anything to be consistent about.

§Borrow instead. Apple's Human Interface Guidelines and Google's Material are complete, well documented and free, and the component libraries built on them get a first version to a credible surface in days. The cost is that the product looks like a product, not like your product. At the first-version stage that is the right trade. Distinctiveness comes from what the product does; it can be added to the surface once the surface has stopped changing every week.

§ 6.3The brand partner receives a handoff#

§Many early teams bring in a brand or design partner for the first version. The relationship works when the owner understands what to give them.

§A brief says "we need a design for an app that does X." A handoff says "here are the personas we validated, the flows a stranger could complete and the ones they could not, the words customers used, the business rules we decided, and the one screen we need to feel trustworthy." The first invites the partner to decide the product. The second invites them to design it.

§The partner should recommend and the team should decide. A partner who receives a handoff will push back on the structure where the surface cannot save it; that pushback is the most valuable thing they produce, and it only happens if the structure was written down first.

§ 6.4When polish starts to matter#

§There is a moment when the interface stops being a cost and becomes a reason people choose you. It arrives later than founders expect and earlier than engineers hope. The signs: users describe the product to each other by how it feels; competitors have matched the function; the remaining objection in sales calls is trust, not capability.

§In the AI era this chapter's advice has a sharper edge, because the surface is now nearly free. A prompt produces a plausible screen in a minute, which makes it easy to produce twenty and hard to remember that none of them answers the question a sketch would have. The conclusion of this whitepaper comes back to that. The next chapter is about the discipline the owner works with most and understands least: engineering.