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

便利で使いやすいウェブアプリケーションを設計するための 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』や多数の技術記事の著者でもあります。 メールアドレスは[email protected]です。

<<:  nginxコンテナ設定ファイルの独立した実装

>>:  HTML のタイトル、段落、改行、水平線、特殊文字についての簡単な説明

推薦する

CentOS7 での MySQL 8.0.16 のインストールと設定のチュートリアル

MySQLの古いバージョンをアンインストールします(古いバージョンがない場合は、この手順をスキップし...

WeChatアプレットを少なく使う方法(最適な方法)

序文私は less/sass を書くことに慣れていますが、小さなプログラムを開発するときには、まだ ...

mysql mycat ミドルウェアの簡単な紹介

1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...

Windows Server 2008 R2 マルチユーザー リモート デスクトップ接続ライセンス

仕事ではリモート サーバーが必要になることが多く、次の 2 つの問題に遭遇することがよくあります。 ...

Dockerがsudo操作を使用する必要がある問題を解決する

手順は以下のとおりです1. dockerグループを作成する: sudo groupadd docke...

mysql5.7.19 zip 詳細なインストールプロセスと構成

MySQL v5.7.19 正式版(32/64 ビットインストール版および zip 解凍版) 1. ...

Vueのwatch、computed、methodsの違いのまとめ

目次1 はじめに2 基本的な使い方2.1 方法2.2 計算プロパティ2.3 リスナーを見る3 3つの...

ウェブデザイン経験

<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

CentOS 7.0 (mysql-5.7.21) で複数の MySQL インスタンスを起動する方法

設定手順Linux システム: CentOS-7.0 MySQL バージョン: 5.7.21 Lin...

ウェブページの広告デザインにおけるウェブデザインの寸法とルール

1. 800*600 未満の場合、Web ページの幅が 778 以内であれば、水平スクロール バーは...

シンプルなカルーセル チャートを実装するための JavaScript の最も完全なコード分析 (ES5)

この記事では、シンプルなカルーセル効果を実現するためのJavaScriptの具体的なコードを参考まで...

Vue ターンテーブル抽選の簡単な実装

この記事では、ホイール抽選を簡単に実装するためのVueの具体的なコードを参考までに共有します。具体的...

MYSQL インストールの解凍バージョンと発生したエラーと解決策

1 インストールMYSQL 公式サイトから対応する解凍バージョンをダウンロードし、必要なディレクトリ...

HTML の隠しフィールドの紹介と例

基本的な構文: <input type="hidden" name=&qu...