Learning iOS Design Addison-Wesley Learning Series Visit informit.com/learningseries for a complete list of available publications The Addison-Wesley Learning Series is a collection of hands-on programming guides that help you quickly learn a new technology or language so you can apply what you’ve learned right away Each title comes with sample code for the application or applications built in the text This code is fully annotated and can be reused in your own projects with no strings attached Many chapters end with a series of exercises to encourage you to reexamine what you have just learned, and to tweak or adjust the code as a way of learning Titles in this series take a simple approach: they get you going right away and leave you with the ability to walk off and build your own application and apply the language or technology to whatever you are working on Learning iOS Design A Hands-On Guide for Programmers and Designers William Van Hecke Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Capetown • Sydney • Tokyo • Singapore • Mexico City Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and the publisher was aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals The author and publisher have taken care in the preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales, which may include electronic versions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests For more information, please contact: U.S Corporate and Government Sales (800) 382-3419 corpsales@pearsontechgroup.com For sales outside the United States, please contact: International Sales international@pearsoned.com Visit us on the Web: informit.com/aw Library of Congress Cataloging-in-Publication Data Van Hecke, William Learning iOS design : a hands-on guide for programmers and designers / William Van Hecke pages cm Includes index ISBN-13: 978-0-321-88749-8 (pbk : alk paper) ISBN-10: 0-321-88749-2 (pbk : alk.paper) iOS (Electronic resource) Application software—Development iPad (Computer) —Programming iPhone (Smartphone) —Programming I Title QA76.774.I67V36 2013 004.167—dc23 2013010043 Copyright © 2013 William Van Hecke All rights reserved Printed in the United States of America This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise To obtain permission to use material from this work, please submit a written request to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle River, New Jersey 07458, or you may fax your request to (201) 236-3290 ISBN-13: 978-0-321-88749-8 ISBN-10: 0-321-88749-2 Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana First printing, June 2013 Editor-in-Chief Mark L Taub Senior Acquisitions Editor Trina MacDonald Development Editor Sheri Cain Managing Editor John Fuller Full-Service Production Manager Julie B Nahil Project Editor Anna Popick Copy Editor Betsy Hardinger Indexer Jack Lewis Proofreader Anna Popick Technical Reviewers Jon Bell Jim Correia Lukas Mathis Editorial Assistant Olivia Basegio Cover Designer Chuti Prasertsith Compositor Rob Mauhar ❖ To Buzz and CeeCee; Touichi and Risako ❖ This page intentionally left blank Contents at a Glance Foreword Preface xix xxi Acknowledgments xxix About the Author xxxi I Turning Ideas into Software The Outlines The Sketches 15 Getting Familiar with iOS The Wireframes The Mockups 31 55 81 The Prototypes 111 Going Cross-Platform II Principles 127 143 The Graceful Interface 145 The Gracious Interface 167 10 The Whole Experience 195 III Finding Equilibrium 221 11 Focused and Versatile 223 12 Quiet and Forthcoming 237 13 Friction and Guidance 255 14 Consistency and Specialization 15 Rich and Plain Index 271 285 303 Supplement: The Learning iOS Design Companion 319 This page intentionally left blank Contents Foreword Preface xix xxi Acknowledgments xxix About the Author xxxi I Turning Ideas into Software The Outlines The Process: Nonlinear but Orderly Writing about Software The Mental Sweep More Inputs to Outlining Outlining Requirements Introducing SnackLog Antirequirements Define a Platform 10 Listing Ramifications 11 iOS and Featurefulness Reducing Problems 11 12 Outlining Architecture 13 Your Outline Is Your To-Do List Summary 14 Exercises 14 The Sketches 14 15 Thinking by Drawing 15 Design Happens in Conversations Tools for Sketching 18 Sketches Are Sketchy When to Sketch 19 20 Using Precedents 21 Playing Devil’s Advocate Sketching Interfaces Sketching Interactions 22 22 24 16 This page intentionally left blank The Graceful Interface You still need to maintain that ever-important suspension of disbelief even if the elements on-screen look more idealized than photorealistic So keep those animations smooth and meaningful, give touch feedback, keep gestures realistic, and maintain generous taps just as fastidiously as ever (Not all of Apple’s interactions succeed at this anymore; see Figure 9.) You’ll find that a digital- or printed-looking interface can still feel quite magical and realistic even without the simulation of real-world surfaces (See an update to SnackLog’s visual presentation in Figure 10.) When planning gestures, you have a few more pitfalls to watch out for now n n Ever since iOS 5, the system has owned the drag from the very top of the screen—it summons Notification Center But now the system also claims the drag up from the bottom, to summon Control Center The user can choose to turn off this gesture inside of apps, presumably in case some problematic apps try to use that gesture to mean something else But don’t be one of those apps! Figure Touch feedback, as originally shown in Figure 8.2 in the book, is actually much weaker in iOS On buttons with no surface and no border, there’s nothing to highlight but the contents, which are usually covered by the fingertip This is a shame 352 Chapter The Graceful Interface n A rightward drag from the left edge of the screen generally means “go back” now You can choose to support it or not, but you should think twice about assigning that gesture to mean something else, because users will be used to its meaning “back.” n Swipe to delete now works only with a right-to-left swipe Some apps also attach other conveniences to this gesture, such as filing messages in Mail or revealing timestamps in Messages Figure 10 The SnackLog mockups that appear starting with Figure 8.9 in the book could be reimagined for iOS like so This was a very straightforward adaptation that required only simple styling changes from the original mockup document The Gracious Interface This is where iOS 7’s emphasis on the principle of clarity leads to some significant changes Cues based on real-world materials and devices were helpful for informing users about what to interact with (“This 3-D-looking thing is a button”) and how to interact (“These buttony-looking things can be pushed; these grooved things can be dragged”) But iOS takes the position that those cues were not worth the visual noise, fussiness, and old-fashionedness they introduced to the interface Instead, Apple seems to be giving us designers the benefit of the doubt that we’ll be able to make elements look interactive with fewer tools at our disposal And they’re giving users the benefit of the doubt that they’ll be able to recognize those elements as interactive Here is an update on the list of interaction cues (See Figure 11.) n n Horizontal “grooves” still appear on table cells in Edit mode, but now they appear f lat and only suggest the idea of a ridged surface, rather than actually illustrating it realistically Buttons no longer appear pushable but are instead drawn in the app’s unique tint color to indicate that they are interactive Figure 11 The interaction cues in Figure 9.1 in the book are still there, except for the pushable look of buttons; that job is now served by simple tinting as seen in the Compose button on the bottom-left screenshot 354 Chapter The Gracious Interface n n Content can, of course, still be cut off at the edge of a view to indicate that there is more to see In fact, many bars are transparent, allowing a bit of content to peek through and make that fact even clearer Animation cues are more important than ever In the example of the camera shortcut on the lock screen, there is no longer any styling cue to suggest that a drag is what’s necessary The camera icon is unadorned, and the system instead relies solely on the animated bounce that happens when you tap the icon An update on negative cues (see Figure 12): n n n The negative cue of dimming unavailable controls goes a step further in iOS Following the idea that tinted elements are interactive, unavailable controls are dimmed and desaturated to grayscale The same goes for disabled controls: the Undo button isn’t just transparent when disabled, it’s also desaturated to gray Noninteractive text no longer has the etched, under-highlighted look, but in the simplified iOS world, it’s usually sufficient to just draw it in gray and let its lack of a tint color indicate its static nature An update on other cues: A destructive button such as Delete now has a white surface just like any other button, but its label is tinted red to distinguish it from other, normal buttons What about an app whose tint color already is red? In Calendar, there’s a confirmation action sheet wherein the Cancel button is tinted blue in order to get the necessary hue difference n Figure 12 The negative cues described in Figure 9.2 in the book are all still in place, with visual adjustments Imagery n It’s harder to make buttons look big and friendly anymore, in a world where most buttons don’t have any border or interior shading anyway You could conceivably use a custom style if you need to make a button look more (or less) appealing The “recommended” or “default” button on a screen, which used to have a bright blue interior, is now merely written in the slightly heavier Medium weight instead of Regular n So far in iOS 7, all interfaces look pretty dry and serious It’ll be interesting to see how third-party developers impart more whimsy to apps where it’s appropriate And an update on false cues: Controls are much more likely to have sufficient contrast, and appear interactive, now that there’s such a consistent way to use tint colors to convey tappability n n n n A clean margin at the edge of a view can still hide its ability to be scrolled, but as mentioned previously, a transparent bar may help reveal the extra content hiding beyond You still need to use animations carefully to avoid making elements seem more important than they are, especially now that animation cues are all the more necessary for communicating useful information You need to be even more careful about coloring noninteractive elements now that color is so crucial as an interactivity cue Imagery Clear imagery is, of course, still very important You should practice designing f lat, purely positive/negative-space icons to put in place of any more detailed renderings you used to use When imagery is part of the main content of an app rather than being used in controls, as in the case of the Weather app, that’s the time to bust out all your shmancy Photoshop skills and apply the shiny effects 355 This page intentionally left blank 10 The Whole Experience Here’s another moment when I’m happy to say the book stands pretty strong in the face of change The soul of your app doesn’t care about the outward appearance of the operating system A user’s fundamental motivations don’t change when the elements get f lattened or the transparent surfaces get a cool blur effect As a more concrete and practical matter, though, you’ve got some new icon requirements You should first adjust the brightness and saturation of your app icon to fit in with the more vivid iOS home screen As subdued as the in-app experience has become, the home screen experience has gotten that much richer and more vibrant After all, at the home screen you’re not trying to focus on getting work done; you’re perusing a catalog of different experiences, each of which should have its own unique personality Beyond that, follow the advice in the book about very simple, f lat glyphs on uniform backgrounds even more aggressively Get that thing as straightforward and uncomplicated as possible The Icon The good news is that you have fewer app icon sizes to worry about Some sizes have been consolidated, and sometimes you don’t need non-Retina sizes The iPad Mini is the only non-Retina device that supports iOS 7, so you can ignore the non-Retina sizes if you’re not on iPad The bad news is that corner radii are no longer circular arcs, so they can’t be created with the corner radius tools in graphics apps Instead, if you want to create borders or other elements that follow the corners, you’ll need to draw Bézier paths that match the gentle, pillowy “Ive-squares” of iOS app icons But most icons shouldn’t need edge effects, such as bevels, at all anymore—just draw your background fill all the way to the edges of the square and let the OS chop off the corners however it likes See Figure 13 for an update to the SnackLog icon in the iOS style The iOS HIG has a helpful table of icon sizes which supersedes the two tables in the book But Table shows an update anyway 358 Chapter 10 The Whole Experience Table Icon Sizes Size (in pixels) Purpose 120 × 120 iPhone home screen 152 × 152 iPad home screen 76 × 76 iPad home screen (non-Retina) 80 × 80 Spotlight results 40 × 40 Spotlight results (nonRetina iPad) 58 × 58 Settings icon 29 × 29 Settings icon (non-Retina iPad) 1024 × 1024 App Store listings Notes Scaled to 128 and 200 pixels in the iPhone App Store; scaled to 150 and 340 points in the iPad App Store Figure 13 Here’s a SnackLog app icon that’s proud to be on iOS No shine, no bevels, no drop shadows, no glowy glassy effects, no stripes— just a clear glyph and an unabashed electric color gradient 14 Consistency and Specialization The bit here about precedents was covered earlier, in the section about Chapter One more thing: pay attention to the paragraph about updating your precedent-based designs If you followed a precedent that was set on iOS 6, see how it’s changed in iOS for free advice on how to update your experience All of the precedents that the book takes from Apple apps that don’t ship with iOS—iWork, iPhoto, iBooks, and so on—are anyone’s guess Will Apple update those soon to follow the example set by the system apps? Will they keep some of the unique styling to send a signal that it’s still OK to diverge from the very plain? Whatever they decide to will be an even stronger signal to third-party developers about what they expect from apps that users get from the App Store The Find My Friends example is funny now, because you can be sure a version without the leather and stitching is coming In light of how iOS looks and feels, that old interface looks, well, kinda comical All the hard work Apple’s designers did to give Find My Friends a unique personality will be set aside in the service of simplicity and clarity You can decide for yourself if you agree with that tradeoff, if you found the old design charming, or if you fall somewhere in the middle One more told-you-so: the more you stuck to standard, consistent elements and experiences as suggested in this chapter, the easier adapting to iOS should be For instance, screens based on normal table views and navigation controllers look great on iOS without any extra design work at all Some extremely consistency-focused apps, with no custom elements at all, could even simply be built with the iOS SDK and be almost ready to go This page intentionally left blank 15 Rich and Plain Here is where iOS really pushes the slider all the way to one side On every axis of richness versus plainness, Apple has put their money on plainness Remember that there’s nothing derogatory about “plain”—it represents a dedication to enshrining and respecting the users’ own content, rather than distracting them with stylized UI furniture Color versus Monochrome Apple’s new interfaces tend to include exactly one hue: red for Calendar, blue for Mail, yellow for Notes, et cetera Surfaces are completely desaturated white, gray, or black, with none of the gentle blue or beige saturation mentioned in the chapter Text is black, gray, or white, chosen to contrast with the backgrounds Controls are generally granted a single, app-wide tint color that communicates their interactivity This color is more saturated and brighter than colors you’re used to seeing in iOS 6, for a couple of reasons They need to draw your attention a bit and look distinct from ordinary content even without the benefit of realistic lighting effects And when your app only has one or two hues on-screen at a time, applied to relatively thin elements, it can get away with them being intense Occasionally, other tints may show up if it’s especially important to use hue to communicate something—such as a red tint hinting at the destructive nature of a delete button Beyond that, all of the saturated colors in an iOS app tend to come from the content itself—photos, maps, calendar events, weather depictions, album art, and so on n n n n n Thus, the example of choosing a decent way of applying your branding color to an app (Figure 15.1 in the book) is much easier now Go ahead and pick something vivid 362 Chapter 15 Rich and Plain as your app’s tint color, as long as it still has decent contrast with the background, and leave the bars alone Depth versus Flatness Word has it that Apple hates the word flat That makes sense, because iOS is not just an adoption of the “f lat design” trend—it still uses lots of depth effects to communicate how layers and elements on a screen relate to each other But when it comes to the individual elements themselves, well, sorry, Apple, but the best way to describe them is “f lat.” All the expressive lighting effects described in the book are gone In their place is something more like what’s described in the Extremes of Flatness and Depth section Fitting in on iOS seems to be a matter of resisting the temptation to put just a little tiny bevel here, an invisibly subtle gradient there But it will be fun to see if there’s a reaction to the reaction, if designers start letting a bit of depth creep back into their elements over time On the scale of decades, design is full of this sort of back-andforth course correction It will also be fun to see if Apple reimagines GarageBand or decides that it is its own thing and that it’s fine for an immersive, fun experience like that to live on visually emulating real-world musical equipment Realism versus Digitality Texture and tactility are pretty much done for in the built-in apps, with one curious exception For some inscrutable reason, Apple decided to carry forward the intense, construction-paper-like texture in the Notes and Reminders apps and to use the alarmingly fake-looking indented “letterpress” effect on their text and controls (Can you tell that I’m not a fan?) It’s almost as if these effects remain just to give permission to third-party developers to continue to use texture here and there It’s conceivable that your apps could have some very subtle texture to their interfaces and still exude that iOS sophistication Metaphor, ornamentation, and simulation have been largely eliminated from iOS, too, all in pursuit of those principles of simplicity and clarity (See Figure 14.) So the decision to “take it easy,” as the book advises, has mostly been made for you Figure 14 The infamous paper shreds of Figure 15.7 in the book are no more Calendar on iOS is strictly business FREE Online Edition Your purchase of Learning iOS Design includes access to a free online edition for 45 days through the Safari Books Online subscription service Nearly every Addison-Wesley Professional book is available online through Safari Books Online, along with over thousands of books and videos from publishers such as Cisco Press, Exam Cram, IBM Press, O’Reilly Media, Prentice Hall, Que, Sams, and VMware Press Safari Books Online is a digital library providing searchable, on-demand access to thousands of technology, digital media, and professional development books and videos from leading publishers With one monthly or yearly subscription price, you get unlimited access to learning tools and information on topics including mobile app and software development, tips and tricks on using your favorite gadgets, networking, project management, graphic design, and much more Activate your FREE Online Edition at informit.com/safarifree STEP 1: Enter the coupon code: VSPQXAA STEP 2: New Safari users, complete the brief registration form Safari subscribers, just log in If you have diffi culty registering on Safari or accessing the online edition, please e-mail customer-service@safaribooksonline.com Join the Informit Affiliate Team! You love our titles and you love to share them with your colleagues and friends why not earn some $$ doing it! If you have a website, blog, or even a Facebook page, you can start earning money by putting InformIT links on your page Whenever a visitor clicks on these links and makes a purchase on informit.com, you earn commissions* on all sales! Every sale you bring to our site will earn you a commission All you have to is post the links to the titles you want, as many as you want, and we’ll take care of the rest Apply and get started! It’s quick and easy to apply To learn more go to: http://www.informit.com/affiliates/ *Valid for all books, eBooks and video sales at www.informit.com ... walk off and build your own application and apply the language or technology to whatever you are working on Learning iOS Design A Hands- On Guide for Programmers and Designers William Van Hecke... Cataloging-in-Publication Data Van Hecke, William Learning iOS design : a hands- on guide for programmers and designers / William Van Hecke pages cm Includes index ISBN-13: 978-0-321-88749-8 (pbk : alk paper).. .Learning iOS Design Addison-Wesley Learning Series Visit informit.com/learningseries for a complete list of available publications The Addison-Wesley Learning Series is a collection of hands- on