+ All Categories
Home > Design > Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Date post: 09-May-2015
Category:
Upload: matt-balara
View: 5,273 times
Download: 4 times
Share this document with a friend
Description:
So many businesses earn their daily bread online, so why are so many online shops so poorly designed? This presentation from Edge of the Web '09 in Perth, Australia, is a review of common mistakes, and numerous common sense solutions and best practice examples for e-commerce site design.
171
Flogging Design Perth, Australia November 2009 Daily Disa s ers & Be s Practice in Online Shop Desi g n
Transcript
Page 1: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Flogging Design

Perth, Australia November 2009

Daily Disasers & Bes Practice in Online Shop Design

Page 2: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Matt Balara Edge of the Web 2009 Flogging Design

?

Page 3: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Heyyyy!

10 Easy

Steps to

Sleaze!

Page 4: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by LexnGer http://flic.kr/p/5bRyhQ

I want my MBP!

Page 5: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Cartoon by Bill McLemore

Page 6: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

graphic

designer

Photo by Julian Bleecker http://flic.kr/p/4YXxrr

Hi!

IxDUXD

IDDesigner

Page 7: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Matt Balara Edge of the Web 2009 Flogging Design

Know Your ShoppersWho are we designing for?

Page 8: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Browser

Page 9: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Questor

Page 10: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Blow-in

Page 11: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Socialite

Page 12: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Matt Balara Edge of the Web 2009 Flogging Design

TheBrowser

“I’m just looking.”

Page 13: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

The Browser

Page 14: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by Emily Webber http://flic.kr/p/6aU4Rv

Is this you?

Page 15: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by galaygobi http://flic.kr/p/b7YTT

Is this you?

Page 16: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by specialkrb http://flic.kr/p/6bcPDm

Is this you?

Page 17: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 18: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Design by Dustin Curtis http://dustincurtis.com

Page 19: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by sevensixfive http://flic.kr/p/CYaYB

navigation

Page 20: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Compact & simple

Page 21: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Compact & simple

Page 22: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Strict categories vs. multiple pathways

Page 23: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Strict categories vs. multiple pathways

plush toy dress-up action figure

Page 24: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Strict categories vs. multiple pathways

Page 25: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Strict categories vs. multiple pathways

plush toyages 3–6Animal Alley

dress-upages 6–10Hello Kitty

action figureages 8–12movie toyTwilighttop rated

Page 26: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Strict categories vs. multiple pathways

Page 27: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by danibegood2001 http://flic.kr/p/5iwoxU

pringboards

Page 28: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Plenty of attractive options...

Page 29: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Plenty of attractive options...

Page 30: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Plenty of attractive options...

Page 31: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

How not to help the user...

Page 32: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

How not to help the user...

Page 33: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

“Don’t Make Me Think” by Steve Krug

Page 34: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Scarcity motivates...

Page 35: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Matt Balara Edge of the Web 2009 Flogging Design

The Questor

“I will find the one true product!”

Page 36: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

The Questor

Page 37: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 38: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 39: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 40: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 41: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 42: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 43: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Search ishard!

?

Page 44: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 45: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 46: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Hmmm.

Page 47: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 48: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 49: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 50: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 51: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 52: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 53: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 54: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 55: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 56: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 57: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 58: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 59: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 60: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 61: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

The ring!

Page 62: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

More features? More info.

Page 63: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Less features? Bigger image.

Page 64: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by Adam Pieniazek http://flic.kr/p/55Jf79

too much info!

Page 65: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Matt Balara Edge of the Web 2009 Flogging Design

TheSocialite

“Honey, what do you think of this?”

Page 66: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

The Socialite

Page 67: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

like attractslike.

Photo by heath_bar http://flic.kr/p/4MVejj

Page 68: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

like attractslike.

62% of all shoppers consult online communities before

making a purchase. Just 27% of consumers go directly to

the retailer.net imperative http://j.mp/doz5m

“ ”Photo by heath_bar http://flic.kr/p/4MVejj

Page 69: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

rushfaster is trying hard...

Page 70: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

rushfaster is trying hard...

Page 71: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

rushfaster is trying hard...

Page 72: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

rushfaster is trying hard...

?

Page 73: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Zappos gets sharing.

Page 74: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Zappos gets sharing.

Short URLs = sharing freedom

Page 75: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Zappos gets sharing.

“Tell a Friend” = simple 1-to-1 sharing

Page 76: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Zappos gets sharing.

Page 77: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Zappos gets sharing.

Page 78: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Zappos gets sharing.

“Share” = broadcast your taste

Page 79: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Zappos gets sharing.

Page 80: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Zappos gets sharing.

Page 82: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Amazon has short URLs?

?

Page 83: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Matt Balara Edge of the Web 2009 Flogging Design

TheBlow-in

“Uh, how’d I get here?”

Page 84: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

The Blow-in

Page 85: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Close your eyes...

