使いやすさを向上させる15のステップ

服を着て、心を見てください。 この古いことわざは、とりわけ、第一印象の重要性を語っています。 これは、人々だけでなく、ソフトウェア製品（Webサイトやモバイルアプリケーション）にも当てはまります。 ネットワークプロジェクトの魅力の形成における最も重要なポイントの1つは、その使用の利便性-使いやすさです。 そして、ある人が最初にWebサイトまたはアプリケーションに精通するとき、最初の印象はしばしば、彼が何度もこの製品に戻るかどうかを決定します。 つまり、ユーザビリティは、視聴者を形成（または破壊）するサイトの重要な特性の1つです。 よく見落とされがちな一般的なユーザーの行動シナリオと、Webサイトまたはモバイルアプリケーションとのやり取りの最も重要な段階で使いやすさを向上させる方法を見てみましょう。

明確で情報に基づいたやり取り

1.フォントサイズを選択する

人々はますますモバイルデバイスを使用してネットサーフィンをしており、一部のサイトではモバイルバージョンが主なものになっています。 また、スマートフォンやタブレットの画面は従来のモニターやラップトップよりもはるかに小さいため、これによりフォントサイズの要件が決まります。 レスポンシブデザインの急増は、フォントの問題に注意を引く上で大きな役割を果たしました。



多くの場合、サイト作成者は、ボタン、アイコン、タブ、およびクリックする必要のあるその他のオブジェクトの使いやすさに焦点を合わせます。 また、テキストハイパーリンクをクリックすることの利便性について覚えている人はほとんどいません。 したがって、指でハイパーリンクをクリックする快適さのライブテストを常に実施してください。

2.有益なエラーメッセージを作成する

多くの人は、エラーメッセージを二次的なものと見なして、エラーメッセージの表現の選択を怠っています。 開発者は通常、製品での不正なアクションを回避する方法を知っているため、このようなメッセージはほとんど表示されません。



しかし、実際のユーザーはそれを自慢することはできません。



エラーメッセージが発生した後、ユーザーが何をすべきかを十分に理解していない場合、ユーザーは製品を完全に放棄する可能性があります。 したがって、メッセージのテキストは遊び心のあるものになりますが、少なくともユーザーがその理由をすばやく理解し、将来の失敗を回避するのに役立つはずです。



専門用語を避け、公の理解可能な言語でメッセージを書いてください。 ユーザーが使用できない情報をユーザーにダンプする必要はありません。 必要に応じて、検証エラーであっても言い換えることができるため、よりわかりやすくなります。 人気のあるオペレーティングシステムの同じ画面の2つのバージョンを比較します。

入力フォームの便利さ

3.パスワード要件を簡素化する

今日では、ユーザーに複雑なパスワードの作成を要求するのが慣例となっています。 しかし、これは、乗り越えられない過酷な状態という形ではなく、励ましの助けを借りて積極的に行われなければなりません。 多くの入力フォームは非常にきれいに見えますが、完全に不快です。 このインターフェイス要素の使いやすさは、製品全体の成功に決定的な影響を与える可能性があります。 決定に失敗すると、ログインパスワードを入力する段階で、または注文時に、ユーザーをすでに押しのけることができます。 したがって、フォームの使用の利便性に細心の注意を払う必要があります。



たとえば、歴史的に、選択ボックスのスタイル設定は難しいことがわかっています。 ほとんどの場合、開発者は標準オブジェクトを非表示にし、より適切なDOM要素としてそれらを複製しようとします。 この場合、「クローン」からのデータは元の要素の入力に送信されます。



通常のドロップダウンメニューのデザインを管理する機会を得るためだけに多くの時間を費やす必要があります。 しかし、ゲームはろうそくの価値がありますか？ モバイルユーザーは、オペレーティングシステムで使用されている標準インターフェイス要素の外観と動作にすぐに慣れることを忘れてはなりません。







たとえば、Windows Mobileユーザーは、ドロップダウンメニューを選択すると、フィールド自体とは別に、オプションのリストが全画面で開くことを期待しています。 Androidユーザーは、モーダルウィンドウが表示されることを期待しています。 そして、あなたのデザインのアイデアのためにあなたがそのような期待に応えていないなら、ユーザーはあなたの決定に全く感謝しないかもしれません。 最も可能性が高いのは、彼らがあなたの製品を扱うのがより難しくなり、彼らの経験に悪影響を与えることです。 つまり、標準要素の設計を変更すると、解決するよりも多くの問題が発生します。

