The App Business Blog

A long weekend is a good time to catch up on some reading of articles queued up in Instapaper. Here are several design related items that I found interesting.

Copycats

A well argued essay on why it’s so difficult to innovate and create great design. And why it’s so important to break through those barriers to be successful.

360iDev: Lessons from the design of Postage

Postage is a beautiful app for the iPhone. It is also very functional. I think the latter comes from Chris Parrish’s philosophy of “putting the user on rails”. Figure out what the main goal for a user of your app is, and make sure that goal can be accomplished as quickly and easily as possible. Great advice!

Apple, Kindly Remove Your OS Gestures from My App Canvas

I agree with Josh Clark that Apple blew it with these new “system” gestures in iOS 5. It would have been much better if these gestures started off the edge of the screen to give the user the clear indication that this gesture is something that is going to have an affect outside the context of the app that currently fills the screen. The gesture for showing the Notification Center does this, for example.

I think I know why Apple made this decision: to use the same gestures in Lion. In a windowed environment like OS X for the Mac, the context of the screen does not have the same meaning. So starting a gesture outside the screen does not make as much sense. And also, beginning a gesture with your fingers outside the physical area of a Magic Trackpad is awkward.

In my opinion, Apple made the wrong trade-off in this case, resulting in a worse user experience for iOS.

Exclusive: Matias Duarte on the philosophy of Android, and an in-depth look at Ice Cream Sandwich

This is a rather long article, but I’m not sure what it really says about the design philosophy of Android, if anything. My takeaway is that Matias Duarte is a very good and thoughtful designer who has strong opinions about design. I think this is good for Android. I think good design should convey and evoke opinions; an object should have a design personality.

Touchscreens have no hand

Information design legend Edward Tufte comments that touch screens are dead flat and have no texture. Maybe this is the reason for Apple’s recent fascination with skeuomorphism. (A simpler explanation is that the “more texture” decree came from the top.) In any case, I hope that Apple already has touch screens in their lab with haptic feedback so that we soon can feel real texture in our apps.

A Brief Rant on the Future of Interaction Design

Microsoft’s productivity future vision video made the rounds a while ago and was widely criticized for showing something that was not real, could never be made into a real product, and had many inconsistencies in the user interactions. While that may all be true, I think Bret Victor’s critique that is doesn’t go far enough is more spot on. His essay about our hands and how truly useful they could be in a future user interface is truly inspiring.

Dilbert November 27

Finally, I can’t help but to link to yesterday’s Dilbert strip. I think this is how we all feel about smartphone interface design at times.

written by Nick

The iPad UI Element Guidelines section of the iPad’s Human Interface Guideline forbids displaying more than one popover element at a time. Like this:

Since there’s no explicit support in UIKit for avoiding this, I thought I’d show one way to remain in compliance with the HIG.

In the app depicted above, the left popover is the standard list component (left side) of a split view controller. It is shown in portrait mode when you tap the Bookmarks button. The popover on the right is an alert sheet that appears when you tap the action button.

The left popover is retained in the property self.popoverController, per Apple’s split view controller template. For the right popover I store the action sheet in the actionButtonActionSheet attribute.

When the action button is tapped this code is called:

- (IBAction)actionButtonSelected:(id)sender {
  // Dismiss other popovers, if visible
  if ([self.popoverController isPopoverVisible]) {
    [self.popoverController dismissPopoverAnimated:YES];
  }
	
  actionButtonActionSheet = [[UIActionSheet alloc] initWithTitle:nil 
                                                        delegate:self 
                                               cancelButtonTitle:nil 
                                          destructiveButtonTitle:nil 
                                               otherButtonTitles:NSLocalizedString(@"button.add.bookmark", @""),
                                                                 NSLocalizedString(@"button.open.safari", @""),
                                                                 NSLocalizedString(@"button.mail.bookmark", @""),
                                                                 NSLocalizedString(@"button.share.facebook", @""),
                                                                 NSLocalizedString(@"button.share.twitter", @""), nil];
  [actionButtonActionSheet showFromBarButtonItem:sender animated:YES];
  [actionButtonActionSheet release];
}

The important part for this discussion is the first couple of lines that dismiss the other popover if it’s visible.

For the opposite case when the Bookmarks button is tapped, you need to override the willPresentViewController method:

- (void)splitViewController:(UISplitViewController *)svc popoverController:(UIPopoverController *)pc willPresentViewController:(UIViewController *)aViewController {
  // Dismiss other popovers, if visible
  if (actionButtonActionSheet.visible) {
    [actionButtonActionSheet dismissWithClickedButtonIndex:-1 animated:YES];
  }
}

If your app has more than two buttons that launch popovers, then you should extract the code that dismisses other popovers into one method that you can call from all button action methods.

written by Nick \\ tags: iPad, UIActionSheet, UIPopoverController, UISplitViewController

Now that you have had a chance to experience the iPad for a weekend it’s easier to understand why Apple has been so anxious to get this new device into people’s hands. I think the touch interface on the iPad is a leap similar to when we went from text based interfaces to a GUI. Never before have you been interacting so directly with an application or with data. With the traditional mouse + mouse pointer GUI there’s a significant level of indirection: drag a puck around on your desk and something moves in a similar pattern on the screen in front of your face. If you’ve watched a person learning to use a mouse for the first time you know what I mean. Not to mention the whole mess of single-click vs. double-click and left mouse button vs. right mouse button.

