iOS 7 Design Philosophy Origins, Tips, and Tricks (CocoaHeads Chicago, August 2013)

My slides introducing the new design philosophy in iOS 7 to the CocoaHeads group. Note that this presentation was given before the iOS 7 NDA was lifted, so there's some stuff I'm sort of willfully obtuse about.

Special thanks to Keynote for making the slides super duper tiny to accommodate my notes. :P

Transcript

1. iOS 7 Design Philosophy
   Origins, Tips, and Tricks
   

   View Slide

2. About
   Hi, I’m Ellen Shapiro, I’m an iOS and Android developer for the Nerdery. We’re a dev shop of about 450 people, with about 40 of us over in the West Loop.
   !
   I’m here to talk about iOS 7, which means I’m going to be running a liiiittle bit of a risk of the BanHammer.
   !
   So before I start I’ve got some videos in this, which come from two primary sources:
   !
   - Videos of anything within apps that are available on iOS 6 are screencasts I recorded...and you should probably ignore the operating system on these
   since *someone* may have upgraded all my AirPlay devices to iOS 7 before I started recording these. And this is why I won’t be publishing these slides for
   a bit.
   !
   - Videos of actual iOS 7 apps are from Apple’s marketing website.
   

   View Slide

3. Design in iOS 7
   
   • Deference
   
   • Clarity
   
   • Depth
   If you’ve watched any of the WWDC videos or even the videos Apple’s got publicly available on their site, you can see there are three clear themes for iOS 7.
   !
   Deference is about as putting content first, above the chrome of your application, so that the user can more quickly and easily get the information they
   want.
   !
   Clarity is about keeping your interactions straight - while you want to reduce your chrome, you can’t eliminate context completely. Give the user what they
   need to in order to interact with the application
   !
   Depth is about motion and visual layers working together to help the user identify where they are in their content
   

   View Slide

4. Deference
   • Minimize your chrome to show off your
   content
   
   • Reading apps (Pocket, Kindle, etc)
   
   • Pinterest
   One of the biggest, clearest examples of an outside app having a huge design influence on Apple is Pinterest.
   !
   Pinterest was one of the first apps to popularize the disappearing-with
   !
   In addition to being very popular with chefs and shopoholics...
   !
   ...some of this is anecdotal, but I know tons of designers who love Pinterest as a tool to organize
   

   View Slide

5. Deference: Old
   School
   • In Pocket, the user has to tap to
   show/hide the chrome
   
   • In the Kindle app, it auto-
   disappears if you scroll side to side,
   but you have to tap to show.
   

   View Slide

6. Deference: The
   New Hotness
   • Top and bottom chrome disappear
   as the user scrolls, giving content
   more space.
   
   • Takes all the user effort out of
   deference.
   I helped build something that was based on this functionality - one of the most interesting things I noticed after I started building it was that in other apps,
   I would instinctively scroll up before starting to try to press the back button.
   !
   And that wasn’t new, that was just something that I actually noticed once I started having to build this functionality. This is basically the same way I felt
   about Pull to Refresh when it was first introduced.
   !
   Noticing the small, weird details about how users use their devices, especially on phones, can lead to really interesting new interaction schemes.
   

   View Slide

7. Deference:
   Apple-Flavored
   • Top chrome recedes, but doesn’t
   fully disappear.
   
   • Bottom chrome disappears
   entirely.
   This is a video taken directly from the iOS 7 marketing website (albeit looped to emphasize my point here).
   

   View Slide

8. Be Deferential
   
   • As with much in iOS 7,
   UIScrollViewDelegate is your friend.
   
   • Determine direction and velocity of user’s
   scrolling, and use that to determine
   whether and how quickly to show/hide
   your chrome.
   
   • Thank your deity of choice you are not
   trying to do this on Android.
   Grab the initial contentOffset, then check it as scrollViewDidScroll: fires to determine direction and velocity.
   !
   I worked on an app (unfortunately White-labeled) on Android that did something similar - Doing this on Android is much more of a hash because of some
   differences in the way the interface methods call back on different devices, and the inability to easily predict how large an interface element will be when
   it’s fully inflated. It is, to put it mildly, a giant pain.
   

   View Slide

9. Clarity
   Being a huge Simpsons fan, this is naturally where I start any discussion about clarity.
   

   View Slide

10. Clarity
    • While minimizing your chrome, make sure
    your user still has clear context about how
    to interact with your app.
    
    • Compare to Android design principles
    “Simplify My Life” and “Make Me Amazing” -
    all about making sure user knows location
    and has easy access to their most-used
    features.
    One of the most interesting things that Apple is emphasizing is clarity.
    !
    There are a bunch of design principles that I think are being
    http://developer.android.com/design/get-started/principles.html
    

    View Slide

11. Clarity vs. Simplicity
    “Simplicity is often equated with minimalism.
    Yet true simplicity is so much more than just
    the absence of clutter or the removal of
    decoration. It’s about offering up the right
    things, in the right place, right when you need
    them. It’s about bringing order to
    complexity.”
    What’s really interesting is the difference between the developer-facing materials and the public-facing materials.
    !
    There are very, very few mentions of simplicity in the updated HIG, but this quote is pulled straight from Apple’s promotional page for iOS 7.
    

    View Slide

