| The key to great usability for an online shop is | | | | would start to lose some of its eloquence. |
| familiarity. People have been buying goods online | | | | Categories and sub-categories can be treated just |
| for years now, they expect to see a certain | | | | like site navigation, which is essentially what it is |
| process unfold when shopping online, and when a | | | | (i.e. product navigation). Common approaches are |
| designer makes radical departures from the | | | | to use CSS fly-outs or in-place expanding panels |
| status quo, tears may ensue (regardless of how | | | | (much like Windows Explorer). |
| good the designer's intentions may be). Does this | | | | As an added touch, I like to put a reset icon near |
| mean a designer is locked into reproducing the | | | | the search button. This lets the user return the |
| same old shopping interface again and again? Not | | | | searching mechanism to its initial state without |
| necessarily, but conforming to certain standards is | | | | having to go all the way to the browser refresh |
| going to help the user. | | | | button or press the F5 key. |
| This article analyzes the usability of components | | | | The shopping basket - the structure of a shopping |
| commonly found within most shopping website | | | | cart has become fairly standardized these days. |
| (e.g. the cart, the checkout process, etc). The | | | | You have the product name with a hyperlink back |
| idea isn't so much to be prescriptive and lay down | | | | to the full product description, the price of the |
| hard and fast rules, but rather to describe what is | | | | individual product, and the quantity the shopper |
| going to be most familiar to shoppers. Creativity | | | | wants to buy. |
| and deviation from the norm is a good thing on | | | | I like to add a small bin icon so shoppers can |
| the web, otherwise things would get pretty | | | | easily remove items from their basket that they |
| boring. But being aware of the de facto standards | | | | no longer want. You could also add a sub-total at |
| on shopping websites allows you to make | | | | the bottom of the shopping cart, but I don't think |
| informed decisions when taking a novel direction. | | | | this is necessary since the user will be shown a |
| The Login box - there is some variation in how | | | | sub-total during the checkout stage. |
| shopping websites deal with user log ins. Some | | | | Another feature which improves usability is |
| sites require that a person log in before making a | | | | feedback messages. It's important to let the user |
| purchase, whereas others allow for guest | | | | know when something happens as a result of |
| accounts. The obvious basics would be a | | | | their interaction with the system, for instance; |
| username and password field. The only pitfall here | | | | showing a short message when an item is added |
| would be labeling the username field 'Email'. | | | | or removed from their cart. |
| 'Username' is the more ubiquitous label, it helps | | | | The product details page - one of the biggest |
| cut-down on possible confusion which could arise if | | | | decisions here is whether to have a product listing |
| there were say a newsletter subscription box | | | | page in addition to a detailed product description |
| near by. | | | | page. If you were just using a listing page for |
| Most of the choices to be made within this | | | | products, you would show short descriptions along |
| interface element relate to naming; do you call it | | | | with each product. The alternative would mean |
| 'Register' or 'Sign-Up'?, should you label your | | | | that a shopper has to click a product's summary |
| commit button 'Go' or 'Login'?, is your password | | | | in order to see its full details. |
| recovery link called 'Password recovery' or 'Forgot | | | | Generally I decide this based on how much |
| your password?". Whatever labels you choose, | | | | information is going to be shown with a product. |
| you should favor brevity, generally nothing longer | | | | If it's only expected that a few lines will appear |
| then three short words. | | | | for each product's description, then a product |
| After a person logs in, there is an opportunity to | | | | details page wont be needed. However, this may |
| reclaim some precious screen real estate by | | | | have significant SEO consequences since each |
| removing UI elements which aren't needed | | | | product doesn't have it's own name appear in the |
| anymore. Showing the shopper's name helps to | | | | browser page title-bar. It could be argued that the |
| personalized the service and thus make it a little | | | | summary-on-listing page interface is more |
| more friendly (nb. you could go with 'Welcome | | | | effective in terms of usability since a shopper |
| John Smith' instead of 'Logged in as: ...'). This is also | | | | gets all the information they want with fewer |
| a good place to show the 'My Account' and | | | | clicks. |
| 'Logout' links since both these functions are | | | | The paging mechanism - the approach I take with |
| logically related to the shopper's account. | | | | paging is not widely used, you could say that the |
| By the way, a 'Logout' link is somewhat | | | | UI I prefer is more a matter of personal taste. |
| redundant since closing the browser window | | | | The common representation is to show a series |
| serves a similar purpose (assuming the session | | | | of hyperlinked numbers (e.g. 1 2 3 4 5... etc), but |
| has expired), but a logout feature may help | | | | this tends to be quite fiddly. |
| alleviate any security-related concerns a shopper | | | | The other issue with listing a series of hyperlinked |
| may have. | | | | numbers is you can only show so many before |
| The product search mechanism - the textbox for | | | | you have to fall back to an ellipsis to represent a |
| product searching is pretty straight-forward, but | | | | gap (e.g. 1 2 3 4 ... 57 >). I prefer to go with a |
| product browsing can go in a number of | | | | few icons and a drop-list. A drop-list of page |
| directions. | | | | numbers lets shoppers jump to a specific page |
| This works great if the category hierarchy is flat, | | | | quickly and easily. |
| it saves space plus you know the UI wont | | | | The reality though is most people will only need to |
| behave unexpectedly if the product list gets long. | | | | step forward or backward one page at a time, or |
| But what if you have sub-categories (e.g. | | | | jump back to the start of the products list (or to |
| Fishing->Hooks, Fishing->Knives, | | | | the end), so why waste space on a series of |
| Fishing->Bait, etc)? Sure you could use a dash | | | | hyperlinked numbers very few shoppers will ever |
| to indicate a sub-category, but the drop-list option | | | | use? |