web-dev-qa-db-ja.com

UIをより快適で理解しやすいものにするためのオプションを探す

私たちはたくさんの小さな戦略的ツールを作っています。それらのほとんどは本当にシンプルで、非常に理解しやすいはずです。

それらの1つは、ペアで複数の項目の比較を実行するために作成されます。

簡単に聞こえますが、私が思いつく最高のUIは次のとおりです。

UI

ここで、ユーザーはペアのオプションの1つをUPVOTEする必要があり、プロセスは次のオプションに切り替わります。

このUIは、特に上記の画像のようにアイテムのコンテンツが非常に長くなったり非常に短くなったりする極端なケースでは、非常に奇妙に感じられます。単にsexyではありません。

私は正しい方向に導くためのある種のガイドラインや提案を得ることを望んでいました。

1

「セクシー」について心配する必要はありません。ユーザーが何をする必要があるか、何をしたか、そしてプロセスのどこにいるのかをユーザーが知っていることを確認してください。理解に焦点を当てます。

あなたの質問はレイアウトに関係していますが、デザインを見ると、選択の容易さと意図的なものとの間のトレードオフを決定できる他のいくつかの質問があります:

  • ユーザーはさまざまな比較を自由にナビゲートできますか?
  • 間違った選択を編集できますか? (今はできないようです)
  • 不確かなペアをスキップできますか?
  • 彼らは完了からどれだけ離れているか知っていますか?
  • 「終了して保存」して後で完了することはできますか?
  • 彼らの選択はどの程度重要ですか? (慎重かつ正確に選択することが重要である場合は、意図的に選択できるようにし、「次へ」ボタンなしで次の選択に自動転送しないようにします)

原則を守る

Nielsen Norman Groups10ユーザーインターフェース設計のヒューリスティックスのような有用な原則:

システムステータスの可視性:システムは、適切な時間内に適切なフィードバックを通じて、ユーザーに何が起こっているかを常に通知する必要があります。

別の原則と一致するように、スキップ、編集、または自由に移動できるようにします。

ユーザー制御と自由:ユーザーは誤ってシステム機能を選択することが多く、通過せずに不要な状態を残すために明確にマークされた「非常口」が必要になります拡張された対話。元に戻すとやり直しをサポートします。

ナビゲーション

現在の画面には、彼らが行っているプロセスを放棄するために識別可能な離れた場所は表示されません。修正、先読み、または終了を許可する場合は、賛成の行為とナビゲーションの行為を区別できます。このようにして、ユーザーは自分のペースで作業でき、選択を「支持」した瞬間にUIが切り替わるという不快な行動をする必要がありません。

選択:明確に区別

さまざまなコンテンツがあるように聞こえるので、コンテンツを保持するいくつかの境界付きコンテナを描画し、コンテンツに基づいて柔軟にストレッチできます。

[〜#〜] upvote [〜#〜]選択を大きなボタンのように分離し、選択すると状態の変化を表示することもできます。

enter image description here

彼らが選択したら、あなたは選択を明確に示し、彼らが前進することを許可することができます:

enter image description here

繰り返し、ユーザーとテストする

あなたが説明したよりもはるかに多くのコンテキストがあると私は確信しているので、これらは上記のいくつかの可能な提案です(私はあなたのユースケースについてあまり知りません)。

基本的なUIの原則を守り、設計をテストして、ユーザーが最大限の理解と最小限の努力で目標を達成できることを確認します。いくつかのトレードオフがあります。

4
Mike M