【翻訳】デザインの質的評価の方法(Erik Messaki, uxmag.com, 2022)

uxmag.com

デザインの良し悪しは、すぐに見分けがつきますか?デザインの良し悪しは、センスや直感の問題ではありません。「これはすごい!」「これはつまらない!」という反応は、ユーザーに委ねたほうがいいですからね。

デザインの良し悪しを判断する方法は、デザイナーや開発者にとっても、Webサイトのオーナーにとっても重要です。そのためには練習が必要です。もしあなたがプロとして成長したいと願うデザイナーなら、このスキルを歯磨きのように定期的な習慣に変えていくべきです。最初は時間がかかりますが、新しい案件をこなすごとに早くできるようになります。プロは、デザインを自動的に分析します。他人のデザインであれば、その鷹揚な目で長所も短所もすべて見抜くことができます。しかし、自分の仕事はどうでしょう。

ベテランのデザイナーでも、自分のミスを見落としてしまうことがあります。長い間プロジェクトに携わっていると、物事を批判的に見る力が弱くなります。問題点ばかりに気を取られ、他のものを見落としてしまうのです。では、自分や他人のデザインを批評的に見るために必要なことは何でしょうか。

私たちは、3つのレイヤーを分析する必要があります。

  1. マーケティング
  2. ユーザビリティ
  3. ヴィジュアル・デザイン

あなたがデザイナーなら、そのことはしばらくの間忘れてください。あなたは今、批評家なのです。まずマーケターとして、次にユーザーとして、そして最後にデザイナーとして観察してください。ペルソナを順番に担当し、それぞれのペルソナが見るべきものだけに焦点を当てます。この訓練は、単なる「デザイナーの目線」よりも、はるかに生産的です。

では、レイヤーごとに品質をテストしてみましょう。レイヤーは任意であり、便宜上使用するだけです。

1. マーケティングレイヤーでの評価

主題にふさわしいか

ビジュアルは、選択された主題にふさわしいものでなければなりません。例えば、外貨両替のウェブページをハローキティのようなスタイルでデザインすべきではありません。確かに、ユーザーは意識してそのスタイルを考えているわけではありませんが、すぐにその不適切さを感じ取ってしまうでしょう。スタイルとは、ビジネスがオーディエンスに語りかけるための言語です。この言語を理解してもらうこと、つまり、デザインスタイルとカラーパレットがビジネスの種類にふさわしいものであることを確認してください。

プロジェクトゴールに対応しているか

すべてのデザインは、特定のタスクを解決するためにあります。そのデザインは、プロジェクトの目標達成に役立っているでしょうか?

例えば、ランディングページのデザインを分析する場合、オファーがどのように行われるかに注目します。CTAブロックは説得力がありますか?「購入」をクリックしたくなるような、ターゲットとなる行動を起こさせるようなデザインになっていますか?ロゴのデザインであれば、意味や視覚的な実装がブランドにマッチしているかどうかを検討します。

カラーリングは適切か

色はユーザーの注意を最初に引くものなので、主題にふさわしいものであることが不可欠です。デザインというより、ビジュアルマーケティングの問題です。カラーパレットが最適であることを確認してください。ビジネスのニーズに応えていますか?色やその組み合わせは、ターゲットに必要な感情を呼び起こすか?配色は、セールスオファーの特徴に対応していますか?

ガイド:旅行代理店のためのWebデザイン

魅力的なオファー

メインのオファーは魅力的で、興味深く、美的か?何か特別でユニークなものがあるか、それを調べてもっと知りたくなるようなものがあるでしょうか?

2. ユーザビリティレイヤーでの評価

知覚のしやすさ

そのデザインが何であり、どのようなタスクを解決するものであるかがすぐにわかるでしょうか?知覚のしやすさは、デザインがあなたの注意をどのようにコントロールするかによります。

知覚のしやすさは、次のようなものに左右されます。

  • レイアウト構造
  • コンテンツの階層構造
  • ハイライト
  • ビジュアルリード

ページ内の視線の動きを意識的に追ってみてください。

  • 視線は必要なハイライトに留まっていますか?
  • 視線はスムーズに動いているか、それとも "つまずき "があるでしょうか?
  • 二次的な要素に気を取られていませんか?
  • 何もないところで集中力が切れていませんか?
  • 主たる目的に向かっていますか?どのくらいの速さででしょうか?

機能性

機能性とは基本的に、ユーザーがより早く、より簡単にゴールに到達できるようにするためのすべての要素です。ウェブサイトのオプション、ツール、あるいはマイクロインタラクションの要素は、肉眼で素早くテストすることはできません。しかし、どんなビジュアルも、以下のパラメータで評価することができます。

  • 直感的な操作性
  • 要素の認識しやすさ
  • 視覚的な障害物がないこと
  • ゴールへの道筋が視覚的に明確であること

