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
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.
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
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
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.
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.
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).
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.
9. Clarity Being a huge Simpsons fan, this is naturally where I start any discussion about clarity.
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
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.
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.
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)
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)
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.
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.
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.
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.
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.
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. !
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.
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.