web-dev-qa-db-ja.com

モバイルデバイスのセレクトボックスナビゲーションへの切り替えは、複雑なメニューの優れたソリューションですか?

この機能の例は this site にあります(ブラウザーのビューポートを縮小して、selectboxナビゲーションが引き継ぐことを確認してください。)

これは良い習慣ですか?誰かがこれを何らかの方法でバックアップする経験があるかどうか疑問に思っています。

8
gregord

はい。ドロップダウンは、レスポンシブモバイルデザインでスペースを節約しながらページの上部にナビゲーションを維持するのに最適な方法です。 ただし、モバイルデザインの標準ルールは引き続き適用されます。ドロップダウンには、フォームのセレクターではなくナビゲーションであることを示す明確な行動を促すフレーズが関連付けられている必要があり、モバイルユーザーにとって重要なセクションへのリンクが含まれている必要があります。

あなたの例では、行動を促すフレーズNavigate ...がありますが、選択範囲にはSourceが含まれており、GitHubを指します。モバイル版が利用可能です。

更新
最初の回答時から、 Smashing Magazine が新しいレスポンシブデザインレイアウトを公開しています。その新しいレイアウトでは、画面の幅が590pxを下回ると、プライマリナビゲーションバーもSmashing Categoriesと呼ばれる最初のオプションを持つドロップダウンになります。

更新2
CSS Tricksが完全なレシピを公開しました 2011年夏のこのアプローチ。

3
dnbrv

ドロップダウンを使用することは、モバイルでのナビゲーションに使用するための優れたインターフェースではないと思います。モバイルデバイスでのユーザーテストからの私の経験は、人々がモバイルブラウザで非常に特殊なタスクを実行したいということです。さらに、ユーザーはネイティブアプリに慣れており、モバイルブラウザーで同じインターフェイスを使用して楽しんでいます。

モバイルブラウザの主な目標は:です。

  • メインナビゲーションリンクのサイズを平均的な指のタッチに保ちます(iOSからは44px * 44pxです)。
  • 必要なものだけをユーザーに提供し、余分な画像や装飾をすべて取り除きます。
  • 読み込み時間を遅くしたくないので、できるだけシンプルにしてください。

したがって、ドロップダウンリストを使用する場合は、少し大きくしてタップ可能に見えるようにします。別のアイデアは、ユーザーが何を望んでいるかを正確に把握し、それらの機能を1つのホームページで提供し、ユーザーが望むものをクリックすることです。例:モバイルで( www.dropbox.com )を参照してください。

2
Pratheep ch