使いやすいメニューとドロップダウンメニューのタッチスクリーンインターフェイス
Twitter Bootstrapのドロップダウンメニュー を使用してWebページのデザインをしています。
問題：Twitter Bootstrapのドキュメントに示されているような水平メニューがあるとします。移動したいページをリストするそのメニューバーに、ページの1つにサブページが含まれています。
A JSFiddleの例 。
通常、デスクトップマシンやマウス/タッチパッドを持っている人を対象とする場合、ユーザーはページBにマウスカーソルを合わせると、サブページB-1とB-2があることがわかります。
ページBに移動する場合は、リンクをクリックするだけです。サブページに移動したい場合は、ページBにカーソルを合わせ、サブページのいずれかにカーソルを合わせてクリックします。
ただし、タッチスクリーンデバイスでは、ホバーのような贅沢はありません。
解決策A：Bootstrapの実装と同様に、デフォルトでは、ユーザーはドロップダウンメニュートリガーの1つをクリックしてメニューを開く必要があります。 「ページB」リンクは、メニューを開くためのトリガーとして使用されているため、リンクとして使用できなくなります。これにより、レイアウト内の要素の論理的なグループ化が崩れます。
ソリューションB：他のソリューションは " split button dropdowns "です。この場合、ユーザーはボタンまたはボタンの半分をクリックしてメニューの外観をトリガーする必要があります。そして、サブメニューでPage-Bリンクを作成します。これが解決策であり、メインの水平メニューの視覚的な複雑さがはるかに高くなります。
タッチスクリーンデバイス用に設計するために、Page-Bを直接クリックするデスクトップユーザーのエクスペリエンスをモデル化する方法があるかどうか知りたいのですが。そうでない場合、視覚的な複雑さが少ないソリューションBよりも優れたソリューションはありますか？
クリック数が少ないほうが良いです。
うまくいけば、私はこの質問を正しく理解しています。 3番目の解決策は、「ソリューションA」を少し更新することです。はい、クリックするとメニューが開きますが、ユーザーが再度[ページB]リンクをクリックすると、ドロップダウンを閉じるのではなく、リンクに移動します。
ドロップダウンホバーメニューがどのように機能するかをすべてのユーザーが完全に理解していると100％確信しているわけではないので、これらのメニューをクリック（デスクトップ上でも）でナビゲートできるようにすると、これらのユーザーにも役立ちます。
このメニュー項目が単なるボタンではなくリンクになっていることを示す必要があります。これを強調するために、カーソルを下に置くと下線が引かれます。
トップレベルメニューが開いたらクリックするアイデアがうまくいかない場合（おそらくABテストの1つである可能性があります）、[ページB]オプションをドロップダウンメニュー内の独自のリンクに常に移動できます。トップメニューオプションはリストの最初の項目であり、スタイルのサブレベルとは区別され、下の選択可能な下位レベルの項目に加えて選択可能な見出し項目であることを示します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ジョンWの提案も気に入っています。おそらく、インデントと箇条書きは、ナビゲーションの階層的な性質を強調するのに役立ちます。
また、メニューバーとドロップダウンを視覚的に十分に区別できるようにすると、メニュー項目「3」を繰り返しても混乱が少なくなると思います。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ユーザーがBをタップすると、メニューが展開されます。
メニューが開いているときにもう一度Bをタップすると、Bに移動します。
直感的でない場合は、展開したときのBの外観を変更して、サブナビゲーションアイテムの「ここをタップして移動」の手がかりに合わせます。
スライド式の水平ナビゲーションバーの使用を検討しましたか？ ala iOS？
これは、マウス/クリックするよりも（少し）エレガントに聞こえます。展開されたメニューを表示してから処理します。
IOSインターフェースは、一貫した動きのメタファーを提示するという点でもう少しエレガントです。