In his From the Front Lines of Multi-Device Web Design presentation at WordCamp San Francisco 2014, Luke Wroblewski encouraged web designers to consider how people are using their computer devices, rather than only focusing on the screen size of the device.
Wroblewski shared research from development of his Polar application, and encouraged designers to embrace all the different types of inputs (touch, mouse, voice, etc.).
It was wonderful to hear Luke speak at WordCamp San Francisco. I met and chatted with him several years ago when he spoke at the 2009 annual Webmaster Forum at the University of Illinois Urbana-Champaign. Great speaker!
Here are my notes from Luke’s presentation earlier today:
- Luke worked at the National Center for Supercomputing Applications (NCSA) in the 1990’s, a time when personal computer sales were booming and people were getting on the Internet. Remember Mosaic?
- Until 2010, websites were built with a focus on desktops. And then user behavior changed as more people accessed the web with smartphones and tablets. Web design had to adjust.
- The device ecosystem has changed over the past three years; it’s become more complicated.
- We’re no longer a PC-dominant world accessing the web; we’re a mobile device world
- We have devices that are small (smartphones), big (laptops), very big (TVs), as well as devices that are really small (Google Glass and other wearables)
- For the past three years, the transition of the device ecosystem is something Luke’s Polar startup focused on. Their team needed to create a design that worked across any number of device sizes, no matter what size screen.
- Rather than thinking of screen size of devices, designers need to consider how people use their device. Two key items to look at: input and posture
- For input, consider the size, how comfortable people are using the input, ensure one thumb can be used to navigate the screen
- In observations of 1,333 people, 49 percent used one thumb on one hand to navigate their smartphone, 36 percent used one hand to hold phone and an index finger, 15 percent used two thumbs (Crackberry)
- For smaller screens, your design focus is on touch gestures. As you design for larger screens, you want to preserve simplicity of thumb gestures, but account for new capabilities of touch and keyboard.
- Users are simultaneously using multiple devices: 81 percent use smartphone and TV , 66 percent use smartphone and tablet/PC, 66 percent use laptop/PC and TV
- Posture considers viewing distance and other environmental factors (lighting)
- Netflix uses viewing distance as guide for designing the user interface: ten feet for TV viewer; two feet for laptops; 18 inches for tablets, and 12 inches for phones
- Navigation applications account for lighting. The view in low-light environments is different than in bright sunlight.
Key Takeaways
- Output: How do we display on the ecosystem of devices? Responsive web design is a great tool, but we need to design in a mobile-first way.
- Input: account for keyboards, touch gestures, and voice. Try not to detect input type; instead embrace all the inputs. Have solutions that work for each, and add features when applicable (tips for keyboard or keys for mouse – use screen size as a proxy)
- Posture: How can designers account for viewing distance and lighting?
