優れた UI (ユーザー インターフェース) デザイナーになるための 20 の道標

優れた UI (ユーザー インターフェース) デザイナーになるための 20 の道標
はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公開しました。この記事では、ユーザー インターフェイス デザインの 20 の原則を紹介しています。これらの原則は、デザイナーがデザイン作業で従う必要のあるものであり、デザイナーにとってよりよいガイダンスとなります。
インターフェースの存在は相互作用を促進する
インターフェースの存在により、ユーザーと私たちの世界との相互作用が強化されます。これらは、ユーザーが関係性を明確化し、図解し、有効化し、表示するのに役立ち、効率的に作業できるだけでなく、アプリケーションを管理し、関連サービスにアクセスすることもできます。インターフェースを設計する行為は芸術ではありませんが、従うべきルールはあります。適切に設計されたインターフェースは、世界とのつながりを刺激し、呼び起こし、強化することができます。
明瞭性は非常に重要なタスクです<br />明瞭性は、インターフェース デザインにおける最初で最も重要なタスクです。設計するインターフェースを効果的で人々に好まれるものにしたいなら、インターフェースとは何か、そして人々がなぜそれを使用するのかを十分に理解する必要があります。インターフェースとユーザーとのインタラクションを明確にする必要があります。たとえば、ユーザーがインターフェースを使用するとき、何が起こるかを予測して、インターフェースとうまくインタラクションできる必要があります。一部のインターフェースは明確に設計されておらず、ユーザーの一時的なニーズを満たすことはできますが、わかりにくいインターフェースには将来性がありません。明確なインターフェースは、人々の関心を惹きつけ、さらなる行動を促します。
いかなる犠牲を払ってでもユーザーの注意を守りましょう<br />私たちは中断の多い世界に生きています。日常生活では、注意をそらすものが常にたくさんあり、集中して静かに読書することが困難になります。したがって、注目を集めることが重要です。したがって、重要なアプリの周りの乱雑さで人々の注意をそらさないようにしてください...注目を集めるには、きれいな画面が重要であることを忘れないでください。どうしても広告を表示する必要がある場合は、ユーザーが読む前に広告を表示してください。ユーザーの注意を保護し尊重することは、ユーザーの満足度を高めるだけでなく、広告の効果も高めます。したがって、優れたインターフェースを設計するには、ユーザーの注意を保護することが前提条件となります。
ユーザーによる制御を確保する<br />人間は、自分自身や環境を制御することを好む傾向があります。他人に配慮しないソフトウェアは、ユーザーから制御を奪い、ユーザーにとって不快なだけでなく、意図しない結果をもたらす可能性のある予期しないやり取りを強制します。ユーザーの制御能力を確保し、ユーザー自身にシステムの状態を決定させ、少しのガイダンスがあれば、希望する目標を達成できると思います。
直接操作が最善
私たちが世界の物理的なオブジェクトを直接操作できる場合、最高のインターフェース デザインはまったく意味がありません。しかし、これを実現するのは簡単ではありません。インターフェースを設計するときに、追加するアイコンは必ずしも必要ではないからです。たとえば、ボタン、グラフィック、オプション、添付ファイルなどの煩雑なものを過度に使用すると、重要なことを行う代わりに UI 要素を操作することになります。では、本来の目標は何でしょうか? 操作を簡素化し、直接操作できるようにすることです。したがって、インターフェースの設計では、インターフェースのカプセル化をできるだけ少なくし、できるだけ多くの自然な人間のジェスチャーを理解する必要があります。理想的には、インターフェースのデザインはシンプルで、ユーザーに直接操作感を与える必要があります。
各画面にテーマが必要です<br />設計するすべての画面には 1 つのテーマが必要です。これにより、ユーザーは画面の真の価値を活用できるだけでなく、学習が容易になり、使いやすくなり、必要に応じて追加や変更が容易になります。 2 つ以上のテーマをサポートすると、画面が乱雑になります。書かれた記事が単一のテーマと強力な論拠を持つべきであるのと同様に、インターフェース デザインにもその存在意義がなければなりません。
セカンダリ アクションを維持する<br />プライマリ アクションが 1 つある画面には、セカンダリ アクションを複数設定できますが、セカンダリ アクションはセカンダリのままにしておく必要があります。記事が存在する理由は、人々が Twitter などで記事を共有できるようにするためです。そのため、人々が記事を読んで理解できるようにするために、多くのものが存在します。したがって、二次アクションを維持することでビジョンが向上し、一次アクションの達成に役立ちます。
自然な遷移<br />インタラクションが永遠に続くことはほとんどないため、思慮深いデザインではインタラクションの次のステップを考慮します。次のやり取りがどのようなものになるかを検討し、それをデザインでサポートします。それは対話のようなもので、より深い会話の基盤を提供します。ユーザーが実行する必要のある手順をすでに完了している場合は、ユーザーに負担をかけないでください。目標を達成するために自然に進む方法を提供します。
当然のことですが、人々は行動が期待どおりであるときに最も安心します。他の人、動物、物、ソフトウェアの行動が常に私たちの期待と一致しているとき、私たちは彼らと良好な関係にあると感じます。これは、人を扱うデザインが行うべきことでもあります。実際には、これは、ユーザーがあまり考えなくても、インタラクティブな要素がどのように動作するかを予測できる必要があることを意味します。ボタンのように見える場合は、ボタンのように動作するはずです。デザイナーは、基本的なインタラクションの問題に関して巧妙になろうとするのではなく、より高いレベルで創造的になる必要があります。
重要なものを区別する<br />前のポイントに続いて、視覚要素の動作が異なる場合は、表示も異なる必要があります。逆に言えば、動作が同じであれば、パフォーマンスも同じになります。これら2点も常に必要です。一貫性を保つために、ジュニア デザイナーは、区別する必要がある要素に同じビジュアル (多くの場合、コードを再利用) を使用することがよくありますが、実際には、異なる方法で処理する方が適切です。
階層を明確にする<br />視覚要素の閲覧順序が明確である場合は、それらの階層関係も明確にする必要があります。つまり、明確な階層がないと、ユーザーが毎回同じものを同じ順序で閲覧すると、重要なポイントがどこにあるのかわからなくなり、最終的には雑然としてわかりにくい印象を与えてしまいます。すべての要素が互いに相対的であるため、デザインが絶えず変化している場合、明確な階層を維持することは困難です。すべてがストレスにさらされているなら、かなりの部分がストレス不足です。特に重要な要素を追加する場合、デザイナーは各要素をリセットして、明確な階層を再び実現することを検討する必要があります。ほとんどの人は視覚的な階層に注意を払っていませんが、それはデザインを強化する最も簡単な方法です。
適切な構成<br />ジョン・マエダが著書「Simplicity」で述べているように、視覚要素を適切に構成することで物事が簡素化され、コンテンツの包含関係など、他の人が表現を理解しやすくなります。位置と方向に基づいた構成により、要素間の関係性を自然に表現できます。コンテンツを適切に整理することで、ユーザーは考える手間を大幅に省くことができます。要素間の関係はすでに示されているため、ユーザーはそれを理解する必要がなくなります。ユーザーにその区別を強制するのではなく、デザイナーが構成によって明確にできるようにします。
色は慎重に使用してください<br />光が変化すると、物理的な世界の色も変化します。太陽が明るく輝いているときと、太陽が沈んでいるときとでは、見える景色が大きく異なります。色は環境によって簡単に変化します。したがって、色はデザインにおいて決定的な要素ではありません。色は目を引くものであり、ガイドとして役立ちますが、違いを生む唯一の要素であってはなりません。長い記事を読んだり、長時間コンピューターの前に座っている場合は、強調する必要があるコンテンツを除いて、無地または暗い背景色を使用する必要があります。もちろん、読み手に応じて明るい色を使用することもできます。
順次表示<br />各画面には必要な内容のみが表示されます。ユーザーが決定を下す必要がある場合は、選択するのに十分な情報を提示すると、次の画面で必要な詳細が表示されます。過度に説明したり、すべてを一度に提示したりする傾向を避けてください。可能であれば、選択内容を次の画面に配置して、情報を段階的に提示します。これにより、やり取りがより明確になります。
組み込みヘルプ
理想的なユーザー インターフェイスでは、ユーザー インターフェイスが学習プロセスを通じてユーザーを効果的にガイドするため、ヘルプは必要ありません。 「次へ」のようなものは、実際にはコンテキストに埋め込まれた「ヘルプ」であり、ユーザーが必要とする場合にのみ適切な場所に表示されます。
設計者の仕事は、ユーザーが必要とする場所にヘルプ システムを構築することではなく、ユーザーのニーズを発見する責任をユーザーに移し、ユーザーがヘルプ システムで質問に対する答えを見つけられるようにすることです。代わりに、提供したインターフェースの使い方をユーザーが理解していることを確認し、インターフェースのガイドに従って学習できるようにする必要があります。
真実の瞬間: ゼロ状態
ユーザーが初めてインターフェースを体験する際の体験は非常に重要であり、デザイナーはこれを見落としがちです。ユーザーがデザインに素早く適応できるようにするには、デザインをゼロ状態、つまり何も起こらない状態にする必要があります。しかし、この状態は空白のキャンバスではなく、ユーザーがデザインにすぐに適応できるように、指示とガイダンスを提供できる必要があります。最初のインタラクションプロセスでは多少の摩擦が生じますが、ユーザーがルールを理解すれば、成功する可能性が高くなります。
価値のある既存の問題<br />人々は、潜在的な問題や将来の問題ではなく、既存の問題を解決しようとします。なぜなら、仮想的な問題に対するインターフェースを設計するのではなく、既存の動作と設計を観察し、既存の問題を解決するからです。これは確かに最もエキサイティングなことではありませんが、ユーザーがインターフェースを使用しているため、最も価値のあることです。
優れたデザインは見過ごされる<br />優れたデザインには奇妙な性質があります。それは、ユーザーによって無視されてしまうことが多いということです。その理由の 1 つは、デザインが非常に優れているため、ユーザーは目標の達成に集中し、直面しているインターフェースを無視してしまうことです。最終的に、彼らは目標を完璧に達成し、いかなる状況にも反応する必要がなくなります。デザイナーとして、この目標は達成可能であり、私たちのデザインが優れている場合、多くのお世辞を受け取ることはありません。満足したユーザーは沈黙することが多いため、優れたデザイナーは優れたデザインで自らを豊かにします。
多分野のデザイン<br />ビジョン、グラフィック デザイン、タイポグラフィ、コピーライティング、情報構造と視覚化、これらすべての知識領域がデザインの一部となる必要があります。デザイナーはこれについてある程度の知識を持ち、具体的に研究する必要があります。この知識を軽視せず、仕事の能力を向上させるためにそこから多くを学びましょう。デザイナーは長期的なビジョンを持ち、出版、プログラミング、製本、スケートボード、消防、さらには空手など、一見無関係なことから学ぶことができる必要があります。
デザインには目的が必要です<br />ほとんどのデザイン分野において、インターフェース デザインを成功させる鍵は、ユーザーがそれを使用することです。美しい椅子は精巧に作られているものの、座り心地が悪ければユーザーは使用せず、デザインとしては失敗です。したがって、インターフェースデザインは、使用環境を設計するだけでなく、使用する価値のある芸術作品を作成することでもあります。インターフェースはデザイナーの虚栄心を満たすだけでは十分ではありません。実用的でなければなりません。
この記事はGao Song、Zhang Yong、Wei Bingによって翻訳されました。