Where the iPhone touch interface felt more like a solution to the problem of cramming in many buttons on a small device, the iPad seems like the device for which the touch interface was really designed. (Maybe there is something to the theories that the tablet form factor was designed first and then shrunk down to the phone size.)

Interacting with the iPad is a very immersive experience. Understanding this will be key to creating successful iPad apps.

Here are some of the initial iPad apps that I’ve enjoyed, along with the UI design lessons that I learned from each.

iBooks

This is of course one of Apple’s showcase apps. You probably remember the “oohs and aahs” from the audience when Steve Jobs showed the page turn animation. In reality I find that animation to be irritating to watch each time I turn the page of a long book. Something that looks great on stage once or twice may not work as well when repeated 200 times. In your own apps having eye candy like this is great as a wow factor and gives your customers something to show off to their friends. But I would make it a setting so that it can be turned off for more concentrated and low key reading.

I wish Apple would have spent more time on making the book layouts more visually appealing. Paragraphs that have a large initial letter (often the case at the beginning of chapters) get an extra large line spacing between the first and second line. All lines are full justified, which looks great from a distance (i.e. on stage) but gets annoying when you’re actually reading the book and some of the words have very large spaces between them. You can switch between portrait and landscape mode, but when you do this the book is laid out for a different page size with the result that the page you were reading in portrait mode is not the page you’ll see in landscape mode. (A similar re-layout happens when you change the font of the book.)

I have not tried a Kindle device, so I don’t know if that reading experience is any better. But the Kindle iPad app has some of the same quirks as iBooks.

Lesson for developers: Obsess over the details. Especially those that your customers will experience every day with your app.

Mail

Apple’s Mail app is of course nicely done. One thing I don’t like is the large number of taps (4) required to navigate from one inbox to another inbox. Using a UISplitViewController to migrate an app from the iPhone to the iPad is a relatively quick solution, and kudos to Apple for providing this. But after you’ve done your quick iPad conversion, then take a step back and look at the overall navigation of your app. Are there ways you can make better use of the larger iPad screen? Do you have excessive navigation within a SplitViewController? How many taps does it take to navigate from one section of your app to another?

New York Times – Editor’s Choice

The NYT have gone for a traditional newspaper look for their app. I think design this makes sense for a traditional newspaper that is fighting to keep their print edition alive. At the same time it makes good use of the functionality of an electronic device in quickly linking from an intro to the full article, and the ability to show slideshows of photos and videos.

UI design lesson: It’s often a good idea to model your user interface after something in the real-world that is already familiar to your potential customers. Still, I’m curious to see what apps will come out in the future from organizations that are not encumbered by a tradition in paper media.

Zinio

Zinio is a magazine reader app. It’s a universal app that works on both the iPad and on the iPhone. It’s actually one of my favorite iPad apps so far, but I’m biased on this one because I was part of the team that developed the app. Given the limitations that Zinio has in that their product is in large part based on actual paper magazines, I think the app does a good job of replicating that experience on the larger iPad screen.

I’m too close to this app to give any developer lessons or advice. Please check out the app and let me know what you think in the comments.

Epicurios

Is the iPad finally the computer that will replace your recipe books in your kitchen? I gave the Epicurios app a thorough test with Easter dinner. The app has a very intuitive user interface, which pretty much follows the standard iPad productivity app layout. It’s uncluttered and has large text that you can read at a distance. As you’re cooking there’s a little orange marker arrow that you move along so you know where you are in the recipe. Unfortunately the touch screen doesn’t mix very well with maple syrup and melted chocolate…

Games

I’m not a gamer, but I enjoy a few casual games that are easy to learn and provide quick entertainment for short bursts of time. Two games that really shine on the iPad are Harbor Master and Labyrinth. What struck me about these games is that it’s actually fun to watch someone else play. With the iPhone the screen is so small that it’s difficult for anyone but the player to see what’s happening. But with the iPad you can place the device on a table between you and you can both enjoy the game. I think this will be huge.

I also like how apps like Scrabble are making creative use of multiple devices. If you have an iPhone or iPod Touch you can view your rack of letters on your personal device, away from prying eyes. At least initially, there’s going to be a huge overlap between iPad and iPhone/iPod Touch owners.

Multitasking

Several iPad reviewers have of course lamented the lack or multitasking for third party apps. I think the lack thereof is a great feature. If you’re going to have an immersive experience you need to be focused on a single task.

There are several valid use cases for running a third party app in the background on a mobile device like the iPhone (i.e. tracking your current location) that probably don’t apply to a less mobile device like the iPad. There are other use cases that I think are better solved by “multi-devicing”. You want to listen to Pandora music while you’re working on your iPad – launch Pandora on your iPhone that’s in your pocket anyway. Want to keep an eye on your Twitter stream? The iPhone is fully capable of displaying 140 character messages and replying in kind. Etc.

Future

How will the iPad be used? What is the killer app? I think it’s way too early to predict how a device like the iPad will be used. Especially if you have not used one for an extended period of time.

I would encourage you to really use the iPad as a consumer would use it. Take off your developer hat for the moment. Don’t think about how you can best transfer your existing iPhone apps to the iPad. Do you find yourself lugging around your iPad everywhere you go just to check email or perform some other task? Or is the iPad mostly stationary, laying on the coffee table? What tasks do you prefer to do on the iPad vs. your iPhone or laptop? I think truly understanding these use cases will be key to developing apps that work great on the iPad.

written by Nick \\ tags: iPad