The Seduc)on
of the Interface

seduc&on

Christopher Fahey
graphpaper.com

merchandising

merchandising
vs.
marke&ng

marke&ng

merchandising
The strategy and implementa1on
of how a product is presented to
customers as they decide whether
or not to purchase.

merchandising
Three Modes of Merchandising:
1. Selling Contexts
2. Packaging
3. Products that Sell Themselves

1. Selling Contexts

Selling Contexts
E‐commerce Selling Contexts
• Marke1ng experts are s1ll learning how to op1mize
placement, pricing, sequences, nomenclature.

Selling Contexts
E‐commerce Selling Contexts
• Marke1ng experts are s1ll learning how to op1mize
placement, pricing, sequences, nomenclature.
But there have been many feature innova1ons...
• Automated recommenda1ons
• “People like you bought”
• Wish lists
• Robust UI product previews

2. Packaging

Packaging =
The Selling Context?

Don’t Think of
Your Product’s “Box”

3. Products that
Sell Themselves

merchandising
The strategy and implementa1on
of how a product is presented to
customers as they decide whether
or not to purchase.

beyond
merchandising

marke&ng
vs. design

marke&ng
vs. design

marke&ng
= design

design

“web‐centric”

pleasure

pleasure != sensory
experiences

pleasure
drives
us

pleasure
“ANrac&ve things work beNer.”
‐ Don Norman, Emo+onal Design

“web 2.0”

web 2.0
How the design of Web 2.0 user experiences
change how products are marketed:
• Subscrip1on‐based product models
• Vibrant communi1es around and within products
• Fully‐func1onal demos, easily distributed and managed
• What is a “product?” Unclear seams between plaYorms
• Free!

conversion

the “hard sell”

conversion
is obsolete

conversion
connec&on

seduc&on

falling in love

The Three Stages
of Seduc&on
1. Inspire their a[en1on, interest and desire
2. Draw them in (lead them astray)
3. Capture their ongoing devo1on

Stage One:
Inspire their a7en)on,
interest and desire

choose your
“vic&m”

Mark & Pearson’s “Archetypes”
• The Innocent
• The Explorer
• The Sage
• The Hero
• The Outlaw
• The Magician
Source: The Hero and the Outlaw by Margaret Mark and Carol Pearson

Robert Greene’s “Vic&ms”
• The Reformed Rake or Siren • The Professor
• The Disappointed Dreamer • The Beauty
• The Pampered Royal • The Aging Baby
• The New Prude • The Rescuer
• The Crushed Star • The Roué
• The Novice • The Idol Worshipper
• The Conqueror • The Sensualist
• The Exo1c Fe1shist • The Lonely Leader
• The Drama Queen • The Floa1ng Gender
Source: The Art of Seduction by Robert Greene

Yahoo’s “Compe&&ve Spectrum”
Source: http://developer.yahoo.com/ypatterns/pattern.php?pattern=competitive

Make up your own!
Detect your users’ emo&onal quali&es and speak
to them in your UI design. Examples:
• Rebelliousness and difference
• Power and Control
• Achievement and aspira1on to a new class role
• Modesty
• Avoidance of embarrassment
• Authen1city
• Acceptance in one’s social group
• Fun and release from stress

User Personas

User Personas
Persona Usage Guidelines:
• Personas of any kind should be informed by research.
• Even the smallest amount of research helps. It’s not a
bad thing if the designers themselves do some or all
of the research.
• The discussions a2er the research are almost more
important.
• The journey is more important than the result.
• Differen&ate seduc&ve quali&es from genuine user
func&onal needs.

make the first move

make the first move
About pick‐up lines:
• Should not be threatening
• Should s1r curiosity
• Should be a springboard for more conversa1on
• Should be a vehicle for displaying your value

make the first move
• Use Words
• Speak directly to the user
• Tell them what they can do to do specifically
• Use Mo1on
• Anima1on
• Video demos
• Careful with Audio!

but don’t
be a jerk

create a sense
of mystery

the first move
• Blah

appear desirable

appear desirable
Present Tes1monials
• Not just media tes1monials
• But real user tes1monials, too

