Saturday, December 20, 2008

Is Your Website Optimized for Holiday Hunters?

Moving along in our series on landing page optimization based on the Marketing Experiments Conversion Sequence, we’re going to look at the variable “m”: Motivation.

To recap, the Conversion Sequence C = 4m + 3v + 2(i-f) - 2a is a heuristic (memory aid) to express conversion as a function of motivation, the clarity of the value proposition (v), the incentive (i), friction or resistance in the mind of the visitor (f) and anxiety about the purchase process (a). It’s not a formula you solve for, so put your calculator away and breathe a sigh of relief.

Marketing Experiments has performed thousands of conversion tests and found the highest performing ecommerce sites address customer motivation — ecommerce site visitors are typically “hunters” or “browsers”:

1. Hunters already know what they want. They want to find the product quickly and easily. Usable site search, navigation menus and filters are essential to convert hunters.
2. Browsers may be contemplating a purchase, or just “window shopping.” Your goal is to get them to click deeper to products with enticing offers like top rated, best sellers, sale items and new arrivals.

We could also add a third customer type, the hunter-browser or “howser”:

3. Howsers customers that are ready to buy from a certain category but unsure what they want/need from within that category. This type of customer may be closer to conversion and more open to suggestive selling and cross-sells (provided they are relevant and not overwhelming). Examples would be someone who’s looking for gifts for an 8 year old boy or redecorating a living room.

I’ve already talked about ideas to please howsers, but want to focus on hunters today.

I have to say, most ecommerce home pages cater more to the browser than the hunter. Think about how much screen real estate is used to display random products, banners, offers, testimonials, flash movies, newsletter sign ups and so on vs. navigation menus and search boxes.

But during the holidays, your site should be especially kind to hunters who know what they want and are closer to conversion than a casual “window shopper.”

In Search of the Search Box

Because the goal of your home page is to send a visitor to a product page (I consider a click deeper into the site a micro-conversion success), your search box is a call-to-action on your site. In a way it’s like a sales associate approaching a customer and asking “What you’re looking for today?”

If a hunter doesn’t want to browse your menus, he or she will look for the search box somewhere near the top of your site. If the color, shape and size of an add to cart button can have a major impact on conversion, certainly the size, placement and visibility of a search box can affect the likeliness it will get used.

Some retailers still use a text link for search (head smack):

And some have no search at all. Imagine walking into the Liz Claiborne store to find no sales people on the floor?

It’s extra-confusing that the newsletter sign up looks like a search box but isn’t, as with Sundance:

Others camouflage the search box with light-on-dark design (Armani Exchange), white-on-white (Victoria’s Secret) or white on textured background (QVC):

Contrast this with can’t miss search boxes like The Container Store and Crutchfield:

Bonus points for search boxes that are long enough to handle long-tail search terms like “star wars clone wars wild space hardcover” (Overstock):

Helping Hunters Browse

Hunters don’t use search exclusively — it depends largely on the hunter as an individual. The hunter may believe that search is always the fastest way to locate a product, or, based on previous experience with terrible site search tools, believe the opposite!

Your site’s navigation labeling and categorization also influences the search/browse decision. Nearly every clothing retailer has menus like this, with just Womens, Mens, etc:

Someone looking for the “hooded scarf” (yes, they make those) would have to browse 4 or 5 menu levels deep to locate it. Much faster to go straight for the search box.

Other sites like Walmart have AJAX flyout menus that are easy to scan for “trigger words”

Office Max is the only site that I’ve seen using an alphabetized flyout menu, but I think it’s very helpful for this business. Sticky Notes and Post It Notes are the same thing, but you would need to choose just one label in a traditional navigation menu.

I’m not saying copy these retailers, but I am saying, take a look at your home page and ask yourself, does your search and navigation support hunters? Is your search box easy to spot and your navigation easy to scan without too many clicks? If you’re an apparel site, you may consider flyout menus. American Eagle Outfitters and REI are great examples:

Also, think about your business and how people shop on your site. For example, visitors to television shopping sites like QVC, ShopNBC and HSN are often hitting the website after watching TV segments. I like how HSN shows the last 12 aired products in the content area. I find it more effective than QVC’s left hand menu, which is easily overlooked:

Labels: ,



Should You Use Large Images on Category Pages?

Yesterday we talked about friction in the buying process — elements on your website that cause frustration, confusion or resistance in the mind of your customer.

