Pixel Envy

Written by Nick Heer.

Bringing Common UI Controls Nearer to the Bottom of the Screen

Theo Strauss (via Michael Tsai):

In most apps, it’s common to see a search bar up at the top of the screen. On social media platforms, such as Facebook, Instagram, LinkedIn, and even Snapchat, the search bar is at the top of almost every main screen. In transportation apps, that style is almost ubiquitous.

Why is this? Apple doesn’t suggest that a search bar sit towards the top of an app’s UI, nor does the HIG suggest that it should be persistent.

[…]

Lyft took a different approach with their search bar. Instead of a floating field up top, they added it to an overlay towards the bottom-mid section of the screen. This simple change made it more accessible for almost 100% of users.

This is also one of the reasons why I prefer using Apple’s Maps app over Google’s, despite better data in the latter.

Contra Strauss’ point that the HIG doesn’t say that the search bar should be at the top of the app, Apple does indicate that, by default, it’s often part of the navigation bar at the top, and so designers may feel that it’s more consistent across the system to place it there. But, as Lyft and Apple Maps demonstrate, it’s completely possible to place it wherever it ought to be.

I think there’s a deeper argument here for a more comprehensive adjustment to the way iOS, in particular, is designed. The layout of a typical app hasn’t really changed much since the first iPhone — from top to bottom: status bar, then navigation bar, then the main view, then a tab bar at the bottom. While that worked great on a 3.5-inch screen with an iPhone that easily fit in your hand, I don’t think that’s the case with today’s iPhones — and, if the rumour mill is correct, the smallest of this year’s models will be the size of the iPhone X.

Third-party app designers and Apple, alike, seem to understand this in the examples above, but too many of the default apps that set the standard are still designed for smaller displays. Worse still is a gesture like the one to invoke Control Centre on the iPhone X, which — in my right-handed use — requires shuffling the phone slightly downwards with my palm and fingers to allow my thumb to extend enough into the top-right corner of the display.

That Control Centre gesture feels like it’s from the past; Lyft and Maps feel like they’re bang up to date.