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

laptop.css – 画像をラップトップ化してくれるスタイルシート

laptop.cssは、画像の周りにアスキーアートのラップトップ枠をつけてくれるという単機能のCSSスタイルシートです。オープンソースです。

3種類のサイズのラップトップが用意されています。

どういう時に有用なライブラリなのか、今一つわかりませんが。

縦横比に注意して画像を用意しないといけないみたいですね。そして、画像につけたリンクが無効になってしまった。

(rss フィード経由の方は元ページを開いて見てください)

via Hacker News

パスワードを決める画面でのアホなルールを集めたリポジトリ dumb-password-rules

dumb-password-rules/dumb-password-rules

パスワードの登録や更新画面で出てきたおかしな制約やエラーを募集している GitHub リポジトリがあります。

あほなパスワードの文字制限を分類

多数の事例が載っていますが、代表的なものをグループ化してみます。

文字種や記号を謎に制限

「% は使えません」「\ は使えません」 – 内部でエスケープしちゃうんですねわかります。ちゃんと作ってあればこんな特例要らないと思うんですが。

「記号で使えるのは ? ! $ €% & * _ = – +. ,:; / () {} [] ~ @ # だけです」

「記号はアンダースコアとハイフンだけ使えます」

「数字や記号は使えません」

「使える記号がありますが、どの記号が使えるかは秘密です」

「パスワードは5-15文字です(が、スペースは文字数としてカウントしません)」

「パスワードに使えない記号は、あなたがそれを入れてみた時だけエラーで教えます」

「パスワードは数字8桁で、0で始まってはいけません」 – 数値型か

「#, %, &, =, /, < などのハッキング文字は使えません」 - ハッキング文字!

長さ指定系

「パスワードは8,9,10文字でなければいけません」

「パスワードは7文字か8文字でなければいけません」

「パスワードは6文字です」 – ATMの暗証番号か

「パスワードは6文字以上です (あとどこにも書いてませんしエラーの原因にも出ませんが最大20文字です)」

「メールアドレスは8文字以上にしてください」 – ユーザーのメールアドレスで選別するの?

「登録フォームのパスワードは最大24文字ですが、実際に使われているパスワードは最初の16文字です(更新フォームで判明)」

技術で解決系

右クリックや Ctrl キーを効かなく(alertが出る)することで、パスワードマネージャーの利用を防ぐ

パスワードを入れる箇所が2か所あるが、コピペやChrome拡張からの自動入力を不可能にすることで、パスワードマネージャーの利用を防ぐ

「パスワードは120日ごとに変更しなければならず、一度使ったパスワードは二度と使えません」

総合力タイプ

「パスワードには記号を含めてください。パスワードには記号は使えません」 どうしろと

「とにかくルール、ルール、ルール!」


顧客や上司がパスワードの文字種について不思議提案をしてきた時に、この事例集を見せて「その発想、やっちゃダメなやつだと笑われてますよ」と言ったら説得できるかもしれません。

via Hacker News

悪の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