It is the day and age of online readers, electronic books, pdf compendiums and Kindles. At the book store, I might buy a book on an impulse, but 9 out of 10 times, I come back home, get onto the internet and hunt for a bargain on various online bookstores. Such is the lure of online bookstores and the surprise price-busting deals that attracts book lovers worldwide, that more and more publishers choose to sell exclusively on online book stores.
One of the first things to consider when designing an online bookstore is that there are similar physical entities [actual bookstores] present around us. By providing an online medium to buy the product, we are not only obliged to make it easier for the buyer but we are also expected to provide a very interactive and unique experience which might not beat the feeling of actually holding a book in their hands, but would come pretty close to it. Don’t you just hate it when you are browsing a bookstore online and you click on a book you like and it doesn’t give you any information besides the title and an author?
The Structure And Flow Of An Online Bookstore
Design Elements – Visual, Functional, Interactive And Updates
Visual – Creativity can be unleashed and ideas can be set free here. If a store is small and boutique, getting creative with the layout and navigation to stand out would be a great idea. If the store is huge and has scores of products, a minimal design, visually speaking is the best choice. When I say visually minimal design, I don’t mean a stunning artsy design floating amidst white space. I refer to a clean and structured design with repetitive use of similar design elements that create an illusion of minimalism without making the design appear cluttered.
Functional – As easy as picking a book off the shelf and sliding it back in, an online bookstore’s functionality is what will make or break it. The real world "Stacks" can be beautifully translated to the online "Grids". A grid-based design for display and browsing is perfect for the intricacies of an online book store because it maximizes space and creates the illusion of books lined up next to each other, the way we are used to it.
Interactive – Search is the lifeblood on a system like this. The more interactive it is, the better. Ask yourself what you or someone browsing for books in a store looks for. Name [alphabetically arranged], information about editions, types of copies available [large format, hardbound, softcover, Digital versions], whether it is part of a bigger pack etc.
When you are in a bookstore, you can feel the raised detailing on the cover, you can read the inset summary, you can flip it open [and you can smell the pages, which unfortunately just cannot be captured in an online bookstore] and bombard your senses with images, words and textures. How would you maximize that and capture that experience on a website would determine how much of a pleasurable buying experience your online store provides.
Make allowance for structured information display along with the product images. If you plan to have a member section, enhance interactivity by providing means for members to add information that you might not have. Envision lists, wishlists, favorites, bookmarks, ratings, detailed reviews, 10-word reviews, tagging, discussion boards, "ask the author" interfaces, book clubs, reading marathons, literary events and anything else you can think of that will enhance the interactivity and user experience.
Non-Design Elements – Supply/Stock/Movement
As designers, we have to be aware of how our design and the system we create would work to provide a smooth flow between the suppliers and the customers, with the store itself as a go between. So although we don’t have to worry about whether a book is in stock or not, we do have to make allowances for situations like that arising in a transaction from both perspectives [Store Administrators and Customers]. Factor in notifications and flags with appropriate icons. Allow lists, wishlists and effective forms to input that information as well as display them efficiently.
I have never designed an online book store and thought that it would be a fantastic idea to deconstruct the design of a popular online book store and try to understand what goes into the design and development of one. I have dug into the aesthetics and workings of one such store from the designer as well as the end user’s perspective.
For our case study, I have chosen the Amazon.com book store.
A little bit about the history of the Amazon Online Book Store
Amazon.com was started by a man named Jeff Bezos in 1994 in his basement garage in Bellevue, Washington. Over the years with several of the initial fundings coming from people who believed in what Jeff was doing, Amazon has grown from the original online bookstore to America’s largest online retail giant.
What makes it Unique?
The sheer age of it means that when people first started buying books, it was there so it managed to capture a very wide consumer market based simply on its availability and the fact that it was one of the first of its kind.
Despite being part of a bigger network of products, it has a very comprehensive catalog catering to every kind of bookworm possible with books available in multiple formats and a massive community of book lovers who take advantage of the rating and reviewing system to provide an honest and valuable "buying advice" like no other.
Why It Works?
In a way Amazon is not just run by the guys at Amazon, it is heavily influenced by the customers who buy things off their online shelves. One of the very few online stores to provide the "Look Inside" service where you can actually peek at a couple of pages before buying the book makes the book buying experience very close to the actual one. Ease of ordering, back-ordering, pre-ordering, returns and a wide variety of payment options including gift vouchers and a million other redemption facilities, make Amazon the best in its field.
What It Lacks?
As a customer, although I love the amazing selection on offer and ease of use, I feel it lacks color and jazz. As a designer I can understand their need for maximizing white space and drawing attention to the text on a white background. I also understand their need to keep their operation fast-loading and size optimized with crisp and minimal graphic elements, but with images going bigger on websites with faster connections, I really feel they need to inject a bit of color on their otherwise bland pages. Their "Book" home is every bit as bland as the internal pages with no clear demarcation of "Special Offers" or "New Releases". Because of the sheer amount of books they have tried to cram onto the home page, a subtly visual color coding separation of some kind would have been great.
Right from childhood, our brains are trained to seek out books on overcrowded library shelves and bookstores with books stacked from the floor to the ceiling in a never ending maze of aisles. Any other kind of product browsing online would call for wide open spaces, but book browsing needs a semblance of those tightly packed shelves, at least some of it. Amazon could do with more books displayed on a single page, rather than the sparse designer-wear showroom effect they seem to have in place.
DECONSTRUCTING
NAVIGATION
Amazon has a very basic top navigation. It is clean and functional but a bit lost amongst bigger text on the pages. The second-tier navigation on the left is very in depth and serves its purpose. When you click on one of these links and enter the third-tier, things start getting confusing. The second-tier navigation on the left completely disappears and is replaced by the third set of sub-navigation and you don’t realize anything has changed because it follows the same colors, sizes and linkage as the earlier two.
When you eventually click on an item of interest, you land on a very comprehensive item page. This page has no breadcrumbs at the top to follow the trail back to the 2-3 levels of links you have clicked, should you decide that the product you clicked on was not the right one. The breadcrumbs are right at the bottom, cleverly hidden or it may seem after all the product information, reviews and sponsored links.
LISTS AND PAGES
The List Pages of Amazon are again basic which for big online catalogs is a good thing. My grouch with their list display is the space being wasted on each listing as it is a horizontal one and not a grid-style listing. A grid-style listing would probably enable them to list the same number of books with less vertical scroll or more number of books with the same vertical scroll as the present one. It would also enable them to increase their thumbnail images in size, making the entire design more appealing and colorful without introducing a new color or graphic element. It would also balance the layout with thumbnails now appearing on left and right instead of being banded in a vertical line on the left.
The individual "product" page or book listing is Amazon’s saving grace. It is one of the best ones I have seen on an online bookstore. Starting off with a couple of product images on top, information regarding pricing, discounts, stock availability and shipping, you are for certain products offered an option to actually browse some pages. With easy buying options hovering on your right, you are shown similar products and a plethora of tags and keywords relevant to the current book you are browsing.
Summary
PROS
- It has virtually everything you would ever need to browse a book store online.
- It is fast and efficient.
- It has a good ordering and transaction processing system in place.
- It utilizes interactive pdf readers to give you a limited glimpse at certain books.
- It is an intelligent system and remembers your browsing history, makes the right product suggestions based on your searches and offers on the spot deals by pulling up two or more related products of interest to you.
- It offers a wide variety of choices from buying "used" or "new" to saving you bucks by offering different kinds of shipping.
- Icons and buttons to "buy" and show "discounts" are used effectively throughout the site.
- Original price strike-throughs with new, discounted prices in bright and bold colors do their job.
- The community section of the website with "book discussion threads", "ratings and reviews" and "book lists" are well integrated with the actual content, allowing intelligent and informed browsing.
CONS
- The Home page doesn’t show you a list of "Current Topsellers" or "Newly Released Books" or "Pre-Order these Anticipated Books" straightaway or clearly, like you would see the moment you enter an actual book store.
- "Recommended Reads" and "Special Deals" are not highlighted enough on any of the pages.
- Typography is not used effectively. All fonts virtually appear to be of the same weight.
- Too much information clutters the internal pages. Heavy content could have been broken up with effective use of more modern icons.
- On bigger screens, the left half of the page bears the burden of the most content whereas the right half of the page is quite bare, leading to a visual imbalance.
- Halfway down each page, every box seems like the footer and there are too many of those boxes.
- The product sliders are not very prominent and can be easily missed.
In Parting
Visualizing, designing and building an online bookstore is a massive task and an evolutionary one as well. What we have looked at today in this article barely skims the surface of a project that big. But a voluntary exercise like this, where you deconstruct an existing website, allows you to think and learn about how you would begin to start designing one, what obstacles you would face, the design limitations that would arise due to size, speed and demographics of the website and how you would go about tackling issues like that. I like to flex my thought process by assigning a random design and development exercise occasionally. You might not become an expert at it, but it is amazing how many new things you will learn. I hope you have enjoyed this little walk-about through the aisles of Amazon’s online bookstore.