How to design a seductive website

129
seductive How to design a website
  • date post

    23-Sep-2014
  • Category

    Technology

  • view

    19
  • download

    5

description

Two decades after its birth, the web has through gone through the awkwardness of adolescence and reached adulthood. These days great websites aren’t just easy and intuitive to use, they also use human psychology to encourage specific behaviour. In this lively talk, Trent will distill learnings from more than 1,000 design research projects and help you to apply insights from social psychology, game theory and neuroscience to make your websites more compelling. You will learn: * How to use human psychology to encourage user behaviour * How even serious websites can be benefit from being more playful* Inspiring local and overseas examples of seductive interfaces

Transcript of How to design a seductive website

Page 1: How to design a seductive website

seductive How to design a

website

Page 2: How to design a seductive website
Page 3: How to design a seductive website
Page 4: How to design a seductive website
Page 5: How to design a seductive website

@andrewfantastic

Page 6: How to design a seductive website
Page 7: How to design a seductive website

Liking, authority

Page 8: How to design a seductive website

Social proof

Page 9: How to design a seductive website

Social proof

Page 10: How to design a seductive website

Email #3: We emphasized scarcity by placing a time limit on the offer

“…only 12 days away.”

Page 11: How to design a seductive website

#5: We emphasized scarcity by making something unavailable

“You can’t buy it until World Usability Day next week.”

Page 12: How to design a seductive website

#7: We invoked social proof by implying that hundreds of people will be signing up

“…if you’re one of the first 200 to buy.”

Page 13: How to design a seductive website

#9: We emphasized scarcity by making something unavailable

“The Redesign Bonanza is now CLOSED.”

Page 14: How to design a seductive website

#10: We re-opened the offer, for 6 hours.

Guess what happened? (I’ll tell you at the end)

Page 15: How to design a seductive website

seductive How to design a

website

Page 16: How to design a seductive website

Desirable

Usable

Useful

Page 17: How to design a seductive website
Page 18: How to design a seductive website
Page 19: How to design a seductive website
Page 20: How to design a seductive website

Help people to

Choose well

Page 21: How to design a seductive website

Hick’s Law

“The time it takes to make a decision increases as the number

of alternatives increases”

T = b • log2(n+1)

Page 22: How to design a seductive website
Page 23: How to design a seductive website
Page 24: How to design a seductive website
Page 25: How to design a seductive website

1. Design ‘6-jam’ web pages

Page 26: How to design a seductive website
Page 27: How to design a seductive website
Page 28: How to design a seductive website
Page 29: How to design a seductive website
Page 30: How to design a seductive website
Page 31: How to design a seductive website

Which circle is bigger?

Page 32: How to design a seductive website

Choice is relative

Page 33: How to design a seductive website

Men pay more for accessories after buying a suit than before

Page 34: How to design a seductive website
Page 35: How to design a seductive website

2. Consider cross-selling and up-selling

Page 36: How to design a seductive website

On a voting paper where would you want your name on the list?

Page 37: How to design a seductive website

The first row is three times more likely to be clicked on than the second row

Page 38: How to design a seductive website
Page 39: How to design a seductive website
Page 40: How to design a seductive website
Page 41: How to design a seductive website

3. Make sure the first item is the thing you want to ‘sell’ the most

Page 42: How to design a seductive website

How much for an add-on?

Page 43: How to design a seductive website
Page 44: How to design a seductive website
Page 45: How to design a seductive website

Making it deliberately hard for people to make choices is evil

Page 46: How to design a seductive website
Page 47: How to design a seductive website
Page 48: How to design a seductive website

Design for

Social proof

Page 49: How to design a seductive website

We tend to follow the patterns of similar people

(particularly in new or unfamiliar situations)

Page 50: How to design a seductive website
Page 51: How to design a seductive website
Page 52: How to design a seductive website
Page 53: How to design a seductive website
Page 54: How to design a seductive website
Page 55: How to design a seductive website

Which rating would you trust more?

Page 56: How to design a seductive website

4. Use reviews and ratings

Page 57: How to design a seductive website
Page 58: How to design a seductive website

5. Use data and statistics

Page 59: How to design a seductive website
Page 60: How to design a seductive website
Page 61: How to design a seductive website

6. Use graphs and charts

Page 62: How to design a seductive website
Page 63: How to design a seductive website
Page 64: How to design a seductive website
Page 65: How to design a seductive website

Be

Likable

Page 66: How to design a seductive website

We like people like us

