Persuasive web design

December 9, 2010

Principles and effects

– Opt-out works better than opt-in
> Make the default option the option that you want the user to take.
Read more:  here and see Dan Ariely’s TED.com video about decisions.

– Adding unattractive options makes other options more attractive
> Goldilocks pricing effect (also here)

Limit choice

> 10 or more makes deciding harder. Maximum 7. Depends on content type.
> Limit the number of choices to 3 or 4
Related to: Goldilocks effect and abundance of choice affects decision making

– Order effect

> Show products from most to least expensive.
Read more: here

Social validation/proof

> Add testimonials and reviews, ratings (or tweets, likes, diggs)
> Reviews work better if users can relate to the reviewer (e.g. mention age, location or occupation)
> Expert opinions work well
Read more: here and Neuro Web Design book

Give the preffered option prominence

> Promote the product (e.g. on homepage)
> Highlight the product that needs promoting (using background color, font size, ‘popular’ stickers, 3D jump-out effect) to make it stick out when presented near others
Read more: Goldilocks effect

Progress bars

Your profile is x% complete. LinkedIn Profile completeness  (empty space)

slide-6-728

LinkedIn progress bars use completeness’ principle

Commitment

I like to do what I say / said I was going to

Awards/levels/points/gamification

Feedback loop: e.g. instant gratification of seeing movie recommendations while you click movies you like

Unlocking/revealing/

> Covering your personal Skype profile photograph with an (annoying) ‘90% complete’ bar

Curiosity

Dashboards visualised where you can be: show empty slots/gray checkmarks , ( or shocking image?)

Empty slot example: Facebook “Your comment here” empty input field with your profile picture under every post.

 

Scarcity, time-limit

 

Visual imagery

Sex(y)

https://www.nngroup.com/articles/animation-usability/

Download/read this..for free!

Merchandising: support up-selling, cross-selling, and impulse buying.

> Provide ‘others liked’, ‘similar products’ on product detail pages
> Seduce at the right time

Read more: here (!) here , online impulse shopping
Examples: Amazon.com

Seduce but don’t deceive
> Create trust and confidence, demonstrate value, and guide the customer through the decision-making process
> Don’t push, over-manipulate
> Don’t be deceiving (see dark patterns)
>Avoid situations where users may feel cheated
Read more: here

To be continued..

How to implement in your project

How can we leverage  {social proof}  to get …. (goal)  – http://getmentalnotes.com/

Great presentations

http://www.slideshare.net/stephenpa/the-art-science-of-seductive-interactions ++

General usability still counts!

People don’t read on the web, they scan

Keep texts relevant, short and bulleted to increase the chance they will be read

Presentations

http://www.slideshare.net/stephenpa/the-art-science-of-seductive-interactions

Books

http://getmentalnotes.com/resources

Related

http://www.uie.com/articles/chak_interview/

http://www.uxmatters.com/mt/archives/2009/01/beyond-usability-designing-web-sites-for-persuasion-emotion-and-trust.php

Expert: http://www.schrijvenvoorinternet.nl/

Advertisements

E-commerce research resources

January 25, 2010

The following are valuable resources of:

  • Expert usability review/evaluations
  • Best practice guidelines from reliable sources
  • Applicable research reports (read this caution about applicability of usability research – in Dutch)
  • Multivariate A/B-tesing, plus dedicated and reknown books
  • Conversion stats of old versus new designs (normalised)
  • Research papers

Case studies and expert opinion

http://www.clickz.com TIP recommended by 3 experts (also good for stats)
–    http://www.clickz.com/showPage.html?page=3622853
– http://www.clickz.com/showPage.html?page=3622794
The first two pages provide some interesting background assumptions
http://www.clickz.com/showPage.html?page=experts/crm/traffic
Effective Cross-Selling
@ http://www.clickz.com/showPage.html?page=3610171
Learning from best practice of different industries
@ http://www.clickz.com/showPage.html?page=3616881

http://www.marketingsherpa.com/library.html (better for articles and case studies, registration needed for some)
http://www.marketingexperiments.com/improving-website-conversion/ (free)
http://www.emarketer.com

