Book Image

iPhone User Interface Cookbook

By : Cameron Banga
Book Image

iPhone User Interface Cookbook

By: Cameron Banga

Overview of this book

The incredible growth rates for the iPhone, iPod touch, and iPad have pushed consumers to a new “App” economy, with developers racing to the platform. Mobile touch-centric interfaces vary greatly from traditional computing platforms, and programmers as well as designers must learn to adapt to the new form-factor.The iPhone User Interface Cookbook offers a complete breakdown of standard interface design on the iPhone, iPod touch, and iPad. You will learn the tools behind the trade, how to properly utilize standard interface elements, and custom UI tricks that will help your work stand out on the App Store.The book is designed to be a complete overview of interface design on all iOS platforms, offering insight and an inside look into app design. A variety of topics are covered, starting with an overview of tools for the app interface designer, touching upon popular interface components such as the Tab Bar, and offering suggestions for complex game interfaces. Whether you’re new to the platform or a seasoned developer with numerous applications in the App Store, this book strives to teach everyone simple and easy to implement tips for iOS interface design. Regardless of skill level, the iPhone User Interface Cookbook offers a detailed breakdown of all things interface design.
Table of Contents (18 chapters)
iPhone User Interface Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
PacktLib.PacktPub.com
Preface
The Importance of Direct Manipulation
If you need a stylus, you blew it

Starting with the sketch


Before we take time to design our user interface in Photoshop, it is important to sit down with a piece of paper and a pencil to sketch out the basics for how users will interact with our app. Once we set a programmer out to begin work on an application with a given interface, it can be very costly to go back and make changes later when we realize that our design has a few small problems that need to be fixed.

Luckily, a notebook and pencil are cheap tools, and we can draw out many example interfaces without ever wasting a dollar of programming time.

Getting ready

For best results, we should find a desk, a good pencil, an eraser, and a couple of pieces of paper. If available, large notepads are preferable, as the extra space will allow room for notes.

How to do it...

Before we step into Adobe Photoshop or XCode with our application design, we should begin by sketching out the idea onto paper.

Note

Photoshop is Adobe's high-profile raster image editing software. XCode is Apple's development environment for iOS and Mac applications. Both apps are essential parts of our development toolbox.

Let's take a look at some basic iOS drawing principles so that we can best prepare our sketches for the transition to pixels on an iPhone screen:

  1. 1. We should start by sketching several rough boxes that are scaled roughly to the size of an iPhone or iPad. The iPhone screen is a rectangle measuring approximately 4.5 inches by 2.5 inches. The iPad screen measures approximately 9 inches by 7 inches.

    Next, we should go about designing a wire frame mock up of how we anticipate interacting with our application, so that we know exactly what we are looking for in our prototype. The following screenshot shows how a wire frame should give a visual representation of how the user will flow through the final application. In the quick wire frame of a dictionary application below, we gain a good idea as to how the user will interact with our work.

  2. 2. The paper is literally our blank canvas right now, so we should experiment with ideas and get an idea of what we want our app to look like.

    Often, it's useful if large sketch paper is used when designing an interface. This allows space for notes and multiple screens to be sketched.

    We'll be designing an application in either landscape or portrait view, and may want to place out multiple possible screens on our page of sketch paper to help lay out an intended application flow.

    From here, we can begin to sketch out our interface on screen. Buttons, text, and other interface elements can be placed in the approximate size and position that we desire our future app to look like.

  3. 3. With our application screens laid out on paper, you begin to literally place the paper in your hand and touch it as if it were a real iOS device.

    Take a quick note of the visual changes that occur when a finger is placed upon the interface. Does touching a button cause the user to place their hand over important data? Do buttons seem to be spaced far enough apart that a user could easily tap on one without errantly tapping upon another?

  4. 4. Take notes on the process of interacting with your sketched mock up application and proceed to make changes to the sketch, and then repeat the process.

    Ideally, we will go through three or four revisions until we design something that we could see ourselves enjoying on our iOS device.

  5. 5. At this point, our drawings may be slightly sporadic and our notes may be messy. Since the reasoning behind our design is still fresh in our minds, now would be the best time to go back and redraw views or notes that are unclear. Once we're happy with our work, we are done sketching up our application.

How it works...

Because iOS devices require a user to physically interact with a variety of interface elements in a small amount of space, sketching up ideas can be a powerful way to test user interface design ideas. If drawn close to scale, we can simulate touch interactions and get a good idea of how our interface will look before we ever paint a pixel in Photoshop.

There's more...

Several companies provide special graph paper, stencils, and iOS applications that help make it easier to sketch application ideas. Typically these products are inexpensive and make high quality mock ups simple. Many stencil sets also come with many standard UI elements accurately sized, which will allow us to sketch with confidence and precision.

Picking up the best stencil set

Design Commission produces arguably the best interface design stencils, which can be found at http://www.uistencils.com/products/iphone-stencil-kit. For a low cost, iPhone and iPad stencils can be purchased along with appropriate device sketchpads. Design Commission also has great stencil sets for Android and Web developers, in case we're looking to design for those platforms as well.

As we can see in the following screenshot, the interface stencil contains many common pieces and can help in properly laying out elements on paper:

There's an app for that

There are even several iOS applications focused around making the sketching process easier as well. Interface by Less Code LTD, iMockups for iPad by Endloop Systems, and Dapp by Kerofrog are all great applications that can make the mock up process easier. Each offers the ability to drag and drop standard interface elements around on a real iPhone or iPod touch screen, allowing us to quickly grasp the scale and feel of our desired interface on a real device.

See also

  • Developing a rapid prototype in this chapter

  • Getting our work onto a device in this chapter