12. Clarity v.
    Skeuomorphism
    • Skeumorph: “An object or feature that
    imitates the design of a similar artifact
    made from another material.”
    
    • Linen background in Notification Center,
    green felt in Game Center.
    
    • Demand that skeuomorphic design have a
    utilitarian basis.
    Definition from the OED: http://oxforddictionaries.com/us/definition/american_english/skeuomorph
    !
    A lot of people saw the removal of the green felt and the linen backgrounds in iOS as an abandonment of Skeumorphic design. I’d argue it’s more of a
    demand from Apple to think through whether your choice of skeuomorphic is necessary to understand the functionality of your application.
    

    View Slide

13. Clarity is not “not
    Skeuomorphism”
    - Does it make more sense for a calculator to look exactly like a physical calculator, or retain the same form and button order, but take as much space as
    possible for the button placement?
    !
    (iOS7 screenshot from the iOS 7 marketing site)
    

    View Slide

14. Clarity is not “not
    Skeuomorphism”
    - By stripping a physical compass down to its barest essentials to still be understandable, it’s distilling to essential functionality.
    !
    - Personally, I still think it’d be cool if you could use the back camera to overlay it on a map, but this is a damn sight better than wood grain.
    !
    (iOS7 screenshot from the iOS 7 marketing site)
    

    View Slide

15. Get Clear
    • If there’s a way for your user to understand
    the use of your application without
    skeuomorphs, do it that way.
    
    • If you do need something resembling real
    life, strip it to its bare essentials.
    
    • If you need a tutorial to explain to your
    user how something works, you’re probably
    making it too hard for them.
    Overuse of tutorials has become kind of endemic in mobile development - a tutorial being *available* is a good thing, if people get lost. But having it be
    the first thing users see tells the user you don’t trust them to figure things out, and points to your design possibly being too complex.
    

    View Slide

16. Depth
    • Use of movement, animation, and blurs to
    indicate position within an application.
    
    • Yahoo Weather
    
    • Google/Google Now
    We’re going to talk about a couple apps that are already implementing visual designs with a lot of depth.
    

    View Slide

17. Depth: Yahoo
    Weather
    • As user scrolls down, blur
    increases to place emphasis on
    content rather than background.
    
    • Opening radar creates a new layer
    that expands out, while closing it
    contracts it back down to the old
    layer.
    
    • Refreshing adds another layer.
    Note: Apple’s partnered with Yahoo for data on the weather and stocks apps since launch, and given Yahoo’s big overhaul lately, I wouldn’t be surprised to
    see more interesting stuff from them.
    

    View Slide

18. Depth: Google /
    Google Now
    • Animation pops in on initial launch
    
    • Cards animate in on a delay to
    bring the user’s attention to them
    
    • Clicking anything that would open
    an internal UIWebView does it in a
    layer
    The Google app vs. Google Now animation is one of my favorite ones I’ve seen in a long time. Smooth switching of modes of the application with a clear
    visual indicator, and a really fun way to toggle it back and forth.
    

    View Slide

19. Depth: Control
    Center
    • Blur and dimming of the content
    below is key for the feeling that
    the Control Center pane is
    “above” the home screen.
    
    • Home screen blur causes app
    icons to “float.”
    There are better examples of this in a few places, but the NDA-Friendly one comes in this video from the iOS 7 marketing site of Control Center.
    

    View Slide

20. Go Deep
    • Use new UIViewController transitions.
    
    • Watch your use of blur - this is really GPU
    intensive if you’re not judicious about it.
    
    • Think about where you can convey
    navigational depth by blurring a background
    rather than just pushing a new VC.
    For UIVC transitions, there’s a whole session, Custom Transitions Using View Controllers, from this year’s WWDC that’s really great.
    !
    For blur, note that if you don’t need it to be live, there are some new methods on UIView to help facilitating taking a snapshot of your UI so blurring it
    becomes easier and less GPU intensive.
    !
    One thing to take a look at for backwards compatibility on GPU-accellerated blurring: https://github.com/BradLarson/GPUImage - I haven’t tried it but it
    has a huge contributor base.
    !
    

    View Slide

21. Design in iOS 7
    
    • Deference
    
    • Clarity
    
    • Depth
    And, one more time, the three biggest themes -
    !
    You want to build your application so it gets out of the way of your user...but not so much that they have no idea what the hell they’re doing. And you want
    to take advantage of new APIs for view controller transitions and blurring/animation to convey depth.
    !
    If you keep these themes in mind as you build out your application, you’ll fit right in with iOS 7.
    

    View Slide

22. Special Bonus Slide!
    • Screen casts captured with Reflector App:
    http://www.reflectorapp.com
    
    • 50% off Promo code:
    CocoaHeadsChicagoAugust13

    (expires 08/20)
    I made all the screen casts for this presentation using ReflectorApp, which uses AirPlay to allow you to record things happening on your screen.
    !
    I tweeted at them about how much I loved their app, and they gave me a promo code to share with you fine people for half off, which means the app is
    $6.50 for you. I found it well worth it at twice the price.
    

    View Slide