6

The web application that I'm working on presents a collection of books which the user may read or annotate. These books tend to be legal documents or tenders, not novels. At the moment, the user may select a book using a traditional tree view (they are structured documents) or a coverflow view (a la iTunes). There may be a few books or tens of books.

Personally, I think coverflow sucks for this. All the books have pretty much the same artwork, so the user has to read the title of the book which is printed vertically on its spine. However, our less technical users just love it. Some of our users never use a computer and struggle with concepts like providing a username/password.

We are doing a UI review and the feeling is that we need to keep this coverflow view of our library.

So here's the question: What other options are out there to make a novice user feel at home with book selection?

A bookshelf probably would not work too well given the titles of these books are lengthy. I don't think we are constrained to traditional book metaphors. Just to make it harder, we are looking at an iPad interface so it would be good if a similar navigation system can be used for both web and iPad.

Charles Boyung
  • 8,281
  • 2
  • 33
  • 39
dave
  • 201
  • 1
  • 5

3 Answers3

2

Coverflow, bookshelf and the like are basically gimmicks which look nice and initially impress users however they are actually quite hard to use.

If you strip off the book metaphor you are just left with a data set. So why not think about using an old fashioned list? Amazon is a perfect example of this: enter image description here

Pay particular attention to how the meta data for each book is represented on screen. There is a lot of information but the cover and title of the book stand out very clearly. A large icon is used to draw the eye in but also the title is made more prominent by embolding and a colour change. The book can be selected by clicking the icon or the title.

I have designed several interfaces like these in the past and the layout and prominence of the various pieces of meta-data is the hardest part to get right. The differences can be very subtle but can have a large effect on the readability of each item.

In terms of functionality it is very important consider the order of the books/documents in the list. With searches the order is usually by relevance, however you may also want to give your users the ability to change this if they wish.

You will also need to consider how you deal with large results sets, on the web it is acceptable to use pagination, on an ipad/iphone it is usually done by a "Load 10 more" link at the bottom of the results.

ArchieVersace
  • 2,136
  • 1
  • 15
  • 20
  • 1
    This is a nice idea. It gives a lot of space for the book's title and allows random access to the set of books available. One downside is that it really wants to be full-screen so may not sit well with an advanced, tree navigation system on the same screen. One interesting possibility would be to start the user with a list like this but with a table of contents button in the books' entries. The user selects a book by clicking on it. If they click the TOC button, then we scroll this list off to the left and scroll in a TOC for the book. This may remove the need for the tree view. – dave Feb 10 '11 at 16:54
  • 1
    This is a good start, but be sure to identify HOW the users select a document, and make sure that information is on screen and given visual priority. For instance, the title might need to be in a significantly larger font, and the data beneath it needs to be data that is useful in choosing a document. – ThatSteveGuy Feb 24 '11 at 20:56
  • @ThatSteveGuy - Thanks, good tip. I have updated my answer. – ArchieVersace Feb 25 '11 at 09:23
1

I think you could try something like this: enter image description here

Roland Pokornyik
  • 5,040
  • 3
  • 29
  • 40
  • This is pretty much what we have - a modified coverflow. One difference for us is the objects are 3D with the text along the vertical axis. The problem I have with this is that it is really inefficient to jump to the, say, twentieth book. Furthermore, there seems little value in forcing the user to click through the preceding 19 books.

    That being said, our less computer savvy users love it and that counts for a lot.

     – dave Feb 10 '11 at 16:40
0

I wouldn't use a bookshelf metaphor either. I was disappointed when I saw Apple using it in iBooks on the iPhone and iPad; I thought that they could do better.

Coverflow looks nice, but I think that something like the Reeder RSS app for iPad might work better:

enter image description here

You could enhance this view by taking advantage of your specific domain knowledge. E.g. for tenders, display summary information about the tender, who's working on it, due date, etc.

Hisham
  • 6,897
  • 1
  • 21
  • 16
  • This could work. One downside I see, though, is that the titles of the book are constrained by the visual size of the book. Also, this takes up a lot of screen real estate. A modified, single row view could be interesting. It would consume a lot less space. A single row would not be as sexy as coverflow but would allow the user to see, say, 5 books simultaneously and randomly select from that set. To pick the 20th book would require 3 scroll clicks rather than 19 for coverflow. – dave Feb 10 '11 at 16:45