Tweet
Tweet

Slide 1

Slide 1 text

Dark User Interface 中井 崚日

Slide 2

Slide 2 text

UIのダークパターン　 カリフォルニア州で規制 ダークパターンとは 利用者の意図しないことが実行される手口 利用シーン ・アカウントを作成する ・購入するような場面

Slide 3

Slide 3 text

ECサイトの11%にダークパターン 図の引用元:SHIFT

Slide 4

Slide 4 text

大統領選にも使用 図の引用元 「大統領の勝利確率」 New York TimesがPV獲得の為に トランプ氏やクリントン氏の当選見込みの変化をリアルタイムで反映しているかのように見せた図（外観型UI）

Slide 5

Slide 5 text

もくじ　ダークパターン 1. スニーキング （隠密） a. ショッピングカートに勝手に追加 b. 隠された料金 c. 非表示のサブスクリプション 2. アージェンシー （切迫） a. カウントダウンタイマー b. 期限非表示の期間限定メッセージ 3. ミスディレクション （誤認誘導） a. 羞恥を与えて誘導 b. 視覚的干渉 4. ソーシャルプルーフ （社会的証明） a. アクティビティメッセージ b. 出所が不明なお客様の声 1. スケアシティ （希少性） a. 在庫が少ないメッセージ b. 需要が高いメッセージ 2. オブストラクション （ゴキブリホイホイ） a. キャンセルが難しい 3. フォースドアクション （行為強制） a. 強制登録 4. おとり販売 5. 価格の比較防止 6. フォースドコンティニュティ （続行強制） 7. フレンドスパム

Slide 6

Slide 6 text

まとめ　ダークパターン 1. スニーキング（隠密） 2. アージェンシー（切迫） 3. ミスディレクション（誤認誘導） 4. ソーシャルプルーフ（社会的証明） 5. スケアシティ（希少性） 6. オブストラクション（ゴキブリホイホイ） 7. フォースドアクション（行為強制） 8. おとり販売 9. 価格の比較防止 10. フォースドコンティニュティ（続行強制） 11. フレンドスパム ➔ 都合の悪い情報を隠匿 ➔ 期限で急かす ➔ 選択肢の誘導 ➔ 他者のアクティビティ提示 ➔ 在庫枯渇匂わせ ➔ 入るの簡単。出るのは至難な構造 ➔ タスク強制 ➔ 「閉じる」にトラップ ➔ 単位不揃いによる価値比較妨害 ➔ 登録やプロモーション受信の強要 ➔ ユーザの友人にスパム送付

Slide 7

Slide 7 text

スニーキング ユーザにとって不都合な情報を秘匿・後出し

Slide 8

Slide 8 text

スニーキング　ショッピングカートに勝手に追加される 図の引用元:SHIFT ギフトを買うと有料のメッセージカードが勝手にカートに入る

Slide 9

Slide 9 text

スニーキング　ショッピングカートに勝手に追加される 事例：avasflowers.net ギフトを買うと有料のメメッセージカードが勝手にカートに入る

Slide 10

Slide 10 text

スニーキング　ショッピングカートに勝手に追加される 事例：cellularoutfitter.com スマホを買うと 保護フィルムが勝手に カートに入る

Slide 11

Slide 11 text

スニーキング　隠された料金 図の引用元:SHIFT 手数料や送料を後出し　 →　ユーザが気づかず注文

Slide 12

Slide 12 text

スニーキング　隠された料金 事例：proflowers.com 手数料を こっそり 請求

Slide 13

Slide 13 text

スニーキング　非表示のサブスクリプション wsjwine.com 「詳細」をクリックしない限り、 89ドルの定期購読料の情報が非表示

Slide 14

Slide 14 text

スニーキング　非表示のサブスクリプション ross-simons.com 「詳細」をクリックしない限り、 89ドルの定期購読料の情報が非表示

Slide 15