3. デザイン・レイヤーでの評価

デザインとは、アイデア、イメージ、そしてその視覚的な表現です。私たちの仕事は、そのアイデアが十分に実現されているかどうかをチェックすることです。

コンセプト

  • デザインは面白いか?
  • プロジェクトの核となるアイデアが反映されたビジュアルか?
  • ユニークで印象的なイメージになっていますか?
  • スタイルがプロジェクトのアイデアにマッチしていますか?

エンドレス - イラストレーションを用いたウェブデザイン

関連性

デザインはすぐに時代遅れになり、その結果、ユーザーにとって魅力的でなくなる傾向があります。デザインに関連性があり、陳腐化するような古い画像がないことを確認しましょう。

レイアウト構造

レイアウトの承認段階で、クライアントは自分たちのウェブサイトデザインが良いものになるかどうかを判断することができます。レイアウトの構造を見るだけでいいのです。ここでは、良いレイアウトの主な基準を紹介します。

グルーピング

コンテンツブロックは、プロジェクトの論理と意味の階層にしたがってグループ化する必要があります。すべてのブロックは、独自のデータセットを含み、独自の目的(ミニゴール)を持っています。どのブロックでも、ユーザーは特定の情報を見つけたり、目標とするアクションを実行したりします。

ブロックはネガティブスペースで区切られ、どのグループがどのグループなのかが明確になるようになっています。ネガティブスペースは、通常の大きさの白い要素としてとらえるのがよいでしょう(この方が、より敬意と気配りをもって見ることができます)。ブロック間のインデントは、各ブロック内のインデントと同様に厳密に統一する必要があります。内側のインデントと外側のインデントは、互いに比例し、バランスがとれていなければなりません。

悪いデザインでは、ブロックやブロックの要素が「くっついている」(インデントが小さすぎる)か、「バラバラになっている」(インデントが大きすぎる)ことがよくあります。

整列性(アラインメント)

良いアラインメントは、デザインを秩序立てて整理します。要素がどのように整列されているか、また整列が全体的に均一かどうかをチェックしましょう。

良いデザイン評価を行う

最初の2つの層(マーケティングユーザビリティ)に問題がなく、構造が良好であることを確認したら、視覚的な要素の評価に移ることができます。

これらは、質の高いデザインに欠かせない基準です。

ヒエラルキー

視覚的な階層は、レイアウトという「骨格」の上に成り立っています。レイアウトに基づくデザインは、階層に沿うだけでなく、階層を強化し、強調するようにすること。これが重要です。デザインをチェックするのであれば、構造をじっくりと吟味してください。気づかないうちに、間違ったハイライトで最初の秩序を台無しにしてしまうことはよくあることです。

フォーカス

フォーカスは、"ここを見て!"という呼びかけです。デザインのフォーカルポイントはすべて機能的でなければなりません。これらのポイントは、重要な情報に注目させるものでしょうか?デザインのハイライトが純粋に美的配慮に基づいており、意味のない目的を持っている場合、そのデザインはどんなに見た目がよくても悪いものです。

視覚的な注目点には、特定のメッセージが込められていなければなりません。「見てください、ただのきれいな丸です!」というのは、良いデザインにはふさわしくありません。

バランス

デザイナーでなくても、視覚的なバランスを感じ取ることができます。デザイン要素は物理的な重みがあるように感じられます。そのデザインはバランスがとれていますか?視覚的な重心はどこにあるのか?最も重要な情報が強調されていますか?

コントラスト

コントラストは、情報を強調し、コンテンツの階層を構築し、必要なハイライトを加えるのに役立ちます。

あなたのデザインに十分なコントラストがあるかどうか、チェックしてみてください。コントラストが足りず、単調に見えていませんか?あるいは、コントラストが強すぎて、ごちゃごちゃしていませんか?

反復性

プロジェクトに繰り返しの視覚的要素(配色、形状、フォント、画像、空間関係)がない場合、デザインはまとまりを失い、ユーザーは情報ブロックを見分けることができなくなります。

他方で、繰り返しが多すぎるのも、煩わしくなる可能性があるのでよくありません。

スタイルの統一

上記のすべての特徴は、秩序あるシステムの中で視覚的に統一され、互いに同意していなければなりません。このシステムは、アイデアに向かって機能していなければならない。

結論

上記からチェックが必要な機能をリストアップすることができます。デザインクオリティは、より徹底的に評価することも、表面的に評価することも可能です。いずれにせよ、レイヤーに分けて行うのがよいでしょう。

すべてのパラメータ(マーケティングユーザビリティ、デザイン)は、プロジェクトの目標に対応していなければなりません。そうであれば、あなたのデザインは最高の評価に値するのです。