appear desirable
Present Tes1monials
• Not just media tes1monials
• But real user tes1monials, too

flaNer them

project
confidence

show calculated
vulnerability

tempt them

Stage Two:
Draw Them In
(Lead Them Astray)

dazzle them
with wonder

tell a story

enable stories

be stylish

delight in
the details

have a sense
of humor

offer affordances
of desire

distract them from
their responsibili&es

Planning mode and Context mode
Planning mode is where you organize your Context mode is where you can ignore the
actions into projects and folders. hierarchy and concentrate on working.
You can switch back and forth between planning mode
and context mode by clicking the Mode switcher
or the Switch button on the toolbar.

Planning mode and Context mode
Planning mode is where you organize your Context mode is where you can ignore the
actions into projects and folders. hierarchy and concentrate on working.
You can switch back and forth between planning mode
and context mode by clicking the Mode switcher
or the Switch button on the toolbar.
Planning Sidebar
The Inbox: dump in stu! to process later
e Library contains all your folders, projects, and actions The Inbox appears above your library of projects and acti
Folders: Categorize your projects Outline new ideas, incoming tasks, or emerging projects h
A Project represents some goal you hope to achieve When you're ready, assign a project and a context to an it
then click the Clean Up button to turn it into an action.

Planning mode and Context mode Toolbar
Planning mode is where you organize your Context mode is where you can ignore the
actions into projects and folders. hierarchy and concentrate on working.
Switch to the Focus on th
other mode and selected fold
find your project, tem
selection there. hiding every
View Bar Cli
lots
Filter your projects by status.
You can switch back and forth between planning mode Remaining: Left to be done
and context mode by clicking the Mode switcher Active: Currently working on
or the Switch button on the toolbar. Stalled: Without available actions
Pending: Starting in the future
On Hold: Not currently working o
Dropped: Given up
Completed: Finished successfully
Planning Sidebar Outline Th
and
The Inbox: dump in stu! to process later \"Planning mode# pro
The Library contains all your folders, projects, and actions The Inbox appears above your library of projects and actions.
Folders: Categorize your projects Outline new ideas, incoming tasks, or emerging projects here.
A Project represents some goal you hope to achieve When you're ready, assign a project and a context to an item,
A Shoebox holds single actions that don't fit into a project then click the Clean Up button to turn it into an action. Or,
drag an item to the sidebar to turn it into a project.
Select any item in the sidebar to see its The darker gray rows are your grouping, as set in the View
contents in the main outlin! Bar above. This outline is grouped by folder.
Lighter gray rows are projects. A project should be a goal that
Numbers indicate your inbox items \"gray#, overdue you can complete some day; this one is the title of a painting.
actions \"red#, and almost$due actions \"orange#
The first remaining thing you can do in each project, the next
action, is colored purple.

