Designers often think “context” is the device someone uses to interact with websites and apps. But context goes far beyond the device. Time, proximity, and state of mind are just a few contextual clues we can use to make our designs more responsive to peoples’ needs. I want to challenge you to think beyond the device and begin designing for context. Presented at #uxt-toronto Nov 20, 2014

1. DESIGN FOR CONTEXT, NOT THE DEVICE
UX THURSDAY TORONTO 2014 @feather

5. GREAT EXPERIENCES ARE
HEAVILY BASED ON CONTEXT

8. CONTEXT IS OFTEN SEEN
AS A DEVICE THING

9. so. much. FUN!

10. Really?

11. What defines context?
TIME, LOCATION, PROXIMITY, DEVICE, STATE OF MIND
CAPABILITIES, ACTIVITY, INTERESTS, INTERACTION

12. WHAT RESOLUTIONS
DO WE DESIGN FOR?

13. WHAT RESOLUTION RANGES
DO WE DESIGN FOR?

16. <p>
To receive all of these useful
resources, simply complete the form
to the right:
</p>
<p>
To receive all of these useful
resources, simply complete
<a href=“#subscribe>
the subscription form
</a>
</p>

17. What defines context?
TIME, LOCATION, PROXIMITY, DEVICE, STATE OF MIND
CAPABILITIES, ACTIVITY, INTERESTS, INTERACTION

21. 1
2
3
4

23. function schedule_change_home_page() {
if(date('Y-m-d') == get_option('wp_schedule_date')) {
update_option('show_on_front', 'page');
update_option('page_on_front', 381);
} else {
update_option('show_on_front', 'posts');
}
}

25. Context Map
Content Priority over Time
Logistics & Sell
CONTENT PRIORITY CHANGES
Speaker Info
Tweets
Schedule
Photos
Content Importance
WITH RESPECT TO TIME
Time
Pre-event Event Post-event

26. Context Map
Content Priority over Time
Logistics & Sell
Speaker Info
Tweets
Schedule
Photos
Pre-event Event Post-event
65% 0% 0%
20% 5% 15%
10% 10% 40%
0 80% 5%
5% 5% 40%

27. Sell: 65%
Inform: 15% Find a provider: 20%

28. Sell: 45%
Inform: 20%
Inform: 15% Find a provider: 20%

29. APPLY TIME TO CONTENT
FOR ANY INDUSTRY

33. Where is the train
station?
What building is
the event in?
Which rooms are
we using?
Where can I park?
Can I walk there?
(directions)
Which entrance
should I use?
What is the
nearest public
transit stop?
Local car rental
places?
What hotels are
nearby?
How do I get
there from the
airport?
Where am I on a
map?
Is the facility
accessible to my
wheelchair?
Help me get
there using
public transit

35. Context Map
Content Priority
with respect to Location
CONTENT PRIORITY CHANGES
WITH RESPECT TO Building
LOCATION
City
Block
Farther away
AIRPORT INFO
CAR RENTAL
HOTEL INFO
PUBLIC TRANSIT
TRAIN INFO
BUILDING MAP
WHICH ROOM?
WHICH ENTRANCE?
WALKING DIRECTIONS
BIKE DIRECTIONS
PARKING LOTS

36. APPLY LOCATION TO CONTENT
FOR ANY INDUSTRY

37. CONTENT DISPLAY CHANGES
WITH RESPECT TO LOCATION

38. CONTENT CHANGES
WITH RESPECT TO LOCATION

39. var show_banner = function(){
navigator.geolocation.getCurrentPosition(function(position){
var metroYMCA = {
'latitude': 43.663155
'longitude': -79.385028
},
distance = calculateDistance(position.coords.latitude,
position.coords.longitude,
contemporary.latitude,
contemporary.longitude);
// Check to see if the user is within 1000m of location
if(distance <= 1){
// Show custom message
}
});
};

41. WARNING!

44. ALL SAVED CONTEXT
MUST BE RESETTABLE

45. Context Map
Content changes
with respect to Proximity 3 ft / 1m
100 ft / 30m
1000 ft / 300m
.6 mi / 1km
6 mi / 10km
CONTENT CHANGES
WITH RESPECT TO PROXIMITY

46. Context Map
Content changes
with respect to Proximity 3 ft / 1m
100 ft / 30m
1000 ft / 300m
.6 mi / 1km
“Ethan is nearby.
I’ve locked your phone already.”
“Your twitter friend Karen is near.
Get a photo together?”
“Kate and Jason are at Signs restaurant
waiting for your reservation.
Let them know you’re almost there?”
“Kevin just sat down for lunch
at Cosmic Ray’s (5 min away)
Ask if you can join?”
6 mi / 10km “Ethan is at the Wild Kingdom.
Your phone is safe.”

47. Context Map
Content changes
with respect to Proximity 3 ft / 1m
100 ft / 30m
CONTENT CHANGES
WITH RESPECT TO PROXIMITY
1000 ft / 300m
.6 mi / 1km
6 mi / 10km
Sitting at your desk.
Notices on iMac only
In the building.
Notices on all devices (choice).
Away from office.
Notices on phone only.

50. DISPLAY CHANGES
WITH RESPECT TO CAPABILITIES

51. DISPLAY CHANGES
WITH RESPECT TO CAPABILITIES

52. PREFERENCES CHANGE
WITH RESPECT TO ACTIVITY

53. DISPLAY CHANGES
WITH RESPECT TO ACTIVITY

54. MINIMUM VIABLE INTERACTION

55. Could we design content that works for
someone:
so they don’t need to take their phone out
of their pocket?
so they don’t need to unlock their phone?
so they don’t need to open the email?

58. DISPLAY CHANGES
WITH RESPECT TO INTERESTS

59. • Can we make this work well for someone that
only reads headings?

65. DISPLAY CHANGES
WITH RESPECT TO STATE OF MIND?

66. WHAT DEFINES CONTEXT?
TIME, LOCATION, PROXIMITY, DEVICE, STATE OF MIND
CAPABILITIES, ACTIVITY, INTERESTS, INTERACTION

67. DESIGN FOR CONTEXT
NOT FOR THE DEVICE

68. Thank you.
DEREK FEATHERSTONE
@feather feather@simplyaccessible.com