IndieWebCamp is a 2-day creator camp focused on growing the independent web

autosuggest

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

Contents

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

Demonstrations