The Seduction of the Interface

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  = 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 diﬀerence • 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. • Diﬀeren&ate seduc&ve quali&es from genuine user  func&onal needs. 

make the ﬁrst move

make the ﬁrst 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 ﬁrst move • Use Words • Speak directly to the user • Tell them what they can do to do speciﬁcally  • Use Mo1on • Anima1on • Video demos • Careful with Audio!

but don’t  be a jerk

create a sense  of mystery

the ﬁrst move • Blah

appear desirable

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

ﬂaNer them

project conﬁdence

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

oﬀer aﬀordances 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 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.

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.

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‐oﬀ • 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

http://bobo.chinavisual.com	526
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

The Seduction of the Interface

by Christopher Fahey

Accessibility

Categories

Upload Details

Usage Rights

18 Embeds 932

Statistics

The Seduction of the Interface Presentation Transcript