iPhone User Interface Design Projects

262 Pages·2016·4.48 MB·English

by  Barnard D. etc.

iPhone User Interface
Design Projects

■ ■ ■
Dave Mark, Series Editor
Chris Parrish and Brad Ellis
David Barnard
Keith Peters
Joachim Bondo
Jürgen Siebert
Dan Burcaw
Eddie Wilson
David Kaneda
Craig Kemper
Tim Novikoff
iPHONE USER INTERFACE DESIGN PROJECTS
Copyright © 2009 by David Barnard, Joachim Bondo, Dan Burcaw, David Kaneda, Craig Kemper, Tim Novikoff,
Chris Parrish, Brad Ellis, Keith Peters, Jürgen Siebert, Eddie Wilson
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic
or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the
prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-4302-2359-7
ISBN-13 (electronic): 978-1-4302-2360-3
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a
trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with
no intention of infringement of the trademark.
President and Publisher: Paul Manning
Lead Editor: Clay Andres Matthew Moodie
Developmental Editor: Matthew Moodie
Lead Author and Technical Reviewer: Joachim Bondo
Editorial Board: Clay Andres, Steve Anglin, Mark Beckner, Ewan Buckingham, Tony Campbell, Gary Cornell,
Jonathan Gennick, Michelle Lowman, Matthew Moodie, Jeffrey Pepper, Frank Pohlmann, Ben Renow-
Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh
Coordinating Editor: Kelly Moritz
Copy Editor: Heather Lang
Compositor: MacPS, LLC
Indexer: John Collin
Artist: April Milne
Cover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York,
NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail [email protected], or visit
http://www.springeronline.com.
For information on translations, please e-mail [email protected], or visit http://www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook
versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–
eBook Licensing web page at http://www.apress.com/info/bulksales.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has
been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or
entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information
contained in this work.
To my wife and family for being so incredibly supportive
—David Barnard

To my wife, Malena, who once again gave me the support I hadn’t earned
—Joachim Bondo

To Mom, Dad, and Zach
—Dan Burcaw

To Lindi and our kids, for being cool, hip, and weird. And to Brandy, for always keeping me on task.
— Craig Kemper

To all the people who helped me get started and to Oana for supporting me all the way.
—Tim Novikoff

To my family, Liz, Sovereignty, and Aidan; thanks for all the patience and support
—Chris Parrish

To all my colleagues of the FontShop network
—Jürgen Siebert

To my wife Jenna and daughters Cana and Mia
—Eddie Wilson
Contents at a Glance
■Contents at a Glance................................................................................................................................................................iv(cid:1)
■Contents....................................................................................................................................................................................v(cid:1)
■Foreword..................................................................................................................................................................................xi(cid:1)
■About the Technical Reviewer.................................................................................................................................................xii(cid:1)
■Introduction............................................................................................................................................................................xiii(cid:1)
David Barnard...............................................................................................................................................................................1(cid:1)
■Chapter 1: App Cubby................................................................................................................................................................3(cid:1)
Joachim Bondo...........................................................................................................................................................................21(cid:1)
■Chapter 1:Yet Another Google Reader.....................................................................................................................................23(cid:1)
Dan Burcaw................................................................................................................................................................................41(cid:1)
■Chapter 1:Brightkite for the iPhone........................................................................................................................................43(cid:1)
David Kaneda..............................................................................................................................................................................59(cid:1)
■Chapter 1:Outpost...................................................................................................................................................................61(cid:1)
Craig Kemper..............................................................................................................................................................................77(cid:1)
■Chapter 1:TanZen and Zentomino............................................................................................................................................79(cid:1)
Tim Novikoff.............................................................................................................................................................................111(cid:1)
■Chapter 1:Flash of Genius: SAT Vocab..................................................................................................................................113(cid:1)
Chris Parrish and Brad Ellis.....................................................................................................................................................127(cid:1)
■Chapter 1:Postage.................................................................................................................................................................129(cid:1)
Keith Peters..............................................................................................................................................................................161(cid:1)
■Chapter 1:Falling Balls and Gravity Pods..............................................................................................................................163(cid:1)
Jürgen Siebert..........................................................................................................................................................................181(cid:1)
■Chapter 1:FontShuffle............................................................................................................................................................183(cid:1)
Eddie Wilson.............................................................................................................................................................................209(cid:1)
■Chapter 1:Snow Reports for the iPhone................................................................................................................................211(cid:1)
■Epilogue: Reactive Music and Invisible Interfaces................................................................................................................235(cid:1)
■Index.....................................................................................................................................................................................239
Contents
■Contents at a Glance..............................................................................................................iv(cid:1)
■Contents..................................................................................................................................v(cid:1)
■Foreword................................................................................................................................xi(cid:1)
■About the Technical Reviewer..............................................................................................xii(cid:1)
■Introduction.........................................................................................................................xiii(cid:1)
What’s in This Book...............................................................................................................................................................................xiii
(cid:1)
David Barnard............................................................................................................................1(cid:1)
■CHAPTER 1: App Cubby...........................................................................................................3(cid:1)
From Fanboy to Developer.......................................................................................................................................................................3(cid:1)
Learning from Apple................................................................................................................................................................................4(cid:1)
To Tap or Not to Tap?............................................................................................................................................................................10(cid:1)
Usability Testing on the Cheap..............................................................................................................................................................14(cid:1)
Finding Users....................................................................................................................................................................................14(cid:1)
Testing Done Right...........................................................................................................................................................................14(cid:1)
Walking Through a User’s Test....................................................................................................................................15(cid:1)
Learning from Usability Testing..................................................................................................................................17(cid:1)
Fit and Finish.........................................................................................................................................................................................18(cid:1)
Summary...............................................................................................................................................................................................20(cid:1)
Joachim Bondo ........................................................................................................................21(cid:1)
■CHAPTER 2: Yet Another Google Reader................................................................................23(cid:1)
Choosing to Develop a Newsreader.......................................................................................................................................................23(cid:1)
Identifying Pitfalls of Current Newsreaders...........................................................................................................................................24(cid:1)
Exploring the Google Reader Experience..........................................................................................................................................25(cid:1)
Lack of Overview and Cumbersome Navigation...............................................................................................................................29(cid:1)
Lack of Data Control.........................................................................................................................................................................30(cid:1)
Improving the Newsreader Experience.................................................................................................................................................31(cid:1)
Defining the Application Definition Statement..................................................................................................................................32(cid:1)
Making the Application Native..........................................................................................................................................................33(cid:1)

