15

Ask DN: Side Menus in iOS 7?

over 9 years ago from , UI Designer.

Now that I've had some time to get to know iOS 7's design style and interface elements, I feel that I've mostly figured out how iOS 6 apps could be transformed for iOS 7, using all of the same features but incorporating the new elements.

Everything in iOS 6 appears to be either the same, or have a clear alternative except for one thing: Side Menus.

The new status bar creates problems with the concept of sliding the page sideways, to reveal a new menu layer. I've seen a few attempts to bypass this issue with new ideas:

The best way I've seen to replicate the iOS 6 Side Menu layout in iOS 7 is this: http://dribbble.com/shots/1201089-Vk-app-side-menu?list=popular&offset=8

CreativeDash tried a completely different, pretty unique approach: http://dribbble.com/shots/1114754-Social-Feed-iOS7?list=users For this one, the status bar fades out and back in with a different color. I'm not sure if that's possible.

What do you think? How would you approach a menu such as this? Would you just avoid it?

11 comments

  • Cole PetersCole Peters, over 9 years ago

    The biggest challenge with off-canvas menus like this is that they are often triggered by swiping from the left edge to the right, which has become a standard “back” gesture in iOS 7. Word from the horse's mouth is that they discourage these types of menus in iOS 7, but that doesn't mean that they're off the table completely IMHO — we just need to rethink the way they are triggered. I love CreativeDash's concept but wonder how it would translate in terms of gestures, etc. It's also a bit of a cognitive disconnect if the user expects the previous screen to be off-canvas left and a menu comes in instead.

    Sorry, not much of an "answer," but food for thought at least. ;)

    4 points
  • Jayson LaneJayson Lane, over 9 years ago (edited over 9 years ago )

    So far, from a technical perspective, I've been unable to find a way to code the fade-out animation that CreativeDash displayed. The pre-iOS 7 method of side-menus still works the same way on iOS 7. The nice thing about CreativeDash's implementation is that it's very similar to the system animation for switching between applications (double-click the home button). I think this will probably become the prevalent alternative to the existing side menus that are so popular. Here's a control, coded for such an implementation: https://github.com/romaonthego/RESideMenu

    There are arguments on both sides as to the validity of side menus. I think the biggest concern is making decisions in the hierarchy of information for your users so they don't have to worry so much about navigating your app. I think this type of menu is around for the long haul, like it or not – it's just the animation/display of it that will potentially be changing.

    3 points
  • Maksim PetrivMaksim Petriv, over 9 years ago

    I think we have to completely rethink the side menu approach.

    2 points
  • Scott StephensScott Stephens, over 9 years ago

    The CreativeDash approach has already been used in an app called Reddito, it works in iOS 6 too...heres a video http://youtu.be/hkGkAGojfRQ

    and the link to the app https://itunes.apple.com/us/app/reddito/id674736514?mt=8

    2 points
  • Viktor EngborgViktor Engborg, over 9 years ago

    I had the same problem a couple of weeks ago, I'm glad you brought it up. Cross-fading the status bar to different backgrounds (after speaking to our developers) seems to definitely be possible in iOS7. Just consider the rest of that screens animations if you also support iOS6.

    2 points
    • John FlynnJohn Flynn, over 9 years ago

      Fading the status bar color nicely is great, but is it actually possible to display the status bar controls in both white and black like the first Dribbble example?

      0 points
      • Viktor EngborgViktor Engborg, over 9 years ago

        It seems to be possible, yes. I asked to a couple of our client engineers on FitStar, they're a talented bunch. I'd trust them.

        0 points
  • Florian GrauFlorian Grau, over 9 years ago

    I'm working on an app with a side menu right now and after much trying and thinking I opted for the first option you mentioned. However, I'm quite unhappy with it and don't consider it a real solution, because the edge between content area and menu is most likely cutting through elements of the status bar (Bluetooth icon, locations icon, do-not-disturb icon are all positioned to the left of the battery) - in real life it will probably never look as clean as in the mockup on Dribbble.

    Another options seems to be leaving the status bar background in the same color as the menubar but sliding only the menu bar to the right.

    http://dribbble.com/shots/1158780-Side-bar-menu-slider

    But somehow I'm not completely satisfied with the looks of that option either ...

    1 point
    • Alex MontagueAlex Montague, over 9 years ago

      I actually used that strategy (keep the status bar the same color) on an app I did, totally forgot about it! I agree it doesn't really work in that example. When the color is much less bright than the red used there, it definitely works better.

      0 points
  • Dan LeboDan Lebo, over 9 years ago

    Glad I stumbled upon this post.

    My temporary solution has been to just push the status bar and menu down 20 points and set a custom background color but I'd really like to do something nicer.

    1 point
  • Alex MontagueAlex Montague, over 9 years ago

    Thanks for the responses! I'm glad to know that making the status bar fade in and out within the app is possible - at the very least out could just fade out when the menu is launched and back in when it's closed.

    It seems there's no single answer to this problem. If Apple discourages it, I think it's likely that a new standard could come up in the future. For now, it gives us each the opportunity to innovate and come up with our own unique feel in our apps. It will just be important to consider how natural/usable the motion and layout of your navigation is.

    0 points