4.正しい入力フォームを使用する

多くの場合、入力フィールドでデータ形式を使用することを推奨しています。 たとえば、 input[type="email"], input[type="tel"]



を追加するとinput[type="email"], input[type="tel"]



時にレイアウトが自動的に切り替わります。 ただし、見た目がおかしく、まったく助けにはなりませんが、フォームへの入力が妨げられます。



複数の入力フィールドがある場合、それらに1つのデータ型を割り当てることをお勧めします。 入力時に同じレイアウトを使用すると、ユーザーにとってはるかに簡単になります。文字から数字にジャンプしたり後ろにジャンプしたりすると、さらに混乱が生じます。







HTML 5でさまざまなタイプの入力を使用することは、画面にできる限り少ないフィールドがある場合にのみお勧めします。 良い例はGoogleの2要素認証です。数字のみを入力できるフィールドは1つだけです。 自動的にデジタルレイアウトに切り替えることは非常に適切です。



しかし、より複雑な形式では、キーボードの「有用性」や「イニシアチブ」はユーザーを精神的に切り替えさせ、認知的負荷を増加させるため、煩わしい場合があります。 特に、文字から数字へ、またはその逆に切り替える場合：

5.鮮明で記憶に残る初めての体験を計画する

初心者が最初の数秒からサイトまたはアプリケーションに失望した場合、これはゲストに会うときの所有者の無礼に似ています。 どんなにおいしいおやつであっても、会議は絶望的に台無しになります。



開発者は、自分の製品のいくつかの初期ユースケースシナリオを簡単に見落とす可能性があります。 たとえば、アイコンやセクションでいっぱいの直感的な画面を呼び出すことは困難です。 たとえば、簡単にオフにできる役立つヒントや警告メッセージを使用して、最初の使用経験を軽減できます。

6.詳細の悪魔

あらゆる種類のささいなことは、製品の開発を促進する上で大きな役割を果たすことができます。 たとえば、最初の入力フィールドにある使い慣れた標準カーソルを使用すると、より速く、より簡単にインターフェイスに飛び込むことができます。 理想的には、ユーザーは「自動操縦」でサイトまたはアプリケーションを「ナビゲート」する必要があります。



製品の新規ユーザーの経験不足は、一部の機能が深刻な問題を引き起こす可能性があるという事実に反映されています。 突然出て助けを提供したMicrosoft Office Paperclipを思い出してください。







最初の使用体験を成功に導くことは、綱渡りのようなものです。すべてを正しく行うことは非常に困難ですが、成功した場合は、ユーザーの認識で報われる以上のものです。 たとえば、 Stumbleuponプロジェクトは、初心者に基本的な機能を非常にうまく教えています。











良い解決策は、製品を使用するための通常の手順に学習プロセスを統合することです。 メールアプリケーションでレターをアーカイブするときに、「Ctrl + Kを使用してアーカイブを開始できることを知っていますか？」というメッセージを取得できるとします。 このアプローチにより、「アプリケーション全体の概要」のスタイルで、従来のレッスンに比べてはるかに柔軟にユーザーを教育できます。

7.顕微鏡をさかのぼって使用しないでください

マイクロコピーとは、アプリケーションで使用されるすべての小さな指示と確認を指します。

• 「心配しないでください、私たちはあなたの住所を漏らしません」
• 「支払いにクレジットカードは必要ありません」

マイクロコピーは、信頼を構築し、エクスペリエンスを向上させるための理想的なツールです。 また、彼らの助けを借りて、あなたの製品での作業に自信がないユーザーを非常に効果的に訓練することができます。



たとえば、銀行カードをリンクしたり、多くのユーザーにメールを提供したりすることは、かなり議論の余地がある問題です。 実績のある尊敬されるブランドを想像できない場合、人々は常にそのような情報を提供することを恐れます。 顕微鏡はユーザーの懸念に役立つ

8.常にコンテキストを確認する

ユーザーはコンテキストの欠如を嫌います。 どのような種類の情報の流れに常に対処しなければならないかを考えると、人々は画面上の余分なものすべてから抽象化し、特定のことに集中しようとします。 無限スクロールが流行すると、多くのサイトが1つの問題に直面しました。ユーザーがどこかを誤ってクリックするとすぐに、現在の位置がリセットされました。 これは、人がサイトのコンテンツを非常に下にめくった場合に特に不快です。 5回スクロールした後、ランダムにクリックすると刺激を引き起こす可能性があります。



