悪いデザイン vs. 良いデザイン: 私たちが学べる 5 つの例

BY admin
|

悪いデザインの例と良いデザインの例を並べて見ることは、楽しいだけでなく、デザイナーにとって重要な教訓も引き出します。 デザイナーが避けるべき落とし穴を強調し、デザイン理論を現実の世界で機能するソリューションに変換する方法を理解させてくれるのです。 アメリカの作家、研究者、ユーザビリティの専門家であるジャレッド・スプールは、かつてこう言いました。 「良いデザインは、それがうまくいったとき、見えなくなる。 良いデザインは、良くできたときには見えなくなり、悪くできたときに初めて気づくものだ」。 そこで、明らかに悪いデザインの 5 つの例を見て、良いデザインがそれをどのように機能させるかに光を当て、いくつかの教訓を抽出し、私たち全員がユーザーにとって素晴らしい、目に見えない体験を作れるようにしましょう。

Information overload

The Bad: ロサンゼルスの駐車場の標識

ロサンゼルス (LA) の駐車場の標識は、何十年もの間、情報過多の典型的な例でした。 交通規則が複雑なため、小さな面積で多くの情報を伝える必要があるためです。

これらの標識はどれほどわかりにくいのでしょうか。 伝統的に、非常に-2010年代のこの例を見てください。

Author/Copyright holder: Jorge Gonzalez. 著作権の条件とライセンス。 CC BY-SA 2.0

ロサンゼルスの駐車場の標識として、この例はすでにかなり単純なものです。

火曜日の午前 9 時にこの道路を走っていると想像してください。

デザイナーとして、私たちはしばしば、小さなスペースに多くの情報が表示されるようにデザインしなければならない状況に直面します。 ロサンゼルスの駐車場の標識は極端な例かもしれませんが、多くの場合、モバイルアプリのデザインは、同じ問題に直面することを意味します。 駐車場の標識も、一般のデザイナーも、解決策はあるのでしょうか。

The Good: Nikki Syliantengの駐車場サイン

すべての情報を表示し、かつわかりやすいサインをデザインすることは、不可能なことのように聞こえます。 しかし、それこそブルックリンのデザイナー、Nikki Syliantengが行ったことなのです。

作者/著作権者。 Nikki Sylianteng。 著作権の条件とライセンス CC BY-NC-SA 4.0

ニッキーの提案した駐車場の標識は、最終的に試験的にロサンゼルスで使用されました。 ニッキーは、ドライバーは単にその場所に駐車できるかどうかを知りたがっていることに気づきました。 はい」「いいえ」、それだけがドライバーのニーズであり、駐車場の標識はそれだけを示しています。

また、彼女のデザインでは、情報を伝えるためにテキストではなく、ビジュアルを使用しました。 その結果、緑がOK、赤が駐車禁止と、驚くほど直感的にわかるようになったのです。 色覚異常の人のために、駐車禁止のストライプもデザインされています。

これで、この看板を見れば、火曜日の午前9時は駐車禁止であることがわかりますね。 バーで何が何だか一目瞭然です。

Lessons Learnt: ベストプラクティス

  • ユーザーが何を必要としているかを理解し、それに基づいて設計すること。 9760>
  • ユーザーに伝えるべき情報がたくさんありますか？ テキストの代わりにビジュアルを使用してみてください。

Mystery Meat Navigation

The Bad.Data.Data（データの視覚化）について詳しくは、こちらをご覧ください。 LazorOffice.com

1998年に Web Pages That Suck2 の Vincent Flanders によって作られた Mystery Meat Navigation (MMN) は、ユーザーがリンクをクリックするかカーソルをそこに向けるまでリンク先が見えないケースを指します。 謎の肉」という用語は、アメリカの公立学校のカフェテリアで提供される、正確な種類がもはや判別できないほど加工された肉について言及したものです

MMN が悪いのは、ナビゲーション要素の発見可能性を低下させるからです。 ほとんどの MMN は古い Web サイトで見つかりますが、最新の Web サイトにも驚くほど多く見られます。 たとえば、プレハブ住宅を作成する設計事務所である Lazor Office を見てみましょう。

Author/Copyright holder:Lazor Office, LLC. 著作権の条件とライセンス Fair Use

LazorOffice.comのトップページには、MMNの画像がグリッド状に配置されています。 見ての通り、このタブローはどこに行けばいいのか、ほとんど示してくれません。 その代わりに、9 つの画像がただ置かれており、ページと対話するのではなく、謎を熟考している人がいます。

ホームページの折り返しの下には、画像のサムネイルが並んでいます。 それらはクリックできるのでしょうか。 マウス カーソルを画像の上に移動させると、ポインタに変わります。 しかし、画像をクリックするとどうなるでしょうか。

「クリックしてみてください！」というのは、決してよいユーザー エクスペリエンス (UX) ソリューションではありません。 チャンスは、ユーザーがナビゲーションを放棄し、競合サイトで代替ソリューションを見つけることです。

