悪のUIデザイン、ダークパターンの実例を見せる動画

Wed, 04 Apr 2018 00:00:00 +0000

ダークパターンについては2010年、概念が提唱された際にこのブログでも紹介しました。

ユーザー体験を向上させるのではなく、ウェブサイト運営側の都合でものを買わせたり、ユーザー登録させたりするウェブサイト構築上のトリックを分類して名前をつけよう、というのがダークパターンです。

先週、そのようなダークパターンを解説する動画が公開され、注目を集めています。

とにかく退会したいんだ!

動画の最初はアマゾン。「アマゾンを退会しようとした人はどうなる?」で、一回入ったらそこから出ることは難しい Roach Motel (ゴキブリホイホイ)ダークパターンの実例を見せています。(00:15)

アマゾンを止めようと思ったことがないので知りませんでしたが、日本語でも止めるための手順を説明するブログ記事がいくつもあり、なかなか止め方が難しいのですね。動画と同じように日本のアマゾンでも退会ページを目指してみたのですが、退会に関してはアメリカ版と同じサイト構造になっているようです。

直観的にまず開くであろう、上部ナビゲーションバーの「アカウント&リスト」からは、様々なリンクが表示されるものの、そのどこからも退会ページに辿り着くことはできないそうです。

動画が教えてくれる手順は、

ページ最下部のリンクから「ヘルプ」をクリック
「問題が解決しない場合は」から「カスタマーサービスに連絡」
1の「プライム、その他」タブを選んで
2のプルダウンから「アカウントの確認、変更、閉鎖」 (アメリカ版ではここが"Login & Security"だそうで、さらにわかりにくいですね)
もう一つ出てくるプルダウンから「アカウントの閉鎖」
「チャット」「電話」「eメール」のいずれかを選び、先方からの連絡を待つ

なるほどこれは大変ですね。多くの人は途中で諦めてしまいそうです。

メルマガ退会を難しく

次はニュースレター/メールマガジンの購読停止(02:15)。メールの末尾に購読中止のためのリンクがあり、それを開けばその相手からのメールはもう来なくなる、という仕組みは良くあります。

日本のメルマガでは手動で依頼しないといけなかったりするのがまだまだ多いので、これでも助かる方かと思いますが、動画作者はここにもダークパターンがある、と喝破しています。

購読中止のリンクが地のテキストと見分けにくい色や太さになっていたり、ガチャガチャと関係のない情報が列挙されて非常に探しにくくなっていることが多い、と言います。

言われてみれば、たしかにこういうのよく見ます。

流れで購入ボタン

3つめのスマートフォンゲームアプリでの事例(02:30)は、「ゲームを始める」「次の面へ行く」などのボタンを全部グリーンの角丸ボタンで続けた上で、ゲーム内課金のダイアログで「購入」の方を同じデザインのボタンで描画する、というパターン。

ダークパターン - ユーザーを騙そうとする悪いウェブデザインに名前をつけて共有するサイト

Tue, 17 Aug 2010 00:00:00 +0000

DarkPatterns.orgは、Webデザインを悪用するブラックハット・デザインを無くすことを目的に、わざわざ分かりにくかったり、望んでいないこと実行させるようなデザイン要素に共通の名前(パターン)をつけ、それを使っている不良サイト・企業に文句をつけるための新しいサイトです。

たとえば、パターン「買い物かごに忍び込ませる(Sneak into basket)」パターン。これは、ユーザーが入れていない商品がいつのまにかショッピングカートに紛れ込むようにデザインされているフォームのパターンです。例として、旅行予約サイト大手のTravelocityで、ホテルや飛行機のチケットを購入した確認画面のフォームの中に、旅行携行品保険の購入チェックボックスがデフォルト「はい」で追加されている、などといった例が載っています。

$19.95という額はチケットに比べて安いため、人によってはその保険を買ったことに気づかないまま支払いをすることもありそうです。

単に使いにくいデザインは「バッド・パターン」ですが、それは怠惰や間違いによって引き起こされます。それらは「デザインのアンチ・パターン」として知られています。「ダーク・パターン」は、間違いでは無く、人間の心理を深く理解した上で作成され、作者はユーザーの利益になるかどうかは気にしていません。

サイトでは、これまで掲示板で寄せられたダーク・パターンが、既にかなりの量公開されています。

これからもっと良い名前が出てきて変わる可能性もありますが、今メニューに並んでいるダーク・パターンは以下。

ごきぶりパターン(Roach Motel) - 登録は簡単だけど解約がものすごく面倒
撒き餌とスイッチ(Bait and Switch) - ユーザーがそれしかできない状況にしておいて、選んだらまったく違うことが起こる
買い物かごに忍び込ませる(Sneak into basket)
静かなクレジットカード入会(Silent credit card roll-over) - 無料の入会時にカード情報を聞いておいて、期限後に自動的に有料プランへ
見つかりにくいひっかけ質問(Anti-scan trick questions) - ユーザーに何かを選ばせているが、そこでは実際に別の隠れた事も選択させている
隠れたコスト(Hidden costs) - 支払いの最終段階で、検索結果等に出てなかった追加料金が上乗せされる
プライバシー・ザッカーリング(Privacy Zuckering) - ザッカーリングはFacebook CEOザッカーバーグ氏の名前からの造語。プライバシーの設定画面で、業界用語を混ぜ込んでユーザーが望む以上の情報を公開状態にする
価格での比較を妨害(Price Comparison Prevention) - 価格で並べる機能をつけず、価格は日付や場所等を選択した後の詳細ページでしか出なくする
広告に見えない広告(Disguised Ads) - 例: 「ダウンロード」と書いてあるボタンは全部広告で、書いてないボタンがダウンロード、なダウンロードサイトdownload.com
友人スパム(Friend Spam) - Twitterや無料メールのパスワードを聞き、あなたの友人に勧誘メールを送りつける
強制情報公開(Forced Information Disclosure) - サービスに関係のない個人的すぎる質問に答えないと先へ進めなくする

毎日ウェブを使っている人なら、上記のようなデザインはどこかで見たことがあるかと思います。元のデザインパターンと同じで、「名づけることで知識を共有しやすくする」というのは素晴らしいですね。この試みがうまくいってほしいと思いますし、その結果としてそういうウェブデザイン・UIデザインをする企業が減ってくれればいいなあと。

Dark-Pattern on akky@サイボウズラボ・ブログ

悪のUIデザイン、ダークパターンの実例を見せる動画

とにかく退会したいんだ!

メルマガ退会を難しく

流れで購入ボタン

ダークパターン - ユーザーを騙そうとする悪いウェブデザインに名前をつけて共有するサイト