デスクトップバージョンのドロップダウンホバーメニューがモバイルで機能するためのベストプラクティス？
それが私の意味を正確に説明するので、私は私の例を挙げます。メインメニューに[ショップ]リンクがあり、ホバーするとカテゴリとサブカテゴリのドロップダウンメニューが表示されるストアがあります。歴史的に、「ショップ」という言葉はストアのホームページにリンクされていました。しかし、モバイルでは、「ショップ」をクリックしてドロップダウンリストを取得すると、ホームページに戻るだけで、ユーザーはドロップダウンメニューを見ることができません。これはいくつかの方法で修正できますが、ベストプラクティスを教えてください。リンクにしないと、モバイル版とデスクトップ版の両方で、それ自体がUXの問題だと思います。
答えは気に入らないかもしれませんが、基本的には、顧客が非タッチベースのPCでのみ使用することがわかっている場合を除いて、対話としてホバーを使用しないでください。
タッチデバイス（タブレット、タッチベースのPC、またはモバイル）で使用する場合、ホバーは意味がありません。一部のタッチベースのブラウザーは、ホバーをタッチイベントに変換しようとしますが、一貫性がなく、あまり使用できません。
したがって、タッチデバイスでうまく機能する別のメニュータイプを使用するか、ホバーベースではなくクリック/選択ベースにする必要があります。後者はお勧めしません。
過去のUIに関係なく、一般的なモバイルユーザビリティパターンに依存するのはどうですか？といった：
- homeページへのリンクとしての名前/ロゴプレースホルダー.
- タップ時にメニューを表示/展開/その他するメニューアイコンまたはWord
- 必要に応じて、専用のブレッドクラムや戻るボタン。
これを試してみましょう
ショップ<-クリック/タップ
メニューが表示されます
- ホーム
- ブラ
- ブラブラ
- かくかくしかじか
プラス：ロゴの後ろにホームページのリンクを追加する
問題を解決する最も簡単な方法だと思います
これは決定的な回答ではなく、検討すべき提案です。
現在ホバー機能を備えている「ショップ」ボタンの隣に、ユーザー（および他のユーザー）がクリックしてそのホバー機能を複製できる小さなアイコンのタッチスクリーンデバイスを配置するのはどうですか。
ここでの決定は、デスクトップとモバイルエクスペリエンス/インターフェイスの一貫性を保つかどうかです。画面スペースとユーザーインタラクションが限られているため、モバイルで同じリッチインタラクティブエクスペリエンスを作成することは明らかに不可能です。
Webサイトを同じに保つことに決めた場合（メンテナンスと更新が容易になると思います）、共通の最小要素を設計する必要があります。これは、ホームページとショップボタンに個別のリンクを提供する必要があることを示唆しています。選択のアコーディオンヘッダーまたはトリガーになります（モバイルデバイスでは使いにくいため、必ずしもドロップダウンリストである必要はありません）。このアプローチの良い点は、すべての機能と一貫性を維持しながら、デスクトップに対しても同じようにリッチなインタラクションを構築できることです。
それらを分離しておくことを決定した場合（デバイスのエクスペリエンスが向上すると思います）、コンテンツとナビゲーション構造に基づいて最も簡単な方法を実行すればよいので、それは実際には重要ではありません。このアプローチの良い点は、ユーザーがモバイルとデスクトップのデザインを最も効果的に使用できることですが、2つの異なるデザイン/サイトを維持する方が努力が必要です。
もちろん、ビジネス/ウェブサイト/顧客グループはそれぞれ異なるため、これらのアイデア/アプローチをユーザーに対してテストする必要があります。
サブナビゲーションにリンクのヒープがある場合、メニュー項目をクリック可能にして、サブナビゲーションを開いたり閉じたりできるようにします。そうすれば、ユーザーがメインページのコンテンツに到達するために下にスクロールしすぎることはありません。次に、JavaScriptを使用してデフォルトのリンクアクションを無効にする必要があります。
リンクがそれほど多くない場合は、デフォルトですべてを表示し（サブナビゲーションを非表示/表示しない）、親リンクからインデントすることができます。その後、ショップボタンをホームページにリンクさせることができます。
カテゴリとサブカテゴリがたくさんある場合は、メニューをクリックできるようにしておくことをお勧めします。次に、ロゴからホームページにリンクするか、メニューに「ホーム」リンクを追加して、デスクトップの幅にあるときにそれを非表示にします。