web-dev-qa-db-ja.com

Androidモバイルデバイスでスクロール可能な水平タブの場合、クイックナビゲーションを実現する方法

問題

ラベルは、メモを分類するためのメモ作成アプリで非常に一般的な機能です。

市場にあるほとんどのメモ作成アプリは、ハンバーガーナビゲーションバーにラベルの選択を配置します。たとえば、Google Keepは次のようになります

enter image description here

彼らがなぜそうしたいのか理解できます。主な理由は、デザイナーがラベルのナビゲーションコントロールでメインのノートの表示から画面の領域を奪うことを望まないためだと思います。

ただし、欠点もあります。 ハンバーガーメニュー内に非表示になっているため、さまざまなラベルをナビゲートするのは簡単ではありません。ユーザーは、ラベルのリストをナビゲートする前に、ハンバーガーアイコンをタップしてナビゲーションメニューを開く必要があります。

横のタブにラベルを貼って、新しいデザインを選びました。

enter image description here

これまでのところ、20,000人に配布した後、ほとんどのユーザーはこのデザインを高く評価しています。彼らはアプリを4.8/5と評価しました。彼らはタブのデザインを確認し、ラベル間のナビゲーションをより簡単にしました。

ただし、タブのデザインには欠点もあります。

enter image description here

ラベルの膨大なリストがある場合(Says 10)、目的のラベルを見つけるために水平タブをスクロールする必要があり、煩雑になります。


提案されたソリューションのアイデア

私が考えることができる改善の1つは、ユーザーが現在アクティブなタブをタップするとダイアログがポップアップし、ユーザーがラベルのリストを表示できるようになることです。ユーザーが目的のラベルをタップすると、目的のラベルのタブページに直接「ジャンプ」します。

しかし、そのようなUXを発見するのは簡単ではありません!


この水平タブのデザインをさらに改善する方法をご存知ですか?


p/sラベルのタブナビゲーションがどのように感じられるかについて真のUX感を出したい場合は、 https://wenote.jstock.co から試してみてください。

1
Cheok Yan Cheng

ラベルの制限が画面に収まりきらない場合は、ドロップダウン/モーダルを使用してラベルをリストする必要があります。 20のラベルを使用し、探しているものを見つけるために継続的にスクロールしなければならないことを想像してみてください。

できることは、ラベルの総数に応じてUIを動的に変更するか、ドロップダウン/モーダルのみに固執し、アフォーダンスを追加して、ラベルと対話できることを示します。


ハンバーガーメニュー内に隠れているため、さまざまなラベルをナビゲートするのは簡単ではありません。

ハンバーガーメニューを使用する必要はありません。実際、そのアイコンを使用することに反対します。 labelという用語を使用し、ドロップダウン矢印があると、フィルターするラベルがまだあることがユーザーに示唆されます。最初の例では、歯車アイコンを使用していますが、これは、より多くのラベルを表示することを意図しているため、混乱を招きます。


ここにいくつかの異なるAndroid Redditアプリを見て、異なるラベル(subreddit)構造を持つものを示します:

redditは楽しいBoost for redditNow for reddit

1つ目はドロップダウンナビゲーション、2つ目はドロップダウン付きの水平スクロール、3つ目は水平スクロールの両方を使用します。

経験上、最初のソリューションは、より速く、読みやすく、必要なときにだけ画面スペースを利用するため、最適です。

1
mrchaarlie

1秒間考え直してみましょう

あなたは私たちが無限のクレイジーで異常な解決策を思い付くことができるのを見ますが、私たちは常に自分自身を危険にさらしています(新しいパターン、それはうまくいくかなど...)

  1. テキストを回転させる
  2. フォントサイズを徐々に小さくする(左端が最も大きく、右端が最も小さい)
  3. 最初の文字を表示

等...

この方向で包括的なソリューションを提供することはおそらくありません。

多分20/80

私はあなたの製品やユーザーがわからないが、20/80の原則がうまく機能することはほぼ間違いない。

ユーザーのカテゴリーの最大数の99パーセンタイルが20カテゴリーであるとしましょう。

これは、20/80の原則に従って、ユーザーが4つのカテゴリを80%の時間使用し、残りの16個のカテゴリが20%の時間使用されることを意味します。

これが当てはまる場合は、- Wireframe

ご覧のように、重要なカテゴリに簡単かつ迅速にアクセスできるようにし、重要なカテゴリを柔軟に定義できるようにします。他のカテゴリが必要な場合は、追加の手順を実行する必要があります。 、この方法で問題を2つに分け、両方を解決しました。

0
UX Labs