<<:  JavaScript 開発における標準コミットメッセージの重要性の詳細な説明

>>:  Linux でのデータベースのスケジュールバックアップの実装スクリプト

推薦する

React における useEffect と useLayoutEffect の違い

目次前提条件使用効果コミット前ミューテーション効果コミットミューテーション効果コミットレイアウト効果...

CSS を使用して等アスペクト比のアダプティブ コンテナを実装する方法

最近、モバイル ページを開発しているときに、ページの幅が 100% の場合、高さは幅の半分になり、携...

Node.jsはSTMPプロトコルとEWSプロトコルに基づいてメールを送信します

目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...

CentOS の MySQL に MariaDB をインストールするときに発生する方法と問題

以前にインストールしたmariadbを削除する1. rpm -qa | grep mariadb を...

JavaScriptの基本的なインタラクションの詳細な説明

目次1. 要素の入手方法文書から入手ID取得クラス名 (className) を取得します。タグ名 ...

MySQLはテーブル内のフィールドを別のテーブル内のフィールドの値と等しくなるように更新します

以下のように表示されます。 table1 を z として更新し、table2 を zb として結合し...

MySQL パーティションテーブルの制限と制約の詳細な説明

ビルドを無効にするパーティション式では、次の構成はサポートされません。ストアドプロシージャ、ストアド...

