Interaction Design for an iPad App

Post 2 of 5
Interaction Design for an iPad App

ShopAutoWeek is an interactive car buying tool, with expert reviews, local inventory and dealers, comparison tool, hundreds of vehicles, galleries and specs, including a Notebook to save vehicles and comparisons.

App Reviews

When approaching the application design, it was important to focus on what would make the app useful.
I asked things like..

So what will be unique about the iPad App vs. pulling up the existing website in iPad’s browser?

They both offer the same type of features, they accomplish the same sort of tasks, what if we were to really optimize the website for tablet, perhaps a responsive design approach, would we be covered?

Well not quite. We have a few things going for us by nature of an app interface vs. the browser.

  • No internet connectivity required. Perhaps one of the more interesting features, or business requirements we were asked to design for, was the ability to use the app offline with no internet connection. Design Challenge #1. Add a bit of progressive enhancement philosophy, we designed for the ideal offline state, enhanced it for the online state where online functionality would surface such as search inventory by your present location. Furthermore, being hybrid means we could still leverage a CMS to deliver up to date content, but once it’s downloaded, much of it is available for offline viewing later
  • Touch GUI. There was never a worry about this particular workspace living on any other device, including a desktop browser, that means the mouse was not a consideration, that means 100% focused on Touch Standards
  • Rich Application. A more rich interactive canvass is available to the design team,  since there are not browser constraints or cross platform issues, we could focus entirely on the Apple HIG standards for iOS user experience, and deliver a rich experience leveraging 100% native technology
  • Task Based vs. Content Based. One of the key factors and differentiators of the iPad App, or any mobile app for that matter is it’s purpose. An app should be focused more on user’s task, not so much a need to  balance a lot of content, common among desktop websites.

Accelerated Approach

To complicate matters, we had these following constraints.

  • Very fast timeline to go end to end, design to test, to app store
  • Somewhat vague requirements
There would not be much time to do a lot of research and planning. Furthermore any user testing would be very limited to both time and budget.

So I chose a limited User Centered Design process (UCD).

  1. Competitive Assessment
  2. Wireframe Prototype
  3. Quick user testing to validate designs

Wireframe Prototype

Axure Link:

Perhaps the most important deliverable for the requirements planning, UX and technical scoping was the clickable wireframe prototype.

These shots were taken from a clickable prototype I produced using Axure.

A clickable prototype is especially important in App development, not limited to the following reaons:

  • Harder to change.
    Once you have your App UI developed, it’s much more difficult to make changes, unlike browser based website pages that can be changed much easier. Better to really lock in your design with precise wireframes ahead of Creative Comping, ahead of development.
  • Work out the Details!
    In application design there are many more layered elements, more interaction behaviors are afforded, and it can be really difficult and cumbersome to document all the interaction steps in a rich app environment. Better to show off the interactivity: even including native behaviors like swipes and taps in an iPad itself.  This way any documentation can focus on requirements and important aspects that need to be communicated to the design and development team.
  • Clients Loved the Approach.
    Our first show-n-tell to the client was indeed the clickable wireframe on the large screen. Much of it is self explanatory when you can click through it. This accelerated the user validation, and client approval process.
  • Smooth Project Workflow.
    After the pre-approval stage,  moving into Creative comp process only enhanced the design. There was not much “working out” as far as the interaction or flow, nor changing the UI layouts during high fidelity comp review cycles. This enabled our Creative Director to focus on adding in layers of new ideas to enhance the existing design, making things look spectacular, Rocking it Out! Afterall isn’t that what good CDs and ADs do?
  • User Testing.
    Remember it’s OK, and actually it’s best practice to test wireframes: “Test Early, Test Often” the golden rule in user centered design. It’s true user’s grasp less than a well executed Creative Comp or Live UI, but comps take time, and especially in the case of interaction design for an app, you want to test out those areas of functionality that may be relatively new, no patterns exist!  So better test those wireframes, but better yet, test them with Clicks!

Easy to demonstrate interactive elements, better more rich presentation to the client prior to Creative comps.

Messaging is ultra-important in an app, but you don’t have to reinvent the wheel. I studied the standards docs, but also A LOT of iPad apps, from to CarBuzz, to games weighing out the good, the bad and the ugly. Getting a firm grasp of iPad’s native messaging and alerts allowed me to integrate standards based contexts and prompts into the app, as well as create better, more user friendly messaging.

Leveraging iPad’s native location services enabled us to deliver a rich meaningful experience a tap away, user’s click Dealer Inventory button from any model in the database and instantly shown relevant inventory (ON Dealer Lots) nearest the end user, allowing the same user to change the zip code, or update based on an updated location.

Example. Here is a screen of a heat map from a click test study from the Shop Auto Week website redesign. Users are presented with a series of wireframe screens, then assigned tasks, the system automatically records mouse movements, time on screen, task completion times and rates etc. This enabled the design team to validate some of the critical areas of the app, making necessary changes early in the process.


Remember, Don’t Reinvent the Wheel

Mostly I followed the patterns and UI elements in the iPad control library, and this was relatively easy to do using some iOS widget libraries from Axure, however I got caught a couple of times reinventing the wheel with different ideas, while they may have been rather creative, they were not necessarily best to follow thru with. Early prototyping allowed the development team to evaluate the UI from a best practices point of view and offer alternative (easier to develop) solutions. As a team we wanted to insure standards were being met not only to get a good user experience but to make sure we had a smooth process during Apple’s certification process heading into the App Store.

Bottom line is that the development team did not have to spend a lot of time developing new controls that were already native to the iPad such as a popular layout control called “UISplitViewController”,  and besides we avoided the risk of developing new things that potentially would not pass Apple’s UI consideration to get into the store, or disrupt a user’s familiar experience from other apps that use the same standard elements.

This article was written by millerux