The Pros:

• The overall app design is simple (this is also a con for a couple of areas as noted below.)
• Signing up is super fast & easy.
• Once you’ve opened  your tab, transactions are snappy—just say your name & you’re done!
• The possibilities for future Pay with Square features are endless.  For example, knowing precisely what I ordered in a restaurant could provide interesting insights and recommendations not just for me but for other users as well (assuming it’s kept anonymous.)

The Cons

• At present, very few merchants are using the technology, though this will most likely change over time.
• The emphasis on the directory makes the app feel like it was designed mostly with Square merchants in mind, not customers. To find my stores I must search or switch to the cards view.  This aspect of the user experience make it less palatable than using my credit card which requires no searching for businesses or opening of tabs.
• The simplicity of some areas of the app means they’re unlikely to scale well over time (directory and cards.)

Getting started
After downloading the app from the App Store (version 2.2.1), I moved it to the front page of my iPhone, optimistic that I’d access the app frequently.  Next, I tapped on the Square icon and viewed the welcome screen below.  Uncertain if I had already created a Square account—I ordered a card reader back in 2010—I tapped on “Get Started.”

Welcome screen: There are 3 tag lines that the screen circulates through.

After tapping “Get Started,” the app displayed a screen with information on the $10 offer for new users.  Tapping “Next” meant I was accepting the offer and the Square User Agreement.  At the time, I tapped on “Next” without thinking twice about the User Agreement but in retrospect the app could’ve been more clear about how to view the agreement.  The bold text may have linked to these agreements but it did not appear active.

$10 Offer and User Agreement Info

Once I agreed to the terms, the app walked me through the four main steps for setting up an account: 1) Create Profile, 2) Create Account, 3) Share Location, 4) Link Credit Card.  The overall process was streamlined and easy to complete.  In particular, the credit card entry was pretty nifty, flipping the credit card and highlighting where users could find their CVV number.

The app lets users skip the “Link your Card” step, a smart move to attract individuals who may be hesitant to share this sensitive information at first.  Additionally, it’d be useful to embed (or link to) security information.  Given that Pay with Square is a new concept and service, users may have reservations when asked to provide their credit card number.

Get Started Screens

(Note: partway through the signup process I learned that I did in fact have a Square account so I had to exit the “Get Started” flow and sign in.  Since I forgot my password I was sent through the “forgot your password” path.  Aside from getting booted to the browser for the reset, the process was fairly painless.)

Finding places to use app
Armed with my Square-powered phone, I was excited about the possibility of leaving my wallet at home.  Although I was optimistic, I wasn’t ready to abandon my Visa card quite yet (or my license, or my health insurance.)  Perusing the directory of businesses that presumably work with Pay with Square (see image below), I noticed that my hair salon was listed.  Since I had an appointment later that afternoon, it seemed like a fine time to give the app a whirl.

As you’ll see in the image below, the directory has a featured store at the top, followed by a hodge podge of nearby businesses.  I’m using the term “hodge podge” since there are tons of places that I’d never use (glass tinting!) plus the sort order seems arbitrary (some closer places are sorted below farther ones.) I’ve been racking my brain and can’t quite figure out why some businesses have foods/items listed while others have an address.  Some guesses: most popular item bought via Square?  Last item bought via Square?  The first guess has promise only if Square is widely used.

Directory Screen

Learning about stores
If you come across a business and want to learn more, users can tap on its row in the directory to view details.  As shown in the screen below, the business screen that follows contains the following: 1) business name & logo with background photo, 2) “Save to your cards” button, 3) thumbnail map image with business blurb and address, 4) ability to open tab, if business nearby, 5) latest Tweet with ability to view more, 6) # of items for sale with ability to view all, 7) ability to “Auto-open tab when near,” 8) distance from current location, 9) sharing options.  Much of this info is relatively standard except for the # items for sale.  Square can do some potentially interesting things with such rich information tied into actual sales.

Store Screen: There are additional “child” screens with more information & Tweets.

Saving your favorites
Businesses that you’d like easy access to can be saved to a “Cards” section of the app.  Moving forward, I suspect users may want this to be the default screen instead of the directory but it’s too soon to tell.  For now, I decided to add my salon to my cards so I could quickly find it when I was there later that day. As you can see in the image below, one card takes up a large amount of real estate and the info presented isn’t very useful.  Perhaps the information evolves over time as users engage with businesses, including coupons and other perks for loyal customers?  Regardless, assuming users end up with at least a dozen cards, the overall design of this screen will need to be rethought.

Your Cards Screen

Paying for transactions
And now for the moment we’ve all been waiting for—actually using the app!  I’ve paid with Square at my salon numerous times so I expected it to be cake that day.  After getting my haircut I walked up to the receptionist and asked if I could use Square to pay for my cut.  “Sure!” she said cheerfully, as she scanned the app for a way to help me out.  In the meantime, I pulled up the salon’s card and opened my tab.  After a few minutes of her nervously opening and closing screens, she apologized and said that the manager probably hadn’t updated the app and that she had only used it for credit card swiping.  Sigh. I took out my credit card and used that instead.  A short time later, I received a text message that my tab with the salon had expired.

