Next-Gen NavBar: Giving iOS Apps a Fresh Coat of Paint

A few weeks ago, I came across an article by Brad Ellis, interaction designer, that delved into the growing inconvenience of iOS’ traditional navigation bars. If you’re curious as to what the current state of these interaction areas look like, I encourage you to take a look at Ellis’ article.

Post-reading, I was inspired to explore how the proposed “Sheet” view can replace traditional NavBars in a plethora of iOS apps. My primary goals for this small project were:

• Keep a consistent visual language based in color and shape that allows the user to feel at home within each app
• Retain, and even improve, functionality while limiting most tap/swipe interactions to the lower half of the display that is easier to reach while holding the phone
• Also include the new design language for text and layout introduced in iOS 11 for an even more modern appearance

Creating and fine-tuning these designs was not particularly difficult, and working on something so evolutionary was actually really fun to do. With that, let’s take a look at my implementation of the Sheet interactions discussed by Ellis.

Messages

Fun fact: Each message bubble was rendered individually, as opposed to just slapping a screenshot into the canvas

Messages is one of the least radical redesigns I performed; you can open up the app right now on your phone and see how similar both look. What I’ve done is move tap-targets like Search, Edit, and New Message down to a little card at the bottom. You’re not losing content real estate with this change, and the content still pops with the bold headings on each page.

In my first draft, the bottom card was white rather than gray. I later changed this color after adding the keyboard and iMessage bubbles because the gray and white contrast was more user friendly and easier to distinguish which area was more interactive and which was more text-based.

Mail

Mail, like Messages, isn’t that radical of a redesign because both apps are already visually similar. When viewing a specific email, the Back button, as well as nav items to go up or down in the inbox, are moved to the bottom. More content on the NavSheet without things getting crowded, which is definitely a win.

Calendar

“Clean” and “minimal” were two adjectives I kept in mind here.

Calendar took some notes from the current iteration, but you’ll definitely notice a solid amount of differences coming from the Sheet design implementation. On the splash page, the color red is used to subtly tell the user what day it is. Look at that: June 21, 2017 all in red without obnoxious circles or other cues giving this information.

When the (+) is pressed at the bottom, I wanted the Sheet to expand upwards into the New Event editor. It’s a great visual cue that gives the user context, which is what I think iOS is all about. This draft of the New Events page looks cleaner than the current one: there’s less lines that separate each section so that the spacing speaks for itself. I think that the lack of top-screen navigation becomes a lot more pronounced with this app, and you should definitely see how this will impact your use of a device in the long run. No more stretchy thumbs, folks.

Clock

Back in black, easy on the eyes.

I was really excited to tackle the Clock interface because it gave me a chance to design more using a black palette. Now, one of my qualms while testing iOS 11 on my phone is that the Clock app is completely lacking the text layout that other apps have, with the large left aligned heading. So, I incorporated both the Sheet and text layout features to this app to truly deliver my vision for the future of iOS apps.

Text is easy to read, and the NavSheet uses both iconography and text to communicate where each tab is and what they do. Both new users and users familiar with iOS will be able to pick this version of Clock up and use it naturally.

Reminders & Settings

Something about the spacing in Reminders can definitely be improved on. Any ideas?

Let’s start with Reminders. One of the things I like most about the current Reminders app is how your wallpaper is still visible, darker and in the background. Using this as a jumping point, I retained the darker wallpaper in the back while eliminating the Cards layout, and instead used Tiles similar to the Apple Watch version of Reminders. Moving the (+) down to the NavSheet seems like a small move, but I think this change will be much better for users because finding this button in the current Reminders is surprisingly a lot less intuitive than it should be.

Settings is essentially the same app as it is now. Moving the Search field down to the NavSheet just saves the user a swipe if they are looking for a specific nested toggle deep within the app.

Music

Apple Music: the app that heralded this new age of iOS app formatting. As such, it was pretty easy to implement new things like the heading and NavSheet because they were already there! You’ll immediately notice a few refinements: first, the Recently Added portion has three albums per row rather than two. There’s also a small play button at the bottom-right corner of each album; these two tweaks make it much easier for a user to find familiar music without scrolling and get right into popping and locking without entering a new page that has a whole song list.

There’s something different about this NavSheet. There’s a little arrow at the top, and this up arrow turns into a flat bar once the NavSheet is swiped up one step. The up arrow obviously indicates that this sheet can be interacted with, in this case by swiping up; by turning into a more neutral flat bar, the Sheet tells the user it can either be swiped up once more, or swiped down to return to the previous layout. Swiping up again brings us to the Now Playing screen, and the arrow faces downwards.

Yes, I unabashedly love the Transformers scores. Don’t judge me.

Now Playing has been cleaned up a bit. The spacing is a bit friendlier, and all the interactive buttons like Shuffle, Audio Out, More, and Repeat are all delegated to a bottom row. Overall, I think that this is the most intuitive version of Apple Music that has been designed, with images and text being more cohesive and less obnoxious in size and placement.

After experimenting with these designs for a few days, I really hope that Apple decides to pursue the NavSheet direction. Smartphones were a revolution in user interaction, and it’s high time for another rethinking in the interfaces that dominate our screens. What do you think: is there anything about these designs that sticks out like a sore thumb (ah, puns) to you, and have you had any other ideas regarding the NavBar dilemma?

Feel free to sound off in the comments here or reach out on Twitter.