A few weeks ago, several of us from our design and development teams at AVID Design attended Remix South here in Atlanta. My main goals as a web developer were to learn more about responsive web design (RWD), and hopefully slide a few more jQuery tricks up my sleeve. Well, mission accomplished.
The most interesting talk, however, was less about development and more about design. The session Designing Immersive Mobile Experiences by Wren Lanier was exceptional, and she introduced two ideas that really caught my attention:
- The “lean back” vs. “lean forward” experience
- Designing for “mobile” vs. designing for “small screen”
Traditionally, “lean back” describes the type of experience that happens when sitting in your easy chair, reading the newspaper or browsing Wikipedia for hours on end. You are casually consuming information on things that you are interested in.
In contrast, “lean forward” is what happens when you use Google Maps to find the best route to the nearest coffee shop. You are on a mission. You are looking for something very specific, not just casually perusing the interwebs.
Now fast forward to 2012: your iPad has replaced the daily newspaper, and you’re now using the new, amazing iPhone Maps app to find the closest Starbucks. To put it clearly, tablet users are typically having a “lean back” experience, while smart phone users are having a “lean forward” experience.
Several leading-edge companies are taking advantage of this knowledge, and they are changing and prioritizing the content on their site based on the type of device that the user has. Wren used a perfect example in her presentation: the popular online travel company Orbitz. If I travel to the Orbitz site on my iPad, I basically get the same exact site that is rendered on my desktop browser. I can specify that I’m looking for a hotel, and then choose what city I want to stay in, check-in and check-out times, etc. However, when I go to the Orbitz site on my iPhone (and after I get past the annoying “get this app on your phone” dialog), I see this:
Nearby and available for tonight
As Wren said during her presentation, if a user is visiting the Orbitz site on a tablet, she could be sitting on the couch with her family, planning their next vacation. However, if she is visiting the Orbitz site on a smart phone, it’s likely that something has gone horribly wrong. Her flight was delayed, and she needs to find a room right now. In other words, they are gauging what type of situation a person is in based on the device type, and giving the user options that would be most useful in that context. It is smart and effective, and you should be doing it on your website.
We do the same thing here when we design mobile sites for our healthcare clients. If a user landed on the Georgia Health Sciences Health System website on their smart phone, it is likely they have an immediate medical need. To accommodate this need, we place a large “Emergency Information” icon at the top left of the mobile site. Clicking the icon takes the user to a map where they can get directions to the adult and pediatric emergency rooms. Emergency information is one click away, and the icon is at the top of the mobile site on every page.
Georgia Health Sciences Health System mobile website
The second idea – “mobile” vs. “small screen” design – was brought-up by Tim Murtaugh and later mentioned by web design guru Jeffrey Zeldman. This idea encourages web designers to separate mobile design into two parts: how the site looks and feels on a mobile device, and what content to display on a mobile device.
In general, a mobile site should have larger text and smaller images than the desktop browser version. Also, the site should be very lightweight so that it loads fast and is very responsive on smartphones. This type of mobile optimization falls under designing for “small screens”.
Designing for “mobile” is a different story, and requires some investigation. What functions are your mobile users using the most? What information are they accessing the most? The functions that they use the most are the ones that need to be front and center on your mobile site. The most used functions and content should even perhaps display at the top of every mobile page, or be a part of your mobile template. You can find out what pages your mobile users are going to the most by viewing your analytics – I will describe how to do this in a future post.
“Mobile” design ties into the “lean back” vs. “lean forward” experience: when designing for “mobile” we are essentially designing for a “lean forward” experience. Your mobile user is on a mission, and the faster she can complete her mission, the more successful your site will be. If the user can’t find what it needs in a reasonable amount of time, you have potentially lost a customer.
Your take-away from this post should be: 1) your site needs to look good and be easily usable on a smart phone, and 2) the functionality and content that is most popular for your mobile users should be front and center on your mobile site. It has been predicted that mobile internet usage will surpass desktop internet usage by 2014. This change has already occurred in China’s internet mobile usage. If your website is not currently presentable on smartphones, then you are doing it wrong. If you are not catering content to your users based on their context, then you need to start thinking about that now.
AVID Design offers full-scale written and visual communication services for hospitals and healthcare systems, including Web design, SEO and PPC content development and assessment, online video and rich media, analytics and measurement, content management systems and more.
Jonathan Nesbitt | Web Developer | AVID Design
Leave a Comment