Well, my first attempt didn’t work but I was still hopeful.  Over the next three days, I tried to exclusively use the app for all of my purchases.  Most of the places I regularly visit—Whole Foods on 24th, Walgreens at 23rd, Ritual on Valencia, Philz on 24th—weren’t listed in the app.  I realized I had to change my strategy if I wanted to test out Pay with Square so I focused on the directory and chose Mission Minis.  With my iPhone in hand, I headed over to the shop, glancing at the app along the way.  When I was close enough (about a half block away) the app gave me the option to open my tab which I did.

Alas, I arrive at the shop and it was closed!  Now here’s a feature request: if the store is closed, please tell me and do not let me open a tab!   After all of this frustration, you’d expect me to go home and call it quits, right?  Nope, I was determined to use this app, darn it.  I opened the directory again and found a juice bar I had recently noticed near my parking garage and opened a tab.

Walking into the shop was a surprising delight.  The shopkeeper was very friendly and assured me that he could accept payment via Pay with Square.  In fact, I could see my photo and name on his iPad sitting on the counter.  After I selected my drink, he confirmed my name and processed my order.  As his assistant made my juice we talked a little bit about his experience with the app and how many people have paid via Square.  All in all he had nothing but great things to say.  He has used Square since opening his shop on June 1^st.  After he processed my payment, I received a text alert, as shown below.  Soon after, he handed me a cup of freshly made juice—delicious!

Purchase Confirmation within the App

Purchase Confirmation via Text

Tracking expenses
Since I didn’t add the juice bar as a card, I wasn’t completely sure how to view the payment.  My first thought was to see if a card was automatically created for this merchant but one was not.  Next, I went to my account screen and tapped on “All Expenses. ” Interestingly enough, I discovered dozens of past payments I’d made with Square.  Although I understand the desire to integrate their products, I imagine this section getting very unwieldy over time.  Like the Cards section, I can envision this area undergoing many redesigns in the future, incorporating search, tagging, and other mechanisms to help users manage and view their expenses.

Receipt for Purchase within Purchases section

Want to learn more?
Pay with Square is just the beginning of the mobile payments revolution.  If you’d like to learn more, here are some great articles on the topic.

Pay by Voice? So Long, Wallet (NY Times)
http://www.nytimes.com/2012/07/19/technology/personaltech/as-pay-by-phone-advances-square-takes-another-leap-state-of-the-art.html?_r=1

The Death of Cash (Fortune)
http://tech.fortune.cnn.com/tag/square/

Paying With Square’s New Mobile-Payments App (All Things D)
http://allthingsd.com/20120430/paying-with-squares-new-mobile-payments-app/

Square to launch revamped payments app, Android support (GigaOm)
http://gigaom.com/2012/03/25/square-looks-beyond-credit-card-reader-with-relaunched-payment-app/

1. Driftwood

The designer made this stand in New Jersey with driftwood from the Oregon coast. You can read more about it in their blog. (Photo courtesy cdevroe)

2. Pencils

With six pencils and rubberstands anyone can create a stand like this one. Read the tutorial here. (Photo courtesy tobidope)

3. Cork

The designer fashioned this stand using two corks, some string, & a couple of screws left over from an IKEA product. The string keeps the iPad from sliding forward along the surface. (Photo courtesy etothez)

4. Wire Hanger

This stand was created with a bright blue wire hanger, inspired by this YouTube video. (Photo courtesy cai~cai~)

5. Cardboard

Two simple pieces of cardboard were used to make this stand. Inspired by the designer’s related project. (Photo courtesy natebeaty)

6. Chip Can

Slice a chip can in half, make an incision in the middle, and you can have an iPad stand! (Photo courtesy twitter_senyou)

7. Robot Toy

This robot’s arms and legs make the perfect stand. (Photo courtesy charmiebeez)

8. Superstructs

This stand was made from the classic children’s toy Stuperstructs. You can see the whole Flickr set here. (Photo courtesy willc2 )

Hanfree iPad stand: http://hanfree.co/

And then the iPad came along.  The form factor combined with the kitchen-friendly stands make it an excellent tool for the home chef.  To understand how the iPad could be an even better kitchen tool, I reviewed two popular iPad cooking applications: Epicurious 3.0 and BigOven 2.1.1.  Through this exercise, I learned what aspects of the user experience work well and what areas could use improvement.  The review covers three parts of the apps:

• Opening Experience
• Finding Recipes
• Viewing Recipes

Opening Experience
Both apps use photography on their opening screens but BigOven’s approach is more engaging.  Instead of showing the same stock image every time as done by Epicurious (Figure 1), BigOven cycles through colorful recipe photos overlaid with the recipe name, recipe author, and a “Make this tonight” call to action (Figure 2).  This approach has a similar feel to Flipboard which highlights one article image on their opening screen.  All Recipes, another cooking app, also uses photography but it shuffles through six images at a time.  The idea is strong conceptually but the implementation could be improved—images overlap awkwardly and the sliding animation feels gratuitous (Figure 3).

Figure 1: Epicurious Opening Screen

Figure 2: BigOven Opening Screen

Figure 3: All Recipes Opening Screen

Finding Recipes
BigOven takes traditional search a step further.  For instance, in addition to standard text and category-based queries they have a canned query called “What’s cooking around me” which displays recipes posted by nearby home chefs.  They also have more engaging titles that will undoubtedly speak to most users, e.g., “Use up Leftovers.” While these search options are appealing, there are some usability shortfalls.  For example, neighboring pop-over menus link to each other and revising queries requires two steps back (Figure 4).  Additionally, standard search features like sorting are not available.

