The Seduction of the Interface

17,583 views
16,837 views

Published on

Interaction designers need to seduce their users with the very design of their products, not by relying on the efforts of external "marketing people". I discuss seduction techniques and merchandising traditions in a context of the interaction designs of Web 2.0 products and services.

Published in: Business, Technology
2 Comments
72 Likes
Statistics
Notes
  • this a great website. visit the other one too. similar but a little better product and some free information. http://www.proseductiontraining.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • It's wonderful~
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
17,583
On SlideShare
0
From Embeds
0
Number of Embeds
959
Actions
Shares
0
Downloads
696
Comments
2
Likes
72
Embeds 0
No embeds

No notes for slide

The Seduction of the Interface

  1. The
Seduc)on of
the
Interface
  2. seduc&on
  3. Christopher
Fahey graphpaper.com
  4. merchandising
  5. merchandising vs. marke&ng
  6. marke&ng
  7. merchandising The
strategy
and
implementa1on
 of
how
a
product
is
presented
to
 customers
as
they
decide
whether
 or
not
to
purchase.
  8. merchandising Three
Modes
of
Merchandising: 1.
Selling
Contexts 2.
Packaging 3.
Products
that
Sell
Themselves
  9. 1.
Selling
Contexts
  10. Selling
Contexts E‐commerce
Selling
Contexts • Marke1ng
experts
are
s1ll
learning
how
to
op1mize
 placement,
pricing,
sequences,
nomenclature.

  11. 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
  12. 2.
Packaging
  13. Packaging
=
 The
Selling
Context?
  14. Don’t
Think
of
 Your
Product’s
“Box”
  15. 3.
Products
that Sell
Themselves
  16. merchandising The
strategy
and
implementa1on
 of
how
a
product
is
presented
to
 customers
as
they
decide
whether
 or
not
to
purchase.
  17. beyond
 merchandising
  18. marke&ng
 vs.
design
  19. marke&ng
 vs.
design
  20. marke&ng
 =
design
  21. design
  22. “web‐centric”
  23. pleasure
  24. pleasure
!=
sensory
 experiences
  25. pleasure
 drives us
  26. pleasure “ANrac&ve
things
work
beNer.” ‐
Don
Norman,
Emo+onal
Design
  27. “web
2.0”
  28. 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!
  29. conversion
  30. the
“hard
sell”
  31. conversion is
obsolete
  32. conversion connec&on
  33. seduc&on
  34. falling
in
love
  35. 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
  36. Stage
One: Inspire
their
a7en)on,
 interest
and
desire
  37. choose
your
 “vic&m”
  38. 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
  39. 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
  40. Yahoo’s
“Compe&&ve
Spectrum” Source: http://developer.yahoo.com/ypatterns/pattern.php?pattern=competitive
  41. 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
  42. User
Personas
  43. 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.

  44. make
the
first
move
  45. 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
  46. 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!
  47. but
don’t
 be
a
jerk
  48. create
a
sense
 of
mystery
  49. the
first
move • Blah
  50. appear
desirable
  51. appear
desirable Present
Tes1monials • Not
just
media
tes1monials • But
real
user
tes1monials,
too
  52. appear
desirable Present
Tes1monials • Not
just
media
tes1monials • But
real
user
tes1monials,
too
  53. flaNer
them
  54. project confidence
  55. show
calculated
 vulnerability
  56. tempt
them
  57. Stage
Two: Draw
Them
In (Lead
Them
Astray)
  58. dazzle
them
 with
wonder
  59. tell
a
story
  60. enable
stories
  61. be
stylish
  62. delight
in
 the
details
  63. have
a
sense
 of
humor
  64. offer
affordances of
desire
  65. distract
them
from
 their
responsibili&es
  66. 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.
  67. 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.
  68. 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 quot;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 quot;gray#, overdue you can complete some day; this one is the title of a painting. actions quot;red#, and almost$due actions quot;orange# The first remaining thing you can do in each project, the next action, is colored purple.
  69. 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 quot;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 quot;gray#, overdue you can complete some day; this one is the title of a painting. actions quot;red#, and almost$due actions quot;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 quot;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 iquot; 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.
  70. Stage
Three: Capture
Their Ongoing
Devo)on
  71. involve
others
  72. con&nually
grow
  73. the
design
process
  74. goals,
scenarios 
and
paths
  75. 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.

  76. plan
for
delight
  77. evaluate
with
 psychology
and
 emo&on
  78. understand yourself
  79. 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
  80. The
30‐Second
Seducers • The
Scholar • The
Show‐off • The
Sneak • The
Roman1c • The
Best
Friend Source: The 30-Second Seduction by Andrea Gardner
  81. closing
thoughts
  82. 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!
  83. closing
thoughts 
 Seduc&on
is
no
longer
the
 exclusive
responsibility
of
 “the
marke&ng
people”.
 
 It’s
a
design
job.
So
do
it.
  84. Thanks,
I
had
fun! Christopher
Fahey graphpaper.com

×