10の一般的な設計ミス...およびそれらを回避する方法

設計作業は複雑なビジネスです。混乱させるのはあまりにも簡単です。

高品質の製品を作成するには、細部のすべてが非常に重要です。各詳細を考慮する必要があります。詳細を簡単に見失い、全体像を見失う可能性があります。そのため、信じられないほど一般的なユーザーインターフェース(UI)の設計ミスと弱点がいくつかあります。

それでは、これらのよくある間違いをどのように回避できますか?これらのあまりにも一般的な落とし穴を避けるのに役立つことに焦点を当てたいくつかのヒントと提案を読んでください。

はい、これらはすべて、デザイナーとしての私自身の苦しい経験に基づいています。そして、はい、実際の出来事に似ているのは純粋に偶然です。

1.エッジケースの計画の欠如(Lorem Ipsumにノーと言う)

lorem ipsumとストック写真を使用して、美しく調和のとれたデザインを簡単に作成できます。これはすぐに現実とは無関係になります。美しいデザインは、実際のコンテンツで満たされると壊れてしまいます。

このような状況を防ぎ、意図したものとは思われない最終製品に対するクライアントのフラストレーションを回避するには、情報を取得する必要があります。既に存在するコンテンツまたは作成されるコンテンツについて可能な限り多くの情報を収集します。

具体的には、UIデザインの作業を開始する前に、ページの各セクションに表示されるコンテンツの種類を知る必要があります。また、コンテンツの最小サイズと最大サイズ(つまり、テキストの行数、画像サイズ)を知る必要もあります。これらの転換点は、インターフェースがいつどのように変化するかを示すため、エッジケースと呼ばれます。

画像を選択する

また、画像の制限を調査する必要があります。クライアントがカスタム写真を持っていない場合、または購入する予定がない場合、Unsplashの美しいが意味のない写真を使用しても意味がありません。

どうして?写真は概念的である傾向があります。きれいなものを使うだけでは十分ではありません。代わりに、物語を作成するか、より深い意味を暗示する画像を選択する必要があります。

何をするにしても、そこにいる必要のない写真は使わないでください。最近、人々は膨大な情報に圧倒されています。役に立たない余分な視覚情報は、それらを刺激するだけです。

繰り返しブロックについて

もう1つのエッジケースは、繰り返しブロックに関連しています。たとえば、画像+テキスト、アイコン+テキスト、数字+テキストなどです。これらのブロックが2行のテキストと10行でどのように見えるか、そしてそれらが1つずつ立つかどうかを考える必要があります。

機能を説明する小さなテキストブロックの場合、3列のレイアウトを簡単に使用できます。ただし、5行以上のテキストがあり、すべて省略せずに表示する必要がある場合は、別の視覚的な解決策を考え出す必要があります。どうして?テキストの長い列を読むことは新聞だけに適していて、ウェブには不便だからです。可能な解決策には、水平スクロールまたは2列レイアウトのスライドの使用が含まれます。

スケーリングの計画

コンテンツのエッジケースを知ることで、画面スペースをより効率的に使用し、インターフェイスの各部分に適切なUI処理を選択できます。ただし、エッジケースは現在持っているものだけではないことに注意してください。優れたデザイナーは、クライアントが将来UIを拡張する必要がある可能性を考慮して、常に積極的に考える必要があります。

2.不十分な画面注釈

避けるべき次の大きな間違いは、デザインに注釈がないことです。

チーム全体(プロジェクトマネージャー、QAスペシャリスト、フロントエンドおよびバックエンドの開発者)は、美しい画像のセットのような静的なフォームでデザイン画面を確認します。彼らは、各インターフェイス要素に対してどのような動作を想定しているかを知ることができません。彼らはあなたの心の中でそれをどのように設計したかを予測することはできません。あなたや同僚のデザイナーにとって明らかなことは、すべてのチームメンバーにとって明らかではありません。

そのため、各要素の動作、リンクのアドレス、アニメーション、画面操作に関する注釈を含めることが非常に重要です。この手順をスキップすると、誤解の危険があります。また、多くの作業がまったく間違った方法で行われた場合、多くの不必要な事後の混乱を招く危険性があります。

画面注釈のような小さなものが多くの開発時間を浪費する可能性があることは簡単にわかります。プロジェクト全体の範囲に影響を与え、開発コストを増加させることさえあります。

3.イライラするエラー状態

ユーザーインターフェースを設計するときは、ユーザーインターフェースの主な目的を忘れないでください。ユーザーとサービスの間の対話を可能な限りスムーズに提供することです。インターフェースは、疑問、答えのない質問、または何らかの不確実性のための場所ではありません。

