スマートフォン向けのメニューやよくある質問のページで、項目をタップすると中身が開くアコーディオンはすっかり定番の部品になりました。ただ、その項目の右端に付ける小さなアイコンを何にするかは、案件ごとになんとなく決めていることが多いのではないでしょうか。Smashing Magazineに、このアイコン選びと、ナビゲーションでよく見かける「分割メニュー」の扱いを整理した記事が載っていました。調査会社NN/gの利用者調査をもとにした内容で、見た目の好みの話ではなく、利用者がどう受け取りどこをタップするかという観点でまとめられています。

アイコンがないと利用者はページへ移ると考える

記事によると、項目にアイコンが何も付いていない場合、利用者はタップすると別のページへ移動すると予想する傾向があるとされています。つまり、開閉するつもりで作った項目でも、アイコンがなければリンクとして受け取られやすいということです。独自にデザインした凝ったアイコンも、開閉の合図としては伝わりにくいと指摘されています。

もうひとつ興味深いのが、タップされる場所の話です。多くのアイコンでは、文字の部分とアイコンの部分がほぼ同じくらいの割合でタップされていたそうです。アイコンは目印であると同時に、押される場所そのものでもあるということになります。例外は下向きの山形(キャレット)で、このアイコンのときはアイコン側がより多くタップされていたとされています。

記事はリンクについての目安もはっきり示しています。押すと別のページへ移るものなら、矢印などは付けずに下線を引くだけでよいという考え方です。地味ではあるものの、確実に伝わるという点では下線に勝るものはない、という主張です。

文字とアイコンで動きを分ける作りは避けたい

記事がもっとも強く注意を促しているのが、分割メニューです。項目の文字を押すとカテゴリのページへ移り、右端のアイコンを押すと下の階層が開く、という作りを指します。サービス紹介の下に個別のサービスが並ぶようなメニューで、ページへの導線と下の階層の両方を一つの行に持たせたいときに採られがちな形です。

しかし先ほどのとおり、利用者は文字とアイコンを同じくらいの割合で押します。そのため、開くつもりで文字を押してページが変わってしまったり、ページを見たいのにアイコンを押して開いてしまったりと、意図しない動きが起きやすくなります。記事では、項目全体を押せば下の階層が開くようにし、カテゴリのページへのリンクは開いた中に「一覧」や「概要」のような項目として置く方法を勧めています。実例として、ドイツの物流会社DHLのサイトが、余計な矢印を付けず、分割もせず、各階層の中に概要へのリンクを置いている形が紹介されていました。

状態に応じて上下左右さまざまな向きの矢印を出し分けるデザインについても、やや複雑にしすぎていると記事は見ています。カテゴリのページへのリンクであることを矢印で示す必要は、たいていの場合ないという整理です。

プラスと矢印は伝わるが別の意味にも取られる

開閉の合図として、プラスとマイナスや、下向きと上向きの矢印もよく使われます。記事によると、これらも多くの場合は問題なく理解されるとされています。ただし、どちらも意味を背負いすぎている記号でもあります。プラスは、あとで見るために保存する、カートに入れる、拡大するといった操作にも使われるため、階層の深いメニューで複数の段が同時に開いている場面では特に紛らわしくなりやすいそうです。

矢印も同様で、スクロールや横へのスライド、次の検索結果への移動、ページ内の特定の位置への移動など、さまざまな操作を連想させます。調査では、矢印の付いた項目について新しいページへ移ると予想した人が一定数おり、アイコンなしの場合はさらに多かったとされています。

こうした比較から記事が出している結論は明快です。閉じた状態では下向きの山形を表示し、開いたら上向きか横向きの山形に変えるのが無難な選択で、代わりを使うならプラスとマイナスもおおむね機能する、というものです。検索結果の折りたたみに下向きの山形を使っている例として、学術情報の検索サービスLens.orgも挙げられていました。

中小企業のサイトで見直すときの手がかり

制作の現場では、スマートフォンのメニューを作るときに、親のページにも行けるようにしてほしいという要望を受けて、文字はリンク、右端のアイコンで開閉という形にすることがよくあります。WordPressのテーマやメニュー用のプラグインでも、この分割型が標準の動きになっているものは珍しくありません。要望自体はもっともなので、今回の記事のように、開いた中の先頭に親ページへのリンクを置く形を提案すると、導線を残したまま押し間違いを減らせそうです。

既存のサイトを見直す場合は、まずスマートフォンでメニューやよくある質問の部分を触ってみて、文字とアイコンの押した結果が違わないか、アイコンの向きが状態とちぐはぐになっていないかを確かめるところから始められます。凝ったアイコンを差し替えるだけでも伝わり方は変わるかもしれません。派手さのない話ですが、問い合わせや資料請求のページへたどり着くまでの小さなつまずきを減らすという意味では、手間に見合う見直しだと感じます。単純なほうがうまくいくことが多い、という記事の締めくくりは、部品選びで迷ったときの判断の軸としても覚えておきたいところです。