52
Seductive Interaction Design Chapter 16 The Path of Least Resistance 13M7118 濱村 康司

Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Seductive Interaction Design

Chapter 16

The Path of Least Resistance

13M7118 濱村 康司

Page 2: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

正直いって、私たちの大半は怠け者です

Page 3: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

活動と無活動

•活動と無活動の選択だとどちらを選びますか?

•例1:無料定期購読の契約

• 無料定期購読の契約、ちゃんとキャンセルしましたか?

•例2:座席表

• 座席表がなくても同じ席に座ってませんか?

Page 4: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

現状維持バイアス

• 2つの選択肢があるとき 何も要らない方を選択

• これをStatus-quo bias (現状維持バイアス)と説明 (William Samelsonら, 1998)

•確立した振る舞いは よほど魅力的でないと 変更しない

Page 5: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

DEFAULT OPTION

Page 6: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

デフォルトオプション

•デフォルトオプションの形で現状維持バイアスが市場で悪用

•チェックボックスの外し忘れによって送られるメールなど

Page 7: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Inaction is easier than action

Page 8: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

デフォルトオプションをうまく利用した例

Page 9: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

デフォルトオプションをうまく利用した例

•ドナー登録の施策 •黄色の国(左側4か国):選択で加入

•青色の国(右側7か国):選択で脱退

•違いは自動的に登録されるか、されないか

•選択で脱退の方が圧倒的に高い登録率

•私たちは怠け者で、デフォルトを選ぶ傾向

Page 10: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

THE POWER OF

SUGGESTION

Page 11: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

特定の選択肢の提案

•同僚を昼食に誘う場合

• 「どこへ昼食へ行きますか?」よりも

「私は~と昼食に行きます、一緒に行きませんか?」 の方が直接的で賛成しやすい傾向

• 判断は「どこで食事したら全員幸せになるか?」から

「ここで食事したいですか?」へとシフト

•これをWEBアプリで提供できる方法を考えましょう

Page 12: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Joshua Porterの助言

ミーティングの時間を決めるとき、

どの時間が空いているか尋ねないでください

時間を選択し、それで問題がないか聞いてください

前後の時間を確保して

Page 13: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Ochadoの提案するデフォルト

•イギリスのOchado (オンライン食料雑貨、宅配サービス)

•緑のところはバンが既に近くにいることを表示

•僅かな顧客でもこれを

選べば利益が発生

Page 14: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Twitterの提案する力

•昔のTwitterの登録画面 (2009年頃?)

• フォロー可能な芸能人の リストを出し「フォローする 友人を見つけてください」 と案内

•新規登録者がアクティブユーザになりにくい状態

Page 15: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Twitterの提案する力

• 2010年頃の登録画面

•ユーザの興味のある エリアへブラウズさせ そのリストからフォロー

•この変化によって 完了率は29%増加 その後の参加率も増加

Page 16: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

CONVENIENCE AND

PERSONALIZED

RECOMMENDATIONS

Page 17: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Wells Fargoの例

• Wells Fargo (オンライン支払システム)

•長い間、受取人を追加するのにいろいろな情報を入力する必要

•時間と共に、電力会社のようなよく追加される会社のリストが構築

Page 18: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

今か後か?

• Ketchup (ミーティング用メモツール) http://www.useketchup.com

• ミーティングを追加する時、

現在時間がデフォルトに

•作成のプロセスが単純でミーティングを遅らせない

(未来のミーティングは設定する時間の余裕が存在)

Page 19: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Subtle cues (微細な手掛かり)

•教育アプリの例

•このような動詞から始めるようなラベルであっても

多くの学生が文法を破ってしまう

By the end of the year, Gabriel will be able to...

Page 20: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

微細な手掛かり

•美しい例

• 「説得力のあるエッセイ」は目標やタスクではなく

教師が心にしたこと

By the end of the year, Gabriel will be able to...

persuasive essay

Page 21: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

微細な手掛かり

