インターフェイスの利便性について

今日、親愛なる友人たち、私は普遍的なタンポポの緊急の問題（著者のメモ：web 2.0）-ウェブサイトの優れたグラフィカルインターフェースの問題についてお話したいと思います。

多くの設計者は、ユーザーインターフェイスの設計でかなり一般的な間違いをいくつかします。これは、エンドユーザーが使用する際にさまざまな不便をもたらします。

0.はじめに

この記事が誰に書かれているかすぐに説明したいと思います。 この記事は、デザインの初日ではない人を対象としており、少なくとも色、フォント、およびサイト上の実際の場所を選択する基本を知っています。

この記事を読んだデザイナーは、青にピンクを使用したり、本文に滑らかなフォントを使用したりしないことを前提としています。 また、デザイナーはフレーズの意味を理解していると考えられています。 デザイン」、「パレット」、「グラデーション」、「自然刺激」、「人間工学」。 何らかの理由でこれらのフレーズの意味を知らない人のために-「用語集」の章でそれらを解読します。



それまでの間、読書をお楽しみください。

1.アイテムのグループ化

UI要素のグループ化は、通常、インターフェイスの計画において非常に重要な部分です。 多くの場合、相互作用要素の組み合わせは、ユーザーがサイトを離れるか、アクティブユーザーになるかによって異なります。



インターフェイス要素を正しくグループ化する必要があることを忘れないでください。 グループ化のいくつかの方法を検討します。



a）機能によるグループ化

b）アクションの結果による

c）グループ化の混合タイプ



次に、これらの方法の詳細なレビューを開始します。



a）機能別



これは、インターフェイス要素をグループ化する比較的簡単な方法ですが、多くの設計者はそれを使用しません。



インターフェースの要素をクラス（グループ、ブロック-呼び出した方が便利なため）に分割し、これらのブロックをユーザーにとって重要度の高い順に配置します。 ところで、これはそれほど簡単ではありません。 あなたの目が最初に見える場所を追跡し、主要なポイントを覚えて、破線を描きます。 これがユーザーの視線です。



たとえば、Googleインターフェースを使用して次のように表示します。





同様の機能を実行する要素は、別の機能グループに配置する必要があります。



b）アクションの結果による



一方では、コントロールを1つの場所に配置する方が適切ですが、要素のグループを別のグループから分離する必要がある場合があります。 この方法は、機能を機能グループに分割することを提案します。機能グループの作成は、その要素の動作からの結果の類似性の原則に基づいて行われます。



画像を使用したアクションはページの一部にあり、テキストを使用したアクションは別の部分にあります。



c）混合



この方法は、インターフェース設計の歴史における最大の間違いです。 なんで？ はい、そのような要素のグループを見て、ユーザーが自分の場所にロジックを表示せず、サイトを離れた場合に限ります。 これはプロムにも適用されます。 デザイン。）。



混合タイプのグループ化を使用しないことを強くお勧めします。また、機能別のグループ化を使用する傾向があり、場合によっては、タイプ別の要素のグループ化でグループ化を希釈します。



他のデザイナーの経験を活用しよう！ 多くの場合、同じテーマの人気サイトのインターフェースを分析することで、作業のほとんどのエラーを回避できます。



混合タイプのグループ化の使用例：

ポータルNetz.ruおよび類似物。 デザインは見栄えが良いですが、不便です。

2.要素の配置

しかし、どのサイトでも機能するように要素をどのように配置すれば、最も経験の浅いユーザーであっても、すべてのユーザーにとって便利なのでしょうか？



どの刺激物が人に最も強く作用するかを考えましょう。



1.音

2.をタッチします

3.色

4.におい



なぜなら 純粋に技術的には、サイトのタッチと匂いは実装されていません。色と音を考慮します。



個人的に、私はサイトで音を断固として受け入れません、彼らは私を誤解させて、彼ら自身に注意を引きます。 したがって、人間の残りの自然刺激物である色を利用しましょう。



色自体はページの使いやすさに影響を与えることはできませんが、補助的な目的に使用できます。



ナビゲーション項目を機能または結果別にグループ化し、各機能を他の要素に使用される色とは異なる色でマークします-使いやすさのため。

例：1つの色を使用して写真を操作し、別の色を使用してテキストを操作できます。

良い色を選択するための素晴らしいユーティリティがあります。 Color Schemer Studio + Color Pix





次に、一般的な要素と一般的な要素の場所について説明します。

これについて最初に言いたいのは、重要な要素は固定された場所でなければならないということです。 メニューが毎回新しい場所にある場合、画面上でメニューを検索するのは非常に不便なので、ユーザーはあまり好きではありません。 重要度の低いインターフェイス要素は移動できますが、これは非常に望ましくありません。

