web-dev-qa-db-ja.com

WebアプリケーションGUIを明確かつ単純にするための重要な要素は何ですか?

私たちはウェブアプリケーションに取り組んでいます。すべてのプロセスとワークフローを簡素化するために2か月以上費やしてきました。ここで、ユーザーインターフェイスをよりシンプルで明確にして、ほとんどCSSでのみ機能するようにします。

私は経験豊富なフロントエンド開発者ですが、シンプルさを実現するのは簡単なことではなく、バックエンドに単純な作業機能がある場合、それは別のステップです見せるフロントエンド部分、そして私たちの場合、非常に特定の種類のユーザーにとってはシンプルで明確です。

コンテナーと入力フィールドの丸い境界線のようなものを意味し、今日どこでも使用されているようです。しかし、私は削除のものではなく、追加のことを恐れています。

問題はすでにたくさんのものと機能を手に入れたことです。今、何を削除、精製するかなどを選択する必要があります。

ユーザーにperceptionのGUIのシンプルさと明瞭さを与える基本的なルールはありますか?

3
smonff

空白のキャンバスから始めます。当然のことながら、それはクリーンでシンプル、そして最小限のものです。

残念ながら、あなたは一連の期待に対してのみ最小限にすることができます。エレガントなソリューションは、その問題の最小限のソリューションです。

だから、すべての必要性を述べてください:画面上のすべてがそこにいる権利を持っていることを確認してください。状況に応じて、特定の種類の問題を簡単に置き換えることはできません。

その画面に表示する必要がある理由を説明します。別の画面に表示できない理由。なぜその画面を消せないのか。

削除しないでください。要素の有用性、システムの全体的な目的、またはシステムのユーザーの全体的な目標をどのようにサポートするかを定義した後、要素を1つずつ追加し直します。現実のシナリオで実際の人々とこれらの目標を正当化します。夢を見ないで。

ボタンが丸いのはなぜですか?それがボタンであることを人々が認識する他の方法はありますか?実際の人でテストしてください。フロントエンド開発者ではなく、プロジェクト内での経験がなく、コンピュータ自体に特に関心がない人々。必需品としてのみ使用する人は-これは年齢層に関係なく-あなたの選択であるべきです。

すべての単一のアイテム、すべての画面に明確な根拠があり、その根拠が最終的にインターフェイスの使用目的に関連付けられると、最小限のデザインになる可能性があります。

また、 このスピーチを読む 。家具のことを気にしないでください。そうではありません。

1
Aadaam

UCD(ユーザー中心設計)について理解します。
UCDは、それに販売されたチームがユーザーのニーズに準拠して最小システムを展開できるようにすることが報告されています。
私が見るように、2つのレベルに注意する必要があります。

最初のレベルは機能設計であり、それがどのように機能するか、システムのUIとの対話の非常に段階で次に何をするかに関してです。
この設計を反映する最良の方法は、テキストの「使用例」を書くことです。 UCは、機能要件を把握するための最もよく知られているデバイスです。
UCが行うことはありません。UCをシンプルでありがちなドキュメントとして記述するより良い方法があります。
関連するUCを作成したら、システムを実装しなくても、システムの相互作用を視覚化できます。さらに、プログラマーは優れた定義を備えているため、より速く、無駄のない作業を行うことができます。テスターは事前に何をテストするかを知っています。最も重要なことは、ユーザーはシステムが何をするかをきちんと理解することです。

2つ目は、UCに従って画面にデータを設定することですMSS-主な成功シナリオで、めったに必要とされない他のデータを除外して、追加のサブ画面に移動します。その目的は、normalを実行しているユーザーはnormalデータのみを参照することです。
「MSSに従う」とは、MSSが言うことを実行する手段を提供することを意味します。
(不自然な)例のように:ログインフォームのidとパスワードを表示すると、大多数の場合に必要となるデータ項目のみが必要となり、失われたユーザーが立ち上がることができるようにする手段を考案しますめったに使われないパスワード回復と登録アイテム。
任意の画面に表示される各データアイテムについて、どのようにレンダリングされたかについてメモを取り、アプリケーションのすべての画面で同じようにレンダリングします。

全体として、あなたはveryを明確にする必要があります。

1
Juan Lanus