筋金入りのプログラマー向けの使いやすさとインターフェース設計

プログラミングを始めた瞬間から、ある特定の現象、つまりほとんどのプログラマーがインターフェイス設計とユーザビリティの問題に関連するすべてを積極的に避ける方法を見て、考えました。


どこから来たのかわかります。 ほとんどのプログラマーはプログラミングが大好きです。 彼らは、プログラミング言語の新しい機能を学び、新しいコンポーネントとライブラリを試し、アルゴリズムとコードアーキテクチャを改善し、あるいは使用するデータの構造を最適化する準備ができています。 プログラムはコードやアルゴリズムと同様に優れており、最適化の程度も非常に重要です。 そして、そうです。 ただし、プログラムがプログラマ向けに書かれている場合のみ。

ご想像のとおり、ほとんどのプログラムは、プログラミング、コンピューター、その他の技術的なことについて何も知らないユーザー向けに設計されています。 あなたがそれを好むと好まざるとにかかわらず、あなたは彼らにあなたの製品を使わせたいです。

そして、私たちは啓示に近づきました。 ちょっと待って、それをあなたに明かします。 ユーザーにはプログラムインターフェイスのみが表示され、それ以上は表示されません。 プログラムには、ボタン、テキスト、その他の装飾要素とのインターフェースを除いて、ユーザーにとって何もありません。

驚くべきことですが、そうです。 ユーザーは、複雑なアルゴリズム、データ構造、またはアプリケーションの独創的なアーキテクチャについて知りませんし、知りたくありません。 ユーザーはインターフェイスを見て、インターフェイスによってプログラムの大部分を判断します。 プログラムが期待どおりに動作し、間違いを修正し、使用するのに役立つ場合、彼らは非常に幸せになります。 しかし、プログラムが理解していないことを実行することを要求したり、簡単に実行できないアクションを要求したりすると、彼らは失望します。

専門的な技術的な問題にしか対処できない立場にあり、ユーザビリティチームや他の同僚が関与しているインターフェイスでの作業から隔離されている場合は、ここで説明している問題をスキップできます。 管理者であれば、データベースの非表示機能の調査に集中して、クエリの実行を高速化できます。 ビジネスロジックプログラマであれば、エンティティモデル、プロシージャ変換、およびその他の内部プロセスに集中できます。 システムプログラマである場合、アルゴリズムを最適化し、メモリ割り当てまたはパターン実装を改善することができます。 あなたは自分のしていることを続け、デザインとユーザビリティは想像上の問題であり、社会学と哲学に携わる人により適していると考えることができます。 ただし、通常のプログラミングと一緒にインターフェイスを作成する必要がある場合は、自分に役立つヒントを学ぶことができます。 また、 何かを知らないか、単に視野を広げたいと思う場合は、読み続けることをお勧めします。

多くの人がこれらのことについて懐疑的であるかもしれないことを知って、私は簡潔にしようとするでしょう。 最も一般的なユーザビリティの問題とそれらを回避する方法について、いくつかの簡単なヒントを紹介します。 これにより、ユーザーの心に何が起こっているのか、効果的なインターフェースを開発する際に注意を払う必要があるものを理解できます。 インターフェイスを開発するときにこの記事で提供されているヒントを使用することにした場合、アルゴリズムやパフォーマンスの最適化に目立った変更を加えることなく、プログラムやアプリケーションがユーザーに高く評価されることに気付くかもしれません。

それでは、会話を始めましょう。 読書中にあなたが眠らないようにしようと思います。

1.ユーザーにオタクを話さない

通常のユーザーは技術者ではないので、何を伝えたいかわからない場合があります。 たとえば、DLLが欠落している、 COMオブジェクトがプロパティを登録できないなどのメッセージを表示する必要はありません。 これは、彼らがこの問題を理解して修正するのにどのように役立ちますか？ ほとんどのインターネットユーザーにとって、JavaScript、 CSS、 HTMLなどの言葉は何の意味もありません。 彼らはブラウザ、ページ、そしてあなたのこのインターネットのアイデアを大体理解している。 「 HTTPエラー404 」というメッセージは、彼らにとっては無駄な情報です。 「 リクエストしたページが見つかりませんでした 」などの操作を行うことを お勧めします。これにより、ユーザーにより多くのことが説明されます。 ユーザーに何かを伝える必要があるときはいつでも、ほとんどのユーザーがそれをどのように理解するかを考えてみてください。 誰もDllRegisterServerを手動で呼び出して、 COMオブジェクトが見つからないという問題を解決しません。 しかし、プログラムのコンポーネントの1つが欠落している（そしてどのコンポーネントであるかを言う）ことをユーザーに伝えると、おそらく、このプログラムまたはコンポーネントを含むディスクを挿入してインストールする必要があることを理解できます。