The Good: Interaction Design Foundation の Web サイトにあるコース カード

ありがたいことに、MMN の問題は簡単に解決することができます。 重要なのは、リンクを明確にラベル付けすることを意識することです。 マウスを乗せると表示される「プロジェクトを見る」を追加するだけで、上記のLazor Officeのページのユーザビリティが向上します。

Author/Copyright holder: インタラクション デザイン ファンデーション ApS. 著作権の条件とライセンス フェア ユース

私たちのコース カードは、リンクと同じくらい謎めいたものではありません。

インタラクション デザイン財団のコース カードでは、各カードの下部に「コースを見る」というアクションを示すだけでなく、「コースへ行く」というテキストがあるホバー状態も用意しています。 多くのWebサイトが同様の規約に従っており、Webサイトのユーザビリティを最大化するために、あなたもそうすべきです。 ベストプラクティス

リンクには必ずラベルを付けましょう! 同様に、ユーザーは謎のリンクをクリックしたくはないでしょう。

ユーザー アクションに摩擦を加える

The Bad: iFly50.com

デザイナーとして、ユーザーがそのアクションを行うのを思いとどまることが目的でない限り、細心の注意を払ってユーザーの行動に摩擦を加える必要があります。 しかし、時には、意図せずしてユーザー操作に摩擦を加え (ほとんどは美的または新規性の理由から)、有害な UX になってしまうことがあります。

一例は、KLM の iFly 雑誌の記念日のために作成した iFly50.com です。 iFly 50 は、50 の旅行先を紹介する縦スクロールのウェブサイトで、一部の旅行先 (下の写真のような) では、もっと写真を見るために数秒間クリックし続けるよう、下部近くのボタンがユーザーに求められます。

Author/Copyright holder: Koninklijke Luchtvaart Maatschappij NV (KLMオランダ航空). 著作権の条件とライセンス。 フェア ユース

iFly 50 は、ユーザーがもっと写真を見たいと思うたびに、数秒間クリックし続けることを期待しています。

各アクションに数秒の摩擦を追加する行為は、UX を途方もなく悪くする結果になります。 クリックして即座にページを読み込む代わりに、ブラウザでリンクをクリックするたびに 2 秒間クリックし続けなければならなくなったらと想像してください。 多くの場合、私たちデザイナーは、最新のインタラクション スタイルまたはアクションに夢中になりがちですが、デザインがユーザーのアクションに摩擦を与える可能性がある場合は、常に注意を払うことが重要です。 ほとんどの場合、試行錯誤された慣習 (たとえば、単純なクリックやスワイプ) は完璧に機能します。 iOS のエラスティック スクロール

興味深いことに、ユーザーのアクションに注意深く摩擦を加えることで、優れたデザインになることがあります。 Apple のモバイル オペレーティング システム iOS で最も人気のある発明の 1 つは、特定の状況 (Web ページの終わりなど) でスクロールがますます困難になる、エラスティック スクロールの作成です。 Interaction Design Foundation ApS. 著作権の条件とライセンス。 フェア ユース

iOS の弾性スクロールでは、いくつかの状況で意図的に摩擦が追加されます。 摩擦は、スクロールがもはや許されない状況を示すために追加され、その結果、直感的なエクスペリエンスが得られます。 ベストプラクティス

ユーザーのアクションに何らかの摩擦を加えることはできる限り避け、代替手段がない場合は慎重に実施すること

ユーザビリティを無視した「賢い」デザイン

悪い点 Bolden.nl

時として、巧妙なデザインは UX に害を及ぼすことがあります。 この間違いをより危険なものにしているのは、私たちデザイナーが巧妙なデザインを愛しているからです。 それらは、私たちの顔に笑顔をもたらす小さなグラフィックの驚異です。 悲しいかな、人間の大半はデザイナーではありません。 さらに悲しいことに、すべての巧妙なデザインが良いデザインというわけではなく、特に、アクセシビリティ、発見性、またはユーザビリティの問題を引き起こす場合はそうです。 Bolden. 著作権の条件とライセンス。 フェア ユース

彼らのホームページが何を言おうとしているのかわかりますか？ いいえ？ それは、メッセージをきちんと見るためには、マウスをページの隅に移動させなければならないからです。

Author/Copyright Holder: Bolden. 著作権の条件とライセンス フェアユース

これは巧妙なデザインでしょうか？ はい、間違いなくそうです。 しかし、これは悪いデザインでしょうか。 このウェブサイトは、斬新なデザインを提供しようという制作者の決意によって、見出しの読みやすさを著しく低下させています。 このサイトをデザインした人は、マウスを隅に移動させることをユーザーに伝えるテキストも残しており、つまり見出しの発見は偶然に依存しているのです。 さらに、見出しが見えても、文字が重なって見えてしまうため、文字と背景のコントラストが悪くなっています。 これが積み重なって、ユーザーフレンドリーでないサイトになっています。

The Good: CultivatedWit.com