Figure 4: BigOven Search Results

Epicurious’ search has slightly more traditional functionality but there are still some usability flaws. For one, why not call the “Control Panel” just “Recipes”?  Second, the different categories in the “Search” tab (e.g., Cuisine) don’t appear actionable and the options within these categories are not discoverable (Figure 5).  The latter issue could be easily addressed if they were to show icon edges for the far right and far left items.  Lastly, the sort options in results would be more effective above the results, sans tabs, since the current vertical treatment is less readable and suggests that the list will be filtered rather than sorted.

Figure 5: Epicurious Search Results

Viewing Recipes
BigOven has two different recipe views: “Overview” and “Prepare.”  “Overview” has all of the recipe information: introduction, photos, ratings, ingredients, serving and timing info, author info, and preparation info (Figure 6).  The “Prepare” view is more streamlined since it’s supposed to be used during the actual cooking process (Figure 7).  This view defaults to a larger type but has a control to change the type size if desired.  Both views include the far right button with sharing and metric conversion functionality.   To improve discoverability, the metric feature should be closer to the ingredients.  On a related note, it would be helpful if users could adjust the number of servings and have the app recalculate the ingredients accordingly.

Figure 6: BigOven “Overview” View

Figure 7: BigOven “Prepare” View

Epicurious offers one recipe view with large type for easy reading (Figure 8).  The ingredients are accessed via a pop-over which unfortunately conceals the instructions when used.  Additional recipe information—reviews, about, and nutritional info—is accessed via tabs along the bottom.  Given the limited amount of information in “About” and “Nutrition,” the tabs seem like overkill.  Moreover, the tab’s pop-up interaction makes it difficult to view the entire recipe.

Figure 8: Epicurious Recipe View

Theoretically, an alternate view for cooking makes sense but the one offered by BigOven isn’t different enough to warrant a separate tab.  On the other hand, All Recipes and Betty Crocker offer distinct experiences worthy of their own views.  In the Betty Crocker app, each screen includes one step written in large type and a preview of the subsequent step (Figure 9).   If there’s a duration associated with a step, the app will embed a timer within the recipe text.

Figure 9: Betty Crocker Recipe View

The Weber On the Grill app also has this timer functionality as well as embedded how-to videos and the ability to annotate parts of recipes (Figure 10).  Related enhancements that would add value to these apps include 1) the ability to share and find trends in annotations, and 2) the ability to tap and hold terms for definition and purchase related information, e.g., some users may wonder: “What is nam pla and where can I buy it?”

Figure 10: Weber Recipe View

Summary & Recommendations
Given that these are essentially first generation iPad apps, the Epicurious and BigOven designers and developers should be commended for their excellent work.  Starting out with little or no models to follow is an exciting, yet daunting, undertaking.  Those of us who will design and build future cooking related applications can benefit from their early work.  In particular, below are five recommendations for individuals who plan to create apps in this domain.

Entice users with photography. Starting out with form-heavy screens or stale stock photography is unlikely to draw users into your app.  Entice them with a range of mouth-watering photos that link to your recipes.

Keep search simple, yet powerful. Most home chefs will be pressed for time as they try to figure out what to make for dinner.  Forcing them to choose between a large number of search options may complicate their lives further.  This doesn’t mean you have to dumb down search; just make sure each option you offer truly enhances the experience.

Provide specialized cooking views, only if they add value. Making the text larger isn’t enough to justify a separate cooking view.  In that case, why not just add a font size control?  If you’re going to provide a specialized view, you need to go beyond the obvious and think like a cook.  If cooking is outside your expertise, take time to interview other cooks.

Let users access additional advice as needed. The iPad is a connected device.  If users need additional information about an ingredient or method, they should be able to access it from your app.  Look to e-books for elegant ways to access more information, yet not overload your designs with too many links or icons.

Leverage the cooking community. Recipe reviews and annotations tend to be visually separated from the actual recipe but they can offer a great deal of value.  Look for ways to integrate that kind of knowledge into recipes.  For inspiration, consider how Yelp highlights trends within their reviews.

If you want to see how the iPad is used in the kitchen, check out these Flickr photos:
Photo 1: Grandma using iPad while she does the dishes.
Photo 2: iPad hung with yarn on a kitchen cabinet knob.
Photo 3: iPad on traditional stand, resting on a stove top.

Good luck with your apps!

Today I contributed a story to Smashing Magazine titled, “Are Touchscreen Tablets Effective Design Tools?” Here’s an excerpt:

“What would really benefit designers is the digital equivalent of a sketchpad and pencil. Sure, Wacom tablets have been around for a long time, but they tie designers down to the laptop or desktop computer. Personally, one of my favorite things about sketching is being able to walk away from my desk. No email. No Twitter. No distractions.

When the iPad came out, it seemed like it would address designers’ sketching woes, but the early styluses and applications were disappointing. One year later, there are far more tools to choose from, but they still have a long way to go.

