The Seduction of the Interface
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

The Seduction of the Interface

on

  • 15,589 views

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 ...

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.

Statistics

Views

Total Views
15,589
Views on SlideShare
14,649
Embed Views
940

Actions

Likes
70
Downloads
685
Comments
2

18 Embeds 940

http://bobo.chinavisual.com 534
http://www.uxstudy.com 304
http://designforconversion.nl 47
http://www.uecn.net 17
http://www.slideshare.net 11
http://www.linkedin.com 5
http://www.ammao.cn 4
http://blog.vsharing.com 4
http://uxfactory.tumblr.com 2
http://www.xianguo.com 2
http://pick.wg-20.de 2
http://re.xianguo.com 2
http://pool.wg-20.de 1
file:// 1
http://translate.googleusercontent.com 1
http://reader.youdao.com 1
http://admin.vsharing.com 1
http://www.zhuaxia.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • this a great website. visit the other one too. similar but a little better product and some free information. http://www.proseductiontraining.com
    Are you sure you want to
    Your message goes here
    Processing…
  • It's wonderful~
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Seduction of the Interface Presentation Transcript

  • 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