私のウェブサイトには、いくつかのレベルのサブメニューがあるナビゲーションメニューがあります。
下の写真の例では、ユーザーがトップレベルメニューの[サービス]をクリックして[サービス]ページに移動できるようにしたいと考えています。しかし、私は彼らがそれがクリック可能だとは思わないのではないかと心配しています。
誰かアドバイスできますか?これについて行われた研究はありますか?
良い質問。私は意見を述べることしかできず、調査はできません。
私の意見では、これを行うと、1つの要素に2つの別々のアクションが混在しているように見えます(私は過去に自分で行ったことがあります)。
「サービス」アイテムのナビゲーションクリックアクションを削除する必要があるという結論に達しました。人々がタッチスクリーンを使うとき、あなたはさらなる問題に直面するでしょう。例えば。 「サービス」アイテムをタップすると、サブメニューが開くか、「サービス」ページに移動しますか?それらのサブページがそのドロップダウンからしかアクセスできない場合、これは大きな問題になる可能性があります。
問題の解決策の例:
ホバーでサブオプションを非表示にすることによって引き起こされる問題に対処するための(私のコメントからの)追加の解決策:
実際の「サービス」ページで、リンクのサブメニューリスト(ホバーするまで非表示になっているリンク)の最低限のオファーを提供する必要があります。これは、サブメニューを開くことができない場合(タッチ時など)のバックアップであり、少なくともユーザーはサービスページに移動し、そこに提供されているリンクからサブページに移動できます。
これが BBC Foodの例 です。レシピメニューオプションとそのサブメニューを参照してください。レシピをタップすると、サブメニューが常にそこに表示されます。
プロのユーザーはそうしますが、初心者のユーザーはしません。インデックスページはホバーの後ろに隠れています。これは、ホバーメニューがナビゲーションに適さない理由の1つです。
要約する:
多くの場合、インデックスページは、ユーザーが最初にマウスをポイントしたカテゴリ名で非表示になります。ほとんどのユーザーは、カテゴリー名が既に選択されているように見えるため、カテゴリー名が索引ページにつながることを知りません。ホバーを強調表示すると、カテゴリ名がリンクであることが不明確になります。これは、どこにナビゲートすべきかを知るためにコンテンツの概要を提供するためにインデックスページを必要とすることが多い新規ユーザーを傷つけます。
スクリーンショットの大きな問題は、「矢印」アイコンが水平矢印のように見えることです。これは通常、クリックして別のサイトにアクセスすることを意味します。
ここの全体的な混乱は、このメニュー項目が展開可能であることを人々に示す矢印によって簡単に解決できます。 ▲か▼と非常に似ています。この場合、メニュー項目はドロップダウンメニュー項目になります。
また、見つけやすくするために、クリック時だけでなく、ホバー時にも表示する必要があります。
Amazon.comで例を見ることができます
ドロップダウンの一部であるエンティティーとは何の関係もないページが表示される場合は、サービスの一部をクリック可能にするのは良い考えではないと思います。最初の項目がクリック可能であるサイトを見たことがありますが、リダイレクト先のページは別のページではなく、ドロップダウンのすべてのエンティティに関する情報があるページです。 (ホームページの種類)。しかし、このタイプのナビゲーションは、タッチデバイスで問題を引き起こすことは確かです。
このIAは、単純なサイトのように見えるため、少し複雑だと思います。サービスの内容をトップレベルにすることをお勧めします。だからあなたのトップレベルのナビゲーションは
ホーム|ウェブデザイン|アイデンティティ|ロゴデザイン|ワードプレス|ポートフォリオ(ここにお客様の声を掲載)|連絡先
シンプルなサイトでそのようなドロップダウンメニューを回避することは非常に良い考えです。サービスをトップレベルに置くだけで、実際に行っていることがすぐにわかりやすくなるだけでなく、ナビゲーションが簡単になり、SEOにも最適です。