http://www.iconocast.com/ – it’s hard to believe looking at the design, but this large Health and Science articles archive also includes translated newspaper articles, is popular and much cited. Use their search engine ; (links to more resources)
E-commerce section in NYtimes (updated every Monday)
http://www.knowthis.com/internet.htm
http://www.ecommerce-guide.com

http://blog.kissmetrics.com

Not e-commerce specific

https://www.frankwatching.com/?s=uitklappen

Popular research companies & reports

Econsultancy ++

http://baymard.com +      ($150)  (mobile report = $300)    (also many free articles)

Nielsen Norman ($999)

GFK

 

Popular blogs

http://www.getelastic.com (e-commerce blog with articles on e.g. product comparison design, conversion) [Tip+++]
http://www.excitingcommerce.com/
http://www.ecommerce-blog.org/

Design patterns

http://www.welie.com/patterns/showPattern.php?patternID=commerce
More Pattern libraries

E-commerce (CMS) package vendors
Mambofive and Intershop are popular e-commerce packages.  Bol.com use InterShop. Also: ZenCart, Magento cart

Academic publications

http://portal.acm.org
http://tc.eserver.org/dir/Design/Web-Design/E-Commerce  [TIP! ]   (papers,blog entries)
STC
Journal of Electronic Commerce, Journal of Interactive Marketing

Research bureaus

Forrester research (a lot of focus on quantitive, mainly US research)
JupiterResearch (now merged with Forrester) (focus on eCommerce research resports; see below) [TIP! ]
http://www.e-consultancy.com/research/ ($299 for single-licence subscription) TIP!
37signals.com reports
http://www.adaptivepath.com/publications/ (Reports incl. registration&login, but no directly related to e-commerce)
Nielsen/Norman
http://www.deyalexander.com/resources/uxd/e-commerce.html (links to good articles on the subject)  – TIPErnst&Young
Gartner
Baker & McKenzie  (focus too much on legal issues)
Netherlands: 2C/Mediametrix, Jungle Minds

Articles and white papers

White papers which have been praised by experts or are frequently mentioned. (ToDOo: distribute among (new) blog posts)

From Jared Spool (UIE.com) :
Product presentation pages design @
http://www.uie.com/publications/whitepapers/PogoSticking-09-20-2005.pdf
Where e-commerce sites can fail @
http://www.uie.com/articles/customer_sieve/

How to stop shopping cart abandonment @
http://www.marketingexperimentsblog.com/research-topics/order-process/how-do-you-stop-shopping-cart-abandonment-09-06.php

Also popular:
http://www.ecommerceoptimization.com/articles/ecommerce-shopping-cart-usability-21-best-practices/

More articles:

http://www.getelastic.com/tag/recovering-shopping-carts/
Google it!

Expert opinion and good articles (weblogs, essays)

http://www.grokdotcom.com/2008/01/28/semmy-awards/   (links to a few good articles)  Tip+

Web Usability Illustrated: Breathing Easier With Your Usable e-Commerce Site
http://www.humanfactors.com/downloads/ecusability.asp

E-commerce: 6 of the Most Successful Internet Business Models (article)
http://www.discoveryarticles.com/articles/130666/1/E-commerce-6-of-the-Most-Successful-Internet-Business-Models/Page1.html

E-commerce and Usability

http://www.wdvl.com/Authoring/Design/Basics/ecom1.html

More articles (and the list goes on…)

http://www.designofsites.com/resources/index.htm
http://usableweb.com/topics/000481-0-0.html (with focus on usability)
http://www.guuui.com/browse.php?cid=177  (links repository to articles, incl. e-commerce search)
http://libraries.mit.edu/guides/subjects/ecommerce/   (from MIT ; links to sources of news, research publications)
http://techrepublic.com.com/  (targetted at IT managers, search for e-commerce)

Research/credibility tools

http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.59.6233 (cross-reference tool to check how many times a certain publication has been cited)

Conversion optimisation tips & best practice guidelines

More
http://baymard.com/top-resources

Product comparison

January 19, 2010

What is best practice for presenting products: list view, grids, tables .. ?

Product list view

Check out any e-commerce with faceted navigation for View by List or Rows.

Product Grids (blocks, tiles)

For inspiration on Grid, Block or Boxes view, check out: Amazon, Nordstrom, LandsEnd, Magento e-commerce platform and many others

http://www.nicolasleroy.fr/shopping-engines-interaction-design-patterns/product/