Page 67: How to design a seductive website
Page 68: How to design a seductive website
Page 69: How to design a seductive website

7. Use testimonials and case studies

(With photos and relevant details that help visitors to relate to

them)

Page 70: How to design a seductive website
Page 71: How to design a seductive website
Page 72: How to design a seductive website
Page 73: How to design a seductive website

8. Show photos of your team

Page 74: How to design a seductive website
Page 75: How to design a seductive website

75

Page 76: How to design a seductive website
Page 77: How to design a seductive website
Page 78: How to design a seductive website

9. Show some personality

And have a sense of humour

Page 79: How to design a seductive website

If someone is physically attractive, people tend to

assume they also have a host of admirable qualities, such as intelligence and honesty

- B.J. Fogg

Page 80: How to design a seductive website

Teachers presume that good-looking children are more intelligent than their

less attractive classmates

Page 81: How to design a seductive website

A visually appealing website is seen as more

credible

Page 82: How to design a seductive website

10. Be attractive

Page 83: How to design a seductive website
Page 84: How to design a seductive website
Page 85: How to design a seductive website

Design for

Scarcity

Page 86: How to design a seductive website
Page 87: How to design a seductive website
Page 88: How to design a seductive website

If something has limited availability, then we

assume that it is more valuable

Page 89: How to design a seductive website
Page 90: How to design a seductive website
Page 91: How to design a seductive website

11. Emphasize limited numbers

Page 92: How to design a seductive website
Page 93: How to design a seductive website
Page 94: How to design a seductive website
Page 95: How to design a seductive website

12. Emphasize deadlines

Page 96: How to design a seductive website
Page 97: How to design a seductive website
Page 98: How to design a seductive website
Page 99: How to design a seductive website

13. Use phrases like ‘today only’ and ‘for a limited time’

Page 100: How to design a seductive website
Page 101: How to design a seductive website

14. Encourage competition

Page 102: How to design a seductive website
Page 103: How to design a seductive website
Page 104: How to design a seductive website

Design for

Reciprocity

Page 105: How to design a seductive website

What would happen if you sent Christmas cards to 578 complete

strangers?

Page 106: How to design a seductive website

If I give something to you or help you in any way, then you are obliged to

return the favour

Page 107: How to design a seductive website
Page 108: How to design a seductive website
Page 109: How to design a seductive website

The most popular spot on the Xero home page?

‘Try for free’

Page 110: How to design a seductive website
Page 111: How to design a seductive website
Page 112: How to design a seductive website
Page 113: How to design a seductive website
Page 114: How to design a seductive website

15. Give away free…

…product…information

…recommendations…upgrades

Page 115: How to design a seductive website

Visitors are twice as likely to fill out the form after receiving the freebie

Page 116: How to design a seductive website

16. Give people the freebie before asking them for anything

in return

Page 117: How to design a seductive website

Conclusion

Page 118: How to design a seductive website

• Scarcity e.g. one day only

• Reciprocity e.g. giving money to the Dian Fossey Gorilla Fund

• Likeness e.g. tone of the emails

• Authority e.g. WUD and UPA logos

• Social proof e.g. customer logos, testimonials

• Loss aversion e.g. re-opening the special

World Usability Day special

Page 119: How to design a seductive website

17 sales were made before the doors were opened

Page 120: How to design a seductive website

Re-opening the offer for 6 hours resulted in an extra 15% sales

Page 121: How to design a seductive website

5 months’ revenue in one month!

Page 122: How to design a seductive website

Next steps

Page 123: How to design a seductive website
Page 124: How to design a seductive website
Page 125: How to design a seductive website

Help people to Choose well

1. Design ‘6-jam’ web pages

2. Consider cross-selling and up-selling

3. Make sure the first item is the thing you want to ‘sell’ the most

Design for Social proof

4. Use reviews and ratings

5. Use data and statistics

6. Use graphs and charts

Be Likable

7. Use testimonials and case studies, with photos and relevant details that help visitors to relate to them

8. Show photos of your team

9. Show some personality, and have a sense of humour

10. Be attractive

Design for Scarcity

11. Emphasize limited numbers

12. Emphasize deadlines

13. Use phrases like ‘today only’ and ‘for a limited time’

14. Encourage competition

Design for Reciprocity

15. Give away free product, information, recommendations, upgrades

16. Give people the freebie beforeasking them for their contact details

Page 126: How to design a seductive website

[email protected]

@trentmankelow@OptimalNZ

Sign up to our newsletter at www.optimalusability.com

