Touch vs. Click: How Twitter Designs Interactions Across Devices

Designing experiences that are consistent across different devices is a big topic right now. Consistent look, branding, and interactions; but interacting with content or systems on a mobile phone is inherently different than on a tablet, a laptop, a desktop. The contexts of where and when we interact is always in flux: on the go, at home, at work.

Really well-designed products strike a perfect balance between cross-device consistency and leveraging interactions and strengths of each device. Instagram doesn’t allow photo uploads via the web it keeps that a mobile-specific behavior. Path has different nav layouts for mobile devices vs. tablets.

The way in which Twitter handles hyperlinks seems like a detail not worth mentioning, but it’s actually an excellent example of the detailed thought and balance in designing for all kinds of devices and contexts.

In Twitter, hyperlinks (active text links) in timeline feed on a desktop web browser shows all usernames as active, blue text (in a desktop context, clicking on usernames open profile details in a modal overlay). But when you view the timeline feed in a mobile context (either web or native app), usernames are inactive text. Why the discrepancy?

Twitter_touch-vs-click_rosspw
VIEW FULL SIZE

My guess is that Twitter’s design team has made a conscious effort to optimize for two different contexts: one where a user is browsing through a feed, skimming text. Another context is when a user dives into a detailed view of a tweet or conversation: a mentality that better fits looking into details further, like a user’s profile.

There’s also the consideration of hit areas on touch devices. On touch screens, the small hit area of a username would be frustratingly small. Instead, on the iOS app, the entire container or cell for each tweet is an active hit area. Tapping on a username in the native iOS device brings up a detail view of that tweet, the any usernames are then both active and larger type.

Small details like these really highlight the detailed thinking that goes into considering user context (what mental mode the user is in, like browsing vs. reading) and device context (desktop vs. second-screen vs. on-the-go).