In this article, I’ll share my personal evaluation of touchscreen tablets as design tools, specifically for early UI sketches and storyboards. To help guide the evaluation, I created a few pen and paper sketches for comparison. Then, I tried to recreate these sketches using a sketching application and a variety of styluses. As you’ll see, the current devices, apps and styluses all have a number of weaknesses. If you’re like me, you may want to stick with your old notebook and pencil a while longer.”

Read the full article on Smashing Magazine

“When the iPad first came out, many industry pundits were quick to make comparisons: It’s a giant iPhone! It’s twice as heavy as the Kindle! It’s an inferior laptop! The first crop of iPad applications didn’t fare much better. Design gurus slammed them for not taking full advantage of the new medium. Usability experts slammed them for taking designs too far from established usability conventions. What did they expect? These early app designers had a handful of Apple-designed apps to draw inspiration from and a rough set of design guidelines. Moreover, they had only a few weeks to go from ideation to production…”

Read the full article on UX Mag

Gesture Affordances
User Education
Gesture Types
Gesture Feedback
Multi-Finger and Multi-Hand Considerations

Gesture Affordances
The gesture’s affordances—the elements that suggest what type of interaction is possible—will depend on the nature of the app and your design goals. Productivity apps tend to use standard GUI elements (e.g., buttons) to indicate where gestures can be used but not all apps are so explicit.  Apps based on real world concepts typically use visual metaphors to indicate a gesture’s affordances.  For example, the Drawing Pad app has a pencil drawer at the bottom that can open and close using the Drag gesture on the handle (see video below).  Affordances may also be communicated via an object’s physical characteristics, e.g., a spherical object may suggest that it can be rotated. Lastly, apps with more abstract qualities may use animation or other cues to highlight their affordances.  For example, when users first open the Convertbot app, the dial spins once to indicate that this type of interaction is possible.  Similarly, the top navigation on the USA Today iPhone app animates the first time, indicating that the Swipe gesture is possible.

Drag Gesture on Drawing iPad App

User Education
While its preferable to reveal gestures through affordances such as the ones described above, some apps may require additional user education (e.g., text, illustration, video) to indicate when and how certain gestures may be used.  For example, had I not seen the Apple video showing how to group discontinuous slides on Keynote, I doubt I would have discovered that multi-hand gesture.  Similarly, Pages includes the ability to resize an image to match another image using a multi-hand gesture (see video below).  Without surfacing that feature through user education, it seems highly unlikely that users would figure it out on their own.  One related strategy that holds promise is the ability to anticipate users’ goals based on their workflow and then provide contextual gesture guidance when relevant.  So if a user selects three Keynote slides and moves them to position 2 and then selects one more and moves it to position 2, that could be an opportunity to show the user the multi-touch shortcut.

See 1:25 for the multi-hand gesture on Keynote; see 2:00 for the one on Pages.

Gesture Types
Gestures can be discrete or continuous.  Discrete gestures are represented by x y coordinates that correspond to a particular point or area in the UI.  Common discrete gestures include Tap and Touch-and-Hold. Continuous gestures have some degree of motion, thus the x y coordinates change over the course of the interaction.  To illustrate the difference between these gestures, consider the Photos app on iOS. If the user touches the photo and immediately releases their finger, it’s a discrete Tap gesture which displays the top and bottom navigation.  However, if the user drags their finger across the screen, the x y coordinates continue to update, registering the gesture as a Swipe and revealing the next photo.   Both discrete and continuous gestures should be as forgiving as possible.  Notice how the Swipe gesture works at various angles within the Photos app as well as from left-to-right or right-to-left (see video below).  Additionally, the app tracks the speed of the swipe, enabling users to quickly skim through photos or look through them at a leisurely pace. You can learn more about discrete versus continuous gestures in the iOS developer documentation.

Swipe Gesture on iOS Photos App

Gesture Feedback
Gesture feedback typically requires no more than the desired outcome (e.g., the ball hits the bat.)  In some cases, however, you may want to incorporate gesture trails, which visualize the gesture’s progression.  Gesture trails can be helpful for complex tasks (e.g., selecting atoms in a chemistry app) but they can also be used for pure visual delight (e.g., Fruit Ninja‘s slicing gesture.)  You might also want to provide additional feedback if there’s a delay between gesture completion and the desired outcome.  For example, on e-Reader apps, the Curl transition is often displayed between the time a user swipes to turn a page and when the new page is shown.

Gesture trails are shown when selecting atoms in this app by Molecular Materials Informatics.

Fruit Ninja uses gesture trails for visual effect when slicing fruit.

Multi-Finger and Multi-Hand Considerations
Whether a gesture requires multiple fingers or multiple hands will largely depend on the task.  For example, the Pinch gesture must be done with at least two fingers and grouping a discontinuous set of items requires two hands.  Although the task should be your first consideration, the device’s context of use and ergonomics should also influence your design.  To illustrate, consider the iPhone and the iPad.  Since the iPhone is often used with one hand, it can be challenging for users to complete multi-finger gestures, let alone multi-hand ones.  In contrast, the iPad is often set down, freeing more fingers and hands.  Another important consideration is accessibility.  Users with certain hand or finger disabilities may not be able to complete multi-finger and multi-hand gestures.  If you want to ensure accessibility, you may want to provide a single-touch, or at minimum a two-finger multi-touch, alternative.

