Business goal: Refine Lexmark’s printer UI to meet new technology and consumer expectations and increase consumer belief in the product.

Design goal: Understand and redefine current user experience to meet new and existing user needs.

Problem: In 2012, even in the iPhone and Android devices era, users didn’t understand that printers would have a gesture-based interface.

Contributions: I researched and conducted a competitive analysis with gesture-based devices. I explored different implementations to teach users about new interactions—examples not shown peeking and bounce microinteractions.

Users are inundated with innovative technologies and unique interactions near daily. It might sound like hyperbole, but that new twelve-finger-diagonal swipe interaction you’re innovating isn’t going to the job you’re thinking will when it reaches their devices. That said, I’ve seen some very brilliant instructional screens—which are both informational and interactive. Hinting allows us to teach users to use a device or application without giving them long, tiring, and boring instructional screens—that they will definitely forget anyway?

Hinting

Nav guide hinting example

Hinting:

Hinting is the UI’s way of teaching a user—whether in regular usage or as a new install. These hints quickly teach the user and help them become accustomed to the new interactions. To provide an example of hinting, a user touches the screen but doesn’t touch anything specific; the interface could display a navigational map that slowly reveals a secondary screen or highlights a section for interaction. 

Hinting can be time-based and ephemeral—which disappears once the user uses the device or application a few times. Or it could be subtle enough to persist for less savvy users while not interfering with the cleverer. Remember, users should always be able to disable hints and tips.

Hinting with swipe

swiping reveals map

Navigational Map:

This hint activated when the user touched “dead space” within an application. (Dead space refers to non-interactive portions of the screen.) The map would show them where they were and which way to swipe. It also allowed them to tap a specific region to slide that section into view. The slide in animation theoretically teaches the user those section locations and helps them understand how to navigate each section.

This particular navigational map didn’t survive, but with some tweaks, the navigational concept works.

Navigation hint

an ephemeral hinting mechanism

Paging Dots:

Paging dots are a standard way of hinting; however, anecdotally, users have issues noticing paging dots, especially on a printer UI. Nielson Norman Group also found that users have trouble seeing, detecting, or understanding this form of UX hinting. Because of this, we tried to combine the above solution with several concepts. We wanted the hinting to be more explicit without getting in the user’s way. (However, many of our users struggled to grasp the idea that a “printer’s display can swipe.”)

Paging dots

swiping behavior

One of the directions we experimented with was to start the interface in a partial swipe. This hint exposes the secondary screen (swipe to) and the primary screen (swipe from). Once the interface peeks (shows the secondary UI), it slides back into position, leaving only the primary screen visible. Testing showed that this type of hinting helped users realize that there was something more to swipe to.

Paging dot microinteractions

animating between the paging slide

Another insight we gained, if we could hint the swipe to the user on the primary screens, they were more likely to carry that knowledge through the rest of their experience. Hinting is teaching. Teaching doesn’t have to be heavy-handed, though it needs to be consistent and subtle enough to be seen but not be invasive.

UX Hinting