Page 86: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 87: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by Daygo D. http://flic.kr/p/5YU6mg

Page 88: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

make me want it!

Photo by Thomas Hawk http://flic.kr/p/8jULC

Page 89: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Peter’s of Kensington makes me squint

Page 90: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Rush Faster makes me want their products

Page 91: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Rush Faster makes me want their products

Page 92: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Rush Faster makes me want their products

Page 93: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Rush Faster makes me want their products

Page 94: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

ECCO lets you take a closer look

Page 95: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

ECCO lets you take a closer look

Page 96: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

ECCO lets you take a closer look

Page 97: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

ECCO lets you take a closer look

Page 98: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Apple, the master of want

Page 99: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Apple, the master of want

Page 100: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Apple, the master of want

Product

Theater!

Page 101: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Something by Someone

Page 102: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by kevindooley http://flic.kr/p/6GERjX

focus

Page 103: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 104: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 105: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 106: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 107: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 108: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 109: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 110: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 111: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 112: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 113: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Matt Balara Edge of the Web 2009 Flogging Design

Show me the Money“Get out of my way!”

Page 114: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by Sheila Steele http://flic.kr/p/7vtpM

Page 115: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by jussstas http://flic.kr/p/8Y3N1

Page 116: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Why do we do this?

Page 117: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Why do we do this?

Page 118: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Why ask, if we already know?

4506 1187 0913 1114

5144 0932 8715 4748

3426 9960 899 654

Page 119: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Why ask, if we already know?

4506 1187 0913 1114

5144 0932 8715 4748

3426 9960 899 654

Page 120: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Why ask, if we already know?

4506 1187 0913 1114

5144 0932 8715 4748

3426 9960 899 654

Page 121: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Threadless gets this right

Page 122: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Another question we can answer ourselves.

Page 123: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Another question we can answer ourselves.

Page 124: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Isn’t this some kind of torture?

Page 125: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Isn’t this some kind of torture?

Page 126: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 127: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 128: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 129: Flogging Design: Daily Disasters & Best Practice in Online Shop Design
Page 130: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

One Dropdown 243options!

Page 131: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Shorter, not better...

Page 132: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Shorter, not better...

Page 133: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Shorter, not better...

Page 134: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Isn’t this what suggestive search is for?

Page 135: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Isn’t this what suggestive search is for?

Page 136: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Isn’t this what suggestive search is for?

Page 137: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Isn’t this what suggestive search is for?

Page 138: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Isn’t this what suggestive search is for?

Page 139: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Isn’t this what suggestive search is for?

Page 140: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Isn’t this what suggestive search is for?

Page 141: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Hello?

Page 142: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Hello?

Page 143: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Hello?

?

Page 144: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Hello?

Page 145: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Built in stumbling blocks...

Page 146: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Built in stumbling blocks...

Page 147: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Built in stumbling blocks...

660 pixels

Page 148: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Built in stumbling blocks...

660 pixels

bakedin

fail

Page 149: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

A simple problem, easily solved.

Page 150: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

And last but not least...

Page 151: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

And last but not least...

What users really want!

Page 152: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by jmccorm http://flic.kr/p/3uLfXE

Bigger

Shopping

Carts!

Page 153: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Web Form Design by Luke Wroblewski http://j.mp/8HtDs

Page 154: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Matt Balara Edge of the Web 2009 Flogging Design

Thanks...and?The web’s biggest missed opportunity

Page 155: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Paula’s Choice, as bad as it gets.

Page 156: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

5 Senses Coffee only tells me what I already know

Page 157: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

MOO doesn’t care what I do next.

Page 158: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Even Apple misses this one.

Page 159: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Amazon doesn’t miss an opportunity.

Page 160: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Amazon doesn’t miss an opportunity.

Page 161: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Matt Balara Edge of the Web 2009 Flogging Design

Once more with feeling!

Page 162: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Heyyyy!

don’t be this guy.

Page 163: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by Emily Webber http://flic.kr/p/6aU4Rv

impress

Page 164: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by sevensixfive http://flic.kr/p/CYaYB

navigation

Page 165: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by danibegood2001 http://flic.kr/p/5iwoxU

pringboards

Page 166: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

make me want it!

Photo by Thomas Hawk http://flic.kr/p/8jULC

Page 167: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by kevindooley http://flic.kr/p/6GERjX

focus

Page 168: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by heath_bar http://flic.kr/p/4MVejj

like attractslike.

Page 169: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Photo by jussstas http://flic.kr/p/8Y3N1

desroy all stops.

Page 170: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Thank you! Matt Balara Freelance Designer

Web mattbalara.comEmail [email protected] @MattBalara

Page 171: Flogging Design: Daily Disasters & Best Practice in Online Shop Design

Thank you! Matt Balara Freelance Designer

Web mattbalara.comEmail [email protected] @MattBalara

Questions?


Recommended