From Citation UI To Focus Enabling Design

on (ttk.me b/4JB1) using BBEdit

While brainstorming an update to the citation UI on my posts, I realized that prioritized use cases could be used to create a more focus enabling design, both for citations, and in general.

This actually started with going through Falcon feature requests, specifically, archive navigation links. For the purpose of this post, suffice it to say that the archive navigation design I came up with required redesigning the existing permalink and citation interface - as seen on my notes (AKA tweets) and article pages:

2011-061 Falcon blog links/embeds interface

It's a simple design inspired by others, with some flaws (e.g. too small label text), and worth reconsidering.

Interface elements either help the user experience, or hurt it. A redesign should consider possible features and choose a minimal set justified by essential use-cases.

The permalink/citation interface use cases I came up with clustered into two broad categories:

Action Clusters

Here are some common permalink quick actions, clustered by motivation:

Unsurprisingly, these clusters overlap quite a bit with Web Action Motivations and Clusters with "post" and "share" referring to the same clusters.

All these action examples do share a common aspect: they're things you can quickly do and get back to whatever activity you were doing with minimal context switching and hopefully without getting distracted.

That common aspect for actions are what distinguishes them from activities, which brings me to my second set of permalink/citation interface use cases.

Current, Other, And New Activities

Sometimes permalinks and web citations are used for more than just a quick action. Sometimes they are part of, and add to either the current activity or another activity, or inspire creation of a new activity.

The two general activities where I seem to use permalinks and/or web citations the most are reading (e.g. one referenced article after another) and writing. In this context writing encompasses a broad set of specific long form authoring and content editing: writing or adding to email/post drafts, wiki pages, event organization pages, project plans, or any other kind of topic or goal focused documents.

If I'm researching a topic for a blog post and find a relevant source, then citing a permalink to that source is actively part of my current activity.

Sometimes I'll be reading an article and it will mention something worth quoting or citing in some other draft or post in progress.

Finally, an article might have sufficiently new and significant information to motivate me to start writing a new post, wiki page, etc.

GTD, Focus, And Flow

It struck me that perhaps it would be useful to evaluate and rank each of these (quick action, current/other/new activity) within the context of Gettings Thing Done (GTD) methodology, and more broadly, how they impact focus and productivity flow. I used a few simple criteria:

Using those criteria to evaluate the clusters of use cases:

quick action
ok if done under a minute, or instead (preferably?) collected to an inbox per GTD, thereby keeping a sense of flow
add to current activity
good, e.g. if part of (re)searching a topic. If the user did arrive via a search engine, especially with a specific search term, show links to topically related posts.
context switch to another activity
likely bad, it's defocusing, and context switches hurt productivity overall.
might be ok or even good if it's a switch to a higher priority context/activity/project. Anything that helps reinforce your own prioritization is a form of empowerment or at least encouragement.
new activity
bad in general. Anything that provokes a new activity is always defocusing, and mentally costlier than an existing activity.
except for emergencies. The only kind of new activity that's worth losing your focus for is an emergency, something that is realtime sensitive (inaction resulting in damage/loss).

I found it amazing to see a whole spectrum from good to bad in a list derived just from a few citation interface use cases. It made me wonder if this analysis might be scratching the surface of a larger problem.

Interfaces of Distraction

I and others have pointed out that we are surrounded by addictive interfaces of constant interruption that ding, alert, growl to distract us from whatever it was we were doing.

Constant interruption is just one form of the interfaces of distraction that encourage us to click around, perhaps to maximize page views (e.g. any news site with popular article lists), or worse, train us with intermittent reinforcement to habitually seek out distraction.

We're surrounded by this behavior: people on their smart-devices checking sites/apps for activity, and repeatedly clicking red/bold new messages numbers just in case someone they care about said or did something on Twitter, Facebook, Google+, email. Even popular articles lists might work like that - maybe the next article you read will be entertaining and/or relevant, maybe not. Better keep clicking, just in case.

We don't need the machines to build The Matrix to distract and pre-occupy us, we've already done it to ourselves.

Once you start to realize just how much of how many of the interfaces we use every day are designed for distraction, the problem can seem overwhelming.

Paper books and notepads start to look really attractive.

Focus Enabling Interfaces

Choosing tools that encourage focus is a necessary first step. We must do better: build focus enabling tools as well.

Using techniques like the GTD/focus/flow analysis above, it may be possible to deliberately design for focus, that is, build interfaces of focus, or focus enabling interfaces, simply by prioritizing more focus enabling use cases.

Nevermind the misalignment of incentives for companies to build interfaces of distraction (more page/ad views, time on site etc.) rather than focus, I want to build focus enabling interfaces for myself, for the Indie Web, and for anyone reading my site, because doing so benefits all of us.

Prioritizing Focus Enabling Use Cases

Starting from the permalink/citation use cases and sorting them by effect on productivity/focus, here's an ordered subset to consider for more focus enabling designs:

  1. critical: new emergency activity
  2. good: add to current activity - helps focus
  3. ok: quick action / collection -> return to current activity
  4. good but risky: context switch to a higher priority activity
  5. ok but risky: new higher (than current) priority activity -> hurts focus yet helps will power, potentially.

This is where focus enabling interfaces must draw the line, and in fact, explicitly avoid other use cases:

This prioritization still leaves a few open questions:

These questions are challenging in the abstract, however, when solving a particular design problem, they help prioritize the focus enabling aspects of the design.

Toward Focus Enabling Design

In the past few years the field of user experience design has grown to encompass both different sets of skills, and different approaches and methodologies. Here are a few:

In 20+ years of UX/UI design (since the time it was called HI (human interface) design), and searching for "design for focus", "interfaces of focus", "focus enabling design", I haven't found nor heard of prior similar analyses (possibly because the problem of distraction has only recently become pervasive). There are plenty of "distraction free" products (e.g. WriteRoom) that are designed for focus, but no analysis nor development of a theory/methodology/practice for focus enabling design as there are for those listed above.

If we want to address the problem of distraction it's not enough to design for what users want (people like distractions), nor their emotions (people anxiously check their inboxes/activity), nor their wide range of devices (for distractions on the go).

If we want to create interfaces that empower users by keeping them focused, we must explicitly prioritize focus enabling design.

I think the above analysis is a good start, and I'm going to put it into practice with the design problem described at the beginning of this post: a user interface for permalinks and citations of articles / blog posts. That's next.

Thanks to: Erin Jo Richey, Timoni West, Kevin Marks, Aaron Parecki, and Joël Franusic for reviewing drafts of this post.

Follow-up: Focus Enabling Design Distilled.