One area to be careful of is using imagery on your site without testing them. In a live optimization clinic earlier this year titled Optimizing eCommerce Websites, Dr. Flint McGlaughlin advised “Reduce the size of the real estate and test another image. A strong face as the primary means of greeting visitors gets a strong reaction that polarizes conversion rates. Never put up a face photo that hasn’t been thoroughly tested. It needs to be the right face,” referring to this home page from Nars Cosmetics:

I noticed a similar image on a category page at Arden B:

Personally, I’m not a fan of the big banner taking up valuable real estate, nor do I like the choice of the image:

  • The gloomy, dark background is overpowering, and a bit depressing. Usually print-type model shots are used to evoke emotion, but they’re not always positive emotions. The Web and print are two different worlds.
  • This has to be the most unflattering angle for the top and the model. I can’t even define where her arm is. I get no sense of the style of the shirt, it looks like a bed sheet wrapped around her body. If I wanted to see the front of the shirt, I can’t click the image and see a product page, which is confusing. If I like the shirt, I assume I could view and purchase it on the site.

Only testing would prove whether removing the image would improve conversion:

or

Here’s an enlarged mock-up of what the category page would look like with more products above the fold:

Even without testing to prove results, removing the image is the safer approach — especially since you can’t click on the image to see the product being modeled. If you’ve done testing on category page banner/imaging, we’d love to hear what you discovered.

Labels: ,



Saturday, December 6, 2008

What is the DOM?

The Document Object Model, or DOM, is an interface to allow programs and scripts to update content, structure, and style of documents dynamically. It is platform- and language-neutral. The DOM is not HTML nor is it JavaScript. It is something like the glue that binds them together.

DOM Level 0

The DOM level 0 is a mix of HTML functions that have not been formally specified that allow scripting languages to interact with Microsoft Internet Explorer 3.0 and Netscape Navigator 3.0. This basically means that if a DHTML page is compliant with DOM level 0 it should work reliably even in fairly old browsers.

The base structure of the DOM level 0 is the document master container. This refers to the entire document, and all elements within it. It is referenced as:

document

Because the DOM level 0 is very basic, it only allows the developer to manipulate items on the page that already have some level of interactivity, i.e. forms. It is possible to reference other items in a Web document, but most browsers don't support much interactivity with them at level 0.

Referencing Forms

There are three ways to reference a form control using DOM level 0:

by name or id
This is the easiest way to reference a form control, as you can clearly see in the XHTML which form you a referring to. For example, this form is named "form1":

<form name="form1" id="form1">...</form>

It would be referenced in the DOM as:

document.form1

Then if you wanted to reference an element within the form, you would name it as well:

document.form1.fname

references

<input type="text" name="fname" />

in the above form.

by number
Each form, and element within the form, is given a number in an array, starting with 0. They are numbered starting with the first

element found in the flow of the document. So, to reference the second form on the page:

document.form[1]

Then, to reference the second form element within the second form:

document.form[1].element[1]

a combination of both
It is possible to use any combination of number or name to reference a form or form element within the document:

document.form[0].fname
document.form1.element[3]

Labels: ,



Web Accessibility

ADA Guidelines for the Web cover aspects of Web accessibility including the look and feel of your page, the alternate text of your images, and more. Usable Web sites are sites that work for your readers. Make sure that your pages are accessible and usable and meet ADA and other Guidelines and your site will only be improved.

Does the Accesskey Attribute Improve Accessibility?
The accesskey is an attribute that provides keyboard shortcuts to Web pages. It has long been touted as a way to make Web pages more accessible, but is it really? There are some problems associated with the accesskey that you should be aware of before you start using it. What do the Accessibility Guidelines Mean to Me?
The W3C has released accessibility guidelines for the Web, how will they impact your site

Writing Great Alt Text
Alternative text is an important (and required) attribute on all your images. But it can be tempting to just write simple text or leave the attribute blank. Alt text is used for more than just accessibility, and if you get good at writing alt text, your pages will be more usable.

Accessible HTML
Learn how to make your Web pages more usable for people with disabilities.

Accessibility Definition
Creating Color Blind Friendly Web Pages
Creating a Web page that is accessible to color blind people can make a big difference in how your pages are perceived. As much as 12% of men in the US are color blind, and if your pages don't reflect that, they might not be seeing your pages at all.