Planning mode and Context mode Toolbar
Planning mode is where you organize your Context mode is where you can ignore the
actions into projects and folders. hierarchy and concentrate on working.
Switch to the Focus on the Clean Up puts Reset the next Type to filter the view Open the Print what's
other mode and selected folders or everything where it review date for the for matching folders, inspectors, currently visible
find your project, temporarily belongs, based on the selected projects. projects, and actions. where you can in the outline.
selection there. hiding everything else. changes you made. edit details of the
selected items.
View Bar Click the View button in the toolbar to see the View bar, which contains
lots of handy menus for filtering your outline, and the column headers.
Filter your projects by status. Group your projects Sort your projects Filter actions by Filter actions by Filter actions by Clear your
You can switch back and forth between planning mode Remaining: Left to be done under headings by various criteria, or status. estimated time, so whether you have custom filters,
and context mode by clicking the Mode switcher Active: Currently working on based on their leave them unsorted. Remaining: Actions you can find stu! flagged them. Flags returning to
or the Switch button on the toolbar. Stalled: Without available actions containing folders or not yet complete that can be done in don't have any the defaults
Pending: Starting in the future various dates. Next Action: The the time you have inherent meaning; or to the last
On Hold: Not currently working on next thing you can do available right now. they're just a perspective
Dropped: Given up in each project convenience. you opened
Completed: Finished successfully Available: Actions
you can do right now
Completed: Actions
finished successfully
Planning Sidebar Outline This is the detailed view of your inbox, folders, projects, and actions, arranged in rows
and columns. Contexts mode is similar, except that actions are broken out of their
The Inbox: dump in stu! to process later \"Planning mode# project hierarchies so you can see them individually by project, due date, and so on.
The Library contains all your folders, projects, and actions The Inbox appears above your library of projects and actions.
Folders: Categorize your projects Outline new ideas, incoming tasks, or emerging projects here.
A Project represents some goal you hope to achieve When you're ready, assign a project and a context to an item,
A Shoebox holds single actions that don't fit into a project then click the Clean Up button to turn it into an action. Or,
drag an item to the sidebar to turn it into a project.
Select any item in the sidebar to see its The darker gray rows are your grouping, as set in the View
contents in the main outlin! Bar above. This outline is grouped by folder.
Lighter gray rows are projects. A project should be a goal that
Numbers indicate your inbox items \"gray#, overdue you can complete some day; this one is the title of a painting.
actions \"red#, and almost$due actions \"orange#
Categorize your actions by context; then you
The first remaining thing you can do in each project, the next can switch to Contexts Mode and organize
action, is colored purple. them by when and where you can do each
Because this project is sequential, all actions after the next one.
action are considered unavailable. You have to finish the This action has a note, as shown by the note
earlier actions before you can start the later ones. icon. Click a note icon to see the note area,
where you can type or drop files.
When you put the mouse pointer on a row, you see the columns
Contexts Sidebar and buttons available for that item.
The No Context box: actions still needing contexts You can use the Add Child, Indent, and Group commands in This action has a due date. You can show the
the Edit ! Outlining menu to collect related actions into a Due Date column \"and other columns# in the
group for easier tracking. View menu.
A Context represents the place or the tools
necessary to get something done Overdue items are red.
The arrows on a project or a group indicate
whether it is parallel or sequential. The
sequential “Work” must have its actions done
Contexts can contain subcontexts in the order they are listed, while the parallel
Single!action lists are like projects, but they contain loose, “Ideas to sketch out” can have its actions
unrelated items instead of actions aimed toward the done in any order.
Select a context to see the actions completion of a goal.
assigned to i\"
All single actions are considered “next actions,” and they are This action is flagged. Click the flag icon to
colored blue to distinguish them from project actions. mark items with a flag for your own reference;
the flag filter in the View Bar above can find
all of your flagged items for you.
...And here's the next folder, with its own projects and single$
action lists inside.

Stage Three:
Capture Their
Ongoing Devo)on

involve others

con&nually grow

the design process

goals, scenarios
and paths

goals
Your users have goals. Write them down and
use them to guide and inspire your design.
• They will “muddle through” the hard parts if the end
result is s1ll visible to them.
• Use tempta1on and encouragement to keep them
going.
• Don’t lie: Be honest about how close to their goals
they really are.

plan for delight

evaluate with
psychology and
emo&on

understand
yourself

Robert Greene’s “Seducers”
• The Siren • The Professor
• The Rake • The Beauty
• The Ideal Lover • The Aging Baby
• The Dandy • The Rescuer
• The Natural • The Roué
• The Coque[e • The Idol Worshipper
• The Charmer • The Sensualist
• The Charisma1c • The Lonely Leader
• The Star • The Floa1ng Gender
Source: The Art of Seduction by Robert Greene

The 30‐Second Seducers
• The Scholar
• The Show‐off
• The Sneak
• The Roman1c
• The Best Friend
Source: The 30-Second Seduction by Andrea Gardner

closing thoughts

closing thoughts
Seduc1on is ...
... not about sex ‐‐ it’s about love and togetherness...
enchantment and pleasure.
... user‐centric
... a journey
... proac1ve
... and nothing to be squeamish about!

closing thoughts
Seduc&on is no longer the
exclusive responsibility of
“the marke&ng people”.
It’s a design job. So do it.

Thanks, I had fun!
Christopher Fahey
graphpaper.com