2.長いテキストを書かないでください

とにかく誰も読んでいないからです。 はい、はい、ソフトウェアライセンスを覚えておいてください。 Windows + Linux + MacOSでサタンに無料で魂を与える行を追加しても、 99.9％が次のボタンをクリックします。 テキストが多いほど、ユーザーがテキストを読まない可能性が高くなります。 経験的に、1.5行以上は短いメッセージではなく長いテキストと見なされるため、無視されます。 その理由は、ユーザーがイライラするからです。 インターネットユーザーは、大量のテキストに驚かされる前に、ページを初めて見るのに最大5秒かかります。

ユーザーは自分の問題を解決することにのみ興味があります。 タイトルは2〜3ワード、説明は5〜8ワードのポリシーに従ってください。 同じ方法を使用して、色を使用するかスペースでグループを区切って、複数のインターフェイスオブジェクトをグループ化します。 また、非常に良い解決策は、ユーザーが必要に応じて要素の詳細な説明をポイントして取得できる特別な疑問符の存在です。

3.ドキュメントを忘れる

ユーザーはドキュメントを読みません。 真剣に。 プログラム、プログラムの一部、または機器の使用方法がわからない場合、誰もこれを行いません。 プログラムの設計は、タスクを完了するためのパスが明確になるようにする必要があります。 以前に本を読まずにプログラムをすぐに開始して作業を開始できない場合、効果的なデザインを作成できなかったことを意味します。

4.多くの要素でユーザーを過負荷にしないでください。

ユーザーがそれらの1つを必要とする可能性があると考えているという理由だけで、ユーザーの画面で多数の要素とコントロールを使用しないでください。 これは、ユーザーがこれをすべて見て、自分の計画を実行するために使用する必要があるものを理解しようとすることによって困惑するという事実につながります。 ユーザーアクションに最も必要なオプションを定義します。[オプション]ボタンをクリックすると、他のすべてを非表示および表示できます。 この場合、ユーザーは気が散らず、タスクをより速く実行できます。 シンプルさが良い 。 上級ユーザー向けまたは好奇心For盛なユーザー向けには、オプションのあるウィンドウがあります。

5. 1つの画面-1つのタスク

各プログラムウィンドウ、ページ、またはダイアログボックスの設計は、1つの特定のタスクに焦点を当てる必要があります。 写真をアップロードするダイアログボックスがある場合、ほこりや傷を除去したり、写真を印刷したりするオプションを追加しないでください。 これは後で役立つかもしれませんが、今はユーザーが写真をアップロードしたいだけです。 ユーザーが自分の行動に多数の機会を見出した場合、ユーザーは自分のタスクから気をそらし、これらの機会を研究し始め、自分がやりたいことを簡単に忘れることができます。

6.シンプルで直感的なインターフェースを作成する

ユーザーが必要な機能があることを理解するほどユーザーを困らせることはできませんが、メニューやダイアログボックスでそれを見つけることはできません。 これは非常に迷惑です。 ユーザーは、プログラムを制御できないと感じています。 ウェブデザインに関する冗談のようなものです。「 ユーザーが検索バーを見つけるためにブラウザー検索（Ctrl + F）を使用する必要がある場合、デザインに失敗したことを知ってください 。」 プログラムの概念がシンプルで論理的であることが非常に重要であり、ナビゲーション設計はこのモデルを反映します。 機能を論理グループに結合します。 ユーザーがデフォルト設定を変更する方法に関するヒントを提供します。 もちろん、実装されている場合、ユーザーが必要な機能をどこで見つけられるかを簡単に推測できるようにしてください。

7.重要な要素を強調表示します。

