PCサイトのメニューにおけるホバー＆選択中の挙動について
こんにちは、ajikeでUI/UXデザイナーをしているすえです。
今回はPC版のWebサイトにおける“メニュー”
の、リンクをホバー&選択した時の挙動についてまとめてみました。
メニューにおけるホバー＆選択時の挙動パターン
ホバー&選択時の挙動には大きく分けて、次の4パターンがあります。
１つずつ見ていきましょう。
1. ホバー&選択時に同じ変化をするパターン
ホバー時にデザインの変化が起こり、クリックした後の選択時もその変化が継続するというパターンです。
みなさんがよく知っている日常的に名前を聴くような超大企業はこのパターンのサイトが多く、見る機会が特に多いパターンだと思います。
自分が今どのコンテンツを見ているのかと、どのコンテンツに移動しようとするかがわかるようになっています。
2. ホバー&選択時に別の変化をするパターン
ホバー時にデザインの変化が起こり、選択時はさらに異なったデザインに変化する、というパターンです。パターン１の変化形という感じでしょうか。
サイトのデザインに凝っているコーポレートサイトやLPで見かける機会が多いです。比較的新しいサイトでよく見かけます。
ホバーと選択のデザインが異なり、違いが一目でわかるためユーザーにとってとても使いやすいデザインではないでしょうか。
3. ホバー時のみ変化するパターン
ホバー時のみデザインの変化が起こり、選択時はデフォルトと同じデザインに戻るというパターンです。
ブランディングの意識が高い洗練されたデザインのコーポレートサイトやLPによくみられるように感じます。また、縦長の1ページのサイトなど1コンテンツごとの内容が少ない場合、ユーザーの現在地を示す必要性が少ないためこのパターンが利用されることが多いです。
4. 選択時のみ変化するパターン
ホバー時にはデザインの変化がなく、クリック後の選択時のみデザインに変化が起こるというパターンです。
こちらは今回の調査でもGoogleの検索画面ともう１サイト以外当てはまらず、ほとんど見かけることがないパターンかと思います。
感想
今回調査してみて、１番ユーザビリティが高いパターンは「2. ホバー&クリック後変化あり／別の表現パターン」で、今後はこのパターンが増えていくのではないかと個人的に感じました。
ただし、シンプルで洗練されたデザインにしたい場合には「3.ホバー時のみ変化ありパターン」が使われることが多く、この２パターンが主流になっていくのでは、と思います。
メニューはサイトに訪れる人のほとんどが使うパーツなのでサイトの雰囲気にあった・ユーザーにとって使いやすいデザインにしたいですね。この記事が少しでもヒントになれば幸いです。
最後まで読んでいただき、誠にありがとうございました。
おまけ
今回メニューの挙動パターンを調査する中でメニューにおけるホバー&選択時のよくあるデザインパターンがいくつか見えてきたのでまとめてみました。
ホバー&選択時のよくあるデザインパターン７つ
調べた結果、大体がこの７パターンのどれかに当てはまるか、７パターンから２つ組み合わせたもの・アレンジを加えたものでした。
また、最近の凝ったサイトだとホバーするとマウスポインターが変化する、といったデザインも見かけます。
・・・
ディレクター/UXデザイナーの募集を開始しました🌿
最後にお知らせです。クライアントのパートナーとして事業創出・成長を支援したいディレクター/UXデザイナーを募集します！
下記条件に当てはまり少しでも興味がわいたら、ぜひお話しましょう🙆♀️
【必須スキル】
・Webディレクターとして2年以上の実務経験
・弊社のビジョンに共感してくださる方
選考の前段階として、お互いについてざっくばらんに知る面談のセッティングも可能です。「まだ応募までは決めきれないけど、会社のことを知りたい」という方もぜひご連絡ください🥳
採用サイトまたはWantedlyよりご連絡お待ちしています！
*ご覧いただく時期によっては募集を中止している場合もございますので、あらかじめご了承ください。
▼ Wantedly
https://www.wantedly.com/projects/669819
▼ コーポレートサイト
▼ UXデザイン会社ってどんなところ？大切にしている価値観や事業についてお伝えします
・・・
最後までお読みいただきありがとうございます。
「♡」を押していただくと、ajikeメンバーが描いた人が現れます🌟
🐤 Twitter / 😊 Facebook
・・・
noteマガジン「Design Container丨デザインコンテナ」では、ajikeのUI/UXデザイナーやエンジニアがデザインにまつわることや会社のことを公開中。ぜひ、マガジンもご覧ください。
この記事が気に入ったらサポートをしてみませんか？