web-dev-qa-db-ja.com

モバイルでナビゲーションメニューを最もよく示す方法

モバイルデバイスでナビゲーションメニューを示すための最良の方法は何ですか?

この3本の棒のアイコンがよく使われているのを見ていますが、ユーザーはそれが何を意味するのか本当に理解していますか?

Facebook navigation

単に「ナビゲーション」または「メニュー」と言うボタンははるかに効果的ではないでしょうか?

22
Mark Boulder

3本の線は、いくつかのリンクが互いに積み重ねられたメニューを表します。まだ慣習ではない場合-メニューを表すクロスプラットフォームの慣習になることは非常に近いです。 Googleでこの画像検索を見てみましょう: モバイルメニューボタン 、これがモバイルデバイスのメニューで最も使用されている表現であることを確認してください。

そしてこれをよく見ると、さまざまなデバイスがメニューボタンを処理する方法です...

Android

enter image description here

iPhone-Facebookアプリ

enter image description here

Windows Phone-異なります。ユーザーがアプリの別のコンテキストにアクセスするために左または右、あるいはその両方にスワイプする、よく知られているパノラマビューは、ナビゲーションメニューに最も近いものです。

enter image description here

Windows Phoneも「その他」メニューに3つのドット[...]を使用しますが、これはiPhoneやAndroidメニューボタンとは異なります。

結論:3行はモバイルデバイスのメニューボタンを表します。

参照

素晴らしく機能する実装ガイド: jQueryでレスポンシブWebサイトの「3行」ドロップダウンメニューを作成する方法

15
Benny Skogberg

レスポンシブなWebサイトの多く(スターバックス、Facebook、Pathなど)では、3つの横縞のアイコンが使用されています。別の方法としては、グリッドアイコン(メニュー項目をどのように視覚化するかによって異なります)や、「目次」を表すドットの付いたさまざまな長さの3つの横縞があります。

この記事では、いくつかの興味深いソリューションをリストします。アイコンまたはラベル付きボタンの両方、長所と短所を説明し、それらを使用する注目度の高いレスポンシブWebサイトを示します。

http://mobile.smashingmagazine.com/2012/10/08/the-semantic-sensitive-design-navicon/

5
Giults

Facebookや他の人気サイトが3本線のアイコンを使用していても、人々がその意味を理解できると考えるにはそれで十分です。

メニューへのアクセスが重要な場合は、「メニュー」のようなラベルの付いたリンクを使用する必要があると思います。

たとえばFacebookでは、モバイルでの使用において最も重要なのは投稿フィードであるため、メニューは二次的なものです。

このアイコンは、iOS通知センターをプルダウンしたときに「ブラインド」インタラクションリンクで使用されるビジュアルに非常に近いため、混乱します。一部のユーザーがアイコンについて同じ誤解を持っているかどうかを確認するために、「ユーザーテスト」を行っていません。

2
Jimmy Carroll

ボタンはまだボタンです。

オプション、設定、再読み込み、およびその他のすべてのボタンは、常にページのコンテンツを交換するか、即時のアクションで先行します。古いメタファーではボタンはマシンの状態をすぐに変更します(テレビのオン/オフの切り替え、録画の開始、ホーンの吹き出し、圧力の増加など)

メニューボタンを押すと、メニューが開き、ナビゲーション構造が増加、強化、変更され、コンテンツ(システムの状態)が非表示になる場合があります。

これはどこでどのように起こりますか?コンテンツはどこにどのように表示されますか?私が見ているどのコンテンツが見えなくなりますか?

メニューは、文字通りより多くのボタンを表示する前状態の形式であり、ユーザーが変更する前にシステム(アプリ)が常駐している状態です。

私の提案は、ナビゲーションコンテンツが表示される方法または場所を象徴的に示すことです。そのようにあなたのボタンは言う:「これが私がやろうとしていることです。」

where

または

enter image description here

編集:ある意味で、3行は「その他のボタン」を抽象化します。これは、私が推測するアイコンの存在を正当化します。

2
uxfelix

この新しい3行のアイコンは、「メニュー」として普遍的な意味に向かっている場合でも、今のところ「メニュー」ラベルテキストを含める必要があると思います。矢印、疑問符、または順序付けられていないリストアイコンのように、普遍的で本当に普遍的なものになるまで、ここの誰かがハンバーガーを呼び出す他の場所で「neticon」またはアジアでは「銭」ラッキーシンボルとして、またはchrome「ホットドッグ」としての開発者は、「ドラッグ」を普遍的に示す境界バーの中央にある小さな2行または3行よりも標準的なものとして、一般の人々にはまだ認識されません(適用された3はありませんが) gmail、youtube、または電話アプリの線アイコンは「ドラッグ」を意味します。それで、何がどのように私たちのユーザーにわかると思いますか。特に、標準的な名前がまだない場合はどうでしょうか。

1
Paul Smith

ベニーの答えに似たもの

モバイル設定ボタン

ただし、その3ライナーアイコン(ベニーの提案による)の方が人気があり、直感的です

1
ripu1581