「UIデザイン」カテゴリーアーカイブ

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

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

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

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

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

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

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

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

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

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

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

メルマガ退会を難しく

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

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

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

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

流れで購入ボタン

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

動画では他に、やたらと「こちらは先ほど売り切れました!」「あとn時間で無くなります!」といった警告を散りばめるホテル予約サイトや、友人のメールアドレス情報を(サービスに招待する目的で)預けることをわかりにくいボタンで8回も押す機会があるような登録フォームをデザインして訴訟を受け負けたリンクトインの裁判、などの事例を紹介しています。

まさに「面の皮」なスーツケースカバー

空港の荷物受け取りで、コンベアーベルトに乗って出てくる自分のスーツケースを見分けやすくするためにステッカーなどをベタベタ貼ってる人がいますよね。

Firebox が新たに発売した Head Case は、スーツケースの持ち主が瞬時にしてわかるというスーツケースカバー。なぜわかるかというと、こんな図柄だから。

Head Case by Firebox

これはインパクト大きい。

「もう、他の誰も、間違ってあなたのスーツケースを持って行くことはありません」だそうです。

カバーのサイズは大・中・小の3つあり、高解像度の顔写真をアップロードして、できあがったものを20-30ポンドで購入できます。

via Laughing Squid

失読症(ディスレクシア)を体験できるフォント

文章の読み書きにだけ困難を感じるというディスレクシア(失読症)であると診断されたデザイナーのダニエル・ブリトンさん(Daniel Britton)が、同級生や先生に失読症がどんなものであるかを理解してもらおうと、Helvetica フォントを基にデザインしたのがこれらのフォント(右側の赤いアルファベット)。

dyslexia-fonts-by-danielbritton

このフォントを使うと、文章がこんな風になってしまいます。

text-in-dyslexia-fonts-by-danielbritton

ブリトンさんは、「人口の1割、世界で8億人はいるといわれる失読症への理解が進み、正しい手助けができるなら、(失読症でありながら大きな業績を上げている)(ヴァージングループの)リチャード・ブランソン氏、(テスラCEOの)イーロン・マスク氏、(19歳にして海洋ゴミの除去プロジェクトを考案した)ボヤン・スラット氏のような人物をもっと増やせるのではないか」と述べています。

dyslexia-font-designing-by-danielbritton

こちらの3D版では、アルファベットから取り除いた部分と残った部分を前後2枚のパネルに配置することで、真正面から見たら普通のアルファベットとして見え、斜めから見るとずれて読みにくくなる文章を再現しています。角度をつけるほど重い症状を体感できるというわけです。

dyslexia-font-3d

アルファベットの一部を取り去るというこのフォント、失読症の人の見方を科学的に再現しているわけではないことは注意が必要ですが、自分にとって簡単に出来ていることが必ずしも万人に出来ているわけではない、ということを理解してもらうツールとしてはいいのではないでしょうか。

ブリトンさんはまた、このフォントが各メディアで紹介されて話題を呼んだことを受け、クラウドファンディングにて、このフォントを使って小中学生に失読症がどんなものかを体験してもらうディスレクシア教育用パックの製作を呼びかけています。

via FastCompany

McBike – 自転車ドライブスルー用のマックの新パッケージ

マクドナルドがデンマークの首都コペンハーゲンとコロンビア第二の都市メデジンで実施したプロジェクトMcBikeは、

mcbike-package

取っ手の部分をハンドルに引っ掛けられる、自転車用の新パッケージです。

mcbike-on-bike

「低エネルギーでヘルシーなライフスタイルへ向けて世界は動いている」ということ。

https://www.youtube.com/watch?v=TZ4Y6Lnv0e8

このMcBikeボックス、動画の最後では「アムステルダムと東京にも近日登場」と出てきます。東京のどこのマックで実施されるのか、楽しみですね。

mcbike-will-hit-tokyo-or-taiwan

そこ台湾だけどね!

via Likecool

Motix – キーボードから手を離さずにマウスカーソルを操れる、空中指モーションキャプチャ・デバイス

IBMのノートパソコンのキーボードの中央部に付いていたトラックポイントは、ホームポジションに手を置いたままでマウスカーソルを動かせるということで一部の人にとってはマウスやトラックボールよりも人気のある入力デバイスでした。

ThinkPad X60 pointing stick - Wikipedia

トラックポイントと同じようにキーボードの上に両手を置いたままでカーソルを操るデバイスとして新たに登場したMotix は、ポッチを指で動かす代わりに、キーボードから持ち上げた人差し指の位置や動きをモーションセンサによって読み取ることで、ユーザーの指示を受け取るというものです。

motix-1

スペースキーの手前には位置合わせのパッドを貼り、自分の普段の指の場所にあわせた読み取りができるようにします。

motix-2

キーボードの奥側にはモーションセンサ。Kinnect の小さいやつ、といった感じでしょうか。これで人差し指一本、あるいは二本同時の動きを読み取るそうです。

motix-3

上の動画はMotix 社自身によるデモですが、有名技術ブログ The Verge のブロガーが CES の会場で本日使ってみたという動画がこちら。

いきなり快適に使える、という感じではなく、それなりの練習が必要そうです。

今年の年末出荷予定の購入予約が、ハードウェアとソフトウェアのセットで150ドル(1万6437円)。実際に試さずに買ってしまうのは勇気が要るかなとは思いますが、売り文句どおりに動くのであれば、前述のホームポジション維持と省スペースという2点からは、期待の持てる入力方式かなと思います。

via The Verge

フェイスブックの「お知らせ」が(日本からは)東半球の地球アイコンに変更

フェイスブックの「お知らせ」アイコン、地球の形のアイコンが、一部の人、というか世界の半分以上の人向けに新しく更新されたようです。

facebook-notification-eastern-hemisphere

日本からログインしているみなさんは、地球の形がユーラシア・アフリカ大陸に変わっているのではないかと思います。これまではずっと、アメリカ大陸が見える地球のアイコンでした。

Facebookの画像ファイルにも、これまでの西半球(アメリカ大陸)と東半球の両方のアイコンが含まれるようになっていますね。

facebook-css-sprite-20140731

アクセス元のIPアドレスと国・地域のテーブルを参照するか、ユーザーの登録した住所を参照してかわかりませんが、ユーザーの場所に合わせて地球のどっちの側を表示するかを変えるようにしたみたいです。

もともとそういうデマは流れていた

嘘から出たまことというか、何年も前から英語圏で何度も話題になっている、この地球アイコンに関するデマがあったんです。

「ねえねえ知ってる? 香港からフェイスブックにログインすると、アメリカからログインしたのとは違う、東半球の地球アイコンになるんだよ」

というもので、アメリカ大陸のユーザーを中心に、このデマが定期的に流れていたんですよね。アジアやアフリカに友人がいれば、すぐデマだというコメントが入りそうなものですが、地球をまたいで友人がいる人というのはそれほど多くなかったのか、結構な人が信じて「シェア」していたみたいです。

フェイスブック社がこのデマを意識して今回の変更をしたのかどうかはわかりませんが。

via @kadavy via @designernewsrss

[追記] 6月にもこの変更を見てた、という話がありました。その時は話題にならなかったのですが、一部ユーザーに対して先行してテストしていたのかもしれないですね