Documenting Components

Serve a System’s Audiences with Well-Architected Content

Nathan Curtis
Mar 20, 2018 · 10 min read

#1 of 7 of the series Documenting Components:
Overview | Intros | Examples | Design | Code | Authoring | Myths


High-quality component documentation is a hallmark of an effective library. We describe each UI component robustly, aiming to drive effective design decisions and speed development. Good doc isn’t free. It takes planning, effort, and process to make examples and guidelines that make a difference.

Starting here, this collection of six articles spans the story of documenting components. I begin with the strategy of audience, content, and architecture. Next, I expand article by article on introductions, examples, and guidance on design and code, and conclude with process. The tips reflect what I’ve learned over years and am inspired by what our community shares publicly today.

And so I begin by asking the question: what audiences is this doc for, what content do they need, and how do we optimally architect pages to convey it?


Audience

Engineers, Designers, and Everyone Else!

In my opinion, in both cases, yes. Absolutely, yes. Component documentation must serve both audiences, always, to varying degrees.

Beyond that, is it for anyone else? Possibly, especially as a system entrenches itself into how teams get things done. Powerful, pithy intros sensitize product managers. Examples expose states to QA specialists. Style, behavior, and editorial concerns guide researchers and content strategists alike. Accessibility practitioners can revel in a place their guidelines calls home.

Many system teams also publish a system as publicly visible to a community. While intrinsically they seek to share, extrinsically they justify a visible site as a recruiting tool. The system shall expose rigor and quality, craft and collaboration, practices elevated so that a talented recruit sees strength.

The documentation’s primary goal remains: equips practitioners — engineers, designers, and everyone else — to use a system efficiently and effectively. As it grows, it can serve many despite their varying needs and frequency of use.

Takeaway: The arc of design systems bends towards collaboration across disciplines not limited to designers and engineers. If you intend to scale, advocate for content that serves a widening audience.


Engineers, then Designers, then Everyone Else

So, who’s most important? My experience suggests a clear starting point: systems are first made of, by, and for engineers and designers. While others welcomely contribute and benefit, they are secondary. Serving secondary audiences less than optimally may be a necessary tradeoff. If we skimp on engineers or designers, it’s a problem. A big problem.

What about engineers versus designers? Every system I’ve worked recently serves both, guiding both design and code. Some doc I observe from other orgs reflects a strong bias towards one or the other, or separates destinations for each (more on that later). There are many dimensions to consider: your objectives, their frequency of use, content depth, quality, cost of content production, and relevance to their work.

I’m a designer. But I’m also a pragmatist. If I had to choose one, without any context, I’d favor engineers. Getting 50 engineers to code well-designed components is more likely to result in cohesive, efficiently built experiences compared to 50 designers reading tomes of guidance about decisions already built into that code.

Takeaway: Audience priority depends on many factors. Expect designer and engineer needs to collide, and attempt to optimize for both. If you can’t, orient tradeoffs towards those using the material closest to the final product, usually code. That means engineers first, designers second.


Content

At a high level, component doc usually includes these four types:

  1. Introduction of component’s name and succinct descriptive content that sets the tone of what’s there. (Required)
  2. Examples illustrating a component’s named variation, states, and other dimensions, preferably paired with and rendered by code instead of presented via static images. (Required)
  3. Design Reference including Use Whens, Do’s and Don’ts, and guidelines for visual, interaction, and editorial concerns. (Recommended)
  4. Code Reference detailing the code’s API (such as Props) and other implementation concerns. (Required, if code exists)

Content Production Cost Varies by Type

But, take a deep breath. Effective Design reference can be very costly, skimped to achieve only basics, or skipped altogether. Design narratives depend on a system’s goals, team capacity and talent, and a community’s appetite.

Takeaway: Component doc can include a wide variety of content. So start discussions at the top to evoke a team’s values and discuss authoring types designers and engineers may distinguish (code vs. design reference), overlap (intro), or share (examples, including naming, content and order).


Architecting the Component Page

Design & Code: To Fragment or Combine?

Google Material’s doc ecosystem illustrates fragmentation. Material’s design foundation arose prior to its implementations, from Material Design Lite and the Polymer Project to Android Developer’s design section and Material UI (built for React). These implementations reference loosely link to their design parent, which remains unencumbered by code concerns.

Google Material propagates stories across Material Design, Material Design Lite, and Material UI’s Demos and API.

This fragmentation isn’t just essential, it’s meaningful and justified. Material’s spread across frameworks, teams, platforms, and—let’s be honest—the world exceeds every other design system in practice today. Newsflash: we all aren’t aiming to be Google Material!

For the rest of us, a design goes here engineering goes there mentality is common. This intent focuses content by discipline, optimizing a reading experience for each audience separately.

Component design guidance and code & API docs, loosely coupled via separate sites. Example: Atlassian.

