フロントエンド周辺のことをいろいろ書いているbitsofcodeというウェブサイトがある。記事の内容は様々で勉強になるものも多い。しかしとにかくハンバーガー・アイコンとロゴのレイアウトが気になってしょうがなかった。
アイコンらしきものの横に続く文字列は、そのアイコンらしきもののラベルである。「多くの場合は」などと言う必要がないほどそうであることに疑いはない。ごく自然にその文字列をラベルとみなしてクリックすることだろう。このウェブサイトの場合、メニューを出そうとして文字列の部分をクリックすることになるかもしれない。実際、僕はメニューを出そうとしてまんまとロゴをクリックした。
ハンバーガー・アイコンにはラベルは付けない。Menuなどといったラベルを付けた方が良いとする向きもあるが、もはやハンバーガー・アイコン単体でメニューを出すためのアイコンと認識されている。つまりラベルが付いているアイコンはハンバーガー・アイコンとは認識されないということだ。このウェブサイトの場合、トップページへ戻ろうとしてアイコンの部分をクリックすることになるかもしれない。ウェブサイトのロゴの一部と判断されるわけだ。
こう書くとこの2つの経験則は矛盾しているようだが、それはbitsofcodeのようにハンバーガー・アイコンのすぐ横にウェブサイトのタイトルを置いているケースにおいてだ。いずれにしろユーザーの誤解を招きやすいとは言えるだろう。
グローバル・ヘッダーに含まれるものがウェブサイトのタイトルとハンバーガー・アイコンだけならば、ウェブサイトのタイトルを左(右)上、ハンバーガー・アイコンを右(左)上、とそれぞれ離して置くのが良い。よくあるパターンだが確実だ。