Additional Tips
Below are a few final tips excerpted from the references at the end of the article.

• Don’t overload your app with too many gestures since it will be difficult for users to remember them
• Don’t create overly complex gestures since it will be challenging for users to recreate them
• Evaluate your gestures as a set, considering the OS-supported gestures as well as all the app gestures
• Make sure gestures don’t cover important labels or other UI elements

Summary
Although multi-touch explorations date back to the late 1970’s the space is still relatively new and evolving each day.  Future versions of devices like the iPhone and iPad may look nothing like the ones today.  New sensors and other hardware may expand their multi-touch capabilities, enabling better detection of pressure, angle, and other properties that can enhance the user experience.   For now, I hope this post will shed some light on the current state of gesture design and help in your efforts to design great apps.

Design References

• Bill Buxton, Multi-touch Systems that I Have Known and Loved, http://www.billbuxton.com/multitouchOverview.html
• Dan Saffer, Tap is the New Click, http://www.slideshare.net/dansaffer/tap-is-the-new-click-2495091
• Kevin Arthur, Evaluating Touch Usability, http://www.slideshare.net/kevinarthur/d4-m-karthur-share
• Touch Gesture Reference Guide, http://www.lukew.com/ff/entry.asp?1071
• iOS Human Interface Guidelines, Apps Respond to Gestures not Clicks, http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/
  MobileHIG/Characteristics/Characteristics.html#//apple_ref/doc/uid/TP40006556-CH7-SW1

Technical References

• iOS Reference Library, Gesture Recognizers, http://developer.apple.com/library/ios/#documentation/EventHandling/Conceptual/Event
  HandlingiPhoneOS/GestureRecognizers/GestureRecognizers.html
• Android, Android.Gesture Developer Docs, http://developer.android.com/reference/android/gesture/package-summary.html
• Windows 7, Gesture Support, http://msdn.microsoft.com/en-us/library/ff967546(v=vs.92).aspx

Immersive experiences
If you’d like to create an application with an immersive or skeuomorphic design,  slapping  buttons all over the user interface will certainly undermine your goals. Apps that fall into this category may include games, books, musical instruments, and more.  Instead of standard GUI elements, these apps tend to combine gestures and interface metaphors (e.g., drag finger to turn virtual page).  This doesn’t mean these applications have to be entirely devoid of buttons.  For example, most e-reader applications will hide buttons when the user is in reading mode but liberally use them when the user wishes to change settings (Figure 1).  This strategy makes sense—imagine having to memorize gestures for all of the iBook or Kindle settings!

Figure 1: iBooks with tools shown

Emulating natural interactions
Certain applications can benefit from gestures that emulate natural interactions with the physical world.  Using gestures in this manner may encourage experimentation and may be easier to learn since users already have a mental model of the interactions.  For example, diagramming applications like Freeform allow users to rotate images using a two-finger gesture, just like a child would spin a small ball.  Again, this doesn’t mean the entire application has to be gesture-based, only the interactions where gestures enhance the user experience.  As you can see in the screen below, a large number of Freeform’s interactions still require buttons (Figure 2).

Figure 2: Freeform application

Streamlining complex interactions
Designers may choose gesture-based interactions if they are more efficient than the GUI alternative.  For example, reordering items with a GUI may require users to 1) enter numbers in form fields and 2) save the new order via a form submit button.  With a gesture-based interaction, the user can simply use their finger to drag-and-drop the items into the desired order; the feedback is immediate.  Not only is this interaction faster, but the task requires less cognitive effort.  Another example that streamlines app interactions is Yahoo! Sketch-a-Search (Figure 3).  Instead of tapping or pinching into the desired search area, users simply circle the area with their finger. In this case, one gesture (circle) is more efficient and precise than multiple gestures (taps or pinches.)

Figure 3: Yahoo! Sketch-a-Search

Shortcuts for frequent tasks
Frequent tasks may also be strong candidates for gesture-based interactions.  If the gesture-based interaction is even slightly faster, it may make the user feel more productive and efficient as they use your app.  Over time, the gesture may become second-nature, alleviating usability concerns related to gesture recall.  To illustrate, consider the iOS Mail application.  Users may delete messages from the message view but they can also swipe across a row to reveal the delete button (Figure 4).  The only downside with this particular implementation is the discoverability—from what I’ve observed, users tend to find this feature accidentally or hear about it from a friend.  Ideally, apps should educate users if important gestures are not immediately evident (game apps are an exception.)

Figure 4: iOS Mail List View

Leveraging familiar gesture patterns
If you’re not sure where to begin with gestures, start by leveraging the built-in gestures supported by your platform (see Gesture Reference Guide).  Since most users will have had sufficient exposure to the built-in gestures (e.g., swipe to view photos within a slideshow) they will often discover the intended interaction in absence of tips or tutorials.  On the other hand, if you don’t provide built-in gestures when users expect them, you might confuse users.  For example, iOS users are accustomed to using the Pinch Open/Close gesture within the Maps app.  If nothing happens when users try to pinch a map within your app, they may think your app is broken.

