yongkang2216
03-28-2011, 05:10 AM
I’m quite often asked what are excellent books to study for ecommerce. If you have been trekking with us to get a while,Office 2010 Home And Business 64bit (http://www.office2010-key.ca/), you already know I occasionally evaluate guides I obtain from publishers – so long as I are convinced they would be helpful for ecommerce buffs. I obtain no other compensation than to help keep the review duplicate of the guide.
In lieu of writing a “this guide is remarkable on the grounds that this this and this” examine – I want to give Get Elastic viewers a slice of the book’s material. Sometimes I post a segment verbatim from your book (with publisher permission, needless to say), as well as other instances I take a concept through the guide and flesh out a post. In the present day, I get the latter strategy.
The hottest title I received is Developing Interfaces by Jenifer Tidwell. While created for web site developers, website designers and usability specialists, it aids for each ecommerce experienced to understand these patterns. Any web site project will entail a lot of of those patterns, plus a conclusion needs to be crafted which patterns to make use of and which to depart on the table. This guide assists you figure out what to use and when.
Because enhancing sort design and style may help you maximize conversion, I’ve taken the 11 patterns for accepting user input mentioned in Chapter 8 and have added some of my own examples from ecommerce sites.
Type Style: 11 Patterns For Accepting User Input
Forgiving Format
Forgiving format allows user to enter data that may have a variety of valid formats and syntax. Common examples are allowing a customer to log in with an email address or user name, or to search by keyword or catalog ID.
This pattern is especially helpful for inputs that are capitalized or hyphenated, or frequently misspelled.
Most importantly for ecommerce, this should be applied to credit card information,Windows 7 Professional Activation (http://www.windows-7-key.us/), telephone numbers and zippostal codes in checkout. Allow customers to enter them with or without spaces, with mixed case, etc. This requires smart programming that considers all the ways data can be entered, and how to properly interpret them.
Structured Format
Instead of one text field, this pattern uses a set of text fields that reflect the structure for the requested data. This works best when you require input in a specific format, which is well-defined and familiar to the user. An example is breaking up a telephone field into 3 chunks for the area code, the prefix and suffix.
Keep in mind that telephone inputs vary across countries – you may consider forgiving format if you sell internationally through one site.
Another application is for date fields that specify format, such as YYYY MM DD or DD MM YY.
Structured format is also helpful for software registration key input. Chunked keys and fields are easier than long strings of characters to enter without error and evaluate.
Fill-In-The-Blanks
Allowing the user to “fill in the blanks” with fields arranged in the form of a sentence or phrase can, in some cases, have a tremendous impact on conversion. Testing by Vast.com showed this format converted 25-40% better than the old school form:
Ebay’s advanced search also uses a fill-in-the-blanks approach.
Use this pattern when you can verbally describe the actions taken in an active voice sentence or phrase. Note that this is a difficult pattern to “localize” without giving thought to culture’s influence around the order on the fields. For example,Office 2010 Professional Activation (http://www.office2010-key.ca/), in Japan you may want to ask for the last name before the first, or you may need to arrange fields for grammatical reasons.
Input Hints
Input hints elaborate on what is required from a field and are placed beside or below the input box. This will help clarify ambiguous fields or fields you commonly find users making errors on.
Jenifer Tidwell recommends your input hint be 2 points smaller than your label font, and be as concise as possible.
Keep in mind input guidance can be overlooked, and are not a substitute for proper labelling.
Input Prompt
This pattern pre-fills a text field or drop down menu and tells the user what to do or type. This solves the danger that the user will overlook input assistance – it’s put right where their eyes are focused.
In some cases, like the Apple Store, the prompt replaces the field label.
A mistake Apple originally developed was the input prompt would disappear as soon as the user started typing, and not re-appear if the field was cleared to “start over.” This has since been corrected about the Apple Store, but if you use this pattern, make sure you don’t repeat the mistake.
Password Strength Meter
You’ve likely experienced a dynamic “password strength” meter when signing up for an email account or with a social network. Sites that require or highly recommend strong passwords should provide this real-time feedback, rather than letting the user hit “submit,” reloading the page and then asking for a stronger password.
Twitter is a very good example of password strength feedback. It uses color bars and strength indicators that range from too short to weak, fantastic, strong and very strong, that appear as the user is typing.
Autocompletion
I’ve composed about the virtues of autocompletion on Get Elastic before, (especially the rich kind, the pattern that suggests possible search terms as a user types. You should be familiar with this since the major search engines use this. It assists prevent typos and can help users hone in on more specific terms for better search success the first time.
Autocompletion is even more valuable on mobile devices, where input is more tedious.
Dropdown Chooser
Dropdown menus need no explanation, but note that they are most appropriate for fields where input can only be one in a set of options. For example, color, size, OS or shipping option.
Also preserve in mind, when only one option exists in a dropdown (due to other options selling out), consider a format where the user can see the single option without a menu. Or, if there are a small number of options, consider showing options as buttons that gray out when they become unavailable.
List Builder
The list builder pattern allows a user to configure something using “source” and “destination” lists. They are useful when users are required to select subsets of data. They may use “Add” and “Remove” buttons, or have a drag-and-drop functionality.
List builders are less common on ecommerce sites than in software applications, but you may find some using this functionality in product configurators,Microsoft Office Enterprise 2007 Product Key (http://www.office2007-key.in/), for example. You may also find them in bundling situations, where a accessories may be added to a product.
Good Defaults
Prefilled form fields with the “best guesses” at values the user wants are considered very good defaults. A flight finder on Orbitz or Priceline that pre-selects the current date and economy travel is an example. Another is using geolocation to prefill a user’s country in a checkout kind.
Keep in mind that an incorrect guess could lead to an error, as usability experts have found users’ eyes jump to empty fields (and they don’t browse instructions carefully). This is best employed when you’re absolutely sure on the correct input – such as filling in city and country based on zip code.
Also, avoid defaulting sensitive information such as passwords, gender, age etc, and don’t pre-check email opt-ins!
Same-Page Error Messages
When errors occur, error messages should appear on the same page of the kind, rather than in modal dialog boxes.
The biggest problem with modal dialog boxes is the instructions disappear when you return to the type!
Great error handling places a message at the top for the page and proximal to the fields with the errors. Tidwell recommends to make the error messaging short, but detailed enough to explain the problem. Use ordinary language, not “computerese” ExamplesL “Is that a letter in your IP code?” vs. “Numeric validation error.” And,Windows 7 Enterprise 64 Bit (http://www.key-windows-7.co.uk/), “Sorry, but something went wrong! Please click GO again” vs. “Javascript Error 593″ or “This type contains no data.”
I say this also goes for ecommerce product pages – make sure you’re making it very clear what the customer did wrong and where. For example, when a customer fails to select a size, use a pop-up callout pointing to the field.
Even better, prevent the customer from submitting an erroneous sort by disabling the checkout button until all is configured, and reporting the error when the user hovers over the button.
In checkout forms, use inline validation to give instant feedback before the user hits submit.
Armed with this information, where can you improve type design and style patterns on your ecommerce site?
If you’re interested in full guide reviews of Designing Interfaces, you can find them on the O’Reilly website. This entry was posted on Monday, February 21st, 2011 at 1:00 am and is filed under Web site Design and Usability. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and depart a response. Pinging is currently not allowed.
In lieu of writing a “this guide is remarkable on the grounds that this this and this” examine – I want to give Get Elastic viewers a slice of the book’s material. Sometimes I post a segment verbatim from your book (with publisher permission, needless to say), as well as other instances I take a concept through the guide and flesh out a post. In the present day, I get the latter strategy.
The hottest title I received is Developing Interfaces by Jenifer Tidwell. While created for web site developers, website designers and usability specialists, it aids for each ecommerce experienced to understand these patterns. Any web site project will entail a lot of of those patterns, plus a conclusion needs to be crafted which patterns to make use of and which to depart on the table. This guide assists you figure out what to use and when.
Because enhancing sort design and style may help you maximize conversion, I’ve taken the 11 patterns for accepting user input mentioned in Chapter 8 and have added some of my own examples from ecommerce sites.
Type Style: 11 Patterns For Accepting User Input
Forgiving Format
Forgiving format allows user to enter data that may have a variety of valid formats and syntax. Common examples are allowing a customer to log in with an email address or user name, or to search by keyword or catalog ID.
This pattern is especially helpful for inputs that are capitalized or hyphenated, or frequently misspelled.
Most importantly for ecommerce, this should be applied to credit card information,Windows 7 Professional Activation (http://www.windows-7-key.us/), telephone numbers and zippostal codes in checkout. Allow customers to enter them with or without spaces, with mixed case, etc. This requires smart programming that considers all the ways data can be entered, and how to properly interpret them.
Structured Format
Instead of one text field, this pattern uses a set of text fields that reflect the structure for the requested data. This works best when you require input in a specific format, which is well-defined and familiar to the user. An example is breaking up a telephone field into 3 chunks for the area code, the prefix and suffix.
Keep in mind that telephone inputs vary across countries – you may consider forgiving format if you sell internationally through one site.
Another application is for date fields that specify format, such as YYYY MM DD or DD MM YY.
Structured format is also helpful for software registration key input. Chunked keys and fields are easier than long strings of characters to enter without error and evaluate.
Fill-In-The-Blanks
Allowing the user to “fill in the blanks” with fields arranged in the form of a sentence or phrase can, in some cases, have a tremendous impact on conversion. Testing by Vast.com showed this format converted 25-40% better than the old school form:
Ebay’s advanced search also uses a fill-in-the-blanks approach.
Use this pattern when you can verbally describe the actions taken in an active voice sentence or phrase. Note that this is a difficult pattern to “localize” without giving thought to culture’s influence around the order on the fields. For example,Office 2010 Professional Activation (http://www.office2010-key.ca/), in Japan you may want to ask for the last name before the first, or you may need to arrange fields for grammatical reasons.
Input Hints
Input hints elaborate on what is required from a field and are placed beside or below the input box. This will help clarify ambiguous fields or fields you commonly find users making errors on.
Jenifer Tidwell recommends your input hint be 2 points smaller than your label font, and be as concise as possible.
Keep in mind input guidance can be overlooked, and are not a substitute for proper labelling.
Input Prompt
This pattern pre-fills a text field or drop down menu and tells the user what to do or type. This solves the danger that the user will overlook input assistance – it’s put right where their eyes are focused.
In some cases, like the Apple Store, the prompt replaces the field label.
A mistake Apple originally developed was the input prompt would disappear as soon as the user started typing, and not re-appear if the field was cleared to “start over.” This has since been corrected about the Apple Store, but if you use this pattern, make sure you don’t repeat the mistake.
Password Strength Meter
You’ve likely experienced a dynamic “password strength” meter when signing up for an email account or with a social network. Sites that require or highly recommend strong passwords should provide this real-time feedback, rather than letting the user hit “submit,” reloading the page and then asking for a stronger password.
Twitter is a very good example of password strength feedback. It uses color bars and strength indicators that range from too short to weak, fantastic, strong and very strong, that appear as the user is typing.
Autocompletion
I’ve composed about the virtues of autocompletion on Get Elastic before, (especially the rich kind, the pattern that suggests possible search terms as a user types. You should be familiar with this since the major search engines use this. It assists prevent typos and can help users hone in on more specific terms for better search success the first time.
Autocompletion is even more valuable on mobile devices, where input is more tedious.
Dropdown Chooser
Dropdown menus need no explanation, but note that they are most appropriate for fields where input can only be one in a set of options. For example, color, size, OS or shipping option.
Also preserve in mind, when only one option exists in a dropdown (due to other options selling out), consider a format where the user can see the single option without a menu. Or, if there are a small number of options, consider showing options as buttons that gray out when they become unavailable.
List Builder
The list builder pattern allows a user to configure something using “source” and “destination” lists. They are useful when users are required to select subsets of data. They may use “Add” and “Remove” buttons, or have a drag-and-drop functionality.
List builders are less common on ecommerce sites than in software applications, but you may find some using this functionality in product configurators,Microsoft Office Enterprise 2007 Product Key (http://www.office2007-key.in/), for example. You may also find them in bundling situations, where a accessories may be added to a product.
Good Defaults
Prefilled form fields with the “best guesses” at values the user wants are considered very good defaults. A flight finder on Orbitz or Priceline that pre-selects the current date and economy travel is an example. Another is using geolocation to prefill a user’s country in a checkout kind.
Keep in mind that an incorrect guess could lead to an error, as usability experts have found users’ eyes jump to empty fields (and they don’t browse instructions carefully). This is best employed when you’re absolutely sure on the correct input – such as filling in city and country based on zip code.
Also, avoid defaulting sensitive information such as passwords, gender, age etc, and don’t pre-check email opt-ins!
Same-Page Error Messages
When errors occur, error messages should appear on the same page of the kind, rather than in modal dialog boxes.
The biggest problem with modal dialog boxes is the instructions disappear when you return to the type!
Great error handling places a message at the top for the page and proximal to the fields with the errors. Tidwell recommends to make the error messaging short, but detailed enough to explain the problem. Use ordinary language, not “computerese” ExamplesL “Is that a letter in your IP code?” vs. “Numeric validation error.” And,Windows 7 Enterprise 64 Bit (http://www.key-windows-7.co.uk/), “Sorry, but something went wrong! Please click GO again” vs. “Javascript Error 593″ or “This type contains no data.”
I say this also goes for ecommerce product pages – make sure you’re making it very clear what the customer did wrong and where. For example, when a customer fails to select a size, use a pop-up callout pointing to the field.
Even better, prevent the customer from submitting an erroneous sort by disabling the checkout button until all is configured, and reporting the error when the user hovers over the button.
In checkout forms, use inline validation to give instant feedback before the user hits submit.
Armed with this information, where can you improve type design and style patterns on your ecommerce site?
If you’re interested in full guide reviews of Designing Interfaces, you can find them on the O’Reilly website. This entry was posted on Monday, February 21st, 2011 at 1:00 am and is filed under Web site Design and Usability. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and depart a response. Pinging is currently not allowed.