異なる列を持つテーブルのクエリ結果のSQLマージ操作

2 つの異なるテーブルをクエリするには、結果をマージする必要があります。たとえば、table1 の列...

Windows10 mysql 8.0.12 非インストール版 設定 起動方法

この記事では、MySQL 8.0.12のインストールされていないバージョンを設定して起動するための具...

Windows Server 2008R2 ファイル サーバーを Windows Server 2016 にアップグレードする

ユーザー組織には、ドメインに参加している 2 台の Windows Server 2008 R2 フ...

ウィンドウ環境で VScode を使用して仮想マシン MySQL に接続する方法

1. 仮想マシン側1. MySQLの設定ファイルを見つける:sudo vim /etc/mysql/...

特定の部門 ID に基づいて、すべての下位レベルの複数レベルのサブ部門を照会する MySQL の例

シミュレーションテーブルとデータスクリプト次の SQL ステートメントをコピーして、sys_dept...

jQuery はシャッター効果を実現します (li 配置を使用)

この記事では、ブラインド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体...

JS関数の呼び出し、適用、バインドの超詳細な方法

目次JS 関数呼び出し、適用、バインドメソッド1. call() メソッド1. call() メソッ...

フォームから Vue ElementUI を使用してログイン効果を実装する例

目次1. ElementUIで基本的なスタイルを構築する2. [送信]ボタンをクリックして、アカウン...