September 22, 2021
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:
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:
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.
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.
Google Forms — Can tell from the language in your question that you will want checkboxes, and changes the question type automatically.
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.
Google Calendar — When you select one day on Google Calendar it recommends dinner but when you select a week, it recommends a vacation.
Google Translate — The second time you press the “Listen” button, it repeats the translation at a slower speed.
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.
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.
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.