•美しい例

• もしそのまま入力していたら

「それは動詞ではない」と即席のフィードバックを与える

• これはフィードバックループの非常に小さな例で

重要なことでもあるので詳細は次のセクションに

By the end of the year, Gabriel will be able to...

persuasive essay

Oops! “persuasive” is not a verb!

Page 22: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

もっと多くの情報をお願いします!

• Get Satisfactionの例 (顧客のフィードバックアプリ)

• 曖昧な情報だけの時は メーターが低く、情報を追加していくと高くなる

• メーターはリアルタイムでフィードバック

• メーターが高くなることで 詳細な情報の追加を促す

Page 23: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Steepsterの例

• Steepster(お茶専門のECサイト)

•最初はサムズアップ/サムズダウンで評価 • 結果お茶の90%がポジティブに評価

• これでは本当に素晴らしいお茶を探せない

•評価システムの問題点 • 意見は変更可能で絶対ではない

• 私たちの内部基準は時間によって変化 (後で評価を全てみたとき、評価に疑問が発生)

Page 24: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Steepsterの例

•デザインにあたって5つ星、4段階のスマイリーフェイス、

100段階評価を調査

•そして下のデザインを実装

• スマイリーフェイスがあり、スライダーで高精度な評価が可能

• 小さな目盛で今まで評価したものを確認できる

Page 25: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

AFRAID TO LET GO

Page 26: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

所有バイアスと損失回避

•私たちは何故現状維持バイアスを持っており、 物事をそのまま残してしまうのか? • 原因:未知数の恐れ、怠惰、安全、同一性意識、習慣

•これに関連するのがOwnership bias(所有バイアス)とLoss aversion(損失回避)

•私たちは物を失うことが嫌い • 例:株を持ち続けた後で、手放すべきだったと後悔する株主 (損失回避によってこの埋没費用が説明可能)

Page 27: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Amos Tverskyらの実験

•大学のロゴマークのついたマグカップに価値を与えるよう、 学生に依頼

•半分の学生にマグカップを与え、いくらで売るか質問 残り半分はマグカップにいくら払うか質問

•ほぼすべてのケースで所有者は 非所有者の2倍の金額を提示

•物に対する絶対の価値はない

Page 28: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Amos Tverskyらの実験

•別の研究では半分の学生にマグカップ、

残り半分の学生には大きなチョコバーを与えた

•事前調査では学生はこれらのものを同等に評価したが

所有後に交換を望んだのは10人に1人だけ

Page 29: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

どうか私たちの仮説を修正してください

•損失回避や所有バイアスをWEBコンテキストに

当てはめるには、所有する位置に人々を置くのが簡単

• BuySellAds.comの例

• ユーザは無関心であると仮定

• 声明に名前や個人情報をつけることで

状況修正のための行動をとるように促す

Page 30: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Brighter Planetは契約を増やすために

微細な詳細を結びつけます

• Brighter Planet(エコ活動を手助けするサービス)

• 消費エネルギーの減少やリサイクルなど

•最初にユーザの二酸化炭素排出量を評価するが

そのためには多くの個人情報(住居など)が必要

•この質問に答えるためのデザインが魅力的!

Page 31: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Brighter Planetのデザイン

Page 32: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Brighter Planetのデザイン

• 最初にデフォルトの二酸化炭素排出量を提示

• デフォルト値は家の面積や子供の全国平均によって計算 • 面積などのデフォルト値を自分のものと置き換えたくなる衝動

• データを入力していくとリロードなしでスコアが変化 • これはタイトなフィードバックループの例(詳細は第4章で)

• デフォルト値を自分の情報に修正していくとき、全国平均との比較を見ることができる

• たくさんのフォーム欄に直面しないよう、タブの切り替えなどで 入力欄が回答に置き換えられ、簡単に質問に回答可能

Page 33: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

メイヤーシップと損失回避

• foursquare (モバイルチェックインサービス)