Cultivated WitのWebサイトは、巧みなデザインがユーザビリティに負担をかける必要がないことを示す素晴らしい反例と言えます。 Cultivated Wit。 著作権の条件とライセンス。 フェアユース

Cultivated Witのホームページでは、フクロウのイラストにマウスを乗せるとウィンクします。

Author/Copyright Holder: Cultivated Witです。 著作権の条件とライセンス。 フェアユース

Surprise! カーソルを向けるとフクロウがウィンクしてくれます。 空白の賢い配分にも注目してください。

ここでの重要な違いは、これがウェブサイトの重要な部分を形成していないため、ユーザーがこの巧妙なデザイン要素を発見しなかったとしても、ユーザビリティが低下することはないという点です。 そして、下にスクロールすると、次のように表示されます:

著者/著作権者: Cultivated Wit. 著作権の条件とライセンス。

そして、Web サイトは UX を犠牲にすることなく、賢くなることができます。 唯一の小さな問題は、「Join our email club」というテキストをもっと目立たせるべきですが、全体として見ると、Cultivated WitのWebサイトは、悪いUXを作成せずに巧妙なデザインを提供する素晴らしい例です。 ベストプラクティス

巧妙なデザインは、常に可能な限り確実なものにし、実際のユーザーでテストする必要があります。 時には、巧妙なデザインが裏目に出て、ユーザビリティを損なうことがあります。

Superfluous animations

The Bad: PayPal Receipt Concept on Dribbble

アニメーションはインタラクション デザインの重要な要素ですが、常に目的を果たすべきです。 アニメーションのために行われるのでは決してありません。 残念ながら、デザイナーはアニメーションに夢中になりがちですが、その理由の 1 つは、アニメーションは作成するのがとても楽しいので、いつやめていいのかわからないからです。 Vladyslav Tyzun。 著作権の条件とライセンス。 フェアユース。

アニメーションはきれいですが、余分なものです。 合計で、トランザクションの詳細を表示するのになんと 3.5 秒もかかっています。 レシートのシンプルなフェードインは、よりエレガントで、より少ない時間で、ユーザーにとってもより良いものになるでしょう。

この問題は、デザイナーがアニメーションに満足できないような場合に、危険になります。 2016 年の時点で、Vladyslav のアニメーションは 500 以上の「いいね！」と 8,000 以上のビューを獲得することになります。 これは、デザイナーがアニメーションのためのアニメーションに対して持っている、誤った評価を示しています。 より直接的な表現よりも、すっとぼけた叙事詩を好むデザイナーの傾向を洞察し、アニメーションに屈する前に自分を捕らえることが、多くの時間を節約し、多くの頭痛を防ぐことになるでしょう。 ユーザーは目的のためにサイトに来るのであって、ギャラリーの大旅行で引き留めるのではなく、短いスペースと時間で彼らが求めているものを見せたいのです。 Stripe Checkout のアニメーション

ただし、意図的にアニメーションを行う場合、その結果は素晴らしいものとなり得ます。 ユーザーが検証コードを受け取ったときの Stripe Checkout のアニメーションをご覧ください：

Author/Copyright holder: Stripe, Inc. 著作権の条件とライセンス。 Stripe は、アニメーションを使用して、実際よりも速く見えるようにします。ユーザーがまだ SMS を受信していなくても、「送信済み」のような更新情報を提供するのです。 これは、ユーザーが待たされることに不満を感じることを防ぎ、SMS が今すぐ送信されることを保証します。

W3C の招待 Web アニメーション専門家の Rachel Nabors は、アニメーションを設計するときに念頭に置くべき 5 つの原則を提案しています3。

  1. 意図的にアニメーションを作成する: アニメーションを作成する前に、それぞれのアニメーションを考え抜くこと。
  2. 役に立ち、必要であり、そして美しい：美学はUXの後回しにすべきです。
  3. 4倍速く：良いアニメーションは控えめで、つまり速く動く。
  4. 殺傷スイッチを設置：パラレックス効果などの大きなアニメーションには、オプトアウトボタンを作る。

Lesson Learnt: ベストプラクティス

アニメーションは常に目的を持って作る：やりすぎると製品のUXを殺してしまいます。 美しさは、その重みを持ち、機能的でなければなりません。

The Take Away

悪いデザインの例を見るのは楽しいことではありませんか？ ありがたいことに、それは教育的でもあります。

  1. ユーザーが何を必要としているかを理解し、その情報を提供する。
  2. 伝えたい情報がたくさんある場合は、テキストの代わりにビジュアルを使用してみる。
  3. リンクには必ずラベルをつけましょう!
  4. ユーザーのアクションに何らかの摩擦を加えることは、そのアクションを思いとどまらせるためのものでない限り避ける。
  5. アニメーションは罵倒のようなもので、使いすぎるとインパクトがなくなってしまいます。 そして、私たちのディスカッション フォーラムで他のデザイナーと教訓を共有しましょう！

    …