特にエラー状態の場合、設計者は状態についてユーザーに明確なフィードバックを提供する必要があります。したがって、エラー通知は次の単純なルールを満たす必要があります。

  • それらは認識可能で目立つものでなければなりません(たとえば、赤色はエラーを示す一般的なUIパターンです)。
  • 何が起こったのか、ユーザーがエラーを修正する方法を明確に説明する必要があります。
  • それらは文脈的であるべきです。関連する要素の近くにエラーメッセージを表示することをお勧めします。
  • 彼らは刺激的であってはなりません。エラーによってユーザーは既に十分にイライラしていませんか?

設計者は、予期しないエラー(サーバーエラー、ページが見つからないなど)にも対処する必要があります。エラーメッセージは、ユーザーの流れを妨げるものです。そのため、ユーザーがそれを処理し、可能な解決策を提供し、悪い経験をなめらかにする必要があります-特にユーザーの間違いではない場合。たとえば、404ページと500ページのイラストやアニメーションをデザインするのが良い解決策かもしれません。

フォームチェックに注意する

エラー状態を設計するときは、ユーザーを困らせないように最善を尽くしてください。特に、あらゆる種類のフォームチェックに注意してください。

たとえば、必須フィールドのあるフォームがあるとします。つまり、開発者は「すべての必須フィールドを空にすることはできません」という対応するチェックを持っていることを意味します。ユーザーがフォームに入力しようとしましたが、ランダムな順序でしたとしましょう。最初の必須フィールドがフォーカス状態を失うと、エラーが返されます。「このフィールドに入力してください。必須です!」

私たちの貧しいユーザーは、「ちょっと待って、フォームフィールド間をクリックするだけで、[送信]さえクリックしていない!」と叫んでいます。たとえば、別のチェックがあり、すべての必須フィールドが空でなくなるまで「送信」ボタンが無効になったとします。

ちょっと考えてみてください。あなたの貧しいユーザーは何もせず、フォームを送信できませんが、あなたはすでにいくつかの間違いを非難しています。これは間違いなく誰を怒らせるので、そのような状況を避けることが最善です。

計量コストと価値

希望する方法で実装するには多大な労力がかかると言う開発者の話を聞かないでください。覚えておいてください:この問題を回避しないと、顧客にコストがかかります!顧客なしでサービスや製品を必要とする人はいません。たとえ開発が安かったとしても。

4.空の状態が多すぎます

このトピックは、前のトピック(エラー状態)に関連しており、エッジケースにも関連しています。空の状態は絶対的なケースであるため、それらを回避することについて積極的に考える必要があります。

すべてのページまたはセクションにデータがない場合、UIはどのように表示されますか?友好的ですか、それともイライラしますか?それはよく見えるでしょうか、それとも壊れているように見えますか?ユーザーは自分のいる場所と状態の意味を理解しますか?

ここでのベストプラクティスは、有益なコンテンツを含む素晴らしいビジュアルを提供することです。イラスト、アイコン、または単に状況を説明する素敵なタイポグラフィのテキストブロックです。

5.タイポグラフィ階層の欠如

次に、多くの設計ミスを引き起こす別のトピック-タイポグラフィ。

テキストは情報コンテンツの主要な単位です。だからこそ、読みやすく、認識可能で、よく整理されていなければなりません。適切にフォーマットされたテキストは、ユーザーが本当に重要なことに集中し続けることで、情報の認識を促進します。

フォントとフォントスタイルの使用

フォントで遊ぶのは楽しいかもしれません。しかし、誰かが段落内でフォントを10回変更するものを読み込もうとすると、すぐに疲れてうっとうしくなります。

このようなフォントの疲労を避けるために、単一のレイアウトで使用するフォントは3つ以下にすることをお勧めします。とはいえ、フォントとフォントスタイルの違いを覚えておいてください。すべてのフォントには、通常、中、太字、黒、斜体、太字斜体などの独自のスタイルセットがあります。これらすべてのフォントスタイルを大文字と小文字に組み合わせると、魅力的なタイポグラフィシステムを作成するには、2つまたは3つのフォントで十分です。

カーニングに注意を払う

タイポグラフィについて考えるときは、カーニングを忘れないでください。カーニングのことを聞いたことがなければ、心配しないでください。とても簡単です。カーニングは、文字間のスペースを手動または自動で調整するタイポグラフィのプロセスです。

カーニングは重要な場合があります。状況によっては、文字間のスペースを調整することで、タイポグラフィをより読みやすく、目に優しいものにすることができるためです。ただし、カーニングを誤用したり、カーニングに細心の注意を払わなかったりすると、大きな問題を引き起こす可能性があります。誤解を招いたり、デザインの凝集性を意図せずに破壊したりする可能性があります。

視覚的階層の維持

ページのフォントスタイル間の視覚的な階層を常に維持するようにしてください。対照的なタイポグラフィを使用して、さまざまなレベルのテキストを視覚的に分割し、厳密な階層を確立します。情報階層がページ上で明確に表示されるようにするには、メインの見出しがページ上で最も目立つようにする必要があります。サブヘッドはかなり小さくする必要がありますが、それでもはっきりと見えるはずです。