デザイナーにとって重要でないと思われるものでさえ、ユーザーにとって重要な場合があります。

3.ブロックへの分割

本格的なページデザインを開始する前に、ブロックレイアウトの開発を開始します。 白いシートをブロックに描画するだけです。ブロックの色は、このページのブロックの重要度によって異なります。 多くの場合、このようなアクションは重要なコンテンツを重要でないコンテンツから明確に分離し、重要でないコンテンツを下に下げ、実際の重要なコンテンツを高くするのに役立ちます。



ウェブサイトwww.crazyegg.comのコンテンツの重要性を確立し、数日間ユーザーのクリックを追跡するスクリプトを作成できます。 ただし、これはおそらく、古いデザインをすでに持っているサイトに当てはまり、ユーザーはその処理に従事しています。 新しいサイトのデザインを作成する場合は、経験豊富な同僚や顧客からアドバイスを求めることをお勧めします。

かなり頻繁に、サイト上のブロックの重要性を正当化します。



ブロックに分割した後、私たちは世論で確認する必要があります。通常はあなたではなく大多数が正しいです。

経験の浅いインターネットユーザーにアドバイスを求めることを恐れないでください。多くの場合、彼らは対象読者です。 Webページの操作には独自の特性がありますが、潜在的なユーザーと少し調査を行うと便利です。紙を渡してブロックに描き、クリックしたい場所と見えない場所をトレースします。



特に、 CrazyEggのおかげで、メインページのニュースは誰にも興味がなく、特別なセクションに入れるほうが良いことに繰り返し気づきました。



ブロックへの分割では、あなたの使命は終わらないことに注意してください。これらのブロックは、デザインの全体的な構成に、利便性を犠牲にすることなく正しく配置する必要があります。



レイアウトを設計する際に留意すべきいくつかのルールを次に示します。



1.スペースを節約しないでください。 私を信じて、見栄えの良い背景は、ユーザーを悩ませることなく、ブロックを明確に区別するのに役立ちます。 デザイナーは数ピクセルを節約することを決めたため、普通の人は仕事のために便利なツールを手に入れる必要があり、混乱してインターフェイス要素を探す必要はありません。





2.小​​さなアイコンを使用します。 テキストとブロックだけで循環するべきではありません-ユーザーはページを表示するときに何もしがみつくことはありません。 はい。フォロワーの再設計作業を大幅に簡素化します（将来、技術が開発され、設計が廃止されるため、サイトの再設計は確実になります）。 アイコンは再設計にどのように役立ちますか？ 説明します。 ユーザーの目は、デザイナーの目と変わらない。 デザイナーはまた、そのグラフィックデザインによってブロックの所有物を明らかにし、小さなアイコンがこれに役立ちます。 下の図に例を示します。 言葉をまったく使わずに認識できる絵文字。





3.サイトで可能な限り少ない行を使用します。 これが人間の目がどのように配置されるかです-重要な要素の周りにかなり多くの空きスペースが必要です。 多くの場合、重要な要素を中心に、デザイナーは二次的な線、ハエなどの束を作成します。 私を信じて、誰もこれを必要としません。





4.ネストされたテーブルを使用しないようにしてください。 かなり頻繁にテーブル内のテーブルを見つけることができ、各テーブルには目に見える境界があることも何度も見ました。 その結果、ユーザーの頭が混乱し、顧客が不快になり、結果としてデザイナーになります。



5.タブを使用します。 タブは素晴らしいことです。 別のことは、多くの場合、設計者はそれらを正しく設計できないことです。 アクティブなタブは、カーソルが置かれているタブとは別のタブである必要があります。

次の図に、タブの正しい使用例を示します。





上の写真を見てみましょう。



1.アクティブなタブがすぐに表示されます：それ



-コンテンツブロックと同じ色

-残りの部分より上

-よりトレースされたデザイン

-視覚的に非アクティブなタブ



2.また、非アクティブなタブをすぐに見ることができます。



-アクティブな色とは異なります

-アクティブより下に下げた

-よりシンプルなデザイン

-アクティブなタブより視覚的に小さい



タブの意味を少し明確にしたいと思います。 ページをリロードせずにロードされたタブでは、すべての二次機能を配置できます。 したがって、1石で2羽の鳥を殺します。ユーザーに必要な機能を選択する機会を与え、ユーザーが現時点で必要のない機能でページをオーバーロードしないようにします。

4.ボタン

a）可能な限りボタンを作成しないでください。 可能であれば、通常のリンクを使用することをお勧めします。 平均的なユーザーは、ボタンが豊富にあるというだけで混乱しています。