今日、ほとんどのサイトは、モーダルおよび単一ページアプリケーションに固有の他のスキームを使用してこの問題を解決しています。 たとえば、Pinterestでは、タイルをクリックすると、新しいページではなくモーダルが開きます。 これにより、現在の位置を失うことなく、新しいページの読み込みを待たずに、レコードの詳細を調べることができます。







Facebookモバイルアプリケーションは同じアプローチを使用します。アルバム内の写真をクリックすると、フルスクリーンモーダルで読み込まれます。 新しいページが開いたように見えますが、「戻る」ボタンをクリックすると、コンテキストに慎重に戻ります。



Googleの非常に人気のある素材デザインは 、コンテキストを提供するためにアニメーションを次のレベルに引き上げました。 オブジェクトをクリックすると、現在のページからオブジェクトに関するロードされた情報へのアニメーションフローが開始されます。 これは、論理的な関係、それがどこから来てどこに戻るかを明確に示しています。



同様のアニメーションが戻ったときに表示されていればさらに良いでしょう。 良い例は、Stackoverflowで通知を処理することです。 メッセージをクリックすると、対応するページに移動し、すぐに目的のコンテンツに転送されます。 非常に便利ですが、さらに進んで、控えめなアニメーションを使用してコンテキストへの復帰を実装しました。 穏やかに、しかし効果的に、ユーザーの注意を必要な場所に正確に導き、画面上の視覚的な「ノイズ」をフィルタリングするのに役立ちます。

9.アトミックアクション

多くの場合、ユーザーは、それに関連しない他のすべての要素が暗くなるか、マスクされると、何らかのアクションを実行しやすくなります。 このソリューションは、認知的負荷を軽減し、インターフェースでの作業を簡素化するのに役立ちます。







素晴らしい例の1つは、Twitterのモーダル「新規ツイート作成」ウィンドウです。これは、このアプリケーションで最も重要なアクションの1つを実行するためのモジュールです。 結局、人々がつぶやきをやめるとTwitterは死ぬでしょう。 ご覧のとおり、ここでのすべては、ユーザーが余分なものに気を取られることなくテキストを書くことに集中できるようにすることを目的としています。



このアプローチは、アトミックアクションを実行するときに最適に機能します。 同時に、同じモジュール内でアクションを完了するために必要なすべてを提供できます。

10.エラーメッセージ

ユーザーにコンテキストを提供することも非常に重要です。 エラーメッセージを使用すると、注意が必要な特定の入力フィールドをすぐに強調表示できます。



エラーメッセージは非常に愚かで、ユーザーが問題を解決するのに役立たない場合があります。 ユーザーがどこで問題を解決すべきかを、すぐにすぐに伝えようと常に試みてください。







Basecampの登録フォームが上に表示されます。このフォームでは、必須フィールドが強調表示されているだけでなく、入力を求めるテキストプロンプトも表示されています。 フォームに2つまたは3つのフィールドしかない場合、すべてが明白であるため、ユーザーを支援する必要がないと思われるでしょう。 ただし、この場合でも、問題のある領域に注意を向けることをお勧めします。これは、Amazonで行われているように、単にエラーのリストをダンプするよりもはるかに便利です。

11. 1か所での通知の集中

単一ページのアプリケーションの普及により、あらゆる種類のカスタム通知を統合できます。 ネイティブアプリケーションとWebアプリケーションの境界はますます曖昧になっています。 アプリケーションがユーザーと対話する必要がある場合、すべてのメッセージをコンテキストに配置するよりも、特定の場所に送信する方がはるかに簡単です。 ただし、このルールには例外があります。 通知リポジトリの好例は、Gmailの受信トレイです。 通知Growlを整理するためのモジュールは 、ユーザーが重要なメッセージに気付かないようにしません。







Feedlyでは、通知は常にページヘッダーの中央に配置されます。 これにより、一部のアクションを実行して元のコンテキストを離れている間でも、このゾーンで重要なメッセージを常に検索するようにユーザーに指示します。 ユーザーが現在の記事に既読のマークを付けたときに次の記事に移動する便利な関数を次に示します。







Feedlyでは、すべての通知はグローバルであり、常に同じ場所に表示されます。 同時に、リンクと必要なアクションのリストは、テキストコンテキストから明確に分離されています。

