web-dev-qa-db-ja.com

ハンバーガーメニューの代替ですか?内部のUIの例

「ビデオガイド」、「概要」、「FAQ」、「接続ガイド」など、多くの二次機能(そこにある必要があります)を備えたアプリを設計しています。

以前は、3つのタブ([ホーム]、[プログラム]、および[その他])を備えたタブバーがあったため、この二次機能はすべて[その他]メニューにありました。これで、[ホーム]タブと[プログラム]タブが1つのタブに統合されました。これにより、タブバーの使用がおかしくなっています。左上隅にあるハンバーガーメニューを使用することにしました。これは、ユーザーがとにかく使用することのない2次的なナビゲーションであるためです。

しかし、誰もが「ハンバーガーメニューを捨てる」とすべてのジャズを言っているので、私はこの方法でそれをしている冷たい足を取得しています。そして、それはiPhone Xでは悪いように見えます。しかし、私は私の選択肢が何であるかわかりませんか?つまり、「Home and More」でタブバーを作成しても意味がありません。あなたのアイデアを聞くのを楽しみにしています。以下は、現在のUIのスクリーンショットです。

enter image description here

いくつかのことを明確にするために:

  1. バッテリーとヘルプアイコンが外せません。これは補聴器用のアプリなので、バッテリーアイコンは補聴器のバッテリーレベル(および両方のHAが実際に接続されているかどうか)を示します。アイコンをタップすると、詳細情報が表示されます。疑問符をタップすると、ヘルプオーバーレイが有効になります。私たちのユーザーは〜65歳なので、これが必要です-私を信頼してください。

  2. そして、はい、私はより良いアイコンを探していません。このナビゲーションを「非表示」にすると害になるのではないかと心配していますが、ユーザーがめったに使用しない2次機能であるため(これは100%確実です)、非表示にしても大丈夫だと言っても安全だと思います。そうすれば、実際に重要なことに支障をきたすことはありません。 iOSとAndroidの両方に当てはまるパターンをもっと探していました。iOSは一般的に「スライド式のナビゲーションドロワーを使用しないでください」と言っているため、このハンバーガーメニューはほとんどの場合そうなります。

21
Rasmus

現在、非表示のナビゲーションを表示するオプションはたくさんあります。

それはすべてあなたの好きな食べ物が何であるかということになります!:

enter image description here

Kiddingとにかく、理想的には ナビゲーションがどこにあるかを示す明確な方法 です。しかし、ハンバーガーメニューが非常に一般的になり、今では人々が期待し、その背後にある機能を理解するようになったと思います。

ユーザーが誰であるかによって、考慮すべきことがいくつかあります。

彼らは技術に精通していますか?彼らは以前にハンバーガーメニューに出会ったことはありますか?

そうでない場合、またはキャンプの両側のユーザーがいる場合は、「メニュー」という単語の付いたメニューアイコンが役立つでしょう。

いつものようにいくつかのテストを行います。ユーザーがアプリを操作する方法を確認します。ゲリラユーザーテストとA/Bテストは、この種の問題に最適です。

結局、あなたの仲間があなたに言うことによって定義されてはいけません。場合によっては、それらは間違っているか、正しいかもしれません。ユーザーがUIをどのように操作しているかを確認します。

PSハンバーガーアイコンを使用する場合は、実際のハンバーガーアイコンを使用してください。あなたが現在持っているものは左揃えのテキストのように見えます。

36
Socrates Kolios

最高のアイコンは常にテキストです

とはいえ、少し問題を分析してみましょう。まず第一に、それはハンバーガーメニューのようには見えず、円がさらに混乱させています。

その上、図像全体が少し混乱しています。たとえば、アプリにバッテリーアイコンがあり、デバイスにバッテリーアイコンがあるのはなぜですか。それは実際の目的に役立ちますか?もしそうなら...それは設定に属していませんか(したがって別のアイコンまたはおそらくハンバーガーメニュー内にあります)?

正直なところ、ボタンの機能がわからないので、私はおそらくハンバーガーにすべてを追加し、アイコンを1つだけにする必要がありますと言います。また、ハンバーガーが必要な場合は、ハンバーガーのアイコンのように見えるようにして、ユーザーがアフォーダンスを一目で理解できるようにする必要があります。これらのサークルは、騒々しく雑然として混乱させます。

アイコングラフィーは非常に厳格な指針のある規律であることを忘れないでください。ランダムなアイコンを追加することはできません(この場合、これはほとんどすべてのアプリケーションで左揃えテキストのアイコンです)。さらに、アイコンと同じ線の円を追加します。これは、まったく異なるものを作成するためです。そしてあなたが図像について多くを知らない限り、あなたはマークを逃す可能性があります(私はおそらく私が知っていることを知っており、私は主題について多くの経験を持っています)

要するに

そのノイズを取り除き、シンプルなハンバーガーアイコンとテキストラベルを使用すると、niversalMusicなどのアプリアイコンをすべて同じように表示できます。ユーザーの追加の認知負荷なしで表示します。あなたはこれと同じくらい簡単に行くことができます:

enter image description here

15
Devin

あなたが最も冷たい足を与えるメニューオプションのいくつかを表示し、次に「もっと...」ボタンを提供するとどうなりますか?ボタンのスタイルは好みに合わせて、好きなだけ設定できます。

Mockup of surfacing some menu options and providing a "More..." button

