header-microwave-smartphone
header-microwave-smartphone

From Smartphones to [Insert Your Device Here]: Unified IxD Principles, Part 1

In the age of the “Internet of Things,” companies like Apple, Google, Microsoft, and Samsung have truly raised the bar and changed people’s expectations for interactive experiences with mobile devices. I can’t tell you how many times I’ve seen users attempt a pinch and zoom or even a simple swipe — only to discover disappointment  in their first encounters with even the most rudimentary touchscreens.  It’s a truly telling observation: Humans have come to expect that all of their devices behave like their smartphones and tablets.

So why don’t they?

There are a bunch of reasons, but the disparity is often due to the cost of technology per unit. If we were to embed smartphone-equivalent tech (retina display, capacitive touch, gorilla glass, iOS-quality software, etc.) into let’s say … a microwave … it would likely triple in cost — resulting in a priced out consumer. (Would you pay $500 for a microwave with an elegant touchscreen?)

If we’ve learned anything from Moore’s Law, however, we know that technology costs rapidly decrease while embeddability increases. We’ve already begun to see higher functioning touchscreens integrated into all manner of consumer products and contexts. When clients with limited hardware budgets tell us they want their products to “look, feel, and act like an iPhone,” we rise to the challenge but tell them there are other ways to provide a smartphone-like user experience.

Smartphone Patterns

Despite the technology challenges, interaction designers can still reliably design interfaces for products using many of the “mobile” patterns users know, love, and expect. As designers, we try to strike a balance between being innovative and not reinventing the wheel (more on this later). So we rely on some fundamental design principles that are universal to all mobile device experiences — many of which are informed by the ubiquity of smartphone and tablet devices. Most of these features date back to pre-smartphone times but are now associated with smartphones because they’ve been so elegantly refined and packaged into this one type of device:

1. Provide System Context

It is baffling the number of times I’ve seen systems completely lose users due to a lack of context. This is usually easily resolved by adding something as simple as a breadcrumb or a title or a consistent visual treatment to the user interface. Granted, it’s not always that simple, especially if screen real estate is an issue. Progressive disclosure can also be a tool for providing context, particularly in guided workflows.

1_system_context

Context in Action: iOS does a simple, but effective job of maintaining context by indicating the title of the current view in the center and providing a back button labeled with the title of the previous screen. Left: This view shows we’re currently in the context of the mail app. Right: We’re clearly now in the context of the text messaging app, and specifically in a conversation with Bill.

2. Familiar Navigation Schemes

Here’s an area of user interface design where the wheel should not be reinvented. Navigating a system via a primary navigation menu is fundamental to modern personal computing. We’ve gotten pretty creative with the visual presentation of navigation, but the core mechanics haven’t really changed much in the past 30 years. Primary navigation is typically globally accessible, and either presented as an exposed list of choices or as a hidden list of choices with some kind of trigger to reveal itself.

An example of sliding drawer navigation

A Familiar Technique: The LinkedIn mobile app uses the familiar “sliding drawer” navigation menu by swiping left to right. Notice how when it’s revealed, at right, you can still see a sliver of the previous screen’s content to maintain context.

3. Home Buttons

The ubiquitous home button is another smartphone/tablet feature that really isn’t new. It has existed on Web browsers since the days of Mosaic, and was a feature of PDAs long before the iWhatever.  It remains a relevant way to control and navigate a device. The Home button has drastically improved in terms of simplicity and extended functionality.  As a single button, it can be multi-use with events such as single press, double press, triple press, and long press. Depending on the complexity of what you’re designing, this is a must-have feature whether implemented as a touchscreen or physical button.

Home buttons are a ubiquitous interaction design pattern.

No Place Like Home: Smartphone/tablet home buttons, pictured left, have evolved in simplicity and functionality, but remain a consistent feature on mobile devices. Right: A more explicit example of a home button on our very own HazMatID Elite, a handheld chemical identifier for first responders.

4. LED Indicators

Light-emitting diode (LED) indicators are also nothing new (starting to see a pattern here?). We’ve been using them commercially since the 1960s. Much more of a feature on Android mobile devices, the notification LED is a passive and discreet way to signal to users that there’s something in the system that needs their attention (new email, calendar reminder, etc). It might not be immediately apparent, but LEDs can be implemented in a lot more ways than just a small dot. Possibilities are vast when you account for light shape, color, and pulsing pattern.

LED designs

See the Light: The LED on the thermostat, pictured left, indicates heating/cooling stage. Center: Many smartphones come equipped with a subtle indication LED. Right: The Breville Barista espresso machine uses a circular LED design to communicate both the selected option and that the machine has heated up.

(Note: Take caution enabling the LED notification feature on your smartphones because it will keep you up at night if left by your bedside. I turn my Galaxy S5 face down!)

5. When Possible, Design for Natural Gestures

Although a lot of the elegance of modern multi-touch gestures is hardware-dependent, smartphone-like gestures can be achieved with the aid of some software magic. And many of the multi-touch gestures are truly natural. For example, swiping to reveal can be simulated in the physical world by sliding one piece of paper off the top of another. It feels natural, it makes physical sense, and it’s an expected interaction on touchscreens — thanks to the pervasiveness of consumer mobile devices (not to beat a dead horse). So if your hardware supports it, and you can squeeze it in as a feature, implementing multi-touch capabilities (such as swiping or pinch and zoom) is an unobtrusive way to add value and familiarity to the interactive experience with your product.

Swiping left to right on the Amazon app reveals its sliding drawer navigation.

Swiping left to right on the Amazon smartphone application reveals its sliding drawer navigation.

Swiping to reveal something is truly a natural gesture in interaction design.

Touching and sliding an object such as a piece of paper to reveal what’s underneath is natural gesture and lends itself well to a touchscreen gesture that reveals information.

6. Let’s Not Forget Haptics

A fantastic way to provide real-time feedback to users, haptics leverage the sense of touch through small vibrations. Haptic feedback is another feature that can be used in several ways. To name a few:

  • To provide the user with confirmation that his touch interaction has registered.
  • To act as a system alert (i.e. an alarm or progress complete indicator).
  • Through pulsing and intensity, it can communicate a range of states of something (i.e. a soft, quiet buzzing indicates you’re getting close, but intense, louder buzzing indicates you’re getting even closer).
The Nintendo Wii Remote is a great use case for haptics

Ready To Rumble: The Nintendo Wii Remote’s implementation of haptic feedback is effective and interesting — the rumble pack can vibrate based on gesture).

Familiarity Breeds Affection

As I mentioned a few times above, most of the features we find in smartphones and tablets didn’t originate there. We’ve been designing products with these features long before the mass consumption of mobile devices. But it’s exactly this mass consumption that’s driven the standards of interaction design. Ideally, we can leverage these standards to develop a unified (but evolving) set of IxD principles. If our observations of human behavior tell us anything, we owe it to our users to give them innovative, but familiar solutions. Think of it as frustration-free packaging.

7_frustration_free

Note: Here we’ve touted the use of mobile patterns to inform interaction design for other applications, but in Part 2 we take a deeper dive into some of the many contexts in which mobile patterns are not always appropriate or sufficient.