同じ原則が論理ブロック内の視覚的階層にも適用されます。見出しはページ上で最も大きなデザイン要素とし、その後に小さく目立たないサブヘッドを配置する必要があります。次に、後続の機能タイトルは見出しよりも著しく小さく、同じ重みである必要があります。機能の説明などには、最小のフォントを使用する必要があります。この視覚的な階層は、サイト訪問者が重要度の高い情報とそうでない情報を区別するのに役立ちます。

6.不十分なパディングとスペーシング

適切なパディングとスペーシングにより、レイアウトがきれいで整然と表示され、読者が情報を読みやすく理解しやすくなります。

論理ブロックの周囲に同じサイズのスペースを設定する必要があります(例:上部と下部、および左側と右側)。スペースが不均一な場合、ページは乱雑に見え、ユーザーは各セクションを同等に考慮することができません。

パディングが小さすぎると、ユーザーはコンテンツを論理ブロックに分解できません。論理的なパーツが混ざり合わないようにするには、それらを別々に保ち、それらの間に大きなスペースを挿入します。

視覚的な階層を維持する簡単な方法は、次の単純なルールに従うことです。異なる論理ブロック間のパディングは、各ブロック内の見出しとテキストの間のパディングよりも大きくする必要があります。たとえば、見出し、小見出し、段落を含む長いテキストブロックがあるとします。

  • 見出しpadding-bottomを40pxに設定し、その後にテキストの段落を続けます。
  • 段落padding-bottomを10pxに設定します。
  • パラグラフの後にサブヘッドがある場合、パディングトップに30px(つまり、パラグラフとサブヘッドの上部の間のスペースは30px)、パディングボトムに20px(すなわち、サブヘッドの下部とパラグラフの間のスペース)を指定します段落間のスペースよりも大きい20ピクセルになります)。

これにより、最も重要で最大の要素に望ましい重点が置かれます。最大のテキスト(見出し)の周囲には大きなスペースがあります。ただし、このスペースは、それに続く関連要素により近くする必要があります。

7.乱雑な図像学

アイコンは、小さなシンボルで意味を表現したり、説明を簡単に説明する必要がある場合に非常に便利です。また、特にモバイルでは、最新のインターフェースの基本的な部分です。

アプリケーションでは、アイコンは多くの場合ボタンに相当します。 Instagramをご覧ください。アイコンとテキストのみが表示されます。

そのため、要素の意味に対応する適切な視覚画像を選択することが非常に重要です。簡単そうですね。いや。世界中のすべてのデザイナーは、正確なアイコンを見つけることがどれほど苦痛かを知っています。

誰もが理解できる非常にシンプルで一般的な画像を使用してストーリーを伝える必要があります。そして、これらのアイコンをUIの全体的なスタイルと一致させる必要があります。次に、開発者にSVG形式で提供する必要があります。

無料のアイコンを検索して、各要素の素敵な画像を見つけたときは感動したかもしれません。あなたは、それらがお互いにどれほど完璧に対応していると思いますか!それらは誰もが理解できるでしょう!残念なことに、選択したアイコンセットの全体的な印象はかなり乱雑で乱雑です。この種の混乱をどのように回避できますか?簡単なチェックリストは次のとおりです。

  • 線幅—サイズ変更後、すべてのアイコンの線幅を等しくする必要があります。そうでなければ、彼らはそうではないことが非常に顕著になります。
  • コーナー半径—アイコンに長方形の図形が含まれている場合、セット内のすべてのアイコンのコーナー半径を比較します。アイコンごとに異なる場合は、修正することをお勧めします。
  • ラインキャップの形状(アウトラインアイコン用)—長方形または丸みを帯びたものにすることができます。
  • コーナー結合形状(アウトラインアイコンの場合)—長方形または丸みを帯びたものにすることができます。

洗練されていないユーザーが異なる線幅や角の半径に特に気付かないかもしれないのは事実です。それでも、全体的な印象は間違っており、ユーザーはそれを感じるでしょう。

つまり、無料のアイコンを使用することは間違いではありませんが、簡単にアイコンを使用することをお勧めします。無料のアイコンを使用すると、プロジェクトが安価に見え、場合によっては専門的ではありません。さらに、人々がすぐに認識する無料のアイコンがたくさんあります。どうして?彼らはどこでもそれらが使用されるのを見ました

だからこそ、私のアドバイスは、無料のアイコンを厳選するか、さらには自分でアイコンをデザインすることです。カスタムアイコンは常に優れたエクスペリエンスを提供します。

8.低コントラスト

グラフィックデザインの基本原則とは対照的です。私たちの目はコントラストが好きです。コントラストは、デザイナーがユーザーの注意を管理するために使用する手段です。

