Design vs Art Blog » Online Shopping

Should A Website Design Show Its Precious Algorithm?

Alexis Brion — Thu, 10 Apr 2008 05:23:29 +0000

One of the great things about web2.0 is the use of social power to create product recommendations. For example, Amazon.com recommends books from similar authors and Last.fm recommends similar artists.

It’s more than magic

Behind those recommendations there are [usually] complicated algorithms looking for recommendations patterns and similarities among users.

In my opinion there are 3 important issues regarding recommendation algorithms:

1. The more users a website has, the better the recommendations.

2. The more users a website has, the higher the calculation price,

3. Should a website show users how the algorithm works?

There are different approaches regarding the last point. Should the algorithm be kept as something precious that other websites should not access? An algorithm could improve its performance if the user gets at least some information about the way it works (see Amazon example). On the other side, letting users know about the algorithm could make the recommendation system hackable and someone could take advantage of that to promote his products.

This issues should be kept in mind at the moment to decide to show information or questions to improve the algorithm:

1. Making questions to users could make the system hackable (negative).

2. Hiding those questions would make a website look smarter and additional usability problems could be avoided (positive).

3. Not making those questions could decrease recommendation quality (negative).

Below there are some examples of recommendation algorithms embedded in websites design.

The Amazon.com approach

Amazon show recommendations everywhere, they do that also as a marketing tool because they know that users love recommendations. Amazon is so good recommending because they have a huge base of customers buying all those products to recommend. They also have a good algorithm but they don’t hide it as a precious secret, note "These recommendations are based on items you own".

This is very important: Amazon is recommending a book because the user bought a "similar" one before. Amazon knows that recommending this way is dangerous and it offers a way to fix it.

Here there is a pop-up window to solve the potential problem. Amazon might be recommending a book because the user bought a similar one, but that one could have been a gift for another person.

Amazon is not only showing a part of how its algorithm works but it also asks users for input to improve results. Here there is another important thing to check: is it OK to ask users questions to improve website recommendation algorithms or should these algorithms be intelligent enough to avoid bothering users?

The Amazon recommendation algorithm in action:

The Last.fm approach

Last.fm, the music recommendation website, adopted a different design solution. At it, users don’t know where the recommendations come from. One might guess but nobody really knows if those artists are there because the user likes other similar artists or because someone is paying to push artists into that list. There is no message like "we recommend Shakira because you like Beyonce".

A valid approach? Last.fm makes a good job recommending music without disturbing users. On the other side this kind of state of user ignorance could be translated into a drop in trust.

Last.fm also has a radio set for each user with special recommendations. Here the recommendation algorithm behavior could be easier guessed, the player has controls to "love" or to ban a song. There is a serious problem here, once you ban a son there is no way back.

StumbleUpon

StumbleUpon is a web browser plugin that let users discover new websites based on recommendations and ratings done by other users and the user himself. StumbleUpon works fine and improves the recommendation quality as the user rates more websites.

Like Last.fm, StumbleUpon also decided not to show the user why a particular website was recommended to him. In this case the algorithm might be too complicated and [I guess] they decided to improve usability taking out additional information. But keep in mind that a lack of information also negatively impacts on usability and trust.

External Resources About Recommendation Systems

- Amazon.com Recommendations: Item-to-Item Collaborative Filtering (PDF file)

- How Netflix Recommendations Works

- Recommender Systems on Wikipedia

Designing a Checkout Process: 8 Rules, 7 Examples

Alexis Brion — Mon, 10 Mar 2008 05:17:14 +0000

Users usually need to be guided in order to finish a task. Designing a process funnel right will keep your visitors in the process and will make them finish the task they want to commit. This tasks could be as important as the Checkout Process, I will focus on this particular one.

Here there are 8 tips to improve usability during a checkout process:

1. Keep it short. If the process has too many steps users will be scared and will probably leave without finishing it.

2. Keep it long. If the process is too short, well, it’s not a process. Sometimes it’s better to divide tasks that could be presented in one page into smaller steps. Keeping every step short gives a sense of simplicity.

3. Progress bar. It is very important for the user to have information about how long the process it will be. Maybe your process is not that long, but if you don’t show that to the user, she might decide that is not worth enough to finish with it.

4. Back button. Give users the possibility to go backwards to check what they filled in the previous step.

5. Unnecessary steps. Give users the chance to skip steps they don’t need (e.g. the Amazon "Gift-Wrap" step).

6. Online help. Use floating windows or other online help to solve problems without taking users out of the process. Remember not to distract users.

7. Next step button. Make this button or link highly visible.

8. Make clear that the process is finished, if not you could have a lot of users contacting your customer service, which could become extremely expensive.

