便利で使いやすいウェブアプリケーションを設計するための 10 のヒント

より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。

ヒント1: タブに注意する

タブは、コンテンツ編成の概念を視覚的に表現するのに最適です。 その機能は直感的で、誰でも使い方がわかります。 残念ながら、タブを使用すると、怠惰なデザイナーがフォームを制御できなくなり、雑然として整理されなくなる可能性があります。
過度に複雑なフォームを処理するためにタブを使用しないでください。 過度に複雑なフォームを減らすことに重点を置きます。 すべてを 1 ページにまとめると煩雑になる場合は、ガイドに分割します。

ヒント2: 貯蓄行動に一貫性を持たせる

自動コミットと手動保存の動作を混在させないでください。 保存ボタンがある場合、ユーザーは自動送信の動作を信頼しなくなります。 同様に、他の種類の入力の場合、自動送信によって処理されると想定し、[保存] ボタンを無視する可能性があります。 どちらの方法を選択する場合でも、それを貫き、一貫性を保ちましょう。

ヒント3: 削除ボタンの位置を考慮する

ユーザーが頻繁に削除する必要がない限り、削除ボタンをフォーム内の 2 番目の場所に配置する必要があります。 検索結果に削除ボタンを提供すると、不必要な複雑さが増し、ユーザーに頻繁に使用してほしくないアクションに重点が置かれすぎる可能性があります。

ヒント4: 入力フィールドには常にラベルを付ける

Web アプリケーションでは、入力フィールド ラベルの代わりに空白のプロンプトを使用する傾向が高まっています。これは、アプリケーションがシンプルでわかりやすく見えるためです。 残念ながら、ユーザーが何かを入力すると、空白のプロンプトは消えてしまいます。どの入力ボックスにデータが含まれているかを知りたい場合は、ユーザーはどうすればよいでしょうか?
フローティング ラベルは、ユーザー プレースホルダーのシンプルさと固定ラベルの使用の中間点に位置する、新しい人気のソリューションになりました。

ヒント5: 新たなニーズがあるときは適切な調査を行う

ほとんどのユーザーはソフトウェアの設計方法を知りませんが、ソフトウェア設計に対して要求をすることがよくあります。 なぜ新しいものが必要なのかを尋ね、本当に達成したいことを理解します。 新しい機能を盲目的に提供するのではなく、根本的なニーズに対してより優れたソリューションを提供します。

ヒント6: インターフェースの直感性と効率性のバランスをとる

ユーザーが初めてアプリを使用する場合、できるだけ早く使い始める必要があります。 ユーザーはドキュメントを参照することはなく、ほとんどの場合、トレーニングを受けることもありません。 つまり、時間が経つにつれて、ユーザーは使い方を学ぶのに苦労する状態から、1 日 8 時間で非常に効率的に作業を完了する必要がある状態へと変化します。
アプリを簡単に習得できるようにして画面をシンプルに保つことと、効率的で素早く使用できることの間には微妙なバランスがあります。

ヒント 7: 保存すると何が起こりますか?

ユーザーが「保存して送信」をクリックした後に何が起こるかを常に考慮してください。 結果は一貫している必要があり、ユーザーはある時点で応答情報を知る必要があります。 アプリケーションに一般的な検索、編集、保存の概念がある場合、ユーザーはおそらくリスト内の次の項目に移動するところなので、検索結果ページを表示するのが正しいアプローチになります。
ユーザーがウィザード インターフェイスで複数のステップのプロセスを完了した場合、保存された内容を表示し、次のステップのオプションを提供する完了ページが必要です。 ウィザードの確認ページに次のアクションや提案が表示されない場合、新しいユーザーを混乱させる可能性があります。

ヒント 8: 現在どこにいますか?

大規模な Web アプリケーションでは、インターフェースが数十または数百ある場合もあります。 ユーザーは常に、アプリケーション内のどこにいるのか、現在何を編集しているのかを一貫した方法で把握する必要があります。 これは、ナビゲーション バーを強調表示して、ユーザーにアプリケーション内のどこにいるかを示すことによって実行できます。
パンくずリストを使用して、ユーザーがアプリケーション内のどこにいるかを説明することもできます。ユーザーが選択した場所ごとにパンくずリストを表示することもできます。パンくずリストの 1 つをクリックすると、最後に閲覧したインターフェイスに戻ることができます。

ヒント9: スクロールバーにこだわらない

デスクトップ アプリケーションの時代では、スクロール バーなしで画面に適応する UI デザインが一般的です。 垂直スクロールバーは、見えて明確に表示されている限り、Web アプリケーションでは問題になりません。 ユーザーがフォーム タブをクリックすると、ブラウザの動作に応じて、適切な位置まで自動的にスクロールされることもあります。

ヒント10: 空白を恐れない

すべてを埋めようとする自然な傾向があります。 ニーズが拡大するにつれて、開発者は限られたスペースにますます多くの機能を詰め込んでいきます。 残っているのは、非常に複雑で、かなり入り組んでいてわかりにくいアプリケーションです。 適切な量​​の空白を残すと、アプリがシンプルで使いやすくなります。

結論は

ユーザーは、アプリの品質を機能性よりもインターフェースに基づいて判断します。 ユーザーがあなたのアプリケーションが使いやすく、良い気分になれると感じれば、彼らはあなたのアプリケーションを使うでしょう。そうでなければ、機能が強力であっても良いレビューを得ることは難しいでしょう。 次の Web アプリケーションを設計するときに、これらの 10 のヒントを念頭に置いてください。そうすれば、ユーザーは感謝してくれるでしょう。
著者について:
David Talbot は現在、EverBank のチーフアーキテクトです。 ソフトウェア業界で 15 年以上の経験があり、リッチ UI の Web アプリケーションの構築に関する専門的な経験があります。 彼はまた、『Applied ADO.NET』や多数の技術記事の著者でもあります。 メールアドレスはdavid@legendarycode.comです。