Code (inspiration)

http://robmaurizi.com/blog/2007/01/a-table-less-product-grid/

Product comparison tables or product matrix

Select and compare

Articles, research

http://www.getelastic.com/ecommerce-usability-product-comparison-matrix/
http://www.getelastic.com/23-comparison-matrix-design-tips/

Research: Product Comparison and Pricing Tables  (Nick Finck)
http://www.nickfinck.com/blog/entry/research_product_comparison_and_pricing_tables/

Producten vergelijken is moeilijk
http://www.2c.nl/nl/over_2c/nieuwsbrief/2010-02/item4.php

Galleries, patterns, examples

http://www.welie.com/patterns/showPattern.php?patternID=comparison [done]
70+ examples (gallery)

http://konigi.com/interface/tags/comparison-tables

http://sixrevisions.com/design-showcase-inspiration/70-examples-of-product-comparison-tables-in-web-design/

http://ui-patterns.com/collections/pricing-tables/entry/4175

25 clear and beautiful
http://www.webdesigndev.com/inspiration/25-clear-and-beautiful-comparison-tables

http://www.smashingmagazine.com/2008/10/13/pricing-tables-showcase-examples-and-best-practices/

Innovation and novelty


How important is performance for conversion

January 8, 2010

Does performance matter? The UX principle is under 10 seconds.


Above that is supposed to be psychologically intolerable: users get impatient, dissatisfied or worse: they leave.But what about narrowband users, those who are not on broadband but are using dial-up or mobile phones? Aren’t they used to waiting anyway? In which cases may the 10-second rule be broken?

Long waiting times affect customer satisfaction and conversion: customers lose their patience, misinterpret long waiting times as bad service and quick browsing or ordering becomes near to impossible.
On sales and e-commerce sites, users trying to order will call instead or churn to competitors.

Note as mobile speeds are ever increasing (4G), performance may become less of an issue, and websites could trend more towards ‘big design’ with large images, many embedded fonts and videos, etc.

In this series of articles will research and discuss:

When is performance critical for success and conversion?

(evaluating your audience, their system configuration, goals and shopping behaviour in relation to your business)

How to measure performance of your site?

(Pingdom (not free anymore), Google PageSpeed, YSlow, Google Chrome, Firebug, Online speed performance services)

How to improve performance of your website or pages