v
■ CONTENTS
Making the Navigation More Effective.............................................................................................................................................33(cid:1)
Giving a Better Overview..................................................................................................................................................................36(cid:1)
Studying the User’s Reading Pattern...........................................................................................................................37(cid:1)
Presenting the Information..........................................................................................................................................37(cid:1)
Outlining the Next Steps........................................................................................................................................................................39(cid:1)
Summary...............................................................................................................................................................................................40(cid:1)
Dan Burcaw..............................................................................................................................41(cid:1)
■CHAPTER 3: Brightkite for the iPhone...................................................................................43(cid:1)
Introducing the Brightkite Location-Aware Social Network..................................................................................................................43(cid:1)
Introducing Double Encore....................................................................................................................................................................44(cid:1)
Moving From Web to Mobile..................................................................................................................................................................44(cid:1)
The Rise of Native Applications, to the Web’s Despair.....................................................................................................................46(cid:1)
A Creative Paradigm Shift.................................................................................................................................................................48(cid:1)
Designing for the First-Time User.........................................................................................................................................................51(cid:1)
Creating Virtually Infinite Drill-Down.....................................................................................................................................................54(cid:1)
Summary...............................................................................................................................................................................................57(cid:1)
David Kaneda...........................................................................................................................59(cid:1)
■CHAPTER 4: Outpost..............................................................................................................61(cid:1)
Establishing Outpost..............................................................................................................................................................................61(cid:1)
Wireframing Outpost.............................................................................................................................................................................62(cid:1)
Designing Outpost.................................................................................................................................................................................66(cid:1)
Two Screens, One Application..........................................................................................................................................................66(cid:1)
First Attempt................................................................................................................................................................68(cid:1)
Second Attempt...........................................................................................................................................................68(cid:1)
Fitting In................................................................................................................................................................................................70(cid:1)
Working in a Small Team.......................................................................................................................................................................72(cid:1)
Designing with HTML.............................................................................................................................................................................72(cid:1)
All That Glitters. . ..................................................................................................................................................................................73(cid:1)
Summary...............................................................................................................................................................................................75(cid:1)
Craig Kemper...........................................................................................................................77(cid:1)
■CHAPTER 5: TanZen and Zentomino......................................................................................79(cid:1)
Finding the Elusive Application Idea......................................................................................................................................................79(cid:1)
Creating a Design Document.................................................................................................................................................................81(cid:1)
Diving into the Code..............................................................................................................................................................................82(cid:1)
Creating the Piece UI........................................................................................................................................................................83(cid:1)
Pieces, Pieces Everywhere...............................................................................................................................................................84(cid:1)
Being Deceived by the Simulator.....................................................................................................................................................85(cid:1)
Playing to the Emotions of Your Customers.....................................................................................................................................86(cid:1)
Words? We Don’t Need No Stinking Words!.....................................................................................................................................87(cid:1)
How Many Buttons Does It Take?.....................................................................................................................................................88(cid:1)
When Is a Game Not a Game?...............................................................................................................................................................89(cid:1)
The Eureka Moment.........................................................................................................................................................................89(cid:1)
I’m Not an Artist, But I Play One on the App Store............................................................................................................................89(cid:1)
Vital, Yet Invisible.............................................................................................................................................................................91(cid:1)
Racing to the Finish Line?................................................................................................................................................................93(cid:1)
Building a Better Rotation.................................................................................................................................................................93(cid:1)

