Apple’s Checkout: Credit Card Flaws

(Originally posted on the Usability Matters Blog on December 22, 2009.)

Every week I collect a bunch of recommended reads in my browser tabs, hoping for a few spare minutes to skim through them. This week, one such article was Luke Wroblewski‘s blog entry, The Apple Store’s Checkout Form Redesign.

I really enjoy how straight-forward Luke is with his analysis in this article (and everything he writes, his book being no exception). He includes fantastic examples from Apple’s previous checkout form and its new checkout form. However, having just purchased a MacBook online, I have to disagree with his positive assessment of Apple’s new credit card form.

The form is as follows (note I’m using the Canadian form here so it’s missing the Discover card):

As Luke explains, Apple no longer asks users to identify their card type (Visa, MasterCard or AmEx) up front. Because we can infer a person’s card type based on their credit card number, all we really need is that number.

This is absolutely true. We have been asking people to enter unnecessary information for years. However, the problem is exactly that: people are used to entering this information.  So when we get to Apple’s form, we eagerly look for a place to identify our credit card.

My brain while using the form: “Lo! Look at those shiny images showing card types! I will click on Mastercard, for that is my card type.

A re-enactment, in pictures:

And then:

Then, the loud sigh. I gave up and started typing my credit card number in. And then the form did this:

All other cards are greyed out, and my card type was magically highlighted.

I am sure that Apple included the card type images as a way of telling users what cards they accept, but the images seem clickable because they are a) images and b) in a place where the user would normally expect to interact.

If I were to redesign this form, I would let users interact with the images if they want to. Let them select MasterCard up front if it makes them happy, but switch to Visa in the end if that’s the type of card number they enter. Users who choose to identify their card up front will be happy, and users who don’t identify their card up front won’t know what they missed.

Anyone else have an opinion on this?

(Thanks to LukeW for the inspiration to write about this issue.)

Designing Online E-Book Readers

(Originally posted on the Usability Matters Blog on November 6, 2009.)

I have heard more about digital books in the past six months than ever before! CBC’s Spark (one of my favourite radio shows) has recently discussed the future of booksthe concept of open text books, Harlequin’s approach to e-books, and the Toronto Public Library’s Digital Bookmobile, which promotes the library’s e-book collection. CBC’s Ideas also recently ran The Great Library 2.0, a documentary about Google Books’ massive digitization project as well as its “competitor”, the Open Content Alliance. I’d highly recommend a listen.

After hearing e-books swirling through my podcasts, it was exciting to get the chance to work on an e-book reader interface. If more and more content is being digitized, it’s going to be critical to have good interfaces to help find these books, and to read through them.  Usability Matters is currently helping Ontario Council of University Libraries (OCUL) design a tool for doing just that. Over the course of the last year, we have helped OCUL run regular exploratory and evaluative user studies to better understand student and faculty needs with regards to e-books as well as online journal articles.

Part of our work has been to look at various online e-book readers (allowing books to be viewed with an internet browser on a desktop computer). Most online readers are nothing special, but when I encountered the Internet Archive‘s newest reader (released in April 2009) I did a double-take. This was the first e-book reading experience that actually felt fairly comfortable to me. The question is: why? I’ll look at an example using an old Eaton’s catalogue to explore more.

ia_ebook_reader_eatons_catalogue

Although there is a lot worthy of discussion on this page (some positives and some negatives, in my opinion) there are two features that stand out:

1. Ease of Paging Through the Book

Moving from page to page in the book is done simply by clicking on either facing page. Click the right page to move forward in the book, and the left back to go backward. This is a huge improvement over other online tools I’ve seen, as it uses direct manipulation, instead of forcing you to use paging arrows in a corner of the interface. (Note that this tool has paging arrows available as well — giving users options, and ensuring users who don’t discover directly clickable pages can still navigate the book.)

This “click to flip a page” mechanism is strong on its own, but is augmented by an animation of the page actually flipping over. One might argue this animation is unnecessary, but I find it provides a very strong sense of place: it is an elegant way of providing feedback to the user that their action was completed correctly.

2. Browsing Through the Book

The trouble with many online book readers is their precision. You must go through the book linearly, page by page, or else enter a page number to jump to directly. For me, however, a key activity when I pick up a book (particularly a non-fiction book) is flipping through it, getting a sense of its structure and content.

This reader is the first I’ve discovered that makes this browsing activity possible on the computer. Note that much like a regular book, you can see the edges of pages behind the pages you’re reading. You can mouse over these page edges, and flip to a different section of the book. You can’t go to a specific page this way, but you could flip roughly to the middle of the book, or close to the end. The lack of precision is the charm here. I of course could type a random number into a “Go to page” widget at the top of the page, but that takes work: both work to type, and work to come up with a random number. In this interface, I just click randomly. I love it.

ia_ebook_reader_eatons_catalogue_flip_pgs

The movement of these pages also helps create a sense of place for the user as they read the book. They can tell at a glance that they are halfway through the book, instead of having to process a series of page numbers (like “page 63 of 194″).

One of the most interesting things about my love for these interface elements is the fact that the eight users we studied were either uninterested in or ambivalent towards a two-page view of a book. This is likely because they are reading in an academic context, whereas my goal with the tool so far has been to browse interesting old books. Still, I am extremely curious how they will react when they see this version, and if it will change their minds about the merits of facing-page e-book designs. I’ll let you know how it goes!