I would like to show you 7 examples I took from different websites. I focus on the information the user should get to make important decisions just before or during a checkout process funnel:

Amazon’s design shows a shopping cart that seems to be rolling through the whole process. Users know what to expect as the steps have clear names, displayed from the beginning.

The Starbucks Store shows very clear steps and the name of each one in a prominent position (e.g. Sign In). Some usability tests show that users might prefer a longer process with smaller steps. Good naming for each step should represent the user mental model, something like what the people are used to when they buy off-line.

Buy.com has a sleek checkout process status information design. I like the red arrow clearly showing the actual step. Steps are clearly indicated and the end is also coherently indicated with an "Order Complete".

Toy"R"Us checkout process is not going to prevent users to finish the purchase but it could create some confusion. Notice that the difference between the step "Addresses" and "Shipping" could be misunderstood and users have to go inside the step and read instructions in order to understand what are they about. Using "payments", the plural form, is not standard and could add even more worries.

The beginning of the checkout process at Petco adds some extra complexity. They require an extra decision to be made by the user: "check out", "Google Checkout" or "International Checkout"… I would avoid so many options.

Google Checkout has a special design. Coming from an online music store I landed at the Google Checkout page, at this point is not possible to delete products or change quantities. The whole information is displayed in a single page, including product to be paid, payment information, shipping address and term of service. Maybe the aim of this was to try to make the process short but in my opinion this design fires back and scare people, making users think that the whole form is too long (this happens to the first-time Google Checkout users).

The PayPal process does not offer any information about how long the process it will be.

At the end, once the user logins, the process is very short (if the user has an account and bought before with Paypal). Unfortunately, before the login the user could not guess how long the process could be. Something like

1. Login, 2. Confirm and Finish

in the login page wold give users the feeling that the process is really short and easy.

Designing a Checkout Process, 4 Examples

Alexis Brion — Wed, 20 Feb 2008 05:25:06 +0000

This is a longer than usual article. I wanted to present you a better usability example, so I decided to publish one long article for Wednesday and Thursday.

Designing a good checkout process is worth, if it is not easy customers might get confuse and leave without buying anything. This is dangerous. Some key points for a good checkout process design:

- A checkout process should be simple

- You should avoid distractions (like flashy advertisement that could drive customers to other pages)

- Checkout button should be highly visible

- Your checkout process is probably a secure one, make the user notice that, e.g. placing a secure connection notice, that gives a feeling of trust

- Shipping and total price should be clear

- The process should be short, potentially only 4-5 steps; coming from the shopping cart the process should include shipping, billing, summary and a confirmation.

I would like to analyze the beginning of the checkout process. Here I present 4 websites with some examples you shouldn’t do. This is not an extended website review but I would like to point out some usability problems I have found.

The NFL Shop is great because it has a lot of products, the shopping cart is unfortunately not well design. Notice here the great amount of information surrounding what is important for the user, it also has too many red flashy buttons that don’t let users notice what is the important stuff. Recommended products are almost falling into the shopping cart, creating even more confusion (maybe a separating line or box would make same order).

The Subside Sports checkout process begins with a huge usability problem, all the important buttons are placed at the bottom of the shopping cart. On the example there is only one item in it, but if you have more, the "Place Order" button will be hidden under the fold. A lot of users might never find that important button.

Big Soccer is performing a horrible example, this guys don’t know about the existence of usability tests (or common sense?). After I added a t-shirt, the shopping cart was shown empty and I got an error message telling me that the t-shirt was not available. I additionally got an error saying that the system was not able to determine the quantity I wanted to order. So, this guys display on the catalog products that they don’t actually have and the user notice it after adding the product to the shopping cart. This what we call bad user experience.

Skate America is also doing something bad. When I added a pair of snickers to the shopping cart, a t-shirt was automatically added for me. How nice, right? Well, actually not. Trust is also something you can communicate through a good design and adding products automatically to the shopping cart is not going in that direction. This is probably a marketing decision but interaction designers and usability experts (if they do have any) should warn about this kind of obscure tactics, trust is something highly desirable in online websites.

Good Bread Crumbs, Bad Bread Crumbs

Alexis Brion — Wed, 06 Feb 2008 05:15:49 +0000

Location bread crumbs tell users where they are, they give orientation and provide links to easily go back to an already visited page. What are location bread crumbs? A good design example I found was at Alexa.com.

Alexa’s approach is a very good one that improves the overall website usability. Nothing weird, they stick to the standard. This bread crumbs are an ordered collection of visited pages, they are separated by ‘ > ‘ and every word is a link. These give orientation to users and a way to go back to others sections. I was surprise seeing that was difficult to find good design examples to put into this article.