コントラストは、ページ上の2つの要素が異なる場合に発生します。たとえば、コントラストは、テキストと背景色に異なる色を使用することで得られます。それは、本文テキスト用のエレガントなサンセリフフォントと一緒に使用される、大きく太字で汚れたフォントの見出しセットである可能性があります。大きなグラフィックと小さなグラフィックの違い、または滑らかなテクスチャと組み合わせた粗いテクスチャの可能性があります。

コントラストに関する重要なことは、対照的な要素が完全に異なっている必要があるということです。ほんの少し異なるだけではありません-顕著な、大胆な違い。

空白を使用する

ただし、2つの完全に異なる要素を非常に近くに配置すると、ユーザーはどの要素が「メイン」要素であるかを理解できません。そのため、コントラストは要素に異なる視覚スタイルを適用するだけでなく、空白を使用する技術についても言えると言えます。これは、要素を対比させるために、空白で区切る必要がある場合があるためです。

空白は、ユーザーがコンテンツを読みやすくするために重要です。もちろん、空白は不適切に使用される可能性があります。余白が多すぎるか、コンテンツを小さな領域に詰め込むことです。過剰な広告を掲載している多くのウェブサイトにも十分な空白がありません。

テキストと画像の十分なコントラストを確保する

画像上に配置されたテキストコピーの低コントラストを避けます。テキストと背景の間に十分なコントラストがあるはずです。コピーを目立たせるには、画像の上にコントラストフィルターを配置します。黒は人気のある色ですが、明るい色を使用して、それらを混ぜたり合わせたりすることもできます。

別のオプションは、最初からコントラストのある画像を使用することです。この場合、写真または画像の暗い部分の上にコピーを配置できます。

コントラスト過剰摂取の回避

1つのページで多くのスタイルを使用しないでください。 1つのページに印刷やデザインのスタイルが多すぎると、見た目が専門的ではなくなり、読みにくくなります。これを回避するには、1つのフォントと2つの飽和オプション(通常と太字)に制限してください。

狭いページ要素を色で強調しないでください。よく見えませんたとえば、見出しは、サイズ、タイプの彩度、およびパディングのおかげですでに十分にマークされています。ページ上の特定のポイントを強調表示しますか?関連する見出しとテキストコピーを含むブロック全体に背景色を使用します。

9.クロスプラットフォームを考えない

はい、理想的には、これは今日の世界ではもはや問題ではないはずです。ほとんどのユーザーがモバイルデバイスからWebサービスにアクセスすることは誰もが知っています。残念ながら、多くのデザイナーはその事実をまだ忘れがちです。 (または、クライアントがモバイルに最適化されたデザインを作成するためにお金をかけたくないということでしょうか?)

ただし、設計の専門家にとっては、複数のデバイスを最適化しないという問題は発生しません。 UIを作成するときは、広く称賛されている「モバイルファースト」アプローチを常に念頭に置いてください。あらゆるタイプのユーザーが各ページに表示するコンテンツに集中します。次に、「この特定のコンテンツを表示するために選択したUIコントロールは便利ですか?」

デスクトップデバイスで完全に機能する素敵なUI要素を選択することもできますが、スマートフォンユーザーには適していません。またはその逆。そのため、現在設計しなければならないさまざまなデバイスを常に念頭に置くことが重要です。

10.設計が多すぎる

デザインに何かを追加できるからといって、そうすべきだというわけではありません。シンプルさは多くの特典を提供します。だから、スタイルに夢中になることに注意してください。過剰な設計は大きな間違いではありませんが、重大な問題を引き起こす可能性があります。

たとえば、ページで使用する色が多すぎると混乱します。どのビットがより重要であるかが不明確になります。本当に重要なものを視覚的に目立たせるには、1色または2色で十分です。

フォントスタイルについても同じことが言えます。見出しと小見出しを強調し、重要なフレーズにコントラストを使用するだけで十分です。

デザインに詰め込む「もの」が多いほど、ユーザーが提示する情報を抽出することを考えるのが難しくなります。デザインはそれ自体で呼吸し、生きる必要があります。覚えておいてください:空白があることは必ずしも悪いことではありません。多くの場合、1平方インチの空白スペースを埋めるよりも優れています。

デザインに修正が必要な間違いがありますか?知らせて下さい!一流の設計チームが、より明確かつ美しくコミュニケーションしながら、設計の狂気を回避するお手伝いをします。

著者について

シニアUI / UXデザイナーのマリア・ピサレンコは、2018年に蒸留酒製造所に入社しました。彼女は6年以上の設計経験を持ち、世界中のクライアントのために無数のインターフェースを構築しています。マリアの情熱には、図像、活版印刷、イラストが含まれます。彼女は、世界をより良い場所にするためにデザインが重要な役割を果たすと考えています。