Summary
Take a look around the App Store and you’ll see that very few applications completely remove traditional GUI elements like the sturdy, old button.  Notable exceptions are games and creative applications with a limited set of tasks.  But for most genres, particularly productivity apps like email, GUI elements are still a necessity.  If every single interaction was entirely gesture-based it would be difficult for users to keep track of each gesture.  Lastly, keep in mind that it’s usually not one or the other.  More often than not, gestures will co-exist with standard GUI elements and other input methods such as voice.  It looks like buttons might be here to stay.

Thanks to Kevin Arthur @karthur for providing feedback on this article.

The iPad is one of the few mobile devices that’s shared among household members. This is surely the case in my home.  I often walk into my office to grab my iPad and discover an empty dock.  “Where’s my iPad?!?” I shout as I stomp towards the living room.  “You mean the Boggle board?” my housemate asks.  He calls it the Boggle board since Quordy is his favorite app to play on my iPad.  And what about me?  Well, my favorite thing to do on the iPad is read, mostly books but also newspapers and magazines.  Two apps that inspire me to read news on my iPad are Flipboard and Pulse.  I’m reviewing them in this article partly out of personal interest but also because they have interesting UI differences.  I’ll start by reviewing the six main parts of the apps: the new user experience, the home page, adding content, viewing sections, viewing articles, and transitions.  At the end of the article, I’ve included some best practices based on the review.

New User Experience
The two services have distinct new user experiences.  Flipboard users are greeted with a Ken Burns style slideshow drawn from their “contributors” along with strong branding and a big Flip button.  This approach makes for a nice screensaver when the app isn’t in use, inviting me into articles that I may not have considered.  In contrast, Pulse readers see “how to” information overlaid on top of the news grid.   Tutorials are generally fine as long as they’re not trying to compensate for UI flaws.  One could argue that most of the Pulse features highlighted should be discoverable in absence of any tips.

Example Flipboard Opening Screen

Pulse Opening Screen (new users only)

Home Page
Once users get past the respective opening screens, they are presented with a home page containing an overview of the app contents.  Pulse’s home page is relatively dense, occupying nearly every inch of the screen with content.  Flipboard’s layout is far more sparse, containing ample white space as well as a very clear “Add a section” button.  Pulse users can also add content from this page but it’s less direct—they must tap the Settings icon, then choose “+” in one of the columns, and then return to the home page.  This approach works but I prefer the directness of Flipboard, given that adding content is one of the first things users will want to do.  Oh, it looks I spoke too soon, I just noticed that you can add content from the Pulse home page but you have to scroll past the existing content.  New users are less likely to discover this functionality if placed out of view.

Flipboard Home Page

Pulse Home Page

Adding Content
One of the key differences in this area is the type of content users can add to each app.  Both services allow users to add popular news services as well as RSS feeds (though Pulse limits this feature to Google Reader users) but Flipboard also enables users to add Twitter feeds.  This is perhaps one of my favorite features, as it can make a 140 character Tweet far more interesting when the related content is shown, e.g., the photo or article text.  The UI elements for choosing content are also quite different when comparing the apps.  Flipboard has a flat list of sources whereas Pulse uses a tab bar to break-up the different ways to find content.  I personally prefer the flat list since everything is in one place, but it could get unwieldy if more options are added in the future.   Lastly, the Flipboard categories include text to indicate what sources can be found in each category, e.g., “Food & Dining” has the description, “FlipEats, Bon Appetit, Smitten Kitechn, AlltopBacon” but Pulse only has the word “Food & Living.”  It’d be nice to see more information before users drill into the category.

Flipboard Category Selection

Pulse Category Selection

Viewing Sections
The alternative approaches for viewing “sections” illustrates how Pulse is more “appy” and Flipboard more “magaziney.”  Flipboard has section pages with varying sized modules like a magazine or newspaper.  And when users dig into a section, they can scroll through it from start to finish, using the slider at the bottom of the screen, similar to iBooks.  Pulse has sections on the start page and along the bottom of individual articles but no dedicated section pages.  Both approaches are effective; which one users prefer may be related to their mindset: productivity or relaxation.  For example, some people may prefer Pulse since fewer layers makes it more efficient, but others may prefer Flipboard since features like the sections and flip transitions make the experience feel more leisurely.

Flipboard Section Page

Viewing Articles
At this point, it’s probably no surprise that the app’s also have different design strategies when it comes to the article view.   For one, Flipboard displays their articles in an overlay.  If users choose to view an article on the Web, Flipboard opens up yet another window that must eventually be closed.  On the other hand, Pulse has dedicated article pages with a toggle to switch between text and web views.  The Pulse approach feels much cleaner since it keeps users within context, plus the dedicated page means slightly more screen real estate.   Another difference which was frustrating is that a number of Flipboard articles only show one or two lines before forcing you to the relevant web site.  This may be a requirement for certain sources (perhaps some Pulse articles have the same problem?) which is unfortunate for the user experience.  Finally, one of the most interesting article differences was the Twitter integration.  With Pulse you can share articles via Twitter but with Flipboard you can actually Tweet inline and see other Tweets—nice touch.

Flipboard Article View

Pulse Article View (with navigation shown)

Custom Transitions
Both apps incorporate custom transitions into the user experience.  Flipboard has their own unique center-page flip which is used between sections but also to refresh the home page modules.  Pulse uses a slide transition from the home page to the article view and a combination of transitions when moving from View to Edit mode.  All of these transitions are worth referencing since they add value to the user experience and reinforce the apps’ brand identities (perhaps more so for Flipboard but I think for Pulse to some extent as well.)