(YSlow, simplicity is better: less is more

https://speakerdeck.com/lara/design-for-performance   TIP

How does mobile strategy affect speed performance?

Source: BI intelligence

Research

With Bing  ‘”User engagement dropped significantly even with only a 1 second delay. A 2 second delay doubled all the bad metrics.” (by LukeW)

More sources/research @ 

http://sixrevisions.com/usabilityaccessibility/10-usability-tips-based-on-research-studies/ 

Worth a read
http://storecrowd.com/blog/pageload-time/

http://programming.oreilly.com/2014/01/web-performance-is-user-experience.html

Read but didn’t like:  http://www.elasticpath.com/webinars/performance/ Every second counts: how website performance impacts shopper behaviour  by Elastic Path


Conversion and optimization: case studies

January 5, 2010

Convince your boss with results from actual A/B split and MVT tests.

How to find real-life examples of A/B tests.

Top 5 most frequent A/B tested sites

Amazon      ++  (according to source 1 @ 11:30, everything is analytics based, e.g. search bar size)
Microsoft

Dell 
Sears, Disney, Skype, Monster, Amazon.com, H&R block, T-Mobile, IBM, Citi, MS Live Search Maps, esurance, Disney  (here)

No. 2 online retailer Office Depot   (Forrester 2006)

Check out the clients/references/testimonials of big players on the testing market.

Qualatitive

On the other scale, compared to Amazon e.g. eBay (great filtering, but too many links on category pages, also poor product page) overdose the “listening to the user” research (source @ 19mins). The best is mid-way.

Real-life conversion case studies

http://whichtestwon.com
http://www.abtests.com/
http://visualwebsiteoptimizer.com/ideafox.php (search engine that searches http://www.avangate.com/clients/case-studies/ , and many more…) TIP
[my Rollyo/GSE search engine here]
http://visualwebsiteoptimizer.com/split-testing-blog/how-replacedirect-used-ab-testing-to-reduce-cart-abandonment-by-25/  Most important, they added a product overview and removed redundancy
http://www.youshouldtestthat.com/ http://www.pitstopmedia.com/sem/
Google: (keywords, e.g. navigation removed check-out) (case OR) found OR results converted OR conversion OR optimized OR optimization (OR “A/B” OR MVT)
http://www.goodui.org/evidence/

Optimization resources

(websites and blogs dedicated to testing and optimization):

  1. http://www.elasticpath.com/
  2. www.getelastic.com
  3. http://www.paulrouke.co.uk/
  4. http://www.marketingexperiments.com/blog/category/research-topics/landing-page-optimization-research-topics  (Marketing Experiments blog, a bit harder to find actual results) +
  5. http://www.grokdotcom.com/ +-
  6. http://www.widerfunnel.com
  7. testingblog.widemile.com/
  8. http://www.marketingsherpa.com/ have some of the best marketing data
  9. http://websiteoptimizer.blogspot.com/
  10. http://www.uxbooth.com/ +
  11. http://www.conversationrate.com/
  12. unbounce.com  (NV)
  13. http://blog.clicktale.com/
  14. http://conversionxl.com/

More @ http://www.seoptimise.com/blog/2010/07/30-multivariate-ab-split-testing-tools-tutorials-resources.html (see ‘Case studies’)

Directory of more web resources

www.conversionrateguide.com/conversion-rate-optimization-resources/

Secondary resources

…but still worth checking now and again

http://www.checkoutoptimization.com/

Best practices

http://econsultancy.com/uk/blog/tags/design ++
– http://econsultancy.com/nl/blog/63462-ecommerce-product-pages-where-to-place-30-elements-and-why

http://www.widerfunnel.com/conversion-rate-optimization/31-conversion-optimization-tips-and-counting

Surprising results

http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/

Books

http://www.amazon.com/Landing-Page-Optimization-Definitive-Conversions/dp/0470174625/ref=pd_sim_b_7 (more about measuring and theory, rather than hands-on practical case studies)


Scrolling shopping baskets

December 7, 2009

Some quick thoughts..Scrolling SB has comes with risks. If the shopping basket is too long, the totals and ‘checkout’ call-to-action button could appear below the fold. This is especially the case if many products have been added and at lower resolutions or non-maximized screens. Users would have to scroll to the bottom of the page to get the ‘checkout’ button in view.

I recommend:
– non-scrolling SB.
– if it must scroll, then make sure it anchors to the bottom of the page, so the checkout button is always in view (the top the basket then won’t be though..)
– make it scroll along slowly 
– either keep the product descriptions short (or empty) or consider removing the totals. test the worst-case scenario if it is a likely one.

Anybody seen any examples?


Research into Inline validation

December 4, 2009

Inline validation may seem useful at first insight, but should be implemented carefully and only if appropriate. If you’re still sceptical about its costs and benefits are, read on.

In this first article of the series I  outweigh the pro’s and cons and provide existing researches and a checklist. In other of my posts you can read about the design and implementation challenges you might cross.

Inline validation is generally useful where users would expect it, like when filling in a username to see if it still available or a typing a new password to check if it is long and secure enough. If the system is not forgiving and is strict about format types, the user might start to wonder. Also, most users want to complete the form as fast but accurate as possible. If they click Submit and go to the next step, they might be less pleased to see the same form again (with errors communicated) and make the effort of correcting any errors (and waiting for the next step again).

What is inline validation?

Inline, real-time, or instant validation is a error communication strategy in electronic form design. A system responds immediately to an error, constantly validation user input and providing immediate feedback about input errors during filling out a form.

Two variants of inline validation exist:
a) On-the-fly: any error is communicated in real-time or instant, meaning as soon as the user has typed an invalid character in a textfield.
b) OnBlur:  any error is communicated only after a user leaves a field by clicking outside it or clicking another field (a.k.a. loses focus). This is generally preferred method.

The opposite of inline validation is afterwards validation or on-submit (onSubmit) validation. That means that errors are communicated only after the user has clicked the submit button.

Just show me the numbers (or research)

