autosuggest

From IndieWeb
Jump to: navigation, search


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

Instagram

Instagram in its app has autosuggest in its image description box for both users and hashtags:

IMG 4857.PNG instagram hashtag autosuggest.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

Personal tools
Namespaces
Variants
Actions
Recent & Upcoming
Resources
Toolbox