Is an accordion worse than a grid?

Question

I am building an author site for myself, and would like to display, for each book, the cover image, the title and an enticing blurb, and links to (say) four other books that might be of interest.

There is obviously a grid-based way to present this to the user, and probably the most KISS approach. But there would be more exploration if it were presented as an accordion, with one book visible at a time.

Now in terms of basic user experience, I can see that the grid is more straightforward and obvious how to use, and the accordion, which I could have load something in the horizontal space not used by the grid, as being more exploratory and interactive.

However, what I do not see is which is better. If I'm wrong about my characterizations of a grid and accordion please correct me, but the main question I'm asking is which is better. The intended audience is people looking to know about an author's writing. For that purpose, is one better than the other, or would you kick the question back to me and ask "Would you prefer simple or interactive?"

Answer 1

If you objective is to showcase your work (and the work is limited to single digit books) then a grid is better than an accordion.

• In a grid, you can see all the books and the summary, link, etc. in a single view. Compared to that, in an accordion you have to click on the title of the book to get the remaining details like cover, summary and other things.

• Even if you were doing responsive design, it will be better to stack the book cells on top of each other than wait for the user to navigate to the accordion menu and click it.

• Also, if personally, I would like to see the cover pages and titles to get some motivation to click on the details (which is not available in the accordion)

Since you have 20ish books, things will go below the fold and it is not a problem. Look at Bill Buxtons collection page. You have the cover and the title of the page, can add a couple lines of summary just to get the user excited about the topic.

Also, you can do the ajax filtering which many people do on the blogs. http://themeforest.net/item/yin-yang-clear-and-slick-wp-portfolio-theme/full_screen_preview/634395. If you have groups for your books this is a very good solution to that. You can see all the works by default, and can select a particular group if you wish to simplify your navigation.

Answer 2

Grid is better because it represents more practical information and let choose interesting book with minimal effort.

In case you have many books, navigating through it using accordeon will be painful because user should spend more time on each book, even if he isn't interested.