Kathleen Murtagh: https://www.flickr.com/photos/ceardach/4549876293/

Content-first design ain’t herding cats

Kill Lorem Ipsum for good.

I use the term “content-first design” a lot, but haven’t had to explain it in great detail. A colleague recently asked me to do so, here are my rough and random thoughts on the topic. Research later.

Trends:

1. The long-term (20-year!) trend in textual design is away from publisher/creator control toward reader/user control. Magazines/newspapers/books → desktop browsers → mobile browsers → (mobile) apps → content scrapers (e.g. Instapaper)
2. Most users now interact with a “website” through a single touch (one-page-then-out); or off your website (YouTube, Tumblr); and increasingly via apps (Tweetbot, Instapaper, Readability, Flipboard, etc.). This is true even for shopping/ecommerce. Navigation and other distractions actually drive users to mobile/walled gardens. (I’m not the only person who prefers The Atlantic on my phone, or via Instapaper)
3. Walled gardens will proliferate. My prediction: by 2015 Facebook will scrape shared links and serve them entirely in FB, stripped of original design a la Instapaper.
4. Curation (Tumblr) and plucking (Pinterest) will supplant browsing, navigation, perhaps even search. Loose streams of (hopefully well-metatagged) content will provide more value to users than information architecture.
5. Search is increasingly ungameable, or at least the returns for SEO have diminished immensely. Search is diminishing as a traffic driver in any case. In the long run, better-formed content will beat gaming the algorithm.

Responses:

1. Have AWESOME CONTENT that everyone wants to share. If you can’t do this, go home. If users are viewing/sharing your AWESOME CONTENT in Instapaper or Pinterest, that’s better than no one viewing it at all.
2. Remove superfluous stuff (navigation etc.) Simplify and streamline the page to focus on content, in hopes of keeping users on your website, and not in walled gardens.
3. Design for scrapers first. No fonts, no headers, no navigation, no slideshows, no buttons. What does the content look like in Instapaper? Design that view first. (This is literally “content-first design.”) Realize that you will have no control over this view. This design is an exercise for deciding which page elements are most important.
4. (Corollary: Mobile-first design is a good approximation of content-first design.)
5. Don’t overthink information architecture. Very few users oriented themselves in a site via your information architecture, even during the Good Old Days before 2007. Increasingly, people won’t even see it. Your information architecture is mostly navel-gazing.
6. Incorporate Calls to Action into content itself. Make product pages worth sharing. Put links in your videos, watermark photos with vanity URLs, use plain-old hyperlinks in text. If you think of calls to action as “the thing you want someone to do,” magical mystical strategy becomes dead-simple: make a link to the thing you want people to do, and write your content around that link.

These trends scared me at first. But: designers who plan before they decorate will be more important than ever. You can design for Instapaper. I was about to compare it to “herding cats” but then I realized, if you have AWESOME CAT FOOD (CONTENT) the cats will come to you. It is all about the CAT FOOD. AWESOME CAT FOOD will lure the cats.

SO: Kill Lorem ipsum for good. Don’t get hung up on “experience.” (UI, IA, workflow). That’s herding, not luring. And never start a design without two things in hand:

1. Content
2. Call to action