Page 127: How to design a seductive website

Links / Picture Credits

• Slide 1: Photo is of Psyche Revived by Cupid's Kiss from www.en.wikipedia.org/wiki/File:Psyche_revived_Louvre_MR1777.jpg

• Slide 3: www.optimalworkshop.com

• Slide 4: www.worldusabilityday.org

• Slide 22: Jam photo from www.caterwauls.ca/new_page_15_files/berry%20jams.JPG

• Slide 22: Diagram of jams from Neuro Web Design (2009)

• Slide 23: www.dropbox.com

• Slide 24: www.slideshare.net/adamsmith1/from-zero-to-a-million-users-dropbox-and-xobni-lessons-learned

• Slide 26: www.sovereign.co.nz

• Slide 27: www.aia.co.nz

• Slide 28: www.pinnaclelife.co.nz

• Slide 30: www.travelbug.co.nz/b

• Slide 33: Images from www.3wisemen.co.nz

• Slide 34: www.woolworths.co.nz

• Slide 36: Image from www.elections.org.nz/voting/votingsub/sample-ballot-paper.html

• Slide 38: www.newplymouthnz.com

• Slide 39: www.nelsoncitycouncil.co.nz

• Slide 40: www.aucklandcity.govt.nz

• Slide 46: www.whatsmynumber.org.nz

• Slide 47: www.telme.org.nz

• Slide 51: Image from www.odt.co.nz/118554/apples-iphone-4-sale-after-delay

• Slide 52: www.tripadvisor.com

• Slide 54: www.rabodirect.co.nz/term-deposits/default.aspx

• Slide 55: www.consumer.org.nz/reports/vacuum-cleaners

• Slide 57: www.treatme.co.nz

• Slide 57: www.grabaseat.co.nz

• Slide 57: www.powershop.co.nz

• Slide 57: www.xero.com

• Slide 57: www.powerswitch.org.nz/powerswitch

Page 128: How to design a seductive website

Links / Picture Credits

• Slide 59: www.powershop.co.nz/greater-savings-pricing.html

• Slide 60: www.opower.com

• Slide 62: Image from www.superpunch.blogspot.com/2011/03/facebook-like-button-added-to-elevator.html

• Slide 63: www.careers.govt.nz

• Slide 68: www.powershop.co.nz/smarter-power.html

• Slide 68: www.xero.com/customers

• Slide 68: www.kiwibank.co.nz/personal-banking/investments

• Slide 68: www.inform.co.nz/testimonials

• Slide 70: www.optimalusability.com/our-clients/client-feedback

• Slide 71: www.optimalusability.com/about/our-people

• Slide 72: www.anz.co.nz/personal/investments-advice/financial-planning

• Slide 72: www.asb.co.nz/Personal/Investments/Get-advice/Choose-a-Wealth-Manager#centralnorthisland

• Slide 74: www.localist.co.nz/

• Slide 75: www.twitter.com/#!/AirNZFairy

• Slide 76: www.sorted.org.nz/blog/sorted-turns-8

• Slide 77: www.snapper.co.nz/newsroom/2011/03/24/pimp-your-phone-with-a-snapper-ringtone

• Slide 80: Image from www.nzia.co.nz/projectImages/672132fd/Images/Art%20Maths%20Classroom%20Block%20_%20Classroom%20_%206%20of%206.jpg

• Slide 81: www.siphawaii.com

• Slide 84: www.sonar6.com

• Slide 89: www.grabaseat.co.nz

• Slide 93: www.grabone.co.nz

• Slide 100: www.grabaseat.co.nz/secure/auctions

• Slide 102: www.onceit.co.nz

• Slide 105: Image from http://feelincrafty.wordpress.com/2011/01/04/oh-christmas-card-oh-christmas-card

• Slide 107: www.linkedin.com/home

• Slide 107: www.trademe.co.nz

• Slide 108: www.xero.com

Page 129: How to design a seductive website

Links / Picture Credits

• Slide 109: www.westpac.co.nz/olcontent/olcontent.nsf/Content/Buying+a+house+checklists

• Slide 111: www.theanswerroom.co.nz

• Slide 112: www.fatso.co.nz

• Slide 112: www.amazon.com

• Slide 113: www.bnz.co.nz

• Slide 115: http://www.slideshare.net/Optimal.Usability/how-to-create-online-experiences-that-people-love

• Slide 123: www.getmentalnotes.com

• Slide 124: www.danlockton.com/dwi/Main_Page