web-dev-qa-db-ja.com

WebアプリのホットバーUIを作成する

ホットバーUIを作成しているので、それについて説明しましょう。

ホットバーとは何ですか?

ビデオゲームでよく見かけます。アクションを実行するには1を押してください。 2を押してアクションを実行します。

例は説明よりもわかりやすいので、ここに簡単なインターフェースの例を示します。

Hotbar UI

なぜこれを作っているのですか?

アプリへのユーザーデータ入力を、マーケットスペースにある他の100個のアプリよりも速く(できれば簡単に)したいと考えています。人々が毎日、おそらく数時間使用する必要のあるアプリケーションにはホットバーをお勧めします。

タイラー、あなたの質問は何ですか?

誰かがホットバーでユーザビリティテストを実行しましたか?野生のホットバーを見たこともありません。しかし、これは有望に見えます(「実験的なレイアウト」) https://v4-alpha.getbootstrap.com/examples/offcanvas/

したがって、基本的にホットバーはWebにとって新しいものです。話し合いましょう。親しみやすさのほかに、これでどのような問題が発生しますか? 6つの異なる機能を簡単にすばやく切り替えることができる自律性の感情的なメリットなど、アプリのエクスペリエンスは1つで大幅に向上します。

6
Tyler

ホットバーはしばらく前から存在していましたが、あなたがWebアプリに言及していないように!

いくつかの点に注意してください。

  • この新しい機能(ホットバー)があることをユーザーに伝える必要があります
  • 誰もがホットバーのアイデアを理解しているわけではありません-ゲームを一度もプレイしたことがない人は、そのような新しいやり取りの方法を控え、基本的な方法に固執します。
  • ホットバーは正確には何をしていますか? (私はあなたのスクリーンショットで有益だとは思いません-チームでの切り替えを除いて-そしてそれは(コンテキストなしで)価値がないようです)
  • ホットバーは、ユーザーが長時間使用する必要がある場合に意味があるとおっしゃったように、ゲームを除いて、今のところ(例では)使用されていません。

あなたがそれが何をすることになっているのかについてより多くの情報を提供することができるなら、多分私はもっと助けることができます。

1
Daniel Maurer

ホットバーはWebの新機能ですが、キーボードショートカットはそうではありません。もちろん、平均的なユーザーは通常、この種の機能を使用しません。

本当にあなたが話しているのは、いくつかのキーボードショートカットを視覚的に思い出させることです。キーボードショートカットが正常に使用されていることの調査と例があります。ここから始めましょう: https://webaim.org/techniques/keyboard/accesskey

アクセシビリティの目標が何かはわかりませんが、スクリーンリーダーのユーザーもこれらのショートカットに注意する必要があることを覚えておいてください。これは確かに、アプリケーションのアクセシビリティとユーザビリティを改善する機会です。

0
elliottregan

重要なブラウザー機能を上書きせずに、数字キーに加えてキーボードショートカットキーを使用する必要があると思います(ユーザーが誤って別の画面にぶつかるのを防ぐため)。 Macでは、Command-1は最初のタブを開き、Command-2は2番目のタブを開く、というように、コマンドキーはおそらく適切な選択ではありません。

ただし、Googleスイートのようなアプリケーションは、このためにControlキーを非常によく使用します。各セクションに「ページ1」のようなタイトルを付け、ヘルパーテキストとして「Ctrl-1」を配置すると、ユーザーにパターンを認識させることができます。オペレーティングシステムごとにカスタマイズする必要があるため、少し作業が必要です。テストする価値があると思います。

0
Stacy H