Low Vision Web Page Layouts
Because the Web is primarily text, people with low vision often only need to expand the size of your text to be able to read it. However, even with the most flexible layouts, there can be problems when the reader zooms in using the Web browser. So some designers developed the idea of creating alternate style sheets that were written specifically for low vision readers.

Make Your Alternative Text Actually Readable
When including alt text in your images, you should make sure that it actually makes sense in the context of the page, and is not only a description of the image.

How do I set up an access key on my links and form fields?
An FAQ about setting up access keys to various form fields and links on a Web page using the accesskey attribute.

Validating for Accessibility
There is a great HTML validator available for checking your site to see if it is accessible. Learn when and why to use it. An article by your HTML Guide, Jennifer Kyrnin.

What do the Accessibility Guidelines Mean to Me?
The new W3C Guidelines can be tricky and hard to understand. This article will help explain the guidelines so you can apply them to your site.

Accessibility and JavaScript - JavaScript @ About.com
Accessibility on Web pages should encompass more than just the HTML and images. The About.com Guide to JavaScript, Stephen Chapman, has an informative 3-page article on how to make your JavaScript as accessible as your HTML.

What Javascript Cannot Do -JavaScript @ About.com
While JavaScript is a powerful language, there are things that it can't do.

Making Websites 508 Accessible for the Deaf - Deafness @ About.com
Captioning is an easy way to make video accessible to deaf people. And the About Deafness Guide has a great article on how to do it quickly and easily with several different tools.

Writing Good Alt Text - 456 Berea Street
When you're working on accessibility, alt text is something you should be aware of. But as Roger Johansson points out on 456 Berea St it's one of the most commonly misused attribute.

Evaluating Web Sites for Accessibility with Firefox
Using a Firefox extension you can validate pages for accessibility right within your Web browser.

Building a Website for Analytics
Understanding your Web site analytics can be critical to business success. If you don't know what they're clicking on or when, you can't maximize your site effectiveness.

How do things look to colorblind people?
An interesting look at how a color blind person sees two different images.

Seven Screen Reader Usability Tips
While it's important to be accessible, that's not all there is to making a site useful for people using screen readers. These tips will help you ensure that your accessible page is also usable.
via :webdesign.about.com

Labels: ,



Differences Between XHTML and HTML

Even though this is a CSS reference, we should spend some time talking about HTML and XHTML, because your choice of markup language will affect how CSS is applied in some instances. Moreover, in order to understand the variations in the way CSS is applied to HTML and XHTML, you need to grasp the fundamental differences between the two markup languages.

The most important difference between the two markup languages is that HyperText Markup Language, or HTML, is an application of SGML (Standard Generalized Markup Language),1 and allows an author to omit certain tags and use attribute minimization.2 The Extensible HyperText Markup Language, or XHTML, is an application of XML (Extensible Markup Language).3 It doesn’t permit the omission of any tags or the use of attribute minimization. However, it provides a shorthand notation for empty elements—for example, we could use
instead of

—which HTML does not. A conforming XML document must be well formed, which, among other things, means that there must be an end tag for every start tag, and that nested tags must be closed in the right order.4When an XML parser encounters an error relating to the document’s well-formedness, it must abort, whereas an HTML parser is expected to attempt to recover and continue.

There are three areas in which the differences between HTML and XHTML affect our use of CSS:

  • case sensitivity
  • optional tags
  • properties for the root element

Note, though, that these differences apply only when an XHTML document is served as an application of XML; that is, with a MIME type of application/xhtml+xml, application/xml, or text/xml. An XHTML document served with a MIME type of text/html must be parsed and interpreted as HTML, so the HTML rules apply in this case. A style sheet written for an XHTML document being served with a MIME type of text/html may not work as intended if the document is then served with a MIME type of application/xhtml+xml. For more information about MIME types, make sure to read MIME Types.

This can be especially important when you’re serving XHTML documents as text/html. Unless you’re aware of the differences, you may create style sheets that won’t work as intended if the document’s served as real XHTML.

Where the terms “XHTML” and “XHTML document” appear in the remainder of this section, they refer to XHTML markup served with an XML MIME type. XHTML markup served as text/html is an HTML document as far as browsers are concerned.

Labels: ,



Thursday, December 4, 2008

HTML Language Codes

ISO 639-1 Standard Language Codes

Use these language codes in your lang attribute on the html tag to define the language of your HTML or XHTML document.