vi
■ CONTENTS
Finally Testing on a Device....................................................................................................................................................................96(cid:1)
Going Back to the Drawing Board.....................................................................................................................................................96(cid:1)
The Perils of Being 95 Percent Finished...........................................................................................................................................98(cid:1)
The App Store Arrives!...........................................................................................................................................................................99(cid:1)
Recalling the First Days on the App Store......................................................................................................................................100(cid:1)
Responding to Rotation Issues.......................................................................................................................................................101(cid:1)
When to Say “Yes” and When to Say “Thanks, I’ll think about it.”................................................................................................103(cid:1)
Surviving on the App Store.............................................................................................................................................................105(cid:1)
Creating a Second Game Without Starting Over..................................................................................................................................106(cid:1)
Repurposing a Popular Interface....................................................................................................................................................107(cid:1)
Making Interface Modifications to Fit the New Game Rules...........................................................................................................107(cid:1)
Designing Around Limitations in Screen Size.................................................................................................................................108(cid:1)
Colors, Colors Everywhere..............................................................................................................................................................108(cid:1)
Putting on the Finishing Touches...................................................................................................................................................109(cid:1)
Summary.............................................................................................................................................................................................110(cid:1)
Tim Novikoff...........................................................................................................................111(cid:1)
■CHAPTER 6: Flash of Genius: SAT Vocab.............................................................................113(cid:1)
Checking Out the Competition.............................................................................................................................................................114(cid:1)
Mental Model Inconsistency...........................................................................................................................................................116(cid:1)
Inappropriate Orientations..............................................................................................................................................................116(cid:1)
Small Buttons.................................................................................................................................................................................117(cid:1)
Starting Development..........................................................................................................................................................................118(cid:1)
Designing the Flashcards....................................................................................................................................................................121(cid:1)
Designing the Buttons.........................................................................................................................................................................122(cid:1)
Testing the Application........................................................................................................................................................................124(cid:1)
Launching the Application...................................................................................................................................................................125(cid:1)
Summary.............................................................................................................................................................................................126(cid:1)
Chris Parrish and Brad Ellis...................................................................................................127(cid:1)
■CHAPTER 7: Postage............................................................................................................129(cid:1)
Keeping the Application Focused........................................................................................................................................................130(cid:1)
Selecting Font Styles......................................................................................................................................................................132(cid:1)
Selecting Font Colors......................................................................................................................................................................132(cid:1)
Using Image Effects........................................................................................................................................................................133(cid:1)
Setting Preferences and Configuring the Application.....................................................................................................................133(cid:1)
Separating Tasks............................................................................................................................................................................136(cid:1)
Analyzing the Context..........................................................................................................................................................................140(cid:1)
Considering Context in Postage......................................................................................................................................................141(cid:1)
Facing Potential Problems with Context.........................................................................................................................................143(cid:1)
Using Familiar Controls in Postage.................................................................................................................................................144(cid:1)
Creating the Application Flow..............................................................................................................................................................146(cid:1)
Giving Hints About Flow..................................................................................................................................................................147(cid:1)
Showing Instead of Telling.............................................................................................................................................................148(cid:1)
Avoiding Icon Overload...................................................................................................................................................................150(cid:1)
Tuning Responsiveness and Feedback..........................................................................................................................................151(cid:1)
Exploring the Postage Development Technique..................................................................................................................................152(cid:1)
Creating Prototypes and Mock-ups................................................................................................................................................152(cid:1)
Writing Specifications.....................................................................................................................................................................154(cid:1)

