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

Developing a rapid prototype


Sketching up an application design is a critical step in designing an exceptional user experience, but it doesn't quite compare to actually using our fingers to interact with our interface on a real iOS device.

No matter how well we sketch up our interface, we may come upon a problem wherein a certain aspect of our design doesn't really work well once it's implemented on an iOS device. Sometimes, these design problems are minor and altering our interface to fix the problem isn't a big deal. But there is also the real possibility that a design mistake can be a showstopper, requiring hours of new design work and programming for something that could have been easily solved before development began.

Getting ready

When preparing to put together a rapid prototype, we should first consult with our programmer. There are several different ways to go about developing a rapid prototype, with each having different pros and cons.

Arguably the best way to create a rapid prototype is to literally develop the shell of the application using Apple's suite of development tools for Macintosh and iPhone applications, XCode. This will allow the app to run natively on our test device and also create code that can be used in the final application.

However, there may be situations where developing a rapid prototype in XCode would actually be extremely time intensive and not worth the effort. In these scenarios, there are several other ways to build a simple rapid prototype, which we will discuss in this recipe.

How to do it...

Rapid prototypes can be an exceptional asset to the standard development cycle, allowing us to gain an idea of how our application will work before we spend a good deal of costly time on development. Here are the steps that will help us prepare a rapid prototype:

  1. 1. Much like we did in the previous recipe, we should begin by constructing a wireframe of our application.

    This will help us to get an idea as to how our application will flow and what screens will be required for our work.

  2. 2. Next, we should go about sketching out each of our intended screens so that we have an expected design for our rapid prototype.

    We don't need to add an exceptional amount of polish or have our design be 100 percent completed, but it will be useful to have an idea as to what we're planning for the application to look like.

  3. 3. After we have a wire frame to visualize application flow, we should go about determining how to build the prototype application with the least amount of content possible.

    For example, if we're building a dictionary application, what would be the fewest number of entries we need in order to make sure that our design and concept works? As a rule of thumb, we should have enough substance in our prototype to not have doubts about the success of any feature in the application.

  4. 4. With our prototype planned, we should go forward with programming our basic application in whatever format that works the best.

    If we have the time, it's often best to produce an actual app in XCode for our rapid prototype, as this will give us a significant code base to start with when we begin work on the final application. However, this method is often time consuming and costly, so we may decide to go by another route.

    Note

    Several iOS applications have been produced to aid in the development of rapid prototypes. The best example of an iOS native prototyping tool is the simple Prototypes app for Mac by Duncan Wilcox, which can be found on the Mac App Store. Prototypes relies upon its own basic programming language in order to connect different pages of our prototype together, but is a powerful tool for the development of quick prototypes that will run on a real iOS device without requiring XCode.

    • As seen below, With Prototypes, mock screenshots are given simple properties that are used to contain different attributes of our rapid prototype:

    Prototypes - © iridescent.co

  5. 5. If we are looking to avoid XCode and Prototypes, we can design our prototype in basic HTML instead.

    Several open source HTML and JavaScript frameworks exist for web developers looking to build a mobile friendly website and these tools can be used for prototyping an application as well.

Note

jQTouch, found online at http://jqtouch.com/, is a great jQuery plugin that allows for rapid prototyping of web apps that can be used to test the flow of our application before we go about building our native app.

With a prototype built, we can go about testing our interface ideas for usability and simplicity. It's much easier to alter spacing and button layout on a prototype than it is in a final application and now is the time to verify that our design ideas will make sense when translated onto a physical iOS device.

How it works...

iOS designers are at a bit of a disadvantage with prototyping when compared to traditional web developers or even desktop application developers.

Interface interaction with a mouse and keyboard has been commonplace for 30 years and most designers have grown to understand basic interface concepts that either work well or fail miserably. In contrast, touch-based interface development is still in its infancy and has really only been prevalent since the launch of the iPhone in 2007.

It's still possible for iOS designers to overcome this competitive disadvantage and develop a great touch-centric interface; it just requires a bit more work. If we start each project with a quick, rapid prototype, we'll help guarantee that we're not sent back to the drawing board late in development because of failed design work.

See also

  • Getting your application onto a real device in this chapter