4
54an3

あなたが言うすべてのことは、一般的にヘルプベースのコンテンツであるように、ハンバーガーメニューのサウンドに必要です。それらを既存の疑問符/ヘルプボタンにマージできませんでした。ボタンがすでにあなたを連れて行っているものもわかりませんが、それがアプリからのリンクでない限り(実際にはボタンだけではなく、アプリを離れる場合は常にユーザーに明確に通知する必要があります)、あなたは置くことができませんでしたリンク/ボタンとして、またはそれらの拡張ヘルプ項目の専用タブバーとして、そのページの下でこれらの項目にアクセスするためのオプション?

2
Flatlyn

常にアイコン+テキストを使用します。

アイコンは、アイテムがフレンドリーでインタラクティブであることを示します。

このテキストは、メニューであり装飾ではないことを示しています。

アイコンがない場合、それはWebサイト上のリンクであり、それ以外の場所はUXのアイコンでなければなりません

メニュー項目のテキストがない場合、論理的な説明は、ユーザーの画面の幅は40ピクセルのみでなければならないということです。それまたは開発者はユーザーを理解していません。 GUI/UXプラクティスの優れた例が沈黙しているので、それは許されます。これはプロのJavaScript開発者と同じです。私たちはnever喜んでフレームワークまたはライブラリを使用します。これらは、アマチュアが再利用可能なコードの概念を理解しているないために確立されました。ただし、ユーザーの生産性を妨げ、完全に破壊する否定的な傾向は否定できます。

マイクロソフトは多くの場合、ユーザーのケーススタディを実施したと述べています。誰と?彼らのマネージャー? (テスト対象に関連するニーズがまだある)ユーザーの技術的な知識が少ないほど、実際のユーザーのケーススタディが優れています。同じことが最も経験豊富なパワーユーザーにも当てはまります。 理解の範囲を最大化する製品/サービスを使用している人だけでなく、方法も使用したい。

モバイルのすべての単一メニューを見てください。時間を無駄にするものでオーバーロードされたゲームをプレイしているのでなければ、圧倒的に(文字通りではないにしても)絶対)alwaysアイコンのみのメニューの横にある空白スペースを参照してください。

...そして、何らかの理由でそうしない場合、レイアウトが問題になるはずです。

(リアル/クラシック)Operaのインストーラーは(そして*のみ)アプリケーションインストーラーの完璧な例です。シングルクリックで開くと、画面上で何も読まない人々のためのプログラムがインストールされますオプションと高度なオプションがあり、これらを実現するための最小限の手順目標。

経験の浅い新しいユーザーは、自分が取り組んでいる内容がどのように拡大するかを理解する経験がないために許されます。そのような場合:取り組んでいるものが1、2年でドアから放り出されないことを証明するまで、オーバーコミットしないでください。何が付着するかがわかるまで、機敏に動いてください。固執するものがわかったら優雅に時間の経過とともにUXを適応させ、そうするしない早期採用者を遠ざける!

経験豊富なUXデザイナーの観点から見ると、UX階層は非常によく理解されています。アプリケーションのより多くの部分が使用されるほど、何かにアクセスするための手順は少なくなります。

UXマスターは、共感的なパワーユーザーであるだけでなく、パワーユーザーでもあります。完全なツールバーのカスタマイズ(特定の側面および側面にある他のツールバーへのツールバーの配置)、およびツールバーでのアイテムの配置。第1層のオプションの正当なセットがある場合、GUIはユーザーがコマンドアイコン+テキストボタンを追加/削除したり、個々のツールバーボタンの表示(アイコンのみ、テキストのみ、アイコン+テキスト)を変更したりできるようにする必要があります。独自のアプリケーションを幅広く使用する真のUXマスターパワーユーザーは、GUIで自分のニーズを満たすだけでなく、完全に最初のUXマスターのアプリケーションを広範囲に使用する別の真のUXマスターパワーユーザー

あなたがモバイルを使用していて、さまざまなオプションがたくさんあるので、Android Nova Launcherをチェックすることをお勧めします。これはGUIカスタマイズの良い例であり、それをエミュレートすることは素晴らしいアイデアです。

さらに、指/親指のターゲット領域を考慮する必要があります。一部の人々は太い指/親指を持っている人もいれば、細い指/親指を持っている人もいれば、一回の攻撃でゴジラを刺して殺すことができるほど長い爪を持つ人もいます。

最後に、neverGUIを平手打ちするようにGUIをカスタマイズする人を過小評価します。彼らが自分の健全な意欲が特定の設定を選択したと仮定すると、覚えておくことが重要です。彼らは他の人ではなくアプリケーションを使用しています。これらのエンドケースを使用して、重要な更新を行うときにすべてを壊さないようにします。ユーザーがWindowsをバージョン1.0以降からアップグレードするたびに完全に機能しなくなるユーザーカスタマイズを示す記事がWebのどこかにあります。

要約すると:

  1. 新しいUX設計者は、長期的なUI階層を理解するまで、過剰にコミットしないでください。
  2. 経験豊富なUX設計者は、新しいバージョンでのUXの混乱を最小限に抑えます。
  3. マスターUXデザイナ新しいバージョンでのUXの混乱を排除.
  4. メニューのアイコン+テキストデフォルトでは
  5. 上のアイコンまたは左のアイコンは、画面の縦横比の主観的なものです。
1
John