Summary
Flipboard and Pulse are both well-designed apps that are enjoyable to use.  In this article I reviewed the UI differences in six key areas: the new user experience, the home page, adding content, viewing sections, viewing articles, and transitions.  Some differences may simply be a matter of preference, but others suggest potential usability issues.  As you build your own apps, keep these best practices in mind.

• Tutorials should be used sparingly.  Be certain that you’re not trying to mask an underlying usability problem.
• Make sure key features are easily accessible.  Users shouldn’t have to scroll or tap multiple buttons to find them.
• Don’t force users to pogo up and down list views.  Try to surface enough information to help them make educated decisions.
• Keep overlays to a minimum.  Displaying too many layers can be disorienting for users.
• Choose interactions and transitions that support your design and branding strategy.

Good luck with your apps!

Here are the 10 design principles for eReader apps:

1. Design for the book content
Reading a novel is very different from reading a web page or a computer manual.  And reading a comic book is surely different from reading a book of poems.  Successful eReader apps will create experiences that are well-suited to the content at hand.  For example, Comic Zeal provides a special Japanese manga mode which supports right to left reading.  If your app supports alternative content types, it should allow the user to choose the desired interaction (more on this in “Personalize the reading experience”).

2. Consider the reading context
iPad users will read on airplanes, in their beds, on lounge chairs, and more.  Understanding the different contexts may help app designers and developers make informed design decisions.  For example, given the cramped conditions on airplanes, I’ve found that it’s more comfortable to access tools along the top of eReader apps (Figure A), rather than those at the bottom.  I encountered similar problems when I tried to read while lying in bed.   These are just two examples—user research may reveal other opportunities to improve current designs.  It’s probably worth mentioning that Apple recommends this tool placement in their guidelines.

Figure A. iBooks page with tools “on”

3. Let the book content shine
While search, annotation, and other tools will be welcomed by many readers they shouldn’t get in the way of the user’s primary task—to read.  Take the iBooks tool icons (Figure A).  They are rendered in sepia tones and tucked into the page’s corners.  They are there when you need them but not intrusive. In addition to the book text, consider subtle ways to let other book content shine.  For example, images are a fixed size in printed books but eReader apps should allow users to enlarge them.  Similarly, if a location is mentioned in a book, wouldn’t it be nice to link directly to a map?

4. Personalize the reading experience
One of the biggest benefits of eBooks is the ability to customize the reading experience.  Customization may be for accessibility reasons or to accommodate user preferences.  At minimum, eReader apps should support accessibility, allowing users to change brightness, page color, and type size (Figure B).  Other potential customizations may include typefaces, transitions, line spacing, pagination direction, and more.  When possible, be sure to provide previews so users can see how the changes will impact their display.

Figure B. Kindle display options

5. Put the reader in control
Compared to mediums like TV and movies which have commercials, trailers, and other distractions, reading books is generally a quiet, solitary experience. eReader apps add complexity since they introduce search and other tools that take the user away from reading.   These tools have the power to enhance the reading experience but they can also backfire if the user feels like they’ve lost control.  For example, tools on Kobo disappear after about 8 seconds if the user hasn’t interacted with them.  Similarly, Kindle tools disappear when the user turns the page.  In contrast, iBooks hides the tools only when the user chooses to hide them.  This interaction style gives the user the most control.

6. Support alternative reading pathways
The printed book has a magical user interface.  Anyone can pick one up and easily page through it, flip to the beginning or end, or thumb to a specific page number.  eReader apps should also make navigation easy and fluid.  This can be accomplished with a combination of gestures and explicit navigation elements.  Gestures should allow the user to page back and forth, but they don’t have to stop there.  Apps like Stanza also let users adjust brightness by swiping up and down the screen.  More explicit navigation elements may include access via a TOC, search, or by entering a specific page number (Figure C).  All of these can add value—the challenge is to make sure they don’t overwhelm the user experience.

Figure C. Kindle navigation options

7. Be predictable
Unless you’re creating a fantasy book or have developed a superior interaction model, your eReader app should follow certain platform conventions.   Following these conventions will make your eReader app easier to learn and use.  For example, tapping the center of the page should display tools along the bottom and/or top, tapping the right/left margins should turn the page, and tapping and holding within the text should reveal options for the selected word(s).   All of the eReader apps reviewed for this post follow these conventions.  If you design an eReader app with a completely different approach, users may have difficulty using the product.  To be clear, this doesn’t mean you shouldn’t try to innovate.  But you should be highly confident that your innovations are clearly better than existing conventions.

8. Provide forgiving tap targets
eReader apps should be flexible and forgiving when users page through a book.  In particular, they should not include miniature or obscure tap targets.  For example, iBooks users must tap precisely in the margins to turn pages whereas Kobo, Kindle, and Stanza expand the tappable zone into the body.  To help users understand these interactions, some apps overlay the tap zones when the user first loads the app (Figure D).  If precision is required, e.g., to select a specific word, magnification and other relevant tools should be provided to minimize the user effort.

Figure D. Stanza tap zone overlay

