Context Aware Design

Monday, July 21st, 2014

The concept of context aware design is not a new one. We already alter our designs today based on the context in which our users will see them. For example, we may make a responsive site so that users visiting from smartphones or tablets get a better experience on their device. Perhaps we have print stylesheets so that if the user prints a page they get a design that is tailored to that context. The concept is not new but the implementation is only in its infancy. So, what lies ahead in the future of context aware design?

Last Wednesday I took part in the CSS Summit webinar and heard from a broad range of speakers on various topics, but this idea of context aware design by Matt Carver really stood out to me.

First let’s talk about what is possible today. We already know about responsive sites based on screen size and about stylesheets for print but what other context can we gain from users already? Well, using JavaScript we can very easily tell the time of day users are visiting at. Using HTML5 Location we can tell exactly where in the world they are visiting from; and from their location we can find out the weather. This gives us the opportunity to create a tailored experience based on these parameters. The example Matt gave in his talk was of a coffee shop.

How would this work?

Person A visits the shop’s website within 1 mile of the physical shop. It’s 7:30am. That person may be presented with the opening hours and could be marketed a piping hot Americano to kick off their day.

Person B then visits the site also from within 1 mile. This time though it’s 3pm and the weather is over 100°F. Let’s show them up front the Frappuccino that’s awaiting them if they make their way over.

Now Person C now visits the site. They they are 200 miles away. There isn’t much point showing them the opening hours front and centre because it’s unlikely they’re looking for this information right now (or maybe they are, but we’ll come back to that). What we might want to make clearer to them is our online store. “Hey buddy, buy our delicious home roasted Ethiopian Yirgacheffee coffee beans. We’ll deliver them straight to your house!”. Yes, please.

So we’re altering the design of our site and the experience for our users based on the context in which people are visiting. The goal here is to deliver the best experience possible to the user. Now that doesn’t mean we hide information away from people. Person C could have been about to visit from out of town and they really did just need the opening hours. That’s OK. We aren’t keeping the opening hours away from them. We still have to have a great user interface that will make it easy to find that information should they need it.

All of this is possible today, but what’s coming in the future?

There are some proposed Level 4 Media Queries that would give us a greater idea of context and environment. For example, we may get access to the ambient light sensor of a person’s device. Someone visiting in the dead of night? Maybe we give them a dark theme of our site so as not to burn the retinas out of their head. Someone else visiting outside at noon in the middle of summer? Maybe we increase the contrast between the background and foreground elements making it easier to read.

Access to the accelerometer of the phone would allow us to tell if a user is walking while they’re on our site. We could make our touch targets a bit bigger for them perhaps, making it easier to navigate the site while they bump into other commuters on their way to work.

Another proposed media query would provide the ability to know the size of a pointer. Right now we assume that if a user is on a screen with a lower resolution that it must be a mobile device but this isn’t always the case. In fact, as smartphones increase screen resolution year on year this assumption seems to be less true as time goes on. The ability to tell how big the pointer is actually allows us to make much better design decisions than if we were going by device width alone. If a user is visiting on a lower resolution display but they still have the precision of a mouse we don’t really have to increase our target sizes by too much. If they’re on their iPhone, however, and they’re using their sausage fingers then we should increase the size of buttons and links to make things a little easier for them.

The concept of context aware design is not a new one. But how we can implement it, and how far we can go with it, is yet to be fully discovered. We know we should be thinking about what a user wants when they visit our site but we should also be considering the environment and circumstances the user is in when they visit.