便利で使いやすいウェブアプリケーションを設計するための 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 のタイトル、段落、改行、水平線、特殊文字についての簡単な説明

推薦する

ファイルをアップロードするための HTML フォームの「参照」ボタンを変更する方法

コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...

dubbo での Zookeeper リクエストのタイムアウト問題: mysql8.0.15 に接続する mybatis+spring の構成

ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...

Docker の詳細なイラスト

1. Dockerの紹介1.1 仮想化1.1.1 仮想化とは何ですか?コンピュータにおける仮想化とは...

NginxとLuaによるグレースケールリリースの実装

memcachedをインストールする yum インストール -y memcached #memcac...

MacOS Catalina アップグレード後の VMware ブラック スクリーン問題に対する完璧な解決策の詳細な説明

MacOS Catalina アップグレード後の VMware ブラック スクリーンに対する完璧なソ...

MySQL 最適化 Zabbix パーティション最適化

zabbix を利用する上での最大のボトルネックはデータベースです。zabbix のデータストレージ...

純粋なCSSでデジタルプラスとマイナスボタンを実装するための最適なソリューション

序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...

Docker データボリュームコンテナの作成と使用状況分析

データ ボリューム コンテナーは、データ ボリュームをマウントするために特別に使用されるコンテナーで...

初心者のためのWebサイト構築入門 ③ エイリアス(CNAME)レコードとURL転送

①. エイリアス(CNAME)レコードの使用方法:前回の投稿のドメイン名解決では、A レコードの解...

MySQLでホワイトリストアクセスを設定する方法

MySQLでホワイトリストアクセスを設定する手順1. ログイン mysql -uroot -pmys...

LinuxはRsync+Inotifyを使用してローカルとリモートのデータのリアルタイム同期を実現します。

0x0 テスト環境本社本番サーバーと支社バックアップサーバーはリモートデータバックアップが必要です...

Linuxターミナルでファイルを作成する2つの一般的な方法を簡単に理解する

mkdir コマンドを使用して新しいディレクトリを作成できることは誰もが知っていますが、多くの場合、...

JavaScript PromiseとAsync/Awaitの詳細な説明

目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...

MySQLデータのセキュリティを確保するための提案

データは企業の中核資産であり、企業にとって最も重要なタスクの 1 つです。注意しないと、データが意図...

Vue マウスホイールスクロール切り替えルーティング効果を実装する方法

ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...