Category — usability

If you own a website of any kind and have ever wanted to allow your users to upload multiple files from a single screen, you have a few choices:

• a java applet
• an active X control
• A Flash app
• multiple file input elements (which is messy and not very efficient)

The following is a much easier way to allow multiple file uploads. Using DOM (The Document object Model), one file upload box can be created making it much easier and more user-friendly.

Installation and usage

Installation is pretty easy. The download includes sample code that you can use on your website.

All files and example of usage can be downloaded Here

The following javascript code will allow you to add keyboard shortcuts to any webpage.

The code

(put this on any page where you want keyboard shortcuts)

(put this in a file called shortcut.js and upload to the same directory as the webpage with the above code). This example will display an alert message when the escape key is pressed.

The following are some more keyboard codes that can be used within the above script (in the if code == X, where X is one of the codes below).

Other Methods

HTML has built-in methods that allow you to add keyboard shortcuts to certain elements on a page. These are also supported by firefox, Internet Explorer, and Opera.

accesskey = Character

The accesskey attribute is used to assign a shortcut key to an HTML element of the following types A, AREA, BUTTON, INPUT, LABEL, LEGEND, and TEXTAREA 1.
When the user performs the appropriate keystroke focus is moved to the element.

If the element is a link the link is followed to the referenced document.
If the element is an input or label the cursor is moved to that element.
Depending on the browser, the keystroke to use the accesskey will differ (CHARACTER is any character in the containing documents charset).

• Internet Explorer use: ALT-CHARACTER
• Mozilla Firefox use: ALT-SHIFT-CHARACTER
• Opera use: SHIFT-ESC then CHARACTER

I found a case study today about how a popular e-commerce site made a few simple design changes and increased its annual revenue by $300 million.

Introduction

The website was a simple design: two fields, two buttons, and a link. The fields were “Email Address” and “Password”. The buttons were “Login” and “Register”. The link was “Forgot Password”. It’s a form most users on the Internet have encountered at one time or another and seems like it should be pretty straight-forward and easy to design.

The problem wasn’t with actual layout or design of the form, but where it appeared in the checkout process. If a customer wanted to checkout, they were presented with a screen to enter in their username/password (previous customers) or register for a new account (a new customer). Customers were forced to create an account.

Assumptions

The original developers of this site thought that repeat customers would be able checkout faster and that first-time purchasers wouldn’t mind the extra steps involved in the payment process.

A usability test was performed and there were many complaints. First-time users didn’t like the idea of being forced to register. Many people also didn’t want to give out details such as a personal email address for fear of getting spam/unwanted messages. Repeat customers were also frustrated. Some couldn’t remember which email address or password they used to complete their order.

The fix

The registration button was completely removed and in it’s place is now a continue button with the following text: “You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.”.

The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000.

Original article here