画面またはページで、基本機能のパフォーマンスに重要な要素を強調表示する必要があります。 これらの要素は、基本的なコントロールとして簡単に区別できる必要があります。 補助要素は、そのように簡単に識別する必要があります。 これらはユーザーがページ上で簡単に見つけることができますが、同時に補助として明確に認識される必要があります。 これは、ミュート（暗くした、または明るくした）色、より小さいフォントサイズ、または単純にメイン要素から分離して行うことができます。 ユーザーが何が重要で何が重要でないかを知っている場合、ユーザーは目的のタスクをより速く完了することができます。 すべての要素が同じように見える場合、これはユーザーを混乱させる可能性があります。 ユーザーは、それらすべてを試すか、より重要な要素とそうでない要素を理解する必要があります。 これにより速度が低下し、ユーザーの追加の努力が必要になります。 インターフェース設計の非常に重要なルールは、「 考えさせないでください」です。 インターフェイスで作業する場合、これを考慮に入れる必要があります。

8.プログラム機能ではなく、ユーザーアクションに焦点を当てる

ユーザーは自分のプログラムを使用したいと考えています。なぜなら、彼らは彼らの助けによって問題を解決できるからです。 ユーザーは、プログラムとデータ構造の機能についてではなく、タスクと目標について考えます。 開発者は、ユーザーインターフェイスがソフトウェア部分の単なるシェルであると考える場合があります。 その結果、インターフェイスは構造とロジックを反映しますが、開発者の目でのみです。 ユーザーにはこの美しさは見えません。 オタクでないほとんどのユーザーにとって、データ構造を中心に構築された論理的に構築されたインターフェイスとそれらの操作は、プログラムでの作業を不可能にする可能性があります。 自分のことを考えてください。 毎日使用しているプログラムのいずれかで設定を見つけようとし、見つけられず、インターネット上のヒントを見つけようとしたことは何回ありましたか？ おそらくトラックを失いました。 個人的に、私は。 ユーザーにとってタスクとアクションがどのように見えるかを考えてください。 彼がタスクを実行する際に使用する最も一般的なパラメーターまたはユーザーアクションについて考えます。 ユーザーがメニューやダイアログボックスの山の下に埋めるのではなく、ワンクリックでこれを実行できるようにします。

9.頻繁に使用する機能を最初の場所に移動します

ユーザーの作業を簡素化および高速化する最も簡単な方法は、最も頻繁に使用する機能を最高レベルに配置することです。 どのケースが特定のケースで最も人気があるかを考えてください。 ユーザーを監視します。 彼らに聞いてください。 プログラムを使用して統計を収集します。 プログラムの最上位に最も必要な機能を配置し、残りを補助メニューとダイアログに転送します。 ユーザーが必要なものがすべて揃っていれば、すぐに幸せになります。プログラムを操作するために少し手間をかける必要があり、必要なものをすぐに見つけることができるからです。

10.クリックを最小限に抑える

明らかな可能性のある非常に一般的なユーザビリティエラーの1つは、不要なサブメニューやダイアログでインターフェイス要素を隠すことです。 何かを変更する場合は、ボタンをクリックしてダイアログを開き、値を変更してから、チェックボックスをオンにする必要がある2番目のダイアログボックスに移動し、その後[OK]ボタンをダブルクリックして両方を閉じる必要がありますダイアログボックス。 このようなメニューは何度も見ることができます。 心理的には、そのようなインターフェースは閉じられているように見えます-まるですべてが閉じられた部屋やパントリーに隠されているかのように。 ここに私の提案があります-あなたのインターフェースを解放してください。 両方のダイアログを取り除きます。 50個の異なる設定がない場合は、メインダイアログに配置します。 ユーザーは、一部の値または設定を確認または変更するために繰り返し押す必要はありません。 彼らはすぐにそれらを見て、すべてが正常であるかどうかを決定します。 そのようなインターフェースは開いているようです。 ユーザーは、プログラムによって自分を制御できるようになり、記憶力や注意力を鍛えられないと感じます。 コントロールパネルに他の要素が存在するかどうかは関係ありません。ユーザーの利便性が向上する場合は価値があります。

11.異常なインターフェイスの動作を避ける