Name of Language ISO 639-1 Code
Afaraa
Abkhazianab
Afrikaansaf
Akanak
Albaniansq
Amharicam
Arabicar
Aragonesean
Armenianhy
Assameseas
Avaricav
Avestanae
Aymaraay
Azerbaijaniaz
Bashkirba
Bambarabm
Basqueeu
Belarusianbe
Bengalibn
Biharibh
Bislamabi
Tibetanbo
Bosnianbs
Bretonbr
Bulgarianbg
Burmesemy
Catalan; Valencianca
Czechcs
Chamorroch
Chechence
Chinesezh
Church Slavic; Old Slavonic; Church Slavonic; Old Bulgarian; Old Church Slavoniccu
Chuvashcv
Cornishkw
Corsicanco
Creecr
Welshcy
Czechcs
Danishda
Germande
Divehi; Dhivehi; Maldiviandv
Dutch; Flemishnl
Dzongkhadz
Greek, Modern (1453-)el
Englishen
Esperantoeo
Estonianet
Basqueeu
Eweee
Faroesefo
Persianfa
Fijianfj
Finnishfi
Frenchfr
Western Frisianfy
Fulahff
Georgianka
Germande
Gaelic; Scottish Gaelicgd
Irishga
Galiciangl
Manxgv
Greek, Modern (1453-)el
Guaranign
Gujaratigu
Haitian; Haitian Creoleht
Hausaha
Hebrewhe
Hererohz
Hindihi
Hiri Motuho
Croatianhr
Hungarianhu
Armenianhy
Igboig
Icelandicis
Idoio
Sichuan Yiii
Inuktitutiu
Interlingueie
Interlingua (International Auxiliary Language Association)ia
Indonesianid
Inupiaqik
Icelandicis
Italianit
Javanesejv
Japaneseja
Kalaallisut; Greenlandickl
Kannadakn
Kashmiriks
Georgianka
Kanurikr
Kazakhkk
Central Khmerkm
Kikuyu; Gikuyuki
Kinyarwandarw
Kirghiz; Kyrgyzky
Komikv
Kongokg
Koreanko
Kuanyama; Kwanyamakj
Kurdishku
Laolo
Latinla
Latvianlv
Limburgan; Limburger; Limburgishli
Lingalaln
Lithuanianlt
Luxembourgish; Letzeburgeschlb
Luba-Katangalu
Gandalg
Macedonianmk
Marshallesemh
Malayalamml
Maorimi
Marathimr
Malayms
Macedonianmk
Malagasymg
Maltesemt
Moldavianmo
Mongolianmn
Maorimi
Malayms
Burmesemy
Nauruna
Navajo; Navahonv
Ndebele, South; South Ndebelenr
Ndebele, North; North Ndebelend
Ndongang
Nepaline
Dutch; Flemishnl
Norwegian Nynorsk; Nynorsk, Norwegiannn
Bokmål, Norwegian; Norwegian Bokmålnb
Norwegianno
Chichewa; Chewa; Nyanjany
Occitan (post 1500); Provençaloc
Ojibwaoj
Oriyaor
Oromoom
Ossetian; Osseticos
Panjabi; Punjabipa
Persianfa
Palipi
Polishpl
Portuguesept
Pushtops
Quechuaqu
Romanshrm
Romanianro
Romanianro
Rundirn
Russianru
Sangosg
Sanskritsa
Serbiansr
Croatianhr
Sinhala; Sinhalesesi
Slovaksk
Slovaksk
Sloveniansl
Northern Samise
Samoansm
Shonasn
Sindhisd
Somaliso
Sotho, Southernst
Spanish; Castilianes
Albaniansq
Sardiniansc
Serbiansr
Swatiss
Sundanesesu
Swahilisw
Swedishsv
Tahitianty
Tamilta
Tatartt
Telugute
Tajiktg
Tagalogtl
Thaith
Tibetanbo
Tigrinyati
Tonga (Tonga Islands)to
Tswanatn
Tsongats
Turkmentk
Turkishtr
Twitw
Uighur; Uyghurug
Ukrainianuk
Urduur
Uzbekuz
Vendave
Vietnamesevi
Volapükvo
Welshcy
Walloonwa
Wolofwo
Xhosaxh
Yiddishyi
Yorubayo
Zhuang; Chuangza
Chinesezh
Zuluzu

Labels: