:format()//media/Mobile-app-image-istock-1.jpg)
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 build responsive sites so that users visiting from Smartphones or tablets have a better experience on their mobile device. We can also have print style sheets 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 a variety of topics, but it was the idea of context aware design by Matt Carver that really stood out to me.
Firstly, let’s talk about what’s possible today. We already know about responsive sites based on screen size and about style sheets for print but what other context is already in existence for users?
One such example of this is through the use of 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 that of a coffee shop.
So, how exactly would this work?
Person A visits the shop’s website within 1 mile of the physical shop. It’s 7:30am. This person could be presented with the opening hours of the shop and marketed with a piping hot Americano to kick start 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. This person could now be shown the icy cool blended Frappuccino that awaits them if they stop by.
Person C visits the site but they’re 200 miles away. There isn’t much point bombarding them with the opening hours because it’s unlikely they’re looking for this information at this point in time (or maybe they are, but we’ll come back to that later). Instead, the message we may want to impress upon them is that we have an online store that delivers to their area. “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 possible experience to the user. Now, this doesn’t mean that we hide information from people but rather that we highlight certain targeted information to suit a user’s individual needs. For instance, Person C may have been planning a visit from out of town and may have been checking the opening hours. With context aware design, we don’t want to keep the opening hours from them. It’s still necessary to have a great user interface that makes information readily accessible should a user 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 instance, it may be possible to gain access to the ambient light sensor of a person’s device. Say for example, someone is then visiting our website in the dead of night? We could present them with a darker version of our site so as to avoid startling any night owls with a screen that’s too bright. What about a visitor accessing the site at noon in the middle of summer? We could then increase the contrast between the background and foreground elements thus making the text easier to read.
If we take it a step further, gaining access to the accelerometer of the phone would allow us to tell if a user is walking while they’re browsing our site. In response to this, we could increase the size of our touch targets making it easier to navigate the site while they try to navigate their way to work without repeatedly bumping into other commuters.
Another proposed media query would provide the ability to know the size of a pointer. Right now we can 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 basing this on device width alone. If a user is visiting on a lower resolution display but they still have the precision of a mouse then we don’t really have to increase our target sizes by too large a margin. However, if they’re on their iphone using their fingers to navigate then increasing the size of buttons and links will make browsing a little easier for them.
Could this work for a university?
A university's website needs to serve the needs of thousands, if not millions of people. If the site completely changed one day to the next because there happened to be a change in weather that day then the university wouldn’t be serving the needs of their users. However, that doesn’t mean Context Aware Design doesn’t apply to higher education institutions.
Picture an undergraduate student that visits the site every single morning, and navigates three levels deep, always going to the timetable page for her course. A university could keep a link on the homepage to her timetable just for her, using cookies to generate this dynamic content.
How about someone visiting the university’s website from out of State for the first time? This could potentially be a prospective student. Why not prioritize presenting this student with all the relevant information on how to apply, programs of study, campus facilities and tuition fees?
The concept of context aware design is not a new one but the full potential on how it can be implemented, 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.