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

Appendix B. If you need a stylus, you blew it

When questioned about input methods on the iPad, former Apple CEO Steve Jobs offered up one of his most quote-worthy quips in recent memory, telling journalists about competitors, "If you see a stylus, they blew it." Throughout the life of iOS, Apple has taken the strong stance that mobile computing should remain an exercise best fit for the fingertips.

Note

Steve Jobs was a remarkable CEO and public speaker. His keynotes on iOS were often an interesting public display of the operating system and a must-watch for any developer. Apple makes public all keynotes as a podcast, in case we haven't seen them, at http://itunes.apple.com/podcast/id275834665.

We've already discussed the importance of understanding the difference between the portrait and landscape perspectives with regards to how users hold the device in their hands, but what about the differences between a finger and a mouse as a pointing device?

In developing an interface for the iOS, it is important to understand the fundamental differences between the mouse pointer and the pointer finger. In this appendix, we'll discuss several of the physical and philosophical differences between the two pointing devices.

While touch screen displays have become quite commonplace, the introduction of the iPhone in 2007 signaled the beginning of a new generation of mobile devices by ditching a keyboard altogether. At the time, the world had yet to see a finger focused mobile device that worked well and many were skeptical.

Apple differentiated from competitors and predecessors in two distinct ways when building the iPhone, which helped vault the device to success. First, Apple backed away from the notion that a stylus was required for successful touch interaction. Second, much thought was put into designing an attentive operating system that reacts quickly and obviously to touch inputs.

The loss of the stylus was seen as a way to break the physical barrier between human and computer in a mobile environment. For millions, the iPhone was the first available capacitive touch screen experience which was accurate enough to not require a stylus. The detachment from a stylus or keyboard can be a detriment in some situations, as it also takes away the ability for tactile user feedback. With iOS, the finger became the direct input device responsible for tapping the screen.

In contrasting the differences between a click and a tap, there are three distinct attributes on which we should focus our attention: speed of a touch or click, radius of a touch or click, and the speed at which the user can move from one side of the screen to the other.

Speed is inherently different between devices due to the physical act required to perform either a double tap or a double click. Pick up a mouse to perform a quick double click upon a file and consciously make an effort to notice the motion of clicking. Computer mice are designed to make the click as simple and comfortable as possible, so it shouldn't be a surprise to us that the double click has become a common action for file selection. The mouse also has the benefit of being detached from the computer, which allows for relative 2D motion as interpreted by a device sitting on a table next to the computer monitor. Our pointer finger can remain on the mouse at all times, which allows us to perform a double tap at moments notice.

In contrast, iOS devices are designed so that fingers do not make unintentional contact with the interface while being held with our hands. The iPhone and iPod touch lay flush in a palm while the iPad contains a bezel that measures nearly one inch in width. In order to use our pointer finger to tap upon the iOS screen, we must hold the device in one hand and then extend our other hand and make contact with the screen. This pointing dilemma is one of the driving reasons as to why the Tab Bar view controller works so well on the iPhone, as the placement of the bar on the bottom of the screen allows for easy reach with the thumb of the hand holding the device.

Note

Keeping this attribute in mind, we should focus on keeping tap sensitive elements to a minimum and within reach of the thumb from the hand holding the device when possible.

As we can see in the next screenshot, important elements on screen are placed to be within a quick thumb tap:

Radius is another important component of successful interface design. Unfortunately, the human body did not evolve with touch screens in mind and we are left carrying relatively large fingers with inherent computer interaction flaws.

The width of a finger is the most difficult obstacle, as radius of a tap can vary from person to person. As such, we must plan for large fingers with every interface we build, which can take up a great deal of space. Apple suggests that interface items be of a size at least equal to 44 pixels by 44 pixels, which equates to an 88 pixel square on the Retina Display. At this size, the average tap is equal to nearly 14 percent of the width of the screen and 9 percent of the height, which is a considerable chunk of real estate.

Note

For means of comparison, on a 320 x 480 pixels iPhone or iPod touch screen, the Navigation Bar measures 44 pixels tall and the Tab Bar measures 49 pixels tall, numbers that fit accordingly with Apple's recommendation that interface elements measure at least 44 x 44 pixels for easy interaction.

While fingertips are taking up a considerable portion of our real estate, we haven't even begun to calculate lost real estate from the rest of our finger that acts as an obtrusion to the screen under it.

If we place our finger on the top half of an iPhone screen, we'll quickly see that the tapping finger covers a great portion of the screen. Again, this is lost interface space during the moment that a tap occurs and we should design our interfaces with this flaw in mind. If when interacting with an interface element on screen, it is required that a user also have access to information located below that element, conflict will arise and important data will be rendered inaccessible. In the next image, we can see an example of such data loss:

If we compare the radius of a touch to the click of a mouse, we see the drastic differences in size and clarity. Mouse pointers are designed to be small in size, where a slight movement of our mouse on a 2D plane on our desk corresponding with an equally slight movement on screen. Scrolling speeds, momentum, and other speed attributes can be customized in software, allowing a unique experience between users. Because mouse movement occurs on a separate device, traditional computer interfaces also need not worry about ever having the mouse pointer block important information on screen.

Finally, the speed at which a user can scan across and interact with two different interface items is another important challenge with our interface. When using a mouse, quick shifts from one side of the screen to the other are simple. A sudden movement of the mouse on the desk can easily translate into a pointer movement across screen. However, movement across the iPhone or iPad can be quite different. In order to move across the screen, the user must physically pick up their finger, and then place it down upon another part of screen. This interaction is unnatural, uncomfortable, and lengthy.

Fingertips covering up important screen real estate can become problematic with speed as well. If our interface changes drastically after pressing upon a button, the user cannot visually see and react the entire screen until the finger has been lifted. Under a mouse pointer system, the user has the benefit of being able to react instantaneously to changes in an interface. This delay can be most apparent in games and applications that are fast paced, where important information or game characters require quick reaction time for success.

Jumping off a cliff in a platform game or losing important information because it is obscured under a finger can be extremely frustrating to an iOS user and our interface designs should be built to prevent such situations.

The surface isn't always slippery

Due to a fingerprint protective coating that Apple uses on most iOS devices, swiping a finger across the screen of an iPhone or iPad can sometimes be met with a frictional resistance.

There isn't a huge sense of force when pushing a finger across screen, but the coating can be noticeable nonetheless. When planning an interface that requires quick swiping, keep this slight resistance in mind as it can sometimes make swiping on screen a bit slow.

This protective coating can slightly vary between device models and can slightly wear out over time as well, which can also affect the level of resistance between finger and screen.

Paying attention to subtle details in each iOS device, like the resistance of the protective coating, can help turn a mediocre app into a spectacular interface.