The Community Of Over 578,000

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› small_16 ›› Adapting UI to iOS 7: The Side Menu

Adapting UI to iOS 7: The Side Menu

by
Share this post on
Share on twitter
Tweet
Share on linkedin
Share
Share on facebook
Post
Share on reddit
Share
Share on email
Email
Share on print
Print

Save

Side menu navigation in iOS7 needs to take zooming and overlays into account, creating a new challenge for designers.

One of the most common implementations of menu views has been the “side drawer,” “basement,” or “side menu” made popular in apps such as Facebook and Path.

When a user taps the “Hamburger” icon to open a side menu, the main screen slides to the right (or left in some implementations) to reveal another screen below.

This works well in iOS 6 and earlier operating systems because the status bar exists in a 20pt tall area isolated from the rest of the application. In iOS 7, the status bar is overlaid on the screen below it. In other words, the app and the status bar are no longer two separate worlds, as was seen in iOS 6. This change utilizes more of the screen space but presents an interesting problem when implementing a side menu.

The Problem

Because of this new setup, designers have had to come up with a way to show a top-level navigation menu without cutting the status bar up with a layer stacked on top of another layer. If developers were to implement the sidebar in the old style they would have a vertical break through the status bar information.

Our designers at Two Toasters first encountered this challenge while helping a client, Luvocracy, redesign their app for iOS 7 before it had publicly launched. Many of the design decisions made for the iOS 6 version were easily carried over or satisfied iOS 7 design guidelines. The side menu, however, was uncharted iOS 7 territory, with no clear-cut right or wrong approach.

We saw a unique opportunity to find a clever way of implementing the side menu

Despite having no defined solution, we saw a unique opportunity to find a clever way of implementing the side menu. Working with Luvocracy, we went back to the drawing board and gathered inspiration from the design community and Apple’s native UI elements in iOS 7.

The Inspiration

The first places we turned to were design communities like Dribbble. Before iOS 7 reached the general public, designers on Dribble were playing around with side menu implementation ideas. Our designers stumbled upon a few they felt were sleek and also made good use of the many of the attributes of iOS 7, such as layering and blurring. Those projects include an iOS 7 style inspired menu from Creativedash and a Side Menu concept from Jayson Lane demonstrating layering and translucency.

 

While Apple didn’t directly demonstrate how to implement a side menu in iOS 7, there were a few cues we picked up on in their native UI and incorporated into our final design. Namely, the zooming transition of the side menu—a transition seen all over iOS 7, from the App Switcher, to the home button, to the launching of apps.

Our Solution

From the pieces of inspiration mentioned above, we landed on the following design for the side menu.

Using an objective-C library we created named TWTSideMenuViewController (subsequently open sourced on Github), we solved the side menu animation problem by moving and scaling the main view down and away from the status bar. We also improved the scaled down view by thinking of the menu and the main view as a single view with both of them in the same visual plane. In other words, we changed the viewport to focus on different aspects of the application as if zooming in or out like the new iOS 7 app switcher.

Other Solutions

While we can’t speak for the inspiration behind other solutions, we can share some notable alternatives we found in apps updated for iOS 7. Ones we took particular note of included American Airlines, Foursquare, Mailbox, Kindle, and Vesper—all of which can be seen in action in the following video:

American Airlines

The American Airlines app follows fairly similar patterns to the Luvocracy app, but differs in how the screens animate back over top of the side menu and the speed at which it animates overall. Depending on what screen you are on before, a different animation will occur. When selecting a screen that is above your last one, the screen will animate down onto the view, likewise for an item below the current screen in the list, the screen will animate up onto the screen. The Luvocracy animation was designed to animate like a camera moving the point of view in and out, while the American Airlines app was designed as a shrinking animation.

Foursquare

For Foursquare the app fades out from behind the status bar and the sliding menu animates separately. Essentially, it doesn’t add anything new, instead forcing the old style to work for iOS 7.

Mailbox

In Mailbox the app moves the status information completely off the screen and pushes the side menu all the way to the top. An interesting solution, but maybe not the best one, as it momentarily removes all status information from the screen and may be frowned upon by Apple as it may need to access things unavailable in the public API.

Kindle

Kindle had one of the more interesting solutions we came across. When accessing the menu, the sidebar slides above the main layer in the form of a glass overlay. This certainly seems inspired by Apple’s navigation to the Control Center and Notification Center in iOS7. Overall, Kindle is a great representation of a third-party app sticking to Apple’s guidelines. While we all love this approach, the designers had to be careful and make sure their design had a consistently dark background for the status bar to overlay.

Vesper

The Vesper app’s sidebar animates very much the same way most apps did in iOS 6— the app remains behind the status bar. It doesn’t obscure the information on the status bar, but perhaps isn’t the ideal solution given the visual break in the status bar area.

In Conclusion

As you can see, there are numerous solutions to the implementation of the side menu in iOS 7. If you are working on an iOS 7 app and thinking about including a side menu, I hope you found inspiration in some of the apps mentioned. Please share your experiences designing for iOS 7 in the comments below.

Hamburger icon image courtesy Timothy Miller.Ad by

[google_ad:WITHINARTICLE_1_234X60_ALL]

[google_ad:WITHINARTICLE_1_468X60]

Share on twitter
Tweet
Share on linkedin
Share
Share on facebook
Post
Share on reddit
Share
Share on email
Email
Share on print
Print

Related Articles

Building digital products for the web’s next billion users
  • Connectivity issues are further inflated by accessibility gaps. This, in turn, undermines user experience and creates obstacles for the wider use of digital products.
  • When designing for users, it’s worth considering such issues as poor connectivity, accessibility constraints, levels of technological literacy within different countries and cultural barriers.
  • In order to satisfy the needs of the next 3 billion users, it’s vital to build inclusive and accessible products that will provide solutions to the critical problems the next generation will face.
Share:Building digital products for the web’s next billion users
The Liminal Space Between Meaning and Emotion
  • To innovate well is to search for meaning behind the innovation first. This requires investing time into discovering what users need and think of unique ways to serve them and better solve their problems.
  • Emotions are widely misunderstood in UX design and often manipulation is used to predict user behavior. However, a much better approach to UX design is storyscaping, which aims at empowering users, rather than controlling them.

Read the full article to learn more about liminal space and how to apply this thinking to your design.

Share:The Liminal Space Between Meaning and Emotion

Stop frustrating your users. Invest in notification strategy instead.

The UX of Notifications | How to Master the Art of Interrupting
  • As part of UX, notifications are key to leading the user to a better interaction with the product. Therefore, notification strategy should have a central role in UX design.
  • A good starting point is to create a user’s journey map and identify major pain points. This should serve to understand when and where notifications might be of help, rather than create confusion.
  • It’s a good practice to use a variety of notifications and provide the user with opt-outs so they don’t feel overwhelmed.
Share:The UX of Notifications | How to Master the Art of Interrupting

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and