12.デッドロックを回避する

モーダルは便利なものですが、モーダルで何かをするまでユーザーがアプリケーションを操作できないようにするために、ユーザーのアクションをブロックするためにそれらを使用する必要はありません。 このようなデッドロック状態は、現在の操作をキャンセルする以外に選択肢がありません。 まれに、これが必要になる場合がありますが、このような状況を避けることをお勧めします。

13.ユーザーに制御を与える

ナビゲーションボタンのないカルーセルでは、ユーザーに制御オプションがほとんどありません。 この時代遅れのアプローチでは、変数が多すぎるため、最高のユーザーエクスペリエンスを提供できません。 カルーセルをページの上部に配置すると、特に悪い結果になります。これは、ユーザーがアプリケーションで最初に遭遇する可能性が高いことです。 そして、これらの要素を制御できないことは、あなたの関係に悪い調子をもたらします。



単純な経験則に従うことをお勧めします： 明示的なユーザーアクションにのみ応答します。 彼が何を望んでいるか正確にわからない場合は、彼に管理する機会を与えてください。

14.注意を散らすことを避ける

JavaScriptの警告は非常に注意をそらします。 人はページから注意が必要な通知に切り替える必要があります。 したがって、絶対に必要な場合にのみ使用し、他の場合はより穏やかな代替を使用してください。



ユーザー、特にモバイルのユーザーは、画面の内容が突然変化することを好みません。 これは、明示的なユーザーアクションに応じてのみ使用する必要があります。 たとえば、TwitterやFacebookのフィードは強制的に更新されます。 そうしないと、メッセージを読むときに不愉快な状況に陥り、この時点でバックグラウンドプロセスがフィードを更新し、以前読んだものを埋める多数の新しいメッセージをダンプします。 それはあなたの手から新聞を引っ張る突風のようなものです。







幸いなことに、Twitterは新しいメッセージの出現について繊細にユーザーに通知し、ユーザーがダウンロードするコマンドを与えるのを待ちます。 つまり、人は画面の内容の変更を完全に制御し、混乱することはありません。

15.大規模で複雑なタスクを小さな操作に分割する

全ページのフォームに記入するのが好きな人はいません。 したがって、すべての種類の設定セクション、登録フォーム、およびプロファイルは、小さなブロックへの論理的な分離からのみ恩恵を受けます。 これには、カード、セクション、タブ、サイドパネルを使用します。 1ページに複数の論理ブロックがある場合でも、人は複数の塗りつぶしの必要性を認識しやすくなります。



論理ブロックに分割することにより、多数のフィールドの設定と入力のタスクが主観的に単純化され、不快な作業の感覚が防止されます。 これは、モバイルアプリケーションとサイトバージョンにとって特に重要です。







たとえば、Facebookは、設定を簡単にするために、プライバシー設定のグループ化を数年にわたって強化しています。 しかし、かつては非常に重要な作業であったため、多くの人はこれらの設定に触れませんでした。 それらをセクションに分割した後、これらのページを避けずに作業するユーザーの割合が増加しました。







大きなタスクを論理ブロックに分割するもう1つの良い例は、チェックアウトプロセスです。 多くのWebアプリケーションにとって、この手順はプロジェクトの成功を示す重要なポイントになります。 注文するときは段階に分けられ、合格すると、すべてが時計仕掛けのようになっていなくても、ユーザーは進歩、進歩の感覚を持ちます。



ロジックブロッキングにより、問題の検出と解決も容易になります。 結局のところ、「次の4つの点を修正できますか？」などのメッセージに対処したい人はいません。



ユーザーにすべてのフィールドへの入力を強制するか、複雑に構成された1つのページで設定を構成する場合、卵を1つのバスケットに入れます。 エラーがあると、他のすべてのデータが送信されなくなります。



特にモバイルプロジェクトでの寄付の形態についても同じことが言えます。 ユーザーに「うん、時間がかかる」ではなく、「うわー、どれだけ簡単か」を考えてほしいと思うでしょう。 フォームの使いやすさを改善すると、プロジェクトの収益性に直接影響します。



* * *



上記のポイントのほとんどは、それらを個別に検討すると非常に簡単です。 しかし、毎日作業すると、目がぼやけることがよくあります。 したがって、「新しいユーザー」の目を通してあなたの発案を後戻りし、抽象化し、見ることができることが重要です。