web-dev-qa-db-ja.com

iPhoneアプリ-下部メニューとハンバーガーメニュー

私はニュースと価格のアプリに取り組んでおり、現在メニューに取り組んでいます。チームには2つの異なるアプローチがあります。伝統的なボトムメニューとハンバーガーメニュー(Facebookアプリのような)です。どのアプローチが最善ですか?

ここにいくつかのワイヤーフレームがあります:

===========================下部のメニュー=================== ======== Menu at the bottomMenu at the bottom - 'More' section

===========================ハンバーガーメニュー===================== ====== Hamburger menu 1Hamburger menu 2

5
Leo

ハンバーガーボタン

  • > 4のナビゲーション項目でより適切にスケーリング
  • アイコンと長いテキストを含めることができます
  • テキストナビゲーションアイテムが長くなる場合(翻訳!)
  • ナビゲーションに最適

下部メニュー

  • ユーザーが見逃すことのない、非常に明白で粘着性のあるナビゲーション
  • 4アイテムを超えることはなく、説明テキストが常に短い場合に最適
  • 下部のメニューの項目がナビゲーションではなく機能として認識される場合に適しています
  • キーボードが表示され、メニューバーが原因でコンテンツの読み取り/操作のためのスペースがほとんど残っていない場合は奇妙です

「最善」のアプローチはどれですか。

もちろん、これはアプリケーションの種類とメニュー項目によって異なります。

ワイヤーフレームの限られた情報からは、アプリが何をしているのか本当にわかりません。特定のドメインの価格を見るのはある種の株式市場アプリですか?次に、「価格タイプ1」と「価格タイプ2」はフィルターのように見えます-または、それらは設定ですか?この2つはユーザーによって頻繁に変更される可能性があるため、これらをボトムバーに配置すると便利です。また、出版物は、頻繁にアクセスされない場合でも、設定と一緒に[詳細]セクションに簡単に配置できます。しかし、より多くの出版物を販売したいと考えているマーケティング担当者には注意してください。

4
greenforest

各オプションには独自の欠点があります。

  • ハンバーガーメニューは、本質的には非表示のメニューです。つまり、メニューを表示するには、どこかをクリックする必要があります。
  • 下部メニューのサイズには制限があるため、そこに多くのボタンを追加することはできません。

したがって、私はekaprosに完全に同意します。ユーザーが頻繁に使用するボタン(機能ボタン)が少ない場合は、下部のメニューに移動します。

7
Oleg

あなたが尋ねる必要がある最初の質問は、メニュー項目の可視性がどれほど重要かということです。

  • ユーザーがクイックアクセスのためにメニューを常に表示にする必要がある場合は、下部のメニューが理にかなっています。最も使用頻度の高い4つのアイテムを表示し、残りのアイテムを「その他」または5番目のアイテムとして非表示にします。
  • アイテムにステータスインジケーター-未読の投稿数などが含まれている場合、下部のナビゲーションを使用すると利点があります。ハンバーガーメニューでも結果を得ることができますが、ユーザーはそれを表示するためにメニューを開く必要があります。

ただし、懸念がある場合は、ユーザーによるメニューのアイテム数および/またはカスタマイズ可能性です。ハンバーガーメニューはかなり便利です。ハンバーガーメニューをスクロールする必要がある方が、下部の固定メニューを横にスクロールするよりも自然だと感じます。

6
rk.

ここには本当に素晴らしい答えがいくつかありますが、2つの状態の保存の重要な違いの1つを指摘したいと思います。

下部のメニューの「セクション」から離れてナビゲートする場合、通常は、離れたときにそのセクションの階層ナビゲーションが保持されます。つまり、「ニュース」セクションにナビゲーションバーで表されるナビゲーションスタックがあり、「パブリケーション」に移動してから「ニュース」に戻ると、「ニュース」に残した状態が表示されます。ただし、 、ハンバーガーメニューのセクションをタップすると、通常状態がクリアされ、常にそのセクションの「最初の」画面が表示されます。

そうは言っても、下部メニューを使用する際の1つの主な懸念は、横断的なリンク(つまり、[ニュース]の[出版物]セクションに移動するリンク)がある場合、セクションの状態をいつどのように保存するかについて、注意が必要になることです。

2
Azeven

これは非常に古い投稿かもしれませんが、数日前に同じ質問に答えました。これは他の人を助けるかもしれません。

私は この記事 を見つけて、それは少し助けになりましたが、それは2013年からのものなので、状況は変わりました。

私はあなたのためにそれを分解します:

  • 片手—49%
  • ゆりかご-36%
  • 両手—15%

enter image description here

引用:「ユーザーがスマートフォンを保持する方法は静的な状態ではありません。ユーザーは、数秒ごとに、頻繁にスマートフォンの保持方法を変更しています。」-どうなるか:スマートフォンを右手で持ち、小指が下部の電話を支えています(Lumia 950XL、ケースはかなり重い)。しばらくすると小指がしびれてくるので、着替えます2位に。


片手での使用—

  • 画面の右親指—67%
  • 画面の左親指-33%

enter image description here


ゆりかご-

  • 画面上の親指—72%
  • 画面上の指-28%

enter image description here

私はよくこのように携帯電話を持っている「年配の」人を見かけます。心に留めておくべき非常に重要なことは次のとおりです。あなたの聴衆は何歳ですか?ティーンエイジャー?大人?老人?ほとんどの若者は片手だけでスマートフォンを持っていると思います(これらの小さな手がファブレットの周りに届く場合)。


両手用-電話を持っているとき

  • 縦向き、縦向き-90%
  • 横向き、横向き-10%

