Notch Navigation Handling
Ever since the iPhone X came out, the crowd-named "Notch" has impacted UI design immensely. The hardware of our phones has finally and unrelentingly intruded on the software design of our phones. Almost all of this was preventable. But Apple delivered notches, and now notches are here to stay on all platforms (until Apple 'discovers' notches aren't necessary.)
So what sorts of intrusions am I talking about? Most centrally, the introduction of "Twitter's iOS Navigation, I compared the existing app for iPhone X and greater models with a card-based sidebar navigation in the attachment.
Twitter took their flat conceptual approach to the sidebar navigation from the notchless iPhone models and extended it to the notched models. This is what we call "Responsive Design," in other words, making UIs go from one platform to another with little attention given as to whether they make sense, so long as they physically fit on the screen.
Of course the obvious solution to this problem is to make system UI be clearly delineated, and Apple could have solved this by embedding a black status bar background into the OS. But, in the absence of such foresight, app designers outside Apple could try this method:
Separate each navigation area into conceptual and hierarchical layers:
1. Make the fixed status bar sit flush with the background layer (not on a transparent and indecipherable layer on the top of the z-axis so that it doesn't incomprehensibly overlap with the open sidebar menu 2. Combine the tab bar and Home bar into a coherent object, so they don't have separate lateral movements as happens in the current model
2 steps. It's that simple.
Questions I've received since posting the revised Twitter iOS navigation:
Q. "What about shorter viewports like iPhone SE/6?" A. Unless you can find a workable design for all platforms, design for a given platform. Scrolling within a card sidebar is absolutely possible.
Q. "So the side drawer isn't really a viable solution? Is it not best to think of global solutions that cater for edge cases too?" Q. "I don't know how I feel about the side drawer not being full height. would love to learn more about your reasoning!" A. Side drawers might work on notchless phones, but they would need a fixed statusbar with a discernible background color to distinguish the hierarchy in all contexts.