Slide 15 text

アージェンシー 販売または取引に期限を設定することで ユーザーの意思決定と購入を促進

Slide 16

Slide 16 text

アージェンシー　カウントダウンタイマー justfab.com 提示されたオファーはタイマーが期限切れになった後でも有効

Slide 17

Slide 17 text

アージェンシー　カウントダウンタイマー 提示されたオファーはタイマーが期限切れになった後でも有効 図の引用元:SHIFT

Slide 18

Slide 18 text

アージェンシー　カウントダウンタイマー leesa.com 提示されたオファーはタイマーが期限切れになった後でも有効

Slide 19

Slide 19 text

アージェンシー　期限非表示の期間限定メッセージ samsung.com 提示されたオファーはタイマーの期限は不明

Slide 20

Slide 20 text

ミスディレクション 視覚、言語、感情などを使用して、 ユーザーを特定の選択に誘導したり、 特定の選択から遠ざける

Slide 21

Slide 21 text

ミスディレクション　羞恥を与えて誘導 図の引用元:SHIFT

Slide 22

Slide 22 text

ミスディレクション　羞恥を与えて誘導 radioshack.com はい 割引価格で欲しい。 いいえ 定価で欲しい。

Slide 23

Slide 23 text

ミスディレクション　視覚的干渉 都合の悪いボタン「いいえ」を押せないように見せている 図の引用元:SHIFT

Slide 24

Slide 24 text

ミスディレクション　視覚的干渉 greenfingers.com 都合の悪いボタン「いいえ」を押せないように見せている

Slide 25

Slide 25 text

ミスディレクション　錯覚する質問 newbalance.co.uk メール配信を希望する場合にチェックするのではなく、 希望しない場合にチェックが必要

Slide 26

Slide 26 text

ミスディレクション　トリッククエスチョン ←　否定文 ←　肯定文 利用者が意図していない答えを引き出すよう に設計された質問。 同じことを尋ねているように見えるが、 よく確認すると別のことや正反対のことを尋ね る質問項目。 図の引用元:SHIFT

Slide 27

Slide 27 text

ミスディレクション　 押し売り topcoat.store 買おうとしている商品よりもグレードの高い商品を提示

Slide 28

Slide 28 text

ソーシャルプルーフ 他の利用者の体験や行動を表示し、 利用者のアクションに影響を与える

Slide 29

Slide 29 text

ソーシャル プルーフ　アクティビティ メッセージ thredup.com 「Jacqueline氏が$52＄でたった今オーダーしました」 長期間販売されてきたにもかかわらず、販売商品が他顧客によって「購入直後」であることを常に表示

Slide 30

Slide 30 text

ソーシャル プルーフ　アクティビティ メッセージ 図の引用元:SHIFT

Slide 31

Slide 31 text

ソーシャル プルーフ　アクティビティ メッセージ jcpenney.com 24時間以内に商品を見た人数が強調

Slide 32

Slide 32 text

ソーシャル プルーフ　出所が不明なお客様の声 spanx.com 出所が不明な商品の感想・お勧めメッセージ

Slide 33

Slide 33 text

スケアシティ 商品が購入できなくなる可能性が高いことを知らせることで、 ユーザーに対する商品の購入願望を強める

Slide 34

Slide 34 text

スケアシティ　在庫が少ないメッセージ 6pm.com 「残り3つです」 在庫が残り少ないことを利用者に提示 「ちょうど今売り切れた」 在庫がない時にユーザが買い逃したように見せる

Slide 35

Slide 35 text

スケアシティ　在庫が少ないメッセージ 図の引用元:SHIFT

Slide 36

Slide 36 text

スケアシティ　常に在庫が少ないメッセージ orthofeet.com 「残りわずか」 メッセージを在庫数に関わらず全商品に表示

Slide 37

Slide 37 text

