Flogging Design: Daily Disasers Best Practice in Online Shop Design

Know Your Shoppers Who are we designing for? Times when onlineshops were boring and unattractive are over. To attract customers’ attention designers tend to design onlineshops according to the atmosphere it has to create. An onlinestore in which retroproducts are offered is designed in a retrolook. And shops which are aiming to attract young customers are designed in vibrant colors and modern style. Furthermore, interactive browsing through the store, implemented with Flash and JavaScript, gains on popularity as well. Trendy design elements such as wood background, textures, handwriting, collage and grunge are quite popular.

Flogging

Design

Perth, Australia November 2009

Daily Disasers & Bes Practice

in Online Shop Design

Matt Balara Edge of the Web 2009 Flogging Design

?

10 Easy Steps to

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

I want my

MBP!

Cartoon by Bill McLemore

graphic desig ner

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

Hi!

IxD

UXD ID

Matt Balara Edge of the Web 2009 Flogging Design

Know Your

Shoppers

Who are we designing for?

Browser

Questor

Blow-in

Socialite

Matt Balara Edge of the Web 2009 Flogging Design

The

Browser

“I’m just looking.”

The Browser

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

Is this you?

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

Is this you?

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

Is this you?

Design by Dustin Curtis http://dustincurtis.com

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

navigation

Compact & simple

Strict categories vs multiple pathways

Strict categories vs multiple pathways

Strict categories vs multiple pathways

Strict categories vs multiple pathways

plush toy ages 3–6 Animal Alley

dress-up ages 6–10 Hello Kitty

action figure ages 8–12

movie toy Twilight top rated

Strict categories vs multiple pathways

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

pringboards

Plenty of attractive options

How not to help the user

“Don’t Make Me Think” by Steve Krug

Scarcity motivates

Matt Balara Edge of the Web 2009 Flogging Design

The

Questor

“I will find the one

true product!”

The Questor

Search is

hard!

?

Hmmm.

The ring!

More features? More info.

Less features? Bigger image.

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

too much info!

Matt Balara Edge of the Web 2009 Flogging Design

The

Socialite

“Honey, what do you think of this?”

The Socialite

like attracts like.

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

like attracts like.

62% of all shoppers consult

online communities before

making a purchase Just 27%

rushfaster is trying hard

rushfaster is trying hard

rushfaster is trying hard

rushfaster is trying hard

?

Zappos gets sharing.

Zappos gets sharing.

Short URLs = sharing freedom

Zappos gets sharing.

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

Zappos gets sharing.

Zappos gets sharing.

Zappos gets sharing.

“Share” = broadcast your taste

Zappos gets sharing.

Zappos gets sharing.

Amazon has short URLs?

Amazon has short URLs?

?

Matt Balara Edge of the Web 2009 Flogging Design

The

Blow-in

“Uh, how’d I get here?”

The Blow-in

Close your eyes

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

make me

want it!

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

Peter’s of Kensington makes me squint

Rush Faster makes me want their products

Rush Faster makes me want their products

Rush Faster makes me want their products

Rush Faster makes me want their products

ECCO lets you take a closer look

ECCO lets you take a closer look

ECCO lets you take a closer look

ECCO lets you take a closer look

Apple, the master of want

Apple, the master of want

Apple, the master of want

Produc

t

Something by Someone

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

focus

Matt Balara Edge of the Web 2009 Flogging Design

Show me

the Money

“Get out of my way!”

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

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

Why do we do this?

Why ask, if we already know?

4506 1187 0913 1114

5144 0932 8715 4748

3426 9960 899 654

Why ask, if we already know?

4506 1187 0913 1114

5144 0932 8715 4748

3426 9960 899 654

Why ask, if we already know?

4 506 1187 0913 1114

51 44 0932 8715 4748

34 26 9960 899 654

Threadless gets this right

Another question we can answer ourselves.

Isn’t this some kind of torture?

One Dropdown options! 243

Shorter, not better

Isn’t this what suggestive search is for?

Hello?

?

Hello?

Built in stumbling blocks

660 pixels

Built in stumbling blocks

660 pixels

baked in

fail

A simple problem, easily solved.

And last but not least

What users

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

Bigger Shopping

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

Matt Balara Edge of the Web 2009 Flogging Design

Thanks

and?

The web’s biggest missed

opportunity

Paula’s Choice, as bad as it gets.

5 Senses Coffee only tells me what I already know

MOO doesn’t care what I do next.

Even Apple misses this one.

Amazon doesn’t miss an opportunity.

Amazon doesn’t miss an opportunity.

Matt Balara Edge of the Web 2009 Flogging Design

Once more

with

feeling!

don’t be this guy.

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

impress

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

navigation

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

pringboards

make me

want it!

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

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

focus

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

like attracts like.

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

desroy all

stops.