b）ボタンの使用が本当に重要な場合（イデオロギーである場合もあります）、機能ごとのグループ化を使用して、ボタンをページ全体で最も重要な場所に配置することをお勧めします。 これにより、ユーザーはインターフェイスを少しでも自信を持って操作できます。



c）カスタムボタンデザインを使用しないことをお勧めします。 これはユーザーを混乱させ、ユーザーとの作業中に迷子になります。 標準のブラウザボタンを使用します。これにより、新規参入者を怖がらせることなく、経験豊富なユーザーはそれらの操作に慣れています。



d）すでに非標準タイプのボタンを使用している場合は、非コントラストボタンを作成しないでください。 白のフォントをライトボタンに、黒をグレーに配置しないでください。 ほとんどのレビューから判断すると、これはいくつかの不便を引き起こします-ボタンの碑文を読む必要があり、これは余分な時間を費やしています。 ご存知のように、作業の速度は、インターフェースに対するユーザーの満足度にも大きく影響します。



d）ブラウザで画像を無効にしているユーザーに対しても表示されるようにボタンを作成します。

5.フラグまたはオプション？

チェックマークを使用するのは、一度にマークされたすべてのアクションに対して後続のアクションのために複数の要素をマークする必要がある場合のみです。 他の場合には、オプションを使用することをお勧めします。オプションは明確な選択を特徴付けるものであり、常に作成する方が簡単です。



良い例は、調査を実施することです。複数の回答オプションを同時に選択できる場合は、チェックボックスを使用します。 オプションを1つだけ選択する必要がある場合は、オプションが使用されます。

6.視覚的なグループ化

ここでは、視覚的なグループ化の方法をかなり詳しく説明しますが、ここでは、状況を簡潔かつ明確に説明しようとします。 この写真を見てください：





左の画像内のテキストのタイトルは、関連するテキストから分離されています。 これは間違ったアプローチです。 これは、フォームにも適用されます。あいまいさを避けるために、フィールド名を自分でバインドします。 以下の写真をご覧ください。





ところで、投票の結果を表示する場合など、他の場所でも同様の問題が発生することがよくあります。





投票について話し始めたので、グラフィックディスプレイの横に、一般的およびポイントごとに割合と投票者数を記入する必要があることを言っておく価値があります。



ページ上の各補助要素は、その上にある要素のすぐ近くに配置する必要があります。 ユーザーに自分の場所のロジックを強制的に検索させるべきではありません。

7.スタイルとインデント

少なくとも一度本を手にした人は誰でも、その本のページにインデントがあることを知っています。







確かに、多くは私がこれを導いているものを推測しました。 人々はメディアを印刷することに慣れており、サイトのインデントを決して拒否してはいけません。



なぜそんなに重要なのですか？ ユーザーの目は、サイトを読んで閲覧している間にリラックスする必要があるためです。 空の空白はこれに役立ちます。 インデントをあきらめないでください。

以下は、インデントのある場合とない場合のインターフェイスの例です。 私はあなた自身がどちらが正しいかを推測すると思います：

8.用語集

プロム デザイン、それは工業デザイン-私たちを取り巻くすべてのデザインです。 マウスから始まり、隣にある家具で終わります。 このデザイン業界では、ランドスケープ、グラフィック、またはWebデザインに関連して雇用されている人は比較的少なく、最近の3つの職業は最近非常に人気があります。 それにもかかわらず、工業デザイナーは、ペンや鉛筆など、毎日使用するものの外観を決定する一種のエリートです。

基本的に、設計とは、システムを一貫性のある秩序ある統一体に変える構造的および機能的なバインダーであり、開発者とユーザーの両方から等しく考慮されます。

パレット -何かのデザインを作成するために使用される色の選択。 色は目を楽しませ、視覚的に相互作用し、互いに補完する必要があることが理解されています。

また、 （比fig的な意味での） パレットは、特定のアーティストや美術学校の作品の特定の絵画に典型的な色の選択です。

グラデーション -グラフィックパレットで1色ずつ変更します。



エルゴノミクスは、仕事の過程での人の行動、新しい技術を習得する速度、エネルギーのコスト、生産性、特定の活動の強度を研究する科学です。 デザインのすべてのブランチで使用され、特定のインターフェイスの利便性、要素の場所を調査します。



このメモで、記事を終了できます。

楽しんでいただければ幸いです。続編を書きます。

良い、使いやすいインターフェースを作成してください。

私の記事について何か考えがあれば、（この綴りで）tuda.gde@lampochek.netに私に書いてください。



敬具、 ビルズル・ヤロスラフ。