This article is a stub. You can help the IndieWebCamp wiki by expanding it.

Contents 1 Autosuggest 1.1 Patterns 1.1.1 Examples in the Wild 1.1.1.1 Mobile 1.1.1.2 Web 1.2 related sessions 1.3 Prototypes 1.4 Demonstrations

Autosuggest

At IndieWebCamp 2012 a bunch of participants noted that there are several building blocks we need in order to advance the indieweb beyond just being a collection of hyperlinked independent websites. One of those is the notion of Indie autosuggest, in particular, for typing/picking a person, e.g. using their name or alias (@-name or otherwise).

Patterns

There are plenty of documented design patterns around the web for single line, static-content inputs (e.g. tag inputs, email To/CC/BCC), but hardly anything for multi-line, dynamic-content UIs where autosuggest is context-sensitive.

Examples in the Wild

Mobile

• iOS built in Tweet Sheet UI
  • Brings up suggestion UI on first character after @, no autosuggest for #tags
  • Requires tap on UI to accept autosuggestion
  • Backspace does not exit autosuggestion UI
  • @name autosuggestion UI shows @name, full name, profile photo
  • Photos: iPad iPhone
• iOS Native Official Twitter App
  • Brings up autosuggest UI on @ or # character entry
  • Requires tap on UI to accept autosuggestion
  • Backspace exits autosuggestion UI
  • @name autosuggestion shows @name, full name and profile photo
  • Photos: iPad

Web

• Twitter.com Compose Tweet Box
  • Brings up suggestion UI on first character after @, no #tag autosuggest support
  • Autosuggestion UI is a dropdown menu below the textarea
  • Return accepts autosuggestion and appends a space, spacebar does nothing
  • Backspace exits autosuggestion UI
  • @name autosuggestion shows @name, full name and profile photo

In conclusion, there is almost no consistency between UIs across platforms or even between platforms.

Common denominators (add more as they emerge):

• @name autosuggestion shows @name, full name and profile photo

related sessions

The 2012 Portland Sign In With Your Name and Open Real Time Search Engine sessions both discussed indie autosuggest a lot, and resulted in some code demonstrated as part of the Open Follow hack (code on github).

Prototypes

• http://test.waterpigs.co.uk/post-ui.html

Demonstrations

• http://www.youtube.com/watch?v=TvXtyA5J05k
  • A demo of a fairly capable post-in-place UI with tag and @-name autocomplete