Quoting UI

Brainstorming, research, prototyping etc. around quoting UIs.

Quoting another source is fundamental to the web — so much so that there are two whole HTML elements given over to them, ranking quoting material from other sources as vital as marking up headers or linking to other documents.

But quoting UIs (and other related UIs) are almost always crap or nonexistent. Why is this, what great exceptions to this vague rule are there and what can we do about it?

Use Cases

Quoting (any by extension it’s intra-silo equivalents) can be used in a remarkable range of different ways. Some I have observed (TODO: examples):

  • Referencing content when replying directly to the author
  • Making a comment on a particular piece of content
  • Using someone else’s words to back up a point you’re making
  • Redistributing content as-is (e.g. retweeting) either to promote it or (more interestingly) to demonstrate it’s fallacies

Existing UI

Github rolled out a nifty UI for quoting someone when writing a reply to a comment. They make nice use of the selection API — the combination of mouse and keyboard interaction seems like a bit of a bummer though.

Silo Equivalents

On Twitter, retweeting was born out of quoting tweets (indeed some twitter UIs have multiple retweet options, “native” retweet and “quote tweet”):

Tumblr treats quotes as a first class content type (TODO: what is their UI for quoting like?).

Link Previews

Some silos (e.g. Facebook) offer you a computed preview of content you’re linking to — this can be a form of quoting. See Link Preview on indiewebcamp for more.

Markup

Despite being given both the q and blockquote elements (WHATWG Spec), there is much contention in the dev world about how exactly is best to mark up quotes.

Potential UI Flows

  1. I start writing a note/article
  2. I include several URLs
  3. My software unobtrusively pulls summaries of the linked pages into my UI
  4. I can drag and drop those summaries (or parts of them, e.g. authorship markup, date) into my document, or optionally load the rest of the content to quote
  5. Once the rest of the content is loaded, I can select a section to quote, D&D it into my note. It has h-cite markup, authorship markup, etc (all of which is configurable)

With Web Actions

I implemented this flow as part of the Web Action Toolbelt.

  1. I browse the web and see a piece of content I want to bookmark for future reference or comment on
  2. I select the content
  3. I am presented with a UI allowing me to start an article/note with that content
  4. I also get drag handles so I can add the quote to an in–progress article

Quoting from Books/Tangible Media

  1. I post a note of the form Currently #reading {booktitle}.
  2. As I am authoring the note, that book title is looked up somehow (TODO: How?), and a URL/author/summary/pubdate is found and appended to the note (probably via HTML and machine tags).
  3. Later, I want to quote something from the book. As I insert blockquote markup into the text field, the UI loads up any notes I’ve tagged with #reading (or #book, etc), and makes the author/title/url metadata draggable so I can easily reference it

See Also