The shape of interfaces to come

Written by Duncan Wilcox
on February 4, 2010

Real apps

I am curious about how “real apps” will work on the iPad, how an application that is more than a utility or casual/light use exposes functionality in a touch-optimized user interface.

The only available information is what Apple has shown at the iPad announcement on January 27th. We will surely discover more soon, but I wanted to get a head start and, well, couldn’t help watching the keynote a few times and grab all available footage from the post-keynote hands-on.

I assume you have probably seen the section of the keynote where iWork is shown, if not you can catch up by watching just that part, extracted and cut by Luke Wroblewski. Fraser Speirs also discusses the screenshots of iWork apps as seen in the keynote in his article iPad Fallacy #1: “It’s not for content creation”.

Many of the interactions are pretty obvious on the surface, but on a second (or third) look reveal the non obvious or the unexpected. So here’s a quick rundown of what I have found, mainly in the iPad version of Keynote, Pages and Numbers.

A lot of the UI and interaction that wasn’t shown on stage is visible in the hands-on videos. It is interesting and sometimes hilarious seeing the Apple representative stumble into features and expose the difficulties as he or she learns the UI, sometimes even failing to discover the proper gesture — notably how to exit a Keynote presentation in the endgadget hands-on video.

Many thanks to engadget, gizmodo and gdgt for their pictures of the keynote and Slashgear for their detailed hands-on video.

Controls

A slight indentation of the slides in the outline on the left in Keynote could seem just a visual representation of hierarchy, it actually is a fully functional outline with collapsible sections, note the disclosure triangle.

Sidebar Hierarchy
Outline hierarchy
Sidebar Collapse sequence
Collapse sequence after the disclosure triangle has been pressed

In two instances in Keynote popovers and UI persist in-context (next to content) only when in a mode explicitly entered and exited by the user, which seems like a reasonable rule to follow.

Transition build popovers
Transition build popovers
Image masking
Image masking in-context controls

Interaction issues

There are inconsistencies in how UI modes are entered in Keynote. Slide reordering mode is entered by tapping and holding a slide in the outline, transition setup is entered tapping the corresponding menu icon, image resize mode is entered double tapping an image.

Pictures, charts and shapes can’t be dragged out of the “insert object” popover, so in Keynote the new items are just lumped on the slide. The inability to drag is inconsistent with press-and-drag to reorder slides on the sidebar and while we don’t know what pressing and holding does, I’ll guess that since a single tap inserts the image, pressing and holding has no effect. The reason for the non functional drag and drop might also be related to the modality of popovers.

Failure to drag
Attempt to drag an image to the slide fails

Reordering columns in Numbers doesn’t appear hard to perform, but I feel like it’s nearly impossible to discover that you have to tap exactly on the column header to select it, then tap and hold to drag it.

Dragging columns
Dragging columns in Numbers

I haven’t found any footage of pictures or charts being deleted (or slides for that matter), nor any UI that could be thought to perform deletion, and the Apple representative in the Slashgear video solves it by repeatedly pressing the (prominent) undo button. This could either mean it hasn’t been implemented, or the delete gesture isn’t all that obvious.

Undo
Reaching for the visible Undo button

Multitouch is one thing, multihand a whole other, it doesn’t look at all comfortable and Phil Schiller actually had to put the iPad down when moving multiple slides and when matching image sizes in Keynote.

Multihand multitouch
Multihand multitouch. Ouch!

Complete?

The inspector icon always shows the proper inspector for the selected object, in this case text. Aside from the questionable, arguably not-keynote-ready design, the text inspectors scream incomplete! There are text styles, but where is the text style editor? Where’s a font picker? How about a color picker? These are UI elements we take for granted on a desktop, and they are necessary for content creation. Clearly they’re coming soon.

Text style
Text style popover
Text layout
Text layout popover

Finds

Here are screenshots of things I haven’t seen elsewhere.

Pressing the bottom left + opens the “Tap to insert a new slide” popover, tapping on one of the theme-preset slides animates it to the center of the screen.

Adding a slide
The new slide popover

Even though the popover arrow points to the left, the tools menu appeared after pressing the wrench icon. I didn’t expect to see “Find” or “Help” in here. The last two items are “Slide numbers” and “Check spelling”.

The Tools menu
The Tools menu

The shapes pane of the “insert object” popover.

Shapes
Shapes pane

Here Keynote had just been reopened after a crash, evidently unable to save a preview of the document.

After a crash
Keynote document browser after a crash

Content creation?

In conclusion, is the iPad going to be a good platform for productivity apps, apps that go beyond content consumption? For the time being I will have to answer with a conditional yes, despite Phil Schiller insisting that you can do “really advanced” things “with just a finger”. I feel like Apple is stil figuring out the UI and iWork will likely be a little different when it ships.

The overarching problem seems to be that finding a place for UI elements and finding a way to interact with them is a new science and needs new conventions. Additionally gestures aren’t always easily discovered even when they are consistent across apps, but the lack of conventions leads to non-uniformity which makes it even harder. The best bet here is following iWork’s behavior as much as possible.

I will say that the iPad is going to be good enough for “casual content creation” at the very least. Given time and research and experimentation with touch UIs, it definitely feels like it has the potential of eventually replacing desktop UIs for many tasks.

Comments

  1. Excellent stuff, Duncan.

    Comment by Sebastiaan — February 4, 2010 @ 4:43 pm

  2. “I will say that the iPad is going to be good enough for “casual content creation” at the very least.”

    And that is all that it needs to do. The ONLY reason I currently use a laptop is for Keynote presentations. I develop them on my desktop and then transfer for client presentations.

    Occasionally, I will need to make minor revisions after transferring. Edit some text, tweak an image position. nothing more.

    I am totally psyched about getting an iPad. There is one UI concern I have, though: remote control. Without an IR receiver, the current Apple remote will not work. I guess the market will fill this space with some cool Bluetooth/laser pointer combo.

    Comment by Michael Wojcik — February 5, 2010 @ 2:57 pm

Feed for comments on this post.
TrackBack URL

New comment

About the Author

Hi, I’m Duncan Wilcox, I’m a software developer and chocolate addict, living in Florence, Italy. I’m passionate about the Mac, photography and user interaction, among other things. Contact me at duncan@wilcox.it or follow me on Twitter