スケアシティ　需要が高いメッセージ fashionnova.com 「すぐ売り切れます！」 メッセージを人気・不人気に関わらず全商品に表示

Slide 38

Slide 38 text

スケアシティ　需要が高いメッセージ pacificcoast.com 「すぐ売り切れます！」 メッセージを人気・不人気に関わらず全商品に表示

Slide 39

Slide 39 text

オブストラクション 別名：ローチモーテル（ごきぶりホイホイ） ユーザーを1つの状況に入り込みやすし、 その状況から抜け出すことを困難にする

Slide 40

Slide 40 text

オブストラクション　キャンセルが難しい savagex.com 「キャンセル受付は電話のみ」 簡単にサインアップできるが、キャンセルには電話する必要

Slide 41

Slide 41 text

オブストラクション　キャンセルが難しい 1800flowers.com 「キャンセル受付はメールのみ」

Slide 42

Slide 42 text

フォースド アクション ユーザーがタスクを完了する条件として、 何らかの操作を強制

Slide 43

Slide 43 text

フォースド アクション　強制登録 therealreal.com 商品を表示するだけでも、 サインアップが必要

Slide 44

Slide 44 text

フォースド アクション　強制登録 musiciansfriend.com 登録時にメールや プロモーションの受 信強要

Slide 45

Slide 45 text

おとり販売 おとりの情報を活用して利用者が意図しない行為を実行

Slide 46

Slide 46 text

おとり販売 ×をクリックするとアップデート開始 図の引用元:SHIFT

Slide 47

Slide 47 text

価格の比較防止 商品比較妨害

Slide 48

Slide 48 text

価格の比較防止 ベースとなる単位が異なるため料金の比較困難 図の引用元:SHIFT

Slide 49

Slide 49 text

他 強制的な継続性（ Forced Continuity) サービスの無料期間が終了したと同時に、何も警告や告知がなくクレジットカードへ の請求が開始されるパターンです。 なりすましスパム（ Friend Spam) 友人検索に使用するなどの説明でメールやソーシャルメディアへのアクセス許可が 求められ、許可をすると、自身のアドレスやソーシャルメディアのアカウントから勝手 に情報が発信されてしまうようなパターンを指します。

Slide 50

Slide 50 text

まとめ　ダークパターン 1. スニーキング（隠密） 2. アージェンシー（切迫） 3. ミスディレクション（誤認誘導） 4. ソーシャルプルーフ（社会的証明） 5. スケアシティ（希少性） 6. オブストラクション（ゴキブリホイホイ） 7. フォースドアクション（行為強制） 8. おとり販売 9. 価格の比較防止 10. フォースドコンティニュティ（続行強制） 11. フレンドスパム ➔ 都合の悪い情報を隠匿 ➔ 期限で急かす ➔ 選択肢の誘導 ➔ 他者のアクティビティ提示 ➔ 在庫枯渇匂わせ ➔ 入るの簡単。出るのは至難な構造 ➔ タスク強制 ➔ 「閉じる」にトラップ ➔ 単位不揃いによる価値比較妨害 ➔ 登録やプロモーション受信の強要 ➔ ユーザの友人にスパム送付

Slide 51

Slide 51 text

番外編 誇大・虚偽広告 コンテンツと関係ない広告配信

Slide 52

Slide 52 text

誇大・虚偽広告 CM 実際のゲーム エバーテイル

Slide 53

Slide 53 text

出典　WEBサイト 1. ｢ダークパターン｣に騙されてない？ …カリフォルニア州、消費者を混乱させるようなウェブサイトを禁止 2. その表現、本当に大丈夫？世界的に規制が進むダークパターン！ 3. ユーザーを欺く、UIで見かけるダークパターンのまとめ 4. Dark patterns (Harry Brignull) 5. UXP2: Dark patterns @ Purdue University 6. dark-patterns-v2.csv 7. なぜAmazonですらUXデザインの「ダークパターン」でユーザーを騙すのか