Overstock, the online outlet, includes check boxes into the bread crumbs. Horrible solution, please don’t do it.

AllPosters.com, the poster store, developed bread crumbs that look like a windows directory tree. This is a developer structure that not always represent users’ mental model. This option works most of the times, I guess, but I would not use it.

IKEA.com does not have bread crumbs at all. As a user, if you navigate to a product, for example a sofa, you will notice how useful bread crumbs could be.

Designing To Make Users Feel Safer

Alexis Brion — Fri, 01 Feb 2008 05:15:08 +0000

Users are usually worry about the payment information they send through the internet. They fear fraud and they want their personal information to be safe.

"an essential usability task is to make users feel safe…"

Probably you are already implementing ways of safely transfer user information to your website, like Secure Socket Layer (SSL). But an essential usability task is to make users feel safe when sending critical data.

Place a lock icon close to critical forms, big or small but in highly visible location. Another way of encouraging people to give you that valuable information is to place a link to your privacy policy.

PayPal wants to transmit a feeling of safety to its users through a smart design.

Amazon also tries to give a feeling of security from the beginning.

Designing a Product Description Page For Your Customers

Alexis Brion — Wed, 30 Jan 2008 05:00:03 +0000

Each part of a website should be designed to target the biggest group of users. Of course, this includes the product description page, the page that actually shows the product.

"Think what’s important for your users and design for their needs…"

Are your customers interested in details? design? colors available, or price? Think what’s important for your users and design for their needs.

I have two clear examples. The first one, Dell’s product description page is perfectly designed for their target customers. They emphasized on technical features and price. The user experience of buying a Dell laptop is the same as the one of buying a screwdriver.

On the other side, Apple’s product description page was designed thinking on what is possible to do with the computer and design, not giving too many technical details (although they are also available). Apple, like Dell, designed for their customers’ interests. Read here other Design vs Art articles about Online Shopping.

Designing Product Description Pages That Sell

Alexis Brion — Mon, 28 Jan 2008 05:15:12 +0000

Product recommendation is one of the ways of showing how usability practices can increase online sales. Making your users’ life easier will improve the whole shopping experience and will make buying fun!

"Design your product description page including related products…"

Make shopping easy and people will buy more. Design your product description page including related products that customers might like to buy.

A good design example is the Abercrombie & Fitch website, is you are looking for shorts it will show you a shirt and shoes to combine them with on the "Complete The Look" section.

Making this kind of integration takes time as it requires to internally link products, but all this effort could be extremely rewarding. Read other Design vs Art articles about Compulsive Shopping and Product Recommendations.

Usability On Emails, Lufthansa Example

Alexis Brion — Tue, 22 Jan 2008 05:03:35 +0000

Email notifications are an important part of a website, affecting usability and the whole user experience. They should be clear, short and shouldn’t look like spam.

"A better approach would be to put the important information on top…"

Emails are part of the service and users use them for later reference. One example is the messages sent by online ticket reservation systems.

Lufthansa, the airline, sends confirmation emails that are almost worthless, just because a little detail. The message itself, the characters on it, doesn’t deliver important information for the user. On the other side, the important information is on a PDF document that can not be scanned by most email clients.

That means that emails will be very difficult to find once they are archived. The email subject doesn’t help either. A better approach would be to put the important information on top of the email body and subject! See how other airline is doing it better, read the article here.

Better User Experience With Meaningful Errors Messages

Alexis Brion — Fri, 18 Jan 2008 05:39:14 +0000

Giving users meaningful error messages is very important but, maybe, even more important to improve the user experience is to provide a solution to the error that is rising the error message.

"Give always an explanatory error message…"

It is very frustrating for users to get error messages and no way to solve the problem. Give always an explanatory error message and include in your design an obvious way to keep on with the process.

Lufthansa, the airline, gave me the other day an example of poor web design. After choosing a flight I got the option to enter my frequent flyer username and password. The system didn’t recognize my username and asked me to "Create new user profile". Well, there was NO "Create new user profile" link on that page.

Improve usability and user experience with a web design that avoids error messages that tell the users that she was wrong and don’t provide solutions. More Design vs Art articles about error messages.

Using Animation To Show Progress

Alexis Brion — Tue, 15 Jan 2008 05:31:21 +0000

Keeping users waiting for a process to finish is not an easy task on the web. One usability rule is to keep users informed, to give feedback when the system is doing something.

"The best way to display progress is with an animation…"

Users click on some action button, for example to find flights, and the website starts looking for flights. During this process the website should inform users that something is happening behind the scenes.

The best way to display progress is with an animation. Typical examples are the online flight booking websites, they usually connect to airline databases, a process that takes long, so users must wait until they get the offers. Here some examples on how to demonstrate progress, all are animations.