Does inline validation increase conversion? When using inline validation on sign-up and ordering forms, do we really win more confidence from the users or only disturb them in their mental flow while filling the form? What about those green check-marks: do they really make filling in a check-out form more pleasant? Research about inline validation and its advantages for conversion is scarce and contradicting. There are no hard sales figures or proof of increased conversion, because research about inline validation is not conclusive about the link yet between different form types (sign-up form, order form or other) and design (content, error behaviour) in relation with its added value on different types of forms.

Research case A: inline validation didn’t help

One research paper covers ‘usable error messages on the web’ [1] (not confirmed) that afterwards validation is more ‘effective’ than inline validation. I’m not sure what they mean by ‘effective’, but I deduct from the table of contents of the article that they define ‘effective’ by:

  • lower error rates.
  • lower time to complete.
  • higher subjective ratings.

Summarizing their findings:

When users are completing online forms present the errors after the user has completed the form.
–          When completing an online form users have two flows or modes: Completion Mode and Revision Mode.
–          Users tend to ignore immediate error messages when they are in Completion Mode.Of the six possible ways to present error messages, thee proved to be more effective (?) than the others:
o        Present the errors afterward, embedded in the form, all at once.
o        Present the errors afterwards, embedded in the form, one by one.
o        Present the errors afterwards, in dialogues, one by one.Where presented with inline validation, users often simply ignored the messages on the screen and continued completing the form as if nothing happened. These results lead to the postulation of the “Modal Theory of Form Completion“: Users are in either “Completion“ or “Revision Mode“ when filling out online forms. These modes affect the users way of interaction with the system: during Completion Mode the users disposition to correct mistakes is reduced, therefore error messages are often ignored.

Interestingly most users don’t actually look at the inline validation unless they are worried their answers might be wrong. As soon as the user hesitates they look at the form and can see straight away whether their answer is right or not.

Research case B: inline validation helps

On the other hand, an article by Luke L in the aListApart.com article has opposite and positive findings on inline validation:

The inline validation version had:

  • a 22% increase in success rates,
  • a 22% decrease in errors made,
  • a 31% increase in satisfaction rating,
  • a 42% decrease in completion times, and
  • a 47% decrease in the number of eye fixations.

A discussion on ixda.org summarises:

“His research suggested that:

  • validating data that shouldn’t be validated (e.g. first name, last name) was regarded as weird and confused users.
  • speedy, immediate checking of data that should be validated (e.g. is my choice of username available?) is welcomed by users and helpful
  • attempting to validate data before the user has finished typing is intrusive and disliked by users (a point we explore further in our book: it’s all about interrupting the user’s turn in the conversation). “

Conclusion

Inline validation can either harm or benefit your customer satisfaction and conversion. As every forms differs in content and design, so will each research differ in their findings. Not all design research is universally applicable; we should learn from the context rather than to generalise conclusions.

What does this mean for me?

A/B test inline validation on your site. Be weary about blindly applying something that gave positive conversion results on one site to another site – different sites have different audiences, even with time things may change.  Conversion rate is an important monetary measure, but – just as the case studies above have done – measure other KPI’s as well: usability, customer satisfaction, aesthetic appeal and similar emotional factors should not suffer (too) much as a result of increased conversion. As always, mind the development costs, server load and performance decrease are feasible.

What’s next?

Read my related articles on inline validation:
Pros and cons of inline validation
Design and implementation challenges
When to use inline validation

Preparing for inline validation
Lies, damn lies and A/B tests

References

[1] Usable error message presentation in the World Wide Web: Do not show errors right away
by Javier A. Bargas-Avilaa, Glenn Oberholzerb, Peter Schmutza, Marco de Vitoa and Klaus Opwisa

[2]
http://www.cxpartners.co.uk/thoughts/web_forms_design_guidelines_an_eyetracking_study.htm
[3] http://www.getelastic.com/real-time-inline-validation/#more-5612

Examples

Sign-up form examples:
Yahoo! mail sign-up page   (UPDATE: Recently Yahoo has slightly redesigning their form and removed inline validation!)
Mint.com sign-up form
TypePad sign-up form    (Last checked 5/5/11)
Audible.com sign-up   (username onBlur, others onSubmit)    
Eventful sign-up form (use inline hints. Did they get rid of their Javascript alert dialog boxes?)

Order form examples:
Do you know of any e-commerce examples? Let us know.

Books

A short chapter devoted to inline validation in Robert Hoekman Jr ‘s Designing the moment