enter image description here

私は携帯電話を横向きモードで使用することはほとんどありません-ビデオを見て、時にはそれさえしない場合に限ります。

だから、質問への答え:「ハンバーガーメニュー、それともタブバー?」-タブバーのようですよね?

  • さて、私は友人/同僚(18〜23歳、UXの知識がなく、ユーザーのみ)に質問したところ、80%が下部のタブバーよりもハンバーガーメニューを好むと答えました。彼らのほとんどは、彼らはより多くのコンテンツを見ることができ、タブバーは邪魔にならないだろうと言った。

  • 多くのオンライン投稿では、ハンバーガーメニューは「古く」、タブバーを使用する必要があると言われています。これは、ほとんどの人が片手で電話を使用するため、左上隅のボタンが「遠すぎる」ためです。


最大の質問は次のとおりです。

  • あなたのアプリは何をしていますか? (ユーザーが何時間もスクロールできるアプリ(9gap p.E.)にはメニューが上にある/あるはずなので、コンテンツがフォーカスされ、他の機能はほとんど使用されません)。

  • あなたの聴衆は誰ですか? (私は、年配の人は若者よりも両手で電話を使うと思います。)

  • アプリに「メインサイト」がありますか、それともユーザーがサイトを切り替える必要がありますか?
  • アプリでどのオーディエンスをターゲットにしていますか?

答えを探している他の人たちを助けることができれば幸いです。

0
Daniel Maurer

答えは:場合によります

下部のメニューでは、ターゲットのサイズによって制限されます。その結果、「その他」のメニュー項目ができます。このアイテムのオプションには概念類似性がありますか?はいの場合、問題ありません。そうでない場合、メニューバーに収まらないものすべてを「詳細」オプションに入れると、ユーザーエクスペリエンスが低下します。ユーザーは、使用できるオプションを確認する場合でも、[もっと見る]をタップする必要があります。

サイドメニューを使用すると、すべてのオプションが1つのメニューにあるという意味で、よりフラットな階層が提供されます。オプションが少ない場合、またはグループ化する必要がある場合は、一番下のメニューに移動します。オプションが豊富で「独立」している場合は、サイドメニューを使用します。

それが役に立てば幸い:)

0
ekapros

ハンバーガーをお勧めします(技術的に正しい名前でよろしいですか?-その名前で聞いたことはありません)。各アイコンの説明を幅広く提供します。それは本当にボトムメニューよりも優れた体験を持っています。引き出しのように滑らかです。ナビゲーションのコンテンツが増えます。メンタルモデルとしてシームレスに機能するアイテムの数が増えました。

今、あなたはそれを最高と呼ぶとき-私はあなたが使いやすさだけでなく、経験的なデザインも検討していると思います。

下のメニューは平凡でありふれたものかもしれません。スライディング機能により、デッキを引っ張って徐々に垂直方向に下に移動することがより水平になります。つまり、ユーザーにとってははるかに簡単です(メンタルモデルに関して)。また、ユーザーの専門知識のレベルも理解する必要があります(これまでのモバイルエクスペリエンスは、フリーハンドでの試行錯誤によるものです)。

1つの欠点は、ナビゲーションモードに入るときにメインコンテンツが非表示(オフ)になることです。しかし、コンテンツを見るときにピン留めされたナビゲーションを必要としないため、コンテキストは本当に心配だとは思いません。独立して理解できます。

仕事の細かい性質に対処するのに役立つので、将来的に対象とするユーザータイプ/ペルソナも含めてください。

あなたの創造的な仕事で楽しい時間を過ごしてください!

0
inkmarble

私はそれはアプリケーションに依存すると思いますが、考慮すべきいくつかのこと:

バーガー-これにより、画面の占有面積が小さくなります(実際には、多くのアプリではメニューに常時アクセスする必要がないため)、より多くのスペースを使用して実際のコンテンツを表示できます。

下部メニュー-小さな画面では、少量のアイテムに制限されます。最初の画像では5を表示します。おそらく、なんらかのスクローラーなしでそこに収めることができる最大値です。

また、これはあなたのアプリには当てはまらないかもしれませんが、iOS7のリリースでは、iOS Safariの画面下部をタップするとSafariの下部メニューが表示され、下部メニューまたはページ下部のボタンのある多くのアプリが作成されますユーザーは2回タップして目的のものを選択し、実質的にUIが危険にさらされます。

0
Joe Taylor

現時点では、ハンバーガーメニューの方がアプリに適していると思います。ユーザーが他の画面に移動して選択する必要はありません。ちなみに、iOS 7とフラットなデザインでは、ハンバーガーとサイドメニューをより大きなビューに拡張できます。詳しくはこちらをご覧ください http://uxmag.com/articles/adapting-ui-to-ios-7-the -サイドメニュー

0
PhamThang

どちらの方法でも問題はありませんが、IOSアプリケーションからユーザーの動作または期待を特定する必要があります。iOSユーザーのみを対象としている場合は、ユーザビリティテストに行くことを強くお勧めします一部のユーザーの場合、iOSユーザーはこのパターンに慣れていない可能性があるため、Windows Phoneを使用していて、どういうわけかFacebookのスライドメニュー付きの新しいレイアウトが好きではありません。

ただし、すべてのデバイス(Windows、IOS、Android)で同じように見えるアプリケーションが必要な場合は、ハンバーガーメニューまたはスライドメニューを使用できます。このデザインパターンはすべてのOSプロバイダーに受け入れられているため、少ない労力ですべてのストアでアプリを簡単に起動できます。

0
Awesh