Text-only UIs

Before sketching in that notebook, try writing out your UI first. You might be surprised by what you find.

iA Writer is a great app for distraction-free writing, but before reading Jason’s tweet I’d never considered it a tool for UI design — but by combining text with some basic HTML I’ve found mocking up text-only UIs to be a helpful step in judging the overall effectiveness of an app.

To quickly demonstrate text’s value, here are some popular feeds, sans graphics.

Note: I tried to show the visual weight of each element using various <h1, h2, h3> tags — and speed trumped accuracy so you’ll see some things like User pic and Name on separate lines, when in reality graphics allowed for both elements to appear on the same line.

Instagram, Facebook, and Twitter — not an <img> in site.

Some observations:

• Instagram: The elegance of Instagram is obvious, even in its text-only form. (ps: do you think if they were acquired by Twitter instead of Facebook that they would have added pull-to-refresh functionality by now??)
• Facebook’s newsfeed is dense — even though what’s displayed is similar to Instagram. There are options to check your status, add a photo, or check-in — all from the main feed. Just seems like a lot of separate activities going on within a single feed. To Facebook’s credit, it doesn’t feel that overwhelming in graphical form.
• Twitter: I was surprised by how little emphasis was given to creating a new Tweet within Twitter’s main feed. Also user pics really stand out, and both name and username are displayed — which makes things feel a bit inefficient.

What do you think? Is a text-only lens helpful in creating and judging UIs? How do you go about using text to create great user experiences? Send suggestions to @kaz on Twitter.

ps: to make sure it’s not missed I wanted to post Jason’s followup comment here:

This is exactly the lesson: if your design doesn’t work at this level, visual design isn’t going to improve it—and you can’t cheat by making it ‘pretty’. I start by writing a UI conversationally, then consider hierarchy, and finally visual iterations. You don’t want to abstract with things like icons too early. Start with absolute clarity.

Thanks for reading this! If you got value out of this article, I would really appreciate you hitting the ♡ / recommend button below.