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

autosuggest


autosuggest (AKA auto-suggest) is a user-interface feature that provides a list of options while the user is typing, related to what the user has typed, possibly beyond mere (sub)string matches.

Contents

Background

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.

IndieWeb Examples

  • none currently

Silo Examples

Examples from silos on their websites:

Facebook

Facebook on facebook.com in their search bar at the top has excellent autosuggestion of names of people you are connected to, pages you've "liked", and even people you *may* know (i.e. 2nd degree).

Twitter

Twitter on Twitter.com in their 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

Google+

GooglePlus on plus.google.com in the "share what's new…" box (if prefixed by @ or +), or bare in the to: or top search boxes will autosuggest,

  • first from your circled people,

circledpeople.png

  • secondarily from other people with public profiles.

publicpeople.png

  • finally from pages.

publicpages.png

  • It shows full name, photo and circle(s).
  • It does not show any unique ID (email or URL), leading to poor UX if someone has multiple gmail accounts.

gplusfail.png

Platform Examples

Examples specific to a particular platform.

iOS Tweet Sheet

The 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

Twitter iOS app

The 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

Analysis

Lack of consistency

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

Common aspects

Common denominators (add more as they emerge):

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

Related sessions

At IndieWebCamp 2012:

sessions both discussed indie autosuggest a lot, and resulted in some code demonstrated as part of the day 2:

Prototypes

Demonstrations

See Also