A design/code separation carries risks, too. Over time, sites fall out of sync as:

  • Taxonomies diverge (even for simple names like loader & spinner).
  • Features diverge: design expresses deep features unachievable in code, or code articulates undesigned outcomes.

The lack of agreement feels ok. The stories are separate, right? Well, they are conveniently separate for an author’s workflow, at least.

Yet adopters yearn for a single source-of-truth. Those interested in both stories find themselves in a tennis rally, back and forth, back and forth. Useful details exist in both places, architected distinctly as narratives adopters must knit together themselves.

Takeaway: Be wary of a design & code split. While convenient to author and publish early on, long term risks may outweigh benefits. Sibling sites can indicate of a corrosive divide between design and engineering, too.


For Threaded Content, Stack or Tab?

Component documentation page that threads design and code content together in one scrollable view, as shown in Morningstar Design System.

A threaded page comes with tradeoffs: it runs longer with content varyingly relevant per discipline. As an alternative, other systems follow an introduction with content organized into tabs.

Takeaway: Blend design and code is possible, and a team can choose the UI—stacked, tabs, something else—that suits their interest.


Grouping and Ordering Content by Type

  1. Introduction.
  2. Examples—the venerable “goods” they are most after—front and center.
  3. Design guidance expanding on examples yet drifting into storytelling of uncertain length.
  4. Code reference, predictably structured and dependably authored. If engineers are the priority and Props paramount, elevate that reference table into a dominant position.

Examples rule, and so long as deeper design and code reference is a click away, you’ll be ok. Interestingly, industry examples name and prioritize design and code concerns with inconsistent labels and varied order.

Distinct approaches varying what content is prioritized: Code (in Examples) first, Design first, or a sensitizing example above tabs altogether

IBM Carbon values examples revealing Code first and foremost, leaving design details for Usage and Style to subsequent tabs. Hudl’s Uniform system reverses priority, telling the Design before Code, relegated to a second tab with a content taxonomy that’s similar but not exactly the same. Salesforce’s Lightning Design System presents a sensitizing example as a component explorer above a default Developer Guidelines tab, yet Implementation Notes and Design Guidelines tabs remain curiously empty.

Depending on an organization, additional sections — often, Accessibility — also emerge as a peer, perhaps before or after a Design tab.

Takeaway: Start with an Introduction and position Examples prominently. Beyond that, prioritizing Design or Code guidance varies by organization and how they value their audiences and storytelling.


For Longer Pages, Anchor Readers with Persistent Local Navigation

Morningstar Design System organizes local navigation along a page’s right rail with two levels of hierarchy.

Takeaway: The UI — across tabs or in a single scrollable view — can be a matter of taste, although many sites trend towards a vertical navigation that sticks. Ask your audience, know your content, maximize usability, and no matter what: keep section names and order consistent across the library.


Showing Design OR Code Or Both?

A design manager asks…
Can I hide all the code samples and reference tables?

An engineer asks…
Can I get rid of all the lengthy design storytelling?

Consider a toggle to hide design or code concerns. This requires classifying each content type as relevant to one, the other, or both audiences, such as:

  • Always display Introductions, labeled examples, and everything regarding accessibility.
  • “Design Only” could hide code snippets and overtly technical guidance like tables of Props or CSS Modifier Classes.
  • “Code Only” could hide lengthy sections on visual style and editorial considerations, but still reveal some guidance — Use Whens, in particular –relevant for engineers.

In a similar vein, Hudl’s Uniform implemented a page toggle to distinguish design and code, serving as a defacto tab to orient users one way or the other:

Hudl’s Uniform design system distinguishes guidance for Design and Code via a page-level toggle (upper right).

The implementation is smooth and yet comes with a cost: build the UI and manage content effectively. Other clients I’ve served have sought a similar breakdown, finding my heart with acknowledging the separate yet open borders between design and engineering.

Takeaway: Filtering based on content types is a content management challenge more than a technical one. The stricter your IA, the better chance you’ve got, but it depends on an effective authoring workflow and separation of concerns that may challenge the notion of content relevant for both sides.


So, you have a strong sense of your audiences, know the kinds of content to produce, and agree on a high-level page structure. It’s time to get to work.

Next → #2. Introductions

EightShapes

A collection of stories, studies, and deep thinking from…

Thanks to John Henry Müller

Nathan Curtis

Written by

Founded UX firm @eightshapes, contributing to the design systems field through consulting and workshops. VT & @uchicago grad.

EightShapes

A collection of stories, studies, and deep thinking from EightShapes

Nathan Curtis

Written by

Founded UX firm @eightshapes, contributing to the design systems field through consulting and workshops. VT & @uchicago grad.

EightShapes

A collection of stories, studies, and deep thinking from EightShapes

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store