Archive of articles classified as "Design"

New Blog Design

4/08/2011

Tim Davis So I finally got around to implementing a new blog design. It’s faster, smoother and much easier to use [at least I think] than the previous blog design I had which was getting a bit on in terms of how long I had it on the site. The top bar also now features a search box which is much easier to use and is accessible from anywhere – a much more convenient position after analysis on how people use the site.

If you’re wondering where the categories are – just scroll down a bit and you’ll notice they appear on the left side of the page. I did play around a little with “left” and “right” sides for the categories – and came to the conclusion from a UI perspective – it’s easier to quickly click if they hug the left side of the page than it is moving your mouse across the right side. I might even experiment with some A/B testing to see what people prefer [feel free to let me know]. This allows categories to be accessible when you’re scrolling down and reading or if you want to quickly move to a category.

I’ve always enjoyed minimal and clean design principles – so the single column design looks much better in my opinion and the flow of content is easier to manage. I was going to implement a single frame page with infinity scrolling content, and I still might, but lack of time didn’t really allow me to do it [ok, it's done].

I also included the social media icons in the header – so they’re now faster to click and it’s even easier to get in touch with me. One click and away you go.

Love your feedback and feel free to let me know any bugs you discover.

No Comments

Design by Ease, Not by Clicks – An Amazon.com Design Review

14/01/2010

Tim DavisThere is no doubt online that all metrics are measured by clicks. What you click, where you click, how you click, why you click, the time between clicks and even your mouse movements prior to a click. Of course, the question is whether all this information is ultimately helpful in respect to design and user interaction. If a user takes 5 clicks to reach a conversion and ultimately an income generating event, is this better than a user who takes 3 clicks to achieve a similar outcome ? The answer, in my mind, may very well be yes.

“Yes, you say? What are you crazy of course it’s not better – lower clicks are always better?” Yes, prima facie this is the exact answer that most people provide – but the reality is that just because a user has taken more clicks does not mean that it’s a better conversion. The missing variable in the equation is the difficulty in relation to the clicks or rather, the ease. A user who makes 5 easy clicks and generates income is a much better metric than a user who takes 3 clicks but is totally confused with the process. This could be ultimately measured as a function of time – but even this may be a misleading variable because some users like to pause and read and analyse before clicking. Of course, 3 easy clicks is much better than 5 easy clicks as the later just means a user is having to do more work and the site is poorly designed or set out.

Let’s take an example of a big eCommerce site like Amazon to see how it fares in both respects – ease of use and clicks.

When you first hit the Amazon home page, your eye is naturally attracted to the top right hand corner. There is no doubt – as previous studies have concluded – that a persons eyes focus on the top-left corner of the page, the headlines, and then scans the page in an “S” or “F” like pattern depending on the format. Relevantly, Amazon users are able to quickly choose the appropriate category of items on the left hand menu, or alternatively, they can select from the dropdown Category Selector – set by default to “All Departments” – and enter a keyword into the search box.

As an aside – something that Amazon could improve upon from the outset – which you may or may not have noticed – is automatically focusing the cursor in the search box when the page first loads. Why should they do this ? Simple, because it would require the user to not have to separately click on the search box. That is, the user could load the page and just start typing – a very simple change that would save the user time. Such a change is an ease of use change – sure, as a facet of this improvement it reduces clicks – but it enables a user to save time and enables them to complete one less process on Amazon.

“It’s such a tiny change, whats the point?” Well, let’s assume that a consumer visits Amazon 1000 times a year to search for items and spend 0.06 sec on clicking on the search box every time – thats around a minute a year lost in clicking on the search box. It’s nothing right ? Well, considering approximately more than 600 million people visit amazon a year – thats a lot of people but ultimately includes repeat visitors. For the sake of this post, let’s assume 30 million visit 1000 times each – that means its around 30 million minutes of people’s time lost a year just from not having the search box automatically focused on load. That is a big deal and is something that Amazon should really be taking note of.

To continue, let’s now select the category “Clothing, Shoes & Jewelry” and click on “Clothing & Accessories” – this is our first real click – and a very simple process to undertake. There is a question here of whether Amazon should provide another sub-level of menus so that we are able to “Shop by Department” [see below] directly from the main page. Of course, such a change may impede width on smaller browser resolutions – that is you can’t see the next level properly – and reduce the user experience. Amazon may also have rejected this extra level as by “forcing” a user to get to this page, they are presenting them featured brands and special offers under the broader “Clothing & Accessories” category.

If Amazon had instead introduced this third level menu from the main page, this would mean that most users would miss Amazon’s “Special Offers” and would may reduce the users experience – and a possible income generating event. This is a great example of why click optimization was not favored over ease of use for the user in an informational presentation context. As an aside again – you’ll note, that the mouse is not focused in the search box when we have arrived at this second level page – costing the user another click if they want to search.

The left hand side of this page features a number of categories that the user can select to go to the fourth level of the main hierarchical category of “Clothing, Shoes & Jewelry”. It also attempts to generate some cross-sell or cross-promotion through the “Related Categories” selector – which would take the user into another categorization of products. Relevantly, if a user hovers over the “Men’s” category – they are presented with another sub-category menu which allows the user to dive deeper again within the category of “Clothing & Accessories”.

This new menu provides a much deeper sub-selection towards “Men’s Clothing” and clicking on the broader category of “Men’s” – that is, not clicking any particular sub category on the menu below – is our second click. This now presents us with yet another broad based page with special offers and featured brands – most probably ranked by popularity. This new page presents us with even more options down the left hand side with clothing specifically related to Men such as “T-Shirts” and “Shirts & Polos“.

I am struggling to understand why Amazon hasn’t introduced such menu options along their “Horizontal” Menu featured at the top. You’ll notice that if you move your mouse over the “Horizontal Menu” that you won’t see any additional hover menu like the one above. This is particularly annoying when you click on a sub-category such as “Shirts and Polos” and you want to get back to the main “Men’s” menu. Instead, you must click on the “Men’s” menu – as seen below – which takes you back to the previous page. If Amazon introduced the above Menu on their Horizontal menu for sub-category pages, it would vastly improve the usability of the site and allow users to skip directly to the categories above without having to go back to the main “Men’s” menu. This is actually an example of time optimization in addition to reducing the number of clicks and ultimately making the site easier to use. There is absolutely no reason – I see at least – why Amazon could not introduce the above hover menu to their Horizontal menu on sub-category pages.

Now that we are finally at the “Shirts & Polos” page – we get to see products. The vertical menu down the left hand side is now quite long and shows “Department, Fabric, Shipping, Brand, Special Sizes, Customer Reviews, Prices, Seller and “New Arrivals”. In my mind, this is an over utilization of the left hand menu which makes the left hand side of the page now too long. On small browsers, most of this information isn’t even visible when the page first loads and the requires the user to scroll. Some of this information would be better presented horizontally across the top menu – in addition to on the vertical menu – such as critical information like Price and Fabric. This would allow users who are quickly searching to filter by price when they are at the top of the page, and then also have the option of filtering as they scroll down the page.

One thing that actually really irks me is the lack of color selection. Sure, Amazon provide a neat little color selector – for individual items – but I want a global color selector for all items. For example, why can’t I search across all “Blue Shirts & Polos” directly from this page ? It seems that Amazon doesn’t have any image recognition software to determination the range of colors within individual product images that are contained across its website. Such technology would really greatly assist a consumer in filtering through products to easily get what they are looking for. Another missing aspects of this page are the reviews for each product or even brand. Why doesn’t Amazon allow us to see the reviews of the “Armani Exchange Shoulder Logo Crew” displayed on this page to determine whether other users have suggested that this is a fantastic product. Providing such information from the outset would vastly improve conversion rates on products that users are looking for without have to click backward and forth on individual items.

To finish this, already quite long post, once you select an individual product on Amazon you are presented with a large scale product image and “Customers who Viewed this Item also Viewed” to show other users pattern history and attempt to drive relevant cross-sell. This is a great concept and one which would see many users click and purchase other items which are similar to the individual product they selected. From a design perspective, a lot of the information on this page could be presented in “Tabs” – rather than as a long individual page. For example, the “Products Features, Product Description, Product Details” could all appear as individual tabs at the top of the page near the product image – rather than requiring the user to scroll down the page to see this information. Even reviews could be added so that it would make the whole thing easier to quickly access this information.

In conclusion, many of the aspects of Amazon are great and many are not so great. Relevantly, Amazon requires a user to click on multiple items to finally arrive at their end product. While many of these clicks could ultimately be improved – Amazon simply aren’t doing this for (I assume) the simple fact that it works. Users can select items “pretty” quickly, they are used to the format of the site and don’t mind clicking through different hierarchal structures to finally purchase products. While this post has perhaps been a little critical more on the design side of things, it does highlight that despite these design flaws – Amazon works. The design works, the site is ultimately easy to use and millions of people purchase – and purchase big.

In this light, hopefully I have shown (albeit ultimately digressed a little) that the ease of the site has won over click optimization. Sure, by optimizing clicks it may be even easier to use – but why change something that ultimately works and people love. My only big piece of advice for Amazon – fix the focus on the search box, it’s simple and seriously is something that would improve the user experience.

Oh and also feel free to fix all the other things I mentioned as well!! :)

No Comments
Mobile Analytics