•ポイントやバッジの他に

メイヤーシップ機能

• メイヤーシップ機能は

損失回避の強力な例

Page 34: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

メイヤーシップと損失回避

• お気に入りの場所に何度もチェックインするとメイヤー になれる

• メイヤーに特典がある場合も

• 他人からメイヤーを奪おうとしたときに本当の楽しみ

• 同様に、メイヤーは脅かされるまで意味をもたない

Page 35: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

筆者が直接学んだ

メイヤーシップに関する物語

Page 36: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

損失の物語と非合理的な振舞い

•筆者はテキサス州の北ダラス郊外に在住

•食べることが好きで、シカゴスタイルのピザを欲求

• かなりの探索の後、Chicago Street Pizzaと出会う

• ここでは本当のシカゴスタイルピザを食べることができる

• ピザの生地を確認するため数か月おきに来店

•友人に勧めるためFacebookを経由しTwitterで

チェックインしビジネスをサポートしようとした。

Page 37: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

シカゴスタイルピザ

Page 38: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

ある日、不安にさせる通知が

Page 39: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら
Page 40: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Michelle N.とは何者なのか!

どうやって私の場所のメイヤーになったのか!

Page 41: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

筆者のメイヤーの認識

•昔はメイヤーのことをあまり気にしていなかった

(メイヤーになるのが簡単だったので)

•自分が発見し他の人に話していた場所は

私がメイヤーだったころにほかの誰かによって

主張されていた

Page 42: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

ずうずうしい!

Page 43: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

私はどんな合理的な人でも

脅されたときにすることをしました

Page 44: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

私はその夜、夕食のために家族を

Chicago Street Pizzaに連れて行きました。

Page 45: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら
Page 46: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

こうして筆者はメイヤーを奪還しました

めでたしめでたし

Page 47: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

損失の物語と非合理的な振舞い

•同じくらい愚かに思われるかもしれないが、

いくらかの人々はfoursquareのメイヤーを

取り戻すためにバーに立ち寄る努力をする

•これは所有権が脅かされるか、奪われた途端に

物事がずっと高く評価されることの良い例

Page 48: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Dan Arielyらの実験

•行動経済学者のDan Arielyらの実験

•デューク大学のナショナルゲームのチケットに値付け

• 非常に人気で、大学は抽選でチケットを販売する

•チケットを獲得した人と、獲得できなかった人に電話

• 獲得した人:少なくとも1400ドルで売ると回答

• 獲得できなかった人:平均170ドル以上は支払わないと回答

Page 49: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

Dan Arielyらの実験

•何が起こったのか

•チケットを獲得した人は個人の物語に観戦を組み込んだ

•チケットは純粋に金銭上の取引を超えた

• Airelyの言葉

「買い手と売り手がいるとき、異なる人が異なる展望から

与えることと得ることを同じものとして見ることがなく

取引を諦める傾向にある」

Page 50: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

What have you “given” to your users? (あなたはユーザに何を「与えました」か?)

What can be claimed? (何を要求することができますか?)

What can be lost? (何を失うことができますか?)

Page 51: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

損失回避の悪用

•おとり商法のサイトの例

•いくつかの質問に答えると報酬がもらえると案内

•最後の問題の後に、約束した報酬を渡す代わりに

メールアドレスを要求

• 回答に時間や手間がかかった場合動いてしまう可能性

Page 52: Seductive Interaction Design Chapter 16 The Path of …amateras.wsd.kutc.kansai-u.ac.jp/lecture/?c=plugin;...微細な手掛かり •美しい例 •もしそのまま入力していたら

損失の恐れが決定に影響

•損失回避は微妙なことにも存在

•多くの研究において、人々はものを損失する選択肢を選択する可能性が低い

•例:5ドル割引と、5ドル追加料金回避どちらがいい? • 論理的に同じでも、追加で5ドルを「失う」考えは 人々を悩ませる

•これは次の章の「言葉の力」へと繋がる