ユーザーを間違いなく混乱させる間違いの1つは、非標準の外観を持つ非標準のインターフェイス要素の使用であり、非標準の動作ではさらに深刻です。 通常、これは、 ウェブマスターが創造性を発揮できるオリジナルデザインのサイトで見ることができます。 その結果、優れたデザインと美しい機能性が実現しました。 ただし、クリエイティブがユーザビリティ機能を引き受ける場合があり、これによりユーザーとプログラムの間に障壁が生じます。 例は簡単に見つかります。 たとえば、下線のないリンクや、残りのテキストの色とわずかに異なる色のリンク。 または、たとえば、他のほとんどのように見えるがクリックに応答するか、別のウィンドウを開く画面の領域。 Flickr Webサイトからの1つの例を次に示します。 写真のタイトルを変更したい場合は、多くの時間を費やして、その方法を理解することができます。 誤って現在のタイトルをクリックするまでに多くの時間を費やしました。 このテキストは、ページ上の他のテキストと同じように見えましたが、クリックすると入力フィールドに変わりました。 これは直感的ではなく、ユーザーがこの動作を推測することは困難です。 そのような場合は避けてください。 インターフェースの反応がユーザーが期待するものと異なる場合、これは悪いことです。 これを知って、ユーザーの利便性を損なわないように、創造性と使いやすさを慎重に組み合わせる必要があります。

12.一貫した外観を作成する

製品のすべての部分で均一な外観を持つことが非常に重要です。 スタイル、色、インターフェイス要素を定義し、インターフェイスで同じように使用します。 データ入力要素が静的要素およびシステムメッセージとどのように異なるかを決定します。 ユーザーがタスクを完了しやすいように、重要な要素を強調表示する方法と、画面に要素を配置する方法を決定します。 インターフェイスの基本原則を定義し、どこでもそれらに従います。 ユニークなデザインですべての画面を作成しないでください。 可能な限り、カラフルなインターフェイス要素を使用してユーザーを感動させないでください。 定義済みのフォントサイズ、色、または要素の動作を変更しないでください。 システムメッセージに青色が使用され、ユーザー入力に灰色が使用される場合は、このテンプレートをどこでも使用します。 ユーザーがデザインコンセプトを認識して理解すると、以前に見たことがなくても、インターフェイスのすべての部分に安心して自信を感じることができます。 各画面に独自の色のセットがある場合、または他の画面とは異なる動作をしている場合、ユーザーは時間をかけてその画面を調べて理解しなければなりません。 当然、新しい行動を研究するとき、彼らは古いことを忘れることができます。 このような経験はユーザーにとって苦痛です。

悪いインターフェイスのアイデアの1つの例-サムスン携帯電話インターフェイスを常に思い出します。 彼らのインターフェースは、店内でこの携帯電話でプレイするときに、カラフルなアイコン、メッセージ、アニメーションでユーザーを感動させることを目的としています。 あなたはこのトリックに落ちるかもしれませんが、あなたの意見は変わるかもしれません。 デザイナーは、各画面で多数の色を使用しましたが、これはインターフェースの他の部分では異なる場合があります。 ある場所では、入力は赤で、システムメッセージは緑、別の場所ではオレンジとグレー、3つ目は青と紫です。 おそらく子供に遊びを与えればいいのですが、大人なら、あまり好きではないかもしれません。 各画面の概念を理解して、覚えておく必要があります。 これは完全に間違っています。 私の意見では、2〜3色を識別し、どこでも使用する方が良いと考えています。

どこでも同じ外観のメニューを使用します。 標準の[OK]および[キャンセル]ボタンを使用します。 自動保存の機能を「保存」ボタンをクリックする必要性と組み合わせないでください。

インターフェイスの統一性は、開発中の時間を節約し、さらに重要なことには、作業を開始する時間とユーザーの労力を削減します。

13.不要なアイテムを削除する

インターフェースを実際に見て、これらすべての要素が効果的なユーザーエクスペリエンスに必要かどうかを自問してください。 テキストは、ユーザーが使用できる機能を説明していますか、それともユーザーが退屈しないようにしていますか？ 不要で補助的な要素が画面に表示されるほど、よりシンプルでオープンになります。 すべての要素をすぐに表示する必要がありますか？ それらの一部のみが必要な場合、ほとんど使用されない項目を[詳細設定]ダイアログボックスに移動する価値があります。 ユーザーに表示される不要な要素が少ないほど、ユーザーがタスクに取り組むのが容易になります。