vii
■ CONTENTS
Considering Art...............................................................................................................................................................................157(cid:1)
Tuning the Touch............................................................................................................................................................................158(cid:1)
Summary.............................................................................................................................................................................................160(cid:1)
Keith Peters............................................................................................................................161(cid:1)
■CHAPTER 8: Falling Balls and Gravity Pods.........................................................................163(cid:1)
Creating Falling Balls...........................................................................................................................................................................164(cid:1)
Building the Game..........................................................................................................................................................................166(cid:1)
Creating Gravity Pods..........................................................................................................................................................................171(cid:1)
Building the HUD.............................................................................................................................................................................174(cid:1)
Summary.............................................................................................................................................................................................179(cid:1)
Jürgen Siebert........................................................................................................................181(cid:1)
■CHAPTER 9: FontShuffle......................................................................................................183(cid:1)
Introducing FontShuffle.......................................................................................................................................................................183(cid:1)
Entering the World of Typefaces.........................................................................................................................................................184(cid:1)
Understanding Fonts......................................................................................................................................................................185(cid:1)
Characters and Glyphs...................................................................................................................................................................186(cid:1)
The Anatomy of Letters..................................................................................................................................................................187(cid:1)
Choosing the Right Typeface for Screens...........................................................................................................................................190(cid:1)
Identifying Typefaces..........................................................................................................................................................................192(cid:1)
Serif vs. Sans Serif.........................................................................................................................................................................192(cid:1)
Explosion of Type Styles.................................................................................................................................................................193(cid:1)
Classification of Typefaces.............................................................................................................................................................194(cid:1)
Exploring FontBook and FontShuffle...................................................................................................................................................195(cid:1)
FontShop’s Typeface Categorization..............................................................................................................................................197(cid:1)
Classes and Orders of Typefaces...................................................................................................................................................198(cid:1)
FontShuffle Step by Step................................................................................................................................................................199(cid:1)
Getting Started: Search Level 1.................................................................................................................................200(cid:1)
Searching by Typeface Name: Search Level 1, version 1.1.......................................................................................201(cid:1)
Displaying Classes: Search Level 2...........................................................................................................................202(cid:1)
Displaying Families: Search Level 3..........................................................................................................................203(cid:1)
Shuffle or List View: Search Level 3, version 1.1......................................................................................................205(cid:1)
Displaying the Font: Search Level 4..........................................................................................................................206(cid:1)
Summary.............................................................................................................................................................................................208(cid:1)
Eddie Wilson...........................................................................................................................209(cid:1)
■CHAPTER 10: Snow Reports for the iPhone.........................................................................211(cid:1)
So You Like to Design, Huh?................................................................................................................................................................212(cid:1)
Why Design for the iPhone?................................................................................................................................................................212(cid:1)
Isn’t Programming for Programmers?.................................................................................................................................................213(cid:1)
Why Snow Reports?............................................................................................................................................................................214(cid:1)
Why Learn iPhone Programming?.......................................................................................................................................................215(cid:1)
My Design Process..............................................................................................................................................................................216(cid:1)
Defining the Project........................................................................................................................................................................216(cid:1)
Acquiring Third-Party Resources....................................................................................................................................................218(cid:1)
Finding a Good Data Provider....................................................................................................................................218(cid:1)
Creating a Flowchart......................................................................................................................................................................219(cid:1)
Creating Wireframes.......................................................................................................................................................................221(cid:1)

viii
■ CONTENTS
Skinning the Design.......................................................................................................................................................................222(cid:1)
Developing and Programming........................................................................................................................................................223(cid:1)
Testing and Deploying....................................................................................................................................................................225(cid:1)
Beta Testing...............................................................................................................................................................225(cid:1)
Deploying Your Application.......................................................................................................................................225(cid:1)
Details of the UI...................................................................................................................................................................................225(cid:1)
The Shape of Things.......................................................................................................................................................................226(cid:1)
Colors.............................................................................................................................................................................................226(cid:1)
Sign of the Times............................................................................................................................................................................226(cid:1)
Buttons...........................................................................................................................................................................................227(cid:1)
Typefaces.......................................................................................................................................................................................228(cid:1)
Loading vs. Splash Screen.............................................................................................................................................................229(cid:1)
Reporting the Day...........................................................................................................................................................................230(cid:1)
Coming from a Web Design Background.............................................................................................................................................230(cid:1)
Designing an Icon................................................................................................................................................................................231(cid:1)
Summary.............................................................................................................................................................................................233(cid:1)
Epilogue: Reactive Music and Invisible Interfaces.................................................................235(cid:1)
How we got here and why we're doing it............................................................................................................................................235(cid:1)
Using sensors as reactive music interfaces........................................................................................................................................237(cid:1)

ix