Channels ▼
RSS

Tools

Developing for the iPad


Jonathan Branam is a senior software developer for EffectiveUI.


Six weeks before the launch of Apple's iPad, I approached my company, EffectiveUI, about building an application for the iPad that would be useful for our particular business -- designing and developing user interfaces. Typically our work begins with a number of meetings between our user-experience architects, designers, and developers, as well as the client's stakeholders and users. We sit and chat, we have conference calls, and we generate piles of notes and sketches to keep track of what we learn and how we visualize their new UI.

We use sketch pads for this work as well as taking notes on our laptops, but the end result is a stack of loose papers that we end up needing to keep with us or scan into our computers. The iPad is clearly a device that can help with this problem, and so Juan Sanchez and I pitched the idea of an application designed for the idea generation process of any activity, whether it's user interface design, planning your home landscaping, laying out an ERD, or designing a line of high-fashion clothes.

[Click image to view at full size]
Figure 1

Ideate Development

With approval in hand, I began developing "Ideate" as my first large CocoaTouch application. I had previously learned iPhone SDK development just enough to launch a basic application and render to some OpenGL ES layers. Building Ideate was a learning experience as much as anything, and I'll share some of the lessons learned in this article.

At this writing, iPad development is only possible on Mac OS X version 10.6.2. To develop for the iPad, iPhone, or iPod Touch you must join the iPhone development program and download XCode 3.2.2 with iPhone SDK 3.2. If you want to test on an actual iPad or iPhone and submit to the App Store, you also need to become a paid member of the Apple Developer Program, which currently costs $100/year. During development you can run your application in the iPhone Simulator which also simulates an iPad device in version 3.2 (the current device can be changed in the menu of the simulator under Hardware --> Device).

Designing for a Touch Tablet

The biggest difference in iPad development isn't the new language or the new SDK. The biggest difference is designing a good user interface for a tablet device that is driven entirely by touch. Since the iPad is such a novel device, application developers are still learning the best ways to use the 9.5-inch touch screen. As we began designing the UI for Ideate, we quickly found that it was difficult to predict how a user would interact with the device. We asked ourselves a number of questions: How far can the users thumbs stretch over the black bevel? Is it comfortable to hold in one hand and draw with the other? How big is the screen really?

To address these concerns, I went into my garage and cut a piece of poplar to the dimensions of the iPad, sanded the back down to a comfortable bevel, and taped a mockup of the iPad onto it (see Figure 2).

Figure 2

The end result was a physical prototype we could hold in our hands. The top side of the prototype was left open so different sheets of paper could be inserted into it. We were able to use this prototype to get a better sense of the working area and the dimensions of the device. The poplar board is much lighter than the real iPad, however, so we couldn't test the weight.

Using our prototype, we designed an interface that was natural while holding the iPad in the left hand and manipulating the user interface primarily with the right hand. The left hand thumb can read the tool tray and quickly change the active tool while the right hand is sketching. We also quickly realized that the tool tray needs to dock on the left or the right. Using this prototype helped us make good decisions before we were able to hold the device for ourselves.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video