9. Speak the reader’s language
Most users were reading printed books long before eBooks came around.  They are familiar with the book’s organizing framework (e.g., book, cover, TOC, chapter, page) and related objects (e.g., shelf and bookmark).  Users may expect these metaphors in your designs, plus including them may make it easier to use your app.  For example, iBooks tells me how many pages are left in a book but Kindle tells me the percent left.  This may be a matter of preference, but for me, it required more cognitive load to translate the Kindle percent into something meaningful—pages.

10. Delight your users
Platforms conventions are important but designers and developers should also aim to delight their users.  Delightful elements shouldn’t be gratuitous—successful approaches will clearly elevate the user experience.  For example, Kobo lets readers customize their bookmark.  This builds upon readers current behaviors since they can choose a bookmark for traditional books.  Letting them choose one for their eReading experience may make the book feel more like their own and potentially create an emotional connection to the eReader app itself.  Even better, Kobo should allow users to choose a different one for each book.

Figure D. Kobo Bookmark options

To understand where these principles came from, you may want to view the detailed UX review in the slides below.  Topics covered include: 1) Tap zones, 2) Display options, 3) Inline options, 4) Navigation, and 5) Visual design.  Also, you may be interested in two other posts on iPad eReader apps. One discusses purchasing books for eReaders, the other covers personal library management.

Note: If you’re viewing this post on the iPhone (or other devices that don’t support Flash) use this mobile-friendly link.

• Aside from instant gratification via download, the eReader book shopping experience doesn’t significantly improve upon the web book shopping experience.  In fact, the web is arguably better since more book information and search options are available.
• All of the eReaders provide a “one size fits all” shopping experience.  There are no personalization features though I’m sure this will change over time.
• Kindle and Kobo take the user out of context during the purchase process which could lead to drop-offs.  For obvious reasons–App Store Integration–iBooks is the only eReader that keeps the user within context.

Read below for more details on the following areas: Finding Books, Learning about Books, Buying Books, Accessing Account Info, and Getting Help.

Finding Books
All of the eReaders reviewed let users search and browse for books.  Kindle provides the richest set of options but users must access them via Safari. Going back and forth between the app and Safari is seamless as long as the user stays on track.  If Kindle users wander into the sea of Amazon links, they may have to quit Safari to find their way back.

Kindle Store

iBooks and Kobo let users search and browse for books within their apps.  Search is prominently displayed, however, the browse features are somewhat difficult to find.  iBooks browse options are included in the tab bar along the bottom which blends into the device.  Kobo’s browse options are accessed via the “Jump to” button in the upper left.  This is a shame since the categories and lists are a great resource.

iBooks Store

Kobo Store

Learning About Books
Since Kindle is part of Amazon, the amount of book information (and number of books!) is leaps and bounds ahead of its competitors.  They have extensive reviews, richer author pages, and much more.  However, as previously mentioned, the user must leave the app to access this trove of information.

Compared to Kindle, iBooks book information is limited, containing ratings, reviews, publish date, publisher, seller, category, length, language.  Kobo provides even less information: synopsis, genre, publisher and ratings.

One nice feature available in all three apps is the ability to download sample chapters.  It’s a great way to encourage purchases–worked for me!

Buying Books
Kobo and Amazon users must provide their credit card information–or sign into existing accounts–the first time they purchase books via their respective eReaders.  The process is very straightforward and only occurs once since the information is stored for future purchases. iBooks has a clear advantage since the user’s credit card information is already associated with their iTunes account.

Purchasing books on the iBooks and Kindle apps require five steps minimum from start to finish.  Kobo takes six steps since they show an overlay warning users that they are leaving the app to go to Safari.  (See slides below for the flows).  Hopefully all iPad eReaders–not just Apple’s–will be able to seamlessly integrate payments in the future, without having to cede 30% of revenue.  Better integration will make some of the extra steps obsolete, e.g., warning when launching Safari.

Accessing Account Info
All three apps have different approaches when it comes to accessing account information; iBook’s account information is most integrated.

• iBooks let users access relevant account information from the Store screens; the user stays within the app the entire time.
• Kindle users can access their account information only when they are on the Amazon site.
• Kobo doesn’t appear to provide access to any account information from within their app.

Getting Help
All three apps also approach support differently.  iBooks links off to their support web site in Safari, Kindle provides basic support content within the app (an overlay with web content), and Kobo has nothing!  None of these approaches are ideal.

A few recommendations…
Personalize the shopping user experience. The eReaders reviewed can provide a much more personalized shopping experience, tapping into past purchases but also into what I’ve read, what I’m currently reading, my location, and so on. (Of course privacy issues need to be addressed, as this data must be anonymous).

Consider what other types of book information can be captured and shared via the iPad. For example, it could be interesting to know how many people are currently reading book X or how many actually finished reading book X.  (Again, privacy issues must be addressed.)

Develop alternative ways to present book information. The lists offered on the eReader bookstores are great but perhaps there are other, more visual, ways to present books.  One of my favorite ways to explore books in a real bookstore is to scan the tables laid out with the newest books.  Is there a way to incorporate that concept on the iPad?  Information for individual books could also be improved.  For example, the previews are wonderful but it would be helpful if users could see a few pages before adding books to their library.

Lastly, keep the user within context as much as possible. It’s jarring to move from the app to Safari, Mail, or other applications.

Want to read more?  See my other review about managing personal book collections on the iPad.