Scouting Small Screen Strategies at Mobile Camp


The introduction of smart phones and tablets to the technological marketplace has changed the landscape of connectivity. This awesome new technology requires user experience designers to change the way we design. Mobile Camp, a daylong event hosted by Chicago Camps, explored the nuances of designing for mobile. This blog post will examine the design challenges presented during Mobile Camp and offer some design tactics user experience designers can use to create exceptional mobile experiences.

Big Ideas, Small Screens

The most obvious difference between designing for a desktop and designing for mobile is available screen real estate. Designing for mobile requires making a digital presence fit within the palm of a hand. During her presentation “Rethinking Usability for Responsive Design,” Jacey Gulden offered some practical advice: a heavy reliance on navigation overlays. Ms. Gulden recommends the “three tiered hamburger” icon (an icon featuring three parallel horizontal lines), which displays navigation once tapped. This allows easy access to navigation without taking up too much screen space.

Touch interactions are another important difference between mobile and desktop. Taps and swipes open up many new possibilities for interactions, such as those presented by Andy Hullinger during his presentation “How Gesture-Based Design Can Enhance the Narrative Experience of Reading on the iPad.” However, touch interactions also require additional spatial considerations. As UX designers, we need to make sure buttons are large enough to be clickable and far enough apart to mitigate errant clicks while still working within the confines of the smaller screen.

While touch interactions add more tools to the UX designer’s tool belt, one interaction we can’t use on mobile devices is a hover state. Hover states simply don’t exist on touch screens. Designers should be mindful of the need to provide information normally presented on hover in new ways. A help overlay can be effective in this space. Additionally, when we’re creating a mobile version of an existing desktop site, we’ve got to be mindful of information delivered through hover states and make this info accessible in new ways.

Context, Connection and Cross-Device Considerations

A mobile experience extends beyond the screen and is influenced by the context in which it is used. Screens display differently when used outdoors on a sunny day than in a dimly lit room. While content may be accessed through a lightning-fast internet connection, we can’t assume that connection will hold up continuously while the user is on the go. While we can’t control these elements, we can design with them in mind. It?s worth the extra time and consideration to ensure the user has a great experience under any circumstance.

As our culture integrates more and more devices into our lives, it’s also important to remember that a user’s experience isn’t always contained to a single device. As Christian Crumlish articulated during his talk “Tablet First: Designing Holistic Ubiquitous Experiences,” it’s likely that a user will experience your site on more than one device, usually opting for the best available screen. This requires designers to consider experiences across devices. As we design, we should be asking ourselves how interactions would play out as users move from device to device, and strive to provide smooth device transitions.

Conducting user testing on mobile devices offers significant challenges, as well as the potential for amazing data. The portability aspect of mobile devices is lost in a traditional testing environment. That’s why Gail Swanson’s talk “User Research Goes Mobile” included a recommendation for Jane Goodall-esque ethnographic studies such as ride-alongs. This requires more effort during recruitment and more time during testing, but the reward is data on not only how users use a site, but also how they use their devices in their daily lives. For example, Ms. Swanson’s charts illustrating the use of a mobile phone during a trip to Wal-Mart vs. a trip to Target showed that the nature of mobile phone usage is surprisingly different in these two scenarios. Putting a focus on contextual testing can provide powerful insight on not only the use of your product but also how people make choices in their lives.

Your Product in Their Pocket

In addition to small screen design tactics and contextual considerations, we’ve got to take into account the relationship users develop with their devices. As Gail Swanson pointed out, phones aren’t something you need to go to, to access. They’re just there, on your person, all the time. This offers an opportunity to put your product directly into a user’s pocket. However, this connection comes with a price. People have shorter attention spans and higher bounce rates on mobile phones. During his talk “Four Mobile Traps (and How to Avoid Them),” Phil Sharp described the mobile experience as “short attention span theater,” adding the fact that users aren’t used to staring at their phones for hours at a time, as they would their desktop.

Sites that are slow to load, repetitive or boring don’t stand a chance on mobile. Our first line of defense against high bounce rates is to design for the 80% of our users who desire just the basic features of a product. This keeps a mobile presence lean, organized and fast. Additionally, once a product is deployed, we need to keep an eye on the analytics, identify points where people are leaving a site, and focus on making those points more efficient and engaging.

Designing for mobile technology requires us to navigate through challenges and restraints. However, the amazing power of this technology is opening new opportunities for us to build powerful, convenient and interesting products that change the way people live their lives.