As I was leaving my office the other night, I glanced at my phone. Unprompted, it informed me that traffic was unusually heavy and that it was going to take me 42 minutes to drive home.

Not exactly what I like to hear as I’m rushing out the door, already 20 minutes late!

But I have to admit it was a useful and timely bit of information, and kind of impressive from a software and design point of view. The software assessed my context based on a few different factors, including my location, the time of day, and my past behavior. And then it used that data to anticipate the kind of information I would find useful as I’m leaving the office.

The reason I bring this up? It reminded me of an important and growing design trend: contextual UX design. More and more, the software that runs on all of our sophisticated devices uses contextual clues to give us what we need when we need it.

Context is more than the device

As this example shows, when we’re creating new mobile or web apps, there’s a lot of value in proactively providing the user with highly relevant information based on his or her current context.

What exactly do we mean by contextual UX design? Ideally, it would consist of every factor that comes into play as users interact with our app (although this is not always possible). It could be the time of day or the day of the week; it could be the user’s location or environment; it could even take into account the emotional state of the user.

One caveat, though: context is more than the device. It should not be limited to the characteristics of the different devices the app will be used on (desktop, tablet, mobile, etc.). The device and its screen size are without a doubt important considerations, but they are just a couple of the many important contextual factors we need to consider from the beginning of the UX design process.

Contextual UX design example: event-based mobile app

To explain what I’m talking about, let’s take the example of mobile app that’s being designed and developed to support a specific time-bound event, like a conference. This particular example comes from an excellent talk given by Derek Featherstone from Simply Accessible at last year’s CANUX conference in Gatineau, Quebec.

With most apps, designers break down the screen into multiple parts. There’s a header section, a navigation section, a side bar, a main section, a footer section, and so on. Some of these elements need to be resized depending on the device, but most are visible to the user. Regardless of the other contextual factors that may come into play as the user interacts with the app, he or she always sees the same set of screen elements and is provided with the same set of choices.

When adopting a more context-driven approach to design, we would want the app we’re creating to dynamically change the information presented to the user, depending on the user’s context.

For example, let’s look at how our conference app would behave differently depending on the following contexts: 1) before the event; 2) during the event; and 3) after the event.

1. Before the Event

Before the event, if we use a contextual UX design approach, the event app focuses on giving users information that is relevant to the type of interactions they’re most likely going to have in the lead up to the event. For example, if the event is a conference, the event date, time and registration information will have a prominent place on the screen.

If the application is for a fundraising event that occurs on a specific date, then the information displayed prior to the event may include a data entry screen for adding new potential donors to the database.

2. During the Event

When the event day arrives, the app’s interface changes to reflect the needs of users while they’re attending the event.

The registration area of the screen, which was front and center before the event, is replaced and the largest portion of the screen is dedicated to information about the day’s activities and speaking sessions. It shows the list of speakers and the location of the various sessions. It also provides suggestions for places to eat lunch or meet with colleagues for coffee. And it shows the latest Tweets from attendees that contain the event’s hashtag.

As before, the design of the app ensures that the most relevant information for the user’s current context will be in the forefront.

3. After the Event

When the event is over, the app changes again to reflect the user context. Scheduling and registration information is obviously no longer relevant, but perhaps we could include a slide show of the best photos from the event.

Attendees are also likely interested in getting contact information for all the speakers from the event and downloading speaker presentations, so we will want to provide an area that gives them easy access to that information.

If the event was focused on fundraising, the app could include a dashboard showing how many donors were contacted and how much money was raised during the event

There’s also a great opportunity for organizers to promote their next event, including the date and location and possibly a link for early-bird registration.

Conclusion: Think contextually

This is just one simple example of the power of contextual UX design. As we saw with our mobile phone example, it’s possible to take many contextual factors into consideration when designing a new app. You may not be able to use all of them when you’re working on your next project, but your users will thank you for incorporating whatever contextual factors you can into the design.

Robert Litalien

Robert Litalien

Robert Litalien is a Senior Software Developer at NetFore, a technical project lead and an expert in UX design.