November 17, 2014

C-THRU: Transparency and Simultaneity in App UI Design

A recent app UI design effort had us face what has become a familiar problem: optimizing the use of screen real estate on mobile devices. Given the limited screen size typical of most mobile devices, here’s the dilemma:

1) increasing app sophistication often leads designers to want to display more UI elements

2) any elements displayed must be sized to allow easy operation with one’s fingers.

Compounding this problem is the drive of most designers to “simplify”.

thumbnail-1

In this particular case we were designing a consumer-facing native iPad app called Kinoke. Part social network, part private journal, part photo/video album, Kinoke’s proposition is to get users to reflect on, comment, and share personal letters, photos and videos in a totally private, non-commercial way (invitation only, no ads, no collecting and re-selling user data). Given that the demographic includes older users, the UI had an even greater need to be simple and uncluttered.

The heart of the app is where users comment on a particular item, say an old family photo. We call this the Comments screen. We were designing this screen at the pixel level, and we hit this impasse to do with balancing simplicity, complexity, and accessibility.

The Comments screen needed to be simple so users would not give up trying to use it the first time they tried, and so that they would return to it often and with pleasure. It was also going to represent something complex, a display in which the old photo and related comments could coexist without one compromising the other. And users had to be able to quickly shift their focus from the old photo to the  comments and back again … both had to be instantly accessible.

We considered devoting about half the screen to the old photo, placing user comments adjacent. But this forced both the photo and the comments to be smaller than we wanted. We considered flipping or panning the view to alternate between comments and photo. But this was going to put a lot of distracting movement on top of what we knew would be a moment of concentrated contemplation. Having elements fly in and out of view is great sometimes, but maybe not when you’re trying to put words to a memory or feeling, especially if you’re 70.

We knew we had to get the Comments screen right, because that’s where the users create value in the app. We wanted no movement, we wanted the photo and the comments to each be as large as possible, we wanted near-simultaneity. All that led us to a control that would let users modulate a two-tiered space using transparency. We call it C-THRU.

thumbnailHere’s how it works. User comments, whether typed, audio or video, are displayed on a dark background through which a full-screen version of the item being commented is just visible: in the background but very faint. Near the left edge of the screen sits a circular button labeled C-THRU, and this button does exactly that. When touched and held, C-THRU rapidly cranks the transparency of the dark comment layer up to about 90%. The underlying item becomes clearly visible, but this effect lasts only as long as the C-THRU button is pressed. As soon as C-THRU is released, the dark layer returns, the item fades back behind it, and we’re back to typing or speaking or videoing our comment as before.

One user described C-THRU as “putting on x-ray glasses.” We feel it lets users remain fully immersed in a task while giving them the chance to observe two things seamlessly.

And C-THRU really paid dividends when we took on the task of porting the Kinoke iPad app to iPhone a few weeks ago. With even less screen real estate on tap, the C-THRU button’s effect of quietly transitioning between the two tiers of Kinoke’s Comments screen seems indispensable.