The iPad 2 announcement included the new Smart Cover, a magnetic masterpiece that arguably generated more buzz than the device itself. Although I, too, was impressed by the cover, it led me to reflect on some of the DIY cases created for the original iPad. Cork, wire hangers, chip cans, and more were used to create a variety of clever cases. Read about my favorites on Touchy Talk
In case you haven’t updated your RSS reader, here’s my new post on Touchy Talk:
Cooking in the pre-iPad days usually involved me printing out online recipes and stuffing them into a folder. When it came time to make the recipe again, I could never find the old printout, so I’d print out yet another copy. I considered bringing my laptop into the kitchen but images of an olive oil soaked keyboard often led me back to printouts. My iPhone was a decent compromise but the screen size is a tad too small, allowing me to see <em>only</em> ingredients or <em>only</em> directions, not both at once.
Read the rest on Touchy Talk: http://www.touchytalk.com/?p=95
iPhone UX Reviews has a new home and a new name for 2011: touchytalk.com. What was the inspiration? Well, part of the problem was the name. I started out reviewing iPhone apps and eventually expanded into iPad apps. Soon enough, I was also discussing multi-touch sketching and prototyping. I even found myself recommending design related products and books. In short, I needed a new home to accommodate all these different content types. It’s still a work in progress but I hope you like touchytalk.com. Check out the first article: Is the button dead? The rise of the gesture. And don’t forget to update your RSS readers.
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.
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.
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.
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.
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.
Pulse Article View (with navigation shown)
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.)
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!
August and September have been filled with many exciting activities–my book launch, guest blogging, and two great conferences. The good news is that all of these diversions are almost behind me and I plan to update this blog next month. Here are some highlights:
About a week ago, I wrote a piece for Johnny Holland magazine about the challenges designers face when designing for multiple smartphone platforms. The piece was titled, Android & iPhone App Design: Is it twice the work? I also wrote a piece for UX Magazine about Informing Smartphone App Design. UX Magazine plans to do a book giveaway (my book!) this coming week so stay tuned.
I’ve also been busy teaching smartphone application design at several conferences. The first one was at UX Week, organized by Adaptive Path in San Francisco. Next week I’ll be presenting at Design for Mobile in Chicago. Over the next few months, I have talks planned for local meetups, graduate students at UC Berkeley, and IxDA Silicon Valley.
Again, sorry there haven’t been any new posts recently. In the interim, I hope you’ll find the UX Magazine or Johnny Holland pieces of interest. Be back soon!
iPad eReader apps have only been around for a few months but they build upon a formidable predecessor—the book. They also benefit from the relatively recent success of the Kindle and iPhone apps like Stanza. Although there are many models to learn from, the eReader app space is still evolving and will continue to evolve in years to come. As designers and developers create new versions of eReader apps, I hope the following design principles will serve as a useful reference. They are primarily based on a screen-by-screen analysis of iBooks, Kindle, and Kobo which is embedded at the end of this post. Stanza, Comic Zeal, GoodReader, and Instapaper were also reviewed but without as much rigor.
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” (See larger size)
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 (See larger size)
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 (See larger size)
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 (See larger size)
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 (See larger size)
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 iPad/iPhone you will not be able to see the slides below. If so, please go directly to this non-Flash version on the Slideshare site.
Last week I reviewed alternative approaches for managing iPad book collections. This week I evaluated the book shopping experience on iBooks, Kindle, and Kobo. Some observations:
- 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.
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 (full-size image)
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 (full-size image)
Kobo Store (full-size image)
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!
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.
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.
A few people asked me to review some of the popular eReader iPad apps. As I started to dig into them, it became clear that the topic was too broad to adequately cover in one review. Instead, I’ve decided to break the UX review down into three parts. This first part will cover personal libraries (books downloaded to the iPad), the second will cover the bookstore, and the third will cover the reading experience. iBooks, Kindle, and Kobo were chosen since they are widely used and have some interesting design differences.
Viewing & Previewing Books
All three app libraries provide Cover and List views. The main difference in the Cover views is that iBooks and Kubo are on “shelves” whereas Kindle books are in a plain grid that supports the pinch gesture to expand or shrink covers. Visual details also differ when comparing the Cover views. iBooks covers have an indentation that looks like a book spine. Kindle books appear three dimensional against a background that changes according to the time of day. Kobo has put forth the greatest effort in terms of visual details, letting users customize both the bookshelf and bookmark appearance.
iBook Cover View (full-size image)
Kindle Cover View (full-size image)
Kobo Cover View (full-size image)
List views, on the other hand, differ mostly in the amount of metadata provided for each book. iBooks provides title and author information plus the genre; Kindle provides the title and author. Kobo provides a tight two-column layout and has the most information: title, author, whether the book is currently being read, and how much of the book has been read.
iBooks List View (full-size image)
Kindle List View (full-size image)
Kobo List View (full-size image)
Getting additional book information—TOC, summary, ratings—is only possible in the Kobo UI. Users can tap and hold the cover when in the Cover or List views.
Kobo Preview (full-size image)
Organizing & Filtering Books
All of the apps include some level of filtering but their approaches are very different. iBooks is the only app that provides searching, which will become critical as users build larger book collections over time. In addition to Search, iBooks lets users sort by “Bookshelf” (most recently purchased), Title, Author, or Category (genre). Unfortunately, these search and sort features are only available on the List view. It would be preferable to enable sorting on both views, as done by Kindle, which provides sort by Recent, Title, Author. Kobo sort values are essentially the same, except “Recent” indicates recently read.
Kindle users may tap and hold to remove books from the Cover or List views. On Kubo, tap and hold brings up Delete as well as the TOC and book overview. On iBooks, users must tap Edit to choose which books to delete. This interaction difference could be problematic for users moving between apps.
A few recommendations…
Capture more metadata to improve the user experience. Goodreads.com lets users mark books—read, currently-reading, to-read—and uses this information to create bookshelves. Kubo does this to some extent with the “I’m Reading” view, but it can be taken a step further. Other possible metadata to capture are notes and personal ratings.
Leverage known metadata to help users filter through their collections. For example, Delicious Library doesn’t treat all books the same. They alter the cover size based on the paper book’s actual dimensions. Students at UC Berkeley’s iSchool also explored this concept in the Virtual Shelf project. Visual cues such as these may help users pinpoint and choose books to read. Similarly, the book stores for these apps do not have to be islands. Reviews and other content may be of interest to users even after purchase.
Allow freeform organization of book collections. In addition to providing more automated views, consider letting users create their own bookshelves, as done on Delicious Library. Users may want to organize books based on their interests (e.g., work or pleasure), family members (e.g., for themselves or their children) and more.
Design for growth. As users’ collections grow, search, tagging, and other filtering mechanisms will become increasingly important. At the same time, user interface options, e.g., the ability to resize book covers as done on Kindle, will make it easier for users to manage large collections. These should be introduced now, rather than waiting until collections become unwieldy.
Want to read more? Just posted a review about purchasing books on the iPad.
Last night Hacks/Hackers Unite had their demos at KQED in San Francisco. The goal of the weekend gathering was for journalists, designers, and developers to build media apps for the iPad and other tablet devices. One of my favorites, Citizen Kid News, was awarded the top prize. Citizen Kid News provides kid-friendly news articles, culled from the web, and encourages interaction through game mechanics. Readers start out at “Cub Reporters” but can make their way up to “Editor” if they rack up enough points. The neatest thing is that kids can eventually contribute their own articles to Citizen Kid News. Other projects that I found interesting include:
3-in-1 Story: Lets users fluidly move between the text, audio, and video versions of a story.
News Apper: Provides template-based solution that enables non-technical writers to create iPad apps containing text, video, photo, maps, and more.
Open Margin: Attempts to make reading books more social through integration with social media but also through its interaction design.
The complete list of projects can be found here: http://unite.hackshackers.com/2010/05/order-of-presentations/
Paper prototyping for the iPad is super easy, especially when compared to other platforms. For web-based prototypes, you often have to incorporate a mouse and keyboard. And for the iPhone it can be tricky to approximate the form factor yet still keep everything legible. The iPad has the best of both worlds: ample screen space and no fussing with peripherals–unless there’s an external keyboard. Here are some examples of iPad paper prototypes; I’ll update the list as I find new ones.
OmniGraphSketcher: http://bit.ly/9aLU9a (see image below)
Found some other great examples? Send them my way!
OmniGraphSketcher for the iPad.