How to design for context

Okay, so what’s the context? Let’s start with the basics. What is Contextual design and why do we care to follow it in the design?

By Google (power by oxford language) — The term “Context” means the circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood.

When designing any solution we need to make sure that the solution is always apt, according to the situation, the intention, and the desire of the users.

Consider the experience, when you reach the airport, and your ticket pops up on the phone display lock screen. No hassle to open the mail or app and find the ticket to show at the gate. Cool right!

Contextual design helps in creating these kinds of experiences.

According to IDF — The Term “Contextual design” is defined as a well-defined, user-centered design process where the core idea behind is to understand the users in their environment, performing their tasks, while they are doing it, to fully understand their intentions, desires, and drivers.

The summary of the overall process is shown in the image below

Check out the complete process of contextual design on IDF.

Based on key principles of contextual designs, here are a few points to remember to create contextual designs -

Be aware of the user’s work practice and design for it explicitly.
Consider situations where users need to work in outdoor areas in the bright daylight, or if they have to work where there is no network. If the surrounding is quiet or full of noise where it is easy to get distracted and lose focus.

Sometimes, users would not realize the issues caused by these work environment-related issues. Be open and see if their environment has a few characteristics that might impact the solution and design for it accordingly.

Use observations and field interviews to gain an understanding of users’ work practice — motivations, workarounds, strategies
Users, if they use a system daily, get so acquainted with their actions, they perform their daily tasks in a flow. However, may not recall everything if they are not in their actual work setup. Try to go on a field trip for the contextual inquiry, you’ll be surprised by the common issues and their workarounds that they may not able to articulate or recall in an off-work setup.

Ask questions and suggest interpretations of the user’s actions and motivations.
Not everybody can articulate and express their thoughts clearly. They might be trying to perform some action, but not able to convey the actions and motivations behind that. You can help them articulate by asking questions and taking a confirmation on the interpretations.

Maintain coherency in the system with consistency in function, structure, layout, and flow across the system.
All your interpretation techniques, while thinking about the designs, be it storyboard, task flows, or environment diagram, etc should be coherent, they should speak one language as a part of one family. For example — all pages of amazon focus on users’ interests, reviews, recommendations, and suggestions for similar items. All pages of the site look like they are part of the site — a single page could not be changed.

Use representations — sketches, drawings, and models to convey key design considerations all the time.
Making things visible, makes discussions easier. It makes us visualize and helps in clearing any communication gaps. Be it rough sketches or quick prototypes, use these representations to communicate your ideas and take feedback from the users.

According to Karen Holtzblatt and Hugh Beyer, as published in the paper — “Contextual designs” can be briefly categorized into 3 layers -

Practice Design
Practice design uses scenarios, use cases, and user stories to explore the different tasks, activities, and situations the user may encounter and how the product will support them.

Interaction Design
Good interaction design ensures each place defined in practice design has a layout that presents the purpose and function available in that place.

The key to making interaction design successful is — A clean structure and consistency. A clean screen structure is easy for the user to make sense of. The consistency of screen structure across the designs makes the basic structure consistent, familiar, and comfortable.

Visual design
In which the graphical treatment, colors, branding, animation, and details of the interaction are defined.

It has to ensure consistency of look and experience across the whole product, regardless of platform. This is where the Sensation Model helps the designer determine what tone, brand, and feel they want to communicate.

An example of using visual design with context is the display setting of macOS, which depending on the day or night switches the display setting accordingly, Including the wallpaper.

How to design contextual interfaces -

Show only relevant options.

This will reduce the clutter on the screen but also the cognitive load on the user. They will be able to quickly find the option they are looking for.

According to Hicks Law, The more options you present, the longer someone will take to decide because their cognitive load has increased significantly, and providing too many options at once can stifle user experience as there becomes an unnecessary level of complexity in your product.

A classic example of this — is Google Homepage.

Also, the reason why most UI designers prefer Adobe XD over photoshop for interface design. Photoshop has lots of functions that are irrelevant and becomes visual clutter for those who don’t need them.

Make sure all the options are also available on the global menu

Since the actions are tasks dependent, most of the options are available to the users only when required and hidden the rest of the time. To make them aware of all the available actions, it’s a good idea to keep all the options available on the main menu.

Indicate if hidden

If not shown explicitly on screen all the time, make sure to put an indicator to show there are more options available.

Provide help or onboarding demos to make them aware of actions

This is especially relevant in the case of mobile and interfaces, where, contextual options are available on specific gestures for example right swipe or double-tap. Users may never come to realize the available options if hints are not shown.

Limit the number of actions available. Use groups if required.

If more actions are available, use groups to organize them into categories so that it helps in skimming through options and finding the required one quickly.

Thank you for reading this far. Hope this helps in designing for a better context. Feel free to share your thoughts on how we can improve the designs using better context.