Sure Responsive Web Design is important to make sure your site looks good on all sorts of devices, but beyond that what can you do to elegantly enhance your user experience? In this week’s Power Up, we discuss the cousin of responsive web design that is used to specifically deepen context of use, a crucial element of any user experience strategy.
Transcript of video above…
Hi, Frank Spillers here founder of Experience Dynamics and it’s time for this week’s UX Power Up.
Today I’d like to talk to you about the topic of Adaptive Design. This is a mobile UX kind of approach to design. It is a cousin of responsive web design, if you are paying attention to responsive web design. And just real quick – responsive web design is essentially providing an accessible design that anyone can use regardless of their device. Regardless of the resolution they are coming in at, essentially mobile friendly, they are going to be able to see content and media and so forth, very nicely on your screen. It’s going to look good, it’s going to be formatted well, and they are not going to struggle to kind of pinch & zoom and do all that kind of extra leg work. So that’s responsive.
The cousin is adaptive design. And adaptive design is just a slight distinction, it’s the same kind of philosophy as responsive, which uses the media query to kind of maybe hide or show a video, for example. Or a heavy load time, kind of to ease the burden of the user, since you know they’re on a particular device. So, adaptive is tho, is like a step further. To me, it’s really where the fun begins because it’s where can strategically start to enhance a user’s experience.
Let me just give you an example.. so, if you know based on device, that a user is – let’s say, walking past Starbucks, and you actually know their within 50 feet of a Starbucks, or whatever other establishment it might be. Then you could give them a mobile coupon based on geo-location. Or you could remind them, maybe if you are just trying to do hospitality, you could say “Hey, you stayed at the Holiday Inn last week.. Thanks for being a loyal customer!”, or whatever the case may be. But you wouldn’t do that if you knew that they were at home on their couch. So because you can tell by geo-location that the device is accessing your site from their living room, you might give them a different offer than what they might see if they are actually out on the street next to your store. So, that’s an example of adaptive design. So, it’s resolution friendly but it’s also kind of thinking strategically about content.
And, the 3 things that adaptive design enhances are, Context of use. Context of use is one of those very very key usability attributes that a lot of folks leave out, it’s kind of like you are just stuck to figure it out on your own, even if you are in a context that you need some support from the interface. Ya know, say at nighttime – that’s a context, right? Or, you’re walking – is another context… you’re walking down the street, it’s dark, and you can’t see the text because it’s so small, or it’s badly lit because it’s on a dark background, for example, and it doesn’t adjust to you. So, one of the things that with the new mobile devices with CSS3 – the cascading style sheets, that has really made responsive design possible – is you can, for example, detect the camera on a users device. You can say “Oh, it’s nighttime” so I’ll serve them a different style sheet that allows for a much brighter display, right? You might also take that same philosophy of adaptive design a step further and say “Oh, gee, I know you are about to checkout..” and it’s a really important conversion point – ya know, the conversion funnel – I’ll give you a really big button, you know? So you can actually see it. So that’s thinking adaptive. Enhancing the context of use.
The 2nd one is to enhance task interaction. We are always looking to help users complete their tasks, that’s how we measure usability – is successful task completion. So how can you help a user enhance their task? Various ways to do that.. that I just mentioned an example of making a button much larger, that would be an example that also has a business benefit because you definitely need a user to convert, so you are going to make it easy for them to actually see it. You might know that they’re on a larger device, they have more real estate, an iPad or an Android tablet, vs a smartphone. Because you know they are on a larger or smaller real estate you can do different things with your design. Sort of serve them different style sheets that are not only responsive but that adapt to the task that they are trying to complete. Think of it as like, say the user is trying to checkout, and they are trying to check shipping, and they are like “Oh, where’s the shipping?” they’ve got to navigate to the footer, they’ve got to find it – ya know, maybe give them a shipping tool and say “Hey, calculate your shipping here.” that’s an example of an adaptive approach.
The last one then is just to overall enhance the experience. You can just take a mobile users content and see what you can do to enhance their experience – just to make it easier for them to interact and access your copy and stay on your site, or do whatever it is that they want to do. Enhance their goals, if you will. So just generally enhancing the overall experience for them. There are many creative ways that you could do it if you take an adaptive design approach.
So thinking responsive, adaptive, and all inside of a mobile context. Enhancing your user experience – that’s really what it’s all about.
I wish you happy UX’ing. I’ll see you on a future UX Power Up. Thanks, take care.