14.多くの質問をしないでください

ユーザーと通信するプロセスでは、ユーザーが選択する必要があるクエリの数を最小限に抑えるようにしてください。 これがユーザーが所定の質問に答える必要がある瞬間である場合、 デフォルトで最適な答えを選択する機会を与えます 。 時々、プログラムは最初の実行中に選択を求められます。 これは誤りです。ほとんどの場合、ユーザーが質問に誤って回答するのは、特に回答がユーザーがプログラムでの作業後にのみ得ることができる特定の知識を必要とする場合に起こるためです。 したがって、プログラムを開始する前に設定を決定する必要がある場合、ユーザーに標準設定を提供し、彼がすでにプログラムを使用したことがある場合、必要なプロパティを変更します。そうでない場合、これは彼を行き止まりにさせず、定義した設定を使用できるようになります そのような質問を作成するときは、ユーザーの目を通してそれらを見てみてください。 ユーザーがまだ遭遇していないデータ形式、同期、および機能について最初から尋ねる価値はないと思います。 初心者ユーザーに役立つように設定を定義し（たとえば、ヒントとヒントの最大数を含む）、ユーザーがこれらの設定を経時的に変更できるようにします。

15.色の小さなセットを使用する

インターフェイスで多くの色を使用しないようにしてください; 2-3で十分です。 これは主にWebページに適用されます 。 本文テキストとユーザー入力の色を定義します。 アプリケーションのすべてのページまたはウィンドウでこれらの色を使用します。 赤いテキストでオレンジ色のボタンを使用する場合は、どこでも使用します。 大企業の製品を見ると、主に2〜3色が製品全体で使用されていることがわかります（白黒は考慮されていません）。 悪い例が必要な場合は、オンラインストアのサイトを見てください。多くの明るい色が注目を集めます。 マーケティングの観点からはこれは良いかもしれませんが、使いやすさの観点からはひどいです。

16.ユーザー思考に適応する

どのデザインコンセプトを順守しているかに関係なく、批判的に評価します。 ユーザーの目を通してそれを見てください。 あなたと同じプログラムで作業する知識がある普通のユーザーを想像してください。 彼らが開発者でもデザイナーでもなく、コンピューターの操作に関する広範な知識を持っていない場合、彼らはあなたの設計のアイデアをすぐに理解できるでしょうか？ 彼らは、この関数またはその関数が何をするのかを推測することができますか、それとも少し説明を加える価値がありますか？ 彼らはどこにあるべきか想像するだけで、設定を見つけることができますか？ インターフェースの動作は他のプログラムの動作と似ていますか、それとも異なっており、適応するのに時間がかかりますか？ あなたのインターフェースと動作は他の類似製品と似ていますか？ 差が大きいほど、学習に時間がかかります（たとえば、MS Officeのリボン）。 競争の激しいウェブサイトでは、ユーザーはブラウザの操作方法がわからない場合はブラウザを閉じるだけで、数回クリックするだけで別の同様のサイトにアクセスできます。 ほとんどのユーザーにとって、製品のデザインはその本質を決定します。 複雑なアルゴリズム、完璧なデータ構造、または優れたアーキテクチャではなく、シンプルなインターフェイス、その外観と動作。 それはまさにそれです。 これは、ユーザーが優れたアルゴリズムとプログラム機能について学ぶ前に遭遇することです。

上記のアイデアは、インターフェース設計の基本概念です。 それらは単純ですが、現在利用可能な多数のアプリケーションには完全に存在しません。 これらのアイデアをプロジェクトに適用することに決めた場合、大幅に改善できます。 間違いなく、このトピックに関するより深い研究があります。これには、ユーザーの行動、色の影響、コピーライティング、さまざまな社会グループや文化へのインターフェイスの適応などが含まれます。

この記事は、 DeveloperARTブログの記事「 インターフェース設計と筋金入りのプログラマーの使いやすさ 」の翻訳と適合です。