UIデザインのベストプラクティスとよくある間違い
公開: 2022-03-11この記事の音声バージョンを聞く
タイトルのUIデザイナーは、従来のグラフィックデザイナーからの脱却を示唆していますが、UIデザインは、依然としてビジュアルデザイン分野の歴史的伝統の一部です。
それぞれの動きや媒体で、この分野は新しいグラフィック言語、レイアウト、およびデザインプロセスを導入しました。 世代を超えて、デザイナーはプレスからゼロックスへ、または紙からピクセルへの移行にまたがっています。 これらの世代にわたって、グラフィックデザインは各時代の視覚言語を表現する責任を果たしてきました。
UIデザインが初期段階から移行するにつれ、どのようなグラフィックの世界が発展すると期待できるでしょうか。 現在の軌道に基づくと、将来は暗いように見えます。 今日のUIデザインの多くは、標準化され、再現可能になっています。 オンラインでのデザインディスカッションは、限界を押し広げたり、新しいことを想像したりするのではなく、デザインを安全に機能させるための学習ルールに固執します。
UIデザイナーがパターンやトレンドに頼る傾向は、当たり障りのない視覚的環境を作り出すだけでなく、プロセスがますます定型化するにつれて、デザイナーの価値を低下させてきました。
UIのベストプラクティスとよくある間違いを確認するとき、最も差し迫った懸念は技術的な習熟度ではなく、反復的で視覚的に退屈なデザインの猛攻撃を回避することです。
最も一般的なUIデザインの間違いの上位5つは次のとおりです。
- UIデザイナーはルールに執着するようになりました。
- グリッドは、UIデザイナーの創造的なプロセスを制限しています。
- UIデザインはパターンで標準化されています。
- 書体は悲劇的に誤解されています。
- コントラストはデザインの治療法ではありません。
よくある間違い＃1：UIデザイナーはルールに執着するようになりました
グラフィックデザインの世界は、常に一連の規則と基準に従っています。 設計分野では、よくある間違いは、破られた標準的なルールと密接に一致しています。 この観点から、デザインルールは信頼できるガイドのように見えます。
しかし、すべてのデザイン分野において、意識的にルールを破ることにより、新しい動きと創造的な革新が生まれました。 これが可能なのは、設計が条件付きであり、設計者の裁量が必要なためです。 デザインは、有限の答えを持つプロセスではありません。 したがって、設計ルールは、冷たくて難しい事実ではなく、ガイドラインとして考慮する必要があります。 経験豊富な設計者は、箱から出せる程度のルールブックを知っており、尊重しています。
オンラインでデザインを議論する方法は、多くの場合、すべきこととすべきでないことのリストを中心に展開します。 完璧をデザインするための10の簡単なステップをマスターしましょう！ 残念ながら、設計には、原則と傾向をよりしっかりと理解する必要があります。 優れた設計への道は、チェックリストを体系的に順守することではありません。
興味深いことに、設計者がルールを破ることをやめた場合、創造的なブレークスルーを行うことはできません。 UI設計者が意思決定能力を磨くのではなく、ガイドラインに従う能力のみを開発した場合、UI設計者はすぐに無関係になる可能性があります。 私たちの仕事が既製のテンプレートよりも大きな価値をもたらすと他にどのように主張しますか？
「トップ10」のデザインルールに注意する
今日のUIデザインの世界におけるデザインルールの問題は、その豊富さです。 設計者が問題を解決する必要がある場合は、既存のUIコミュニティと一連のソリューションを確認するだけです。 ただし、これらのガイドとルールの豊富さは、それらの信頼性を損ないます。
Googleで「トップUIデザインの間違い」を検索すると、50万件の結果が得られます。 これらの著者のほとんどが互いに同意する可能性はどのくらいですか？ 提供される各デザインのヒントが、読者のデザインの問題と正確に一致する可能性はどのくらいありますか？
多くの場合、オンラインの教育記事では、問題の背後にある設計原則の指針ではなく、深刻な問題について説明しています。 その結果、新しい設計者は、なぜ設計がそのように機能するのかを知ることはありません。 代わりに、彼らは前に来たことに依存するようになります。 これらの記事の中で、デザインの実験や遊びを奨励するものが非常に少ないのは心配ではありませんか？
設計者は、事前に決定されたルールや設計テンプレートの本ではなく、指針となる原則のツールキットを利用する必要があります。 「視差スクロールの場合はxを押し、カルーセルの場合はyを押します。 選択する前に、ナビゲーションツールがトレンドになっている最新のブログ投稿を参照してください。」 退屈な-！
ヒントと「トップ10」リストは予測可能なトレンドに従います
トレンドはデザイナーにとってジャンクフードのようなものです。 それらに従うことで、初期の見返りはあるものの、長期的にはほとんど価値のない安価なソリューションが生まれます。 トレンドフォロー型のデザイナーはすぐにデートします。 他の誰かのデザインパスをたどったことに対する報酬は？ 専門家の空虚さのかじる感覚。
自分のスタイルやシステムを発明するのは大変な作業ですが、努力する価値は絶対にあります。 毎日の利益とブレークスルーはすべてあなた自身のものです。 デザイナーの魂を養うことは決してないように思われるコピーについての何かがあります。
よくある間違い＃2：グリッドがUIデザイナーの創造的なプロセスを制限している
ルールに反対する私の怒りにもかかわらず、ここに1つあります。UIデザイナーがグリッドなしで作業することは不可能です。 Webおよびモバイルインターフェイスは、基本的にピクセルごとの編成に基づいています。これを回避する方法はありません。
ただし、これは、UIデザイナーがグリッド中心の外観のみを追求する必要があるという意味ではありません。 同様に、すべての設計関連の決定がグリッドに基づく理由はありません。
トレンディなツールとしてグリッドを使用することは避けてください
一般的に、トレンドに応じて設計すると、設計が不十分になります。 せいぜい、トレンドは満足のいく結果につながりますが、全体的な影響はほぼ確実に圧倒的です。 トレンディになるのは普通のことです。
したがって、設計でグリッドを使用する場合は、グリッドがツールとして何を提供する必要があるか、およびグリッドが何を伝達するかを理解してください。 グリッドの制約内のすべてが等しく見えるため、グリッドは一般に中立性を表します。
グリッドはまた、偏りのないナビゲーション体験を可能にします。 ユーザーは、デザイナーの学芸員の手から干渉を受けることなく、アイテムからアイテムへとジャンプできます。 他のナビゲーション構造を使用すると、設計者はコンテンツをグループ化し、目的のシーケンスをより意図的に確立できる場合があります。
ワークフローとしてデフォルトでグリッドにしない
ロードアイランドスクールオブデザイン（RISD）の教員であり、PIN-UPMagazineのディレクターであるDylanFracareta氏は、「ほとんどの人は12列のグリッドから始めます。3列と4列のグリッドから始めることができるからです」と指摘しています。 ここでの危険は、設計者がすぐに自分の作業を事前に決定することです。
これを防ぐために、Fracaretaは、グリッド線に対して物理的に物を配置するのではなく、設定された数量の移動ツールのみを使用します。 これには、秩序を確立し、予期しない結果の可能性を開くという二重の効果があります。
ブラウザ用に設計するということは、コードを入力して何が起こるかを待つことを意味していました。 今日、ウェブデザインは従来のレイアウトデザインに似ており、プロセスは「2枚の透明な紙を調整するようなもの」です。 デザイナーとして、このプロセスからどのように利益を得ることができますか？
グリッドは制限的である可能性がありますが、最も伝統的な組織形態の1つです。 グリッドは直感的です。 グリッドはニュートラルで控えめです。 グリッドを使用すると、コンテンツがそれ自体を語り、ユーザーがインターフェイスを簡単にナビゲートできます。 グリッドの制限に対する私の警告にもかかわらず、異なるアレイはさまざまなレベルのガイダンスまたは自由を可能にします。
よくある間違い＃3：UIデザインはパターンで標準化されています
標準化された設計要素の概念は、UI設計よりも前のものです。 建築の細部は何世紀にもわたって繰り返され、同様の設計環境に適用されてきました。 この方法は、人々がめったに知覚しない建物の部分に意味があります。
しかし、建築家が家具の寸法や手すりの高さなどの一般的な要素を標準化すると、人々は結果として生じるベージュの物理的環境に無関心を表明し始めました。
これだけでなく、標準化された寸法は効果がないことが証明されました。 統計的平均に基づくと、彼らはしばしば人口の大部分にサービスを提供できませんでした。 繰り返し可能な詳細にはその場所がありますが、無批判に使用しないでください。
デザイナーはパターンを製品として使用すべきではありません
多くのUIデザイナーは、パターンを単純な時間節約ツールよりも優れたものと見なしています。 彼らは、それらを複雑な設計問題に対する既成の解決策と見なしています。 パターンは、設計者の作業を容易にするために、繰り返し発生するタスクとアーティファクトを標準化することを目的としています。 残念ながら、カルーセル、ページ付け、Fパターンなどの特定のパターンは、多くのインターフェイスの構造全体になっています。
パターンの使用は正当ですか？
デザイナーは、人々がWebで読む方法の結果として、Fパターンが存在することを自覚しています。 Espen Brunborgは、おそらく人々は私たちのFパターンの乱用の結果としてこのように読んでいると指摘しています。 「もし彼らがするすべてがレシピに従うことであるならば、ウェブデザイナーを持つことの意味は何ですか？」 ブランボルグは尋ねます。
よくある間違い＃4：書体は悲劇的に誤解されている
多くの「クイックヒント」デザインリストは、フォントの厳格なルールを提案しています。 各ルールは、「1つのフォントファミリのみ！ 等幅フォントは死んでいます！ 薄いフォントは絶対に避けてください！」 これは熱気にすぎません。
タイプ、テキスト、およびフォントに関する唯一の正当な規則は、読みやすさを強制し、適切な意味を伝えることに重点を置いています。 テキストが読みやすい限り、さまざまな書体を使用する機会があるかもしれません。 UI設計者は、インターフェイスに実装されている各フォントの履歴、使用法、および設計意図を知る責任を負う必要があります。
書体の読みやすさが最高に君臨
書体は意味を伝え、読みやすさに影響を与えます。 デバイスでの読みやすさのルールを取り巻くすべての議論で、デザイナーは、タイプがテキストの本文に美的感覚を吹き込むように設計されていることを忘れています。 読みやすさは非常に重要です—これは論争の余地がありません—しかしそれは本当に明白な目標であるべきです。 そうでなければ、なぜHelveticaやHighway Gothic以外のものが必要になるのでしょうか？
覚えておくべき重要なことは、フォントは読みやすさのさまざまなコンテキストのために設計されているだけではないということです。 それらはまた、意味を伝え、テキストの本文に微妙なムードを与えるために不可欠です。
どんな犠牲を払っても薄いフォントを避けるのは賢明ではありません
トレンドが過ぎ去った今、一般的なデザイン批評は、薄いフォントを完全に避けることを提唱しています。 しかし、もっと規制が必要なのでしょうか？ 書体をサポートする設計原則をより深く理解することが目標ではありませんか？
一部の設計者は、薄いフォントはデバイス間で読み取ることができないか、信頼できないと確信しています。 正当なポイント。 しかし、これは、書体が読みやすさに関する技術的な選択としてのみ理解されているUIデザインの現在の議論の条件を表しています。 読みやすさが唯一の設計上の懸念事項である場合は、薄いフォントを完全に削除してみませんか？
より包括的なアプローチは、薄いフォントが有利である理由と、どのようなコンテキスト内であるかを理解することから始まります。 太くて太いテキストは、実際には細いテキストよりも長く読むのがはるかに困難です。 ただし、太字のフォントは視覚的な重みが大きいため、見出しやテキストの少ないコンテンツに適しています。
細いフォントはセリフを使用することが多く、本文テキストに適しています。 どうして？ セリフ文字は、連続して表示すると一緒に流れ、長時間の読書をより快適にします。
さらに、細いフォントは優雅さを伝えるためによく選択されます。 視覚的に洗練されたものを使命とするクライアント向けのインターフェースを作成するためにデザイナーを雇うと、その仕事をするためのより重い書体を見つけるのは困難になります。
フォントは階層を確立するためにバリエーションが必要です
よくあるUIデザインの間違いは、フォント間で適切なバリエーションを提供できないことです。 フォントの変更は、インターフェイス内に視覚的な階層を確立するのに役立つ優れたナビゲーションツールです。 一般に、最大のアイテム（または最も太字のフォント）が最も重要であり、最も視覚的な重みがあります。 視覚的な重要性は、ユーザーがコンテンツの見出しと頻繁に使用される機能を識別するのに役立ちます。
バリエーションが多すぎると、階層が損なわれます
すべてのフォントの選択を一意にすることの問題は、特にインターフェイスに多くの書体が含まれている場合、何も目立たないことです。 フォントが異なると、ユーザーが重要なコンテンツを認識したり、視覚的な秩序感を確立したりすることが難しくなります。
よくある間違い＃5：コントラストはデザインの治療法ではない-すべて
多くの「トップミス」リストに表示される一般的なスレッドは、UIデザイナーが低コントラストのインターフェイスを避けるように促します。 低コントラストのデザインが判読できず、効果がない場合が多いのは事実です。 しかし、私の心配は、細いフォントに関する私のポイントと同様に、絶対的な言語の使用が均質で高コントラストのデザイン文化につながることです。
高コントラストへのデフォルト設定は不注意です
ハイコントラストのビジュアルは、紛れもなく刺激的でエキサイティングです。 しかし、人間の感情の範囲内には、伝える価値のある状態がもっとたくさんあります。 視覚的に刺激することも視覚的に安全かもしれません。
たとえば、現代のSF映画の業界全体を考えてみましょう。 視聴者を騙して興奮させる方法として、すべての作品が黒とネオンブルーのビジュアルに頼っているようです。 より広い範囲の感情的反応を引き起こす高コントラスト画像と低コントラスト画像の両方で物語を織り交ぜることはより効果的ではないでしょうか？
機能的には、インターフェイス内のすべての要素が別の要素と非常に対照的である場合、何も目立ちません。 これは、階層ツールとしてのコントラストの潜在的な価値を打ち負かします。 停滞した流行のデザインを回避するには、ルールではなくツールとしてさまざまなデザインの動きを考慮することが不可欠です。
結論
せいぜい、デザインルールはガイドです。 それらは意思決定の安全性を提供し、設計者に思慮のない選択の危険性を警告します。
逆に、デザインルールは法律ではありません。 それらは壊れることがないわけではなく、確かに私たちの議論の余地のない降伏に値するものではありません。 実際、デザインルールは、無謀に従えば、問題を創造的に解決する能力を弱める深刻な松葉杖になる可能性があります。
デザイナーは科学者ではありません。 私たちは、私たちが行うすべての美的決定について経験的な証拠を提供する義務はありません。 確かに私たちの職業はプロセスと慎重な判断の1つですが、本能と創意工夫の余地があります。 実際、トレンディなコンテンツの雑然とした世界でクライアントを際立たせることができるかどうかは、新しい可能性を想像する意欲にかかっています。
実験しなければなりません。 私たちは遊ばなければなりません。
デザインルールは、視覚的な利点のために活用するために存在します。 それらは曲がったり、壊れたりすることもありますが、盲目的に追跡することはできません。