How to leverage contextual design patterns?

When designed well, contextual actions can be very powerful. It’s a design pattern where you suggest the next best course of action or pick defaults without the user explicitly asking for it. Benefits are reduced friction, feature discovery, and enhanced experience.

Products leverage contextual design through the following methods:

1. By scanning user-generated content. Eg: Either by reading text, listening to audio files, or analyzing uploaded images.
2. By monitoring user behavior and product usage
3. Based on the current situation(mostly external factors)

In all the above-mentioned cases, the next best step is either automatically executed, suggested to the users, or the product simply defaults to the best layout. In total there are 9 permutations. These are not mutually exclusive. Best products amalgamate and leverage multiple techniques wherever possible. Listing down a few examples for each:

1. By scanning UGC(suggests best action)

Google Hangouts — When someone sends a “where are you” message, a “Share your location” button automatically shows up.

Google Inbox — Automatically allows you to snooze order confirmations to the delivery day.

Github — If you create a LICENSE file in the root of your GitHub repo, it prompts you to choose a license template, and fills it in with relevant details.

Preview the above example once again(it’s truly contextual). The choose a license dropdown on the top-right is only displayed when filename is LICENSE.

Hangouts — Notices when you’re talking while your microphone is muted and suggests the user to unmute their microphone.

2. By scanning UGC(defaults the best layout)

Google Inbox — Changes the sky in the plane image depending on the time of your flight in the email. Dark background for night times and light background for the day.

Google Photos — The search bar label or placeholder shows suggestions that are unique to your own photos.

Xcode — If you work with an image that is white on a transparent background, Xcode automatically adds a grey background for contrast.

3. By scanning UGC(automatically picks and executes the best action)

Google Forms — Can tell from the language in your question that you will want checkboxes, and changes the question type automatically.

4. Based on user actions and behavior(suggests best action)

Instagram — When you take a screenshot of a photo from the app, users will get a prompt encouraging them to use the native share function.

Inbox by Google — Inbox will detect when you are emailing yourself, and prompt you to create a Reminder instead.

5. Based on user actions and behavior(defaults the best layout)

Google Calendar — When you select one day on Google Calendar it recommends dinner but when you select a week, it recommends a vacation.

6. Based on user actions and behavior(automatically picks and executes the best action)

Google Translate — The second time you press the “Listen” button, it repeats the translation at a slower speed.

7. Based on the current situation(suggests best action)

Chrome — When you type is it in the search box, it suggests you the search term according to the weather and also shows the current weather forecast.

8. Based on the current situation(defaults the best layout)

WhatsApp Web — The favicon changes to a warning sign if your internet connection fails to connect.

Github — “Spooky” colors are used for the contributions overview during Halloween.

9. Based on the current situation(automatically picks and executes the best action)

OS X / Mac — If your machine is running hot and your fans are noisy, when you use the dictation feature OS X quickly spins down the fans so they’re quieter to enable better speech recognition accuracy.

‍