アコーディオンのアイコン：どのシグニファイアが最適か
キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。
アコーディオンが、現在、人気のあるUI要素であるのには理由がある。というのも、モバイルでは、コンテンツを折りたたんでページの長さを管理可能にする不可欠なツールになっている一方、デスクトップでも、視覚的な複雑さを軽減し、ユーザーが目下のタスクに最も関連性の高いコンテンツに集中できるようにしてくれるからだ（複雑なアプリケーションには特に適している）。
モバイルUXとアプリケーションデザインの両方の講座でよく聞かれる質問に、コンテンツがその場で開くことを最も効果的に伝えるのによいアイコンはどれか、というのがある。すなわち、アコーディオンに最適なシグニファイアとはどういうものか、ということである。
我々は、モバイルのナビゲーションとサブナビゲーションに関する大規模調査の一環としてこの疑問を追求することにし、アコーディオンのシグニファイアとして考えられる以下のアイコンについて調べた：
- キャレット（下向きの矢印）
- プラス
- 右向きの矢印
- アイコンなし
これらのアイコンが何を表すためによく用いられるのかは微妙に異なる。一般にキャレットとプラスのアイコンはアコーディオンが開くことを示すためのものだが、デザイナーは右向きの矢印アイコンを同じページに留まってコンテンツを開く、または、別のページにアクセスする、という2つの異なるアクションのいずれかを伝えるために使ってきた。また、アコーディオンの展開後、キャレットは通常（おそらく適切なすばやいアニメーションで）回転し、プラス記号はマイナスに変化して、新たに展開されたコンテンツを折りたたむという逆のアクションを示すシグニファイアになる。
我々は定量的な調査を実施し、これらのアイコンのうちのどれがアコーディオンを開く合図として最も効果的なのかを調べた。
方法論
題材：我々はアコーディオンをモバイルナビゲーションの状況で調査することにしたので、衣料品のeコマース、大型小売店、自動車部品、金融、ニュース、地方自治体、高等教育、住居のDIYプロジェクト、消費財のレビュー、ヘルスケア、旅行という、さまざまな業界でそれぞれ、モバイルWebサイトのプロトタイプを計11個作成した。プロトタイプはインタラクティブなものではなく、メニューが既に開いていて、画面上にカテゴリーの一覧が表示されているシンプルなモックアップである。アコーディオンとのインタラクションのみを確実に測定するためのものであって、メニューを探したり、トップページのコンテンツを調べたりするユーザーの労力を測るためのものではないからだ。
プロトタイプごとに、そのプロトタイプに表示されているアコーディオンのうちの1つで情報を見つけるというタスクを作成した。たとえば、消費財のレビューサイトのプロトタイプでのタスクは、「食洗機のレビューを見つけてください」だった。
また、プロトタイプごとに5種類のバリエーションを作成し、各バリエーションでは、4つのアイコン（矢印、キャレット、プラス、フォイル）のうちの1つを利用するか、あるいはアイコンを使わないことにした。そして、アイコンの種類が重要なのか、それともアコーディオンの項目名の横にアイコンがあればアコーディオンであることがわかるのか（アイコン自体は重要ではない）を確認するために、アコーディオンには過去使用されたことがないフォイルアイコンを我々は考案した。
アコーディオンのアイコンは、該当するラベルの右側の画面の端近くに右揃えに配置した。（我々はアイコンをラベルの左側にも配置可能であることを認識している。今回の結果はアイコンを左側に配置した場合にまでは一般化できない可能性もある）。
テキストラベルの長さが、ユーザーが見たりクリックしたりする場所に影響を与える可能性があるため、各プロトタイプのラベルの長さを均等にし、各タスクの「正しい」答え（ユーザーが選択する可能性が高いメニューオプション）の長さが各プロトタイプで異なるようにした。
また、パイロット調査を数回実施し、タスクの成功率が高くなり（90％以上）、各タスクを達成するために選択する必要のある「正しい」メニューカテゴリーをユーザーが容易に識別できるようにもした。そして、パイロット調査が終わるたびに、タスクの言い回しとメニューのラベルを改善した。つまり、プロトタイプの情報アーキテクチャに関するユーザビリティ調査を数回、効率的に実施してから、定量的なデータを収集した、ということだ。このプロセスにより、大半の参加者が適切なカテゴリーを比較的簡単に見つけられるようにした。というのも、我々の調査の目標は、アコーディオンのシグニファイアをテストすることであって、ユーザーに与えたタスクでの情報の見つけにくさをテストすることではないからだ。
参加者：調査には136人が参加した。参加者全員が、全種類のアイコンの事例を（異なるプロトタイプで、異なる順序で）見た。
手順：テストは、一連のファーストクリックタスクとして、UserZoom上でおこなわれ、モバイルデバイスで実施された。参加者全員に11のプロトタイプそれぞれの1つのバージョンとそれに関連するタスクを順不同で表示した。参加者はその答えを見つけるためにタップするつもりの場所を示した後、そのタップによってどうなることを期待しているか（新しいページに直接アクセスできる、同じページにメニューオプションがさらに表示される、その他）という多肢選択式の質問に答える必要があった。
我々は以下のデータを収集した：
- タップ位置：参加者がタップした場所（テキストラベルを直接、アイコンを直接、ラベルとアイコンの間のスペース、プロトタイプ上の他の場所）
- 参加者の期待：期待についてのタスク後の質問への回答（新しいページに直接アクセスできる、同じページにリンクの一覧がさらに表示される、その他）
参加者がタップする場所
アコーディオンに関連する領域以外でのタップは比較的少なく（5～8％）、ほとんどのタップはラベルかアコーディオンに関連づけられたアイコン上に位置していた（そして、ラベルとアイコンの間のスペースもほとんどタップされなかった）。
＜凡例＞青：テキストラベルへのタップ、オレンジ：アイコンへのタップ、*：ラベルとアイコンをタップした割合に統計的な有意差があるもの。
テキストラベルよりもアイコンをタップする傾向が統計的に有意であったキャレットアイコンを除くと、参加者はテキストラベルまたはアイコンのいずれかを同じくらいの割合でタップしていた。アイコンが存在しない場合は、アイコンが通常あるはずの空のスペースではなく、テキストラベルをタップする割合のほうがはるかに高かった。
ユーザーがテキストラベルをタップしたときのデータの分散分析によると、参加者またはプロトタイプをランダム因子として扱った場合の両方で、アイコンの種類が有意に影響していた。そして、ペアワイズ対比では、アイコンなしの条件は他のすべての条件と比べて有意に異なることが示された。アイコンが存在しない場合は、特に、ラベルをタップする確率が高くなったが、この結果は意外ではない。この条件では「アイコン領域」が単なる空のスペースになっていたからだ（通常アイコンがあるはずの場所でタップしたかどうかを我々は単に記録した）。しかし、このことは、ユーザーは一般に明白なシグニファイアとインタラクトしようとする、という重要なことを思い出させてくれた。
キャレットを除き（p<0.01）、どのアイコンの条件も、ラベルよりもアイコンをより多くタップするという統計的に有意な傾向はなかった。言いかえれば、アコーディオンがキャレットによって示されている場合、ユーザーはラベルよりもアイコンをより多くタップする傾向があった、ということである。他のどのアイコン（矢印、フォイル、プラス）については、統計的に有意なアイコンの選好はなかった。
参加者が期待していること
（タップすると同じページに留まるという期待に関しての）タスク後の質問に対する回答を分析するために、新しいページへの期待値を、参加者は同じページに留まることを期待している（0）、または、新しいページに移動することを期待している（1）、で数値化したバイナリ変数として定義した。この期待値が、あるシグニファイアで50％を超える場合、ユーザーは総じてそのシグニファイアに新しいページに移動することを期待しているということだ。したがって、ページが変わらないことを伝えたいアコーディオンの場合には、この割合は50％未満であるのが望ましい。
標準的なアイコンの期待値はいずれも50％から有意な差がなく、こうしたアイコンに関しては強い期待がなかったということを示している。つまり、ユーザーは、ページに留まるはずだとも、ページから離れるはずだとも、必ずしも期待していたわけではない。しかし、フォイルまたはアイコンなしという条件では、ページを離れるはずだというユーザーの期待が有意だった。
標準的なシグニファイア（キャレット、プラス、矢印）では、ページから離れることへの期待は強くなかった（新しいページへの期待値が50％から有意な差がないため。p>0.05）。すべての標準的なシグニファイアの中で、キャレットはページにとどまるはずだという期待がフォイル（p<0.05）やアイコンなしの条件（p<0.05）よりも有意に強かった。また、プラスの結果はフォイルよりは有意に優れているが（p<0.05）、アイコンなしの状態との差は有意ではない。矢印はフォイルともアイコンなしの条件とも統計的な有意差がないので、矢印アイコンはアコーディオンには利用すべきではないと考えられる。
主な発見
我々の仮説は、アイコンがない場合、ユーザーはメニュー項目をタップすれば新しいページに直接アクセスできるという期待をするだろう、というものだったが、調査でこの仮説は支持された。さらに、フォイルアイコンは、ユーザーがアコーディオンを開くこととは相関がない、という想定だったが、この仮説も支持された。
我々は次に、キャレット、プラス、矢印アイコンがアコーディオンのための優れたシグニファイアであるかどうかのテストとして、そうしたアイコンに対してユーザーが回答した期待値を、フォイルアイコンやアイコンなしの場合と比較した。また、もし本当に、ユーザーがこうしたいろいろなシグニファイアのラベルまたはアイコンのどちらか一方だけをタップする傾向が強いのであれば、もしかしたらこの2つの機能は（スプリットボタンによって）分離できるのではないかと仮定して、ユーザーがこうしたシグニファイアのラベルかアイコンのどちらかをタップする傾向があるかどうかも調べた。
- アコーディオンパターンの場合、ユーザーは標準的なアイコンのほとんどで、アイコンとラベルをほぼ同じくらいタップする傾向がある。唯一の例外はキャレットで、そこではユーザーはアイコンをやや多くタップする傾向があるが、それでもタップの29％はラベル上に位置している。このことは、アコーディオンにスプリットボタンを利用するのは安全ではない、ということを意味する。スプリットボタンにすると、テキストラベルはランディングページに直接リンクされる一方、アイコンからはアコーディオンが開くからだ。
- アコーディオンのシグニファイアのために、新しいアイコンを作成したり、まったくシグニファイアを使わなかったりするのは、ユーザーの期待（すなわち、新しいページにアクセスできるはずだという期待）に反するのでお勧めできない。
- 標準的なシグニファイアはどれも、ページに留まることとは強い相関がない。とはいえ：
- ページに留まる（そしてアコーディオンを開く）ということを期待させるという点では、キャレットを使用するほうが、まったくアイコンを使わなかったり、でたらめなアイコンを使用するよりは断然よい。
- 矢印やプラスを使っても、シグニファイアがまったくないよりはまし、ということではない。
- アイコンが存在しない場合、ユーザーはその行の空のスペースではなく、テキストラベルをタップする傾向があった。このことが今回の調査成果であることが明らかだが、それよりはむしろ、ユーザーは強力で明確なシグニファイアとインタラクトする傾向がある証拠だといえる。
- 興味深いことに、（プラスやキャレットではなく）右向きの矢印アイコンを使用しても、新しいページに直接アクセスできるという期待との相関は「有意ではなかった」。多くのデザイナーは、矢印アイコンは「ページに直接アクセスする」ことを意味するのに対して、同じアイコンが下を向いていると「そのページでアコーディオンを開く」ことを意味すると考えているのかもしれないが、今回のデータではそれは裏づけられなかった。
デザインアドバイス
- モバイルメニューでアコーディオンを使用する場合、キャレットが最も安全なアイコンの選択肢であるように思われる。
- アイコンとテキストラベルを異なるアクションにリンクさせないようにしよう（すなわち、ラベルからはページに直接アクセスできるようにし、アイコンからはアコーディオンが開くようにはしない、ということだ）。今回の調査結果は、アコーディオンにはスプリットボタンを使用すべきではない、という我々の以前からのアドバイスをさらに裏づけた。今回の調査によると、ユーザーはテキストラベルとアイコンの両方をほぼ同じくらいタップしており、両者のもたらすアクションが異なることを期待していない。
- メニュー項目からサブメニューのアコーディオンを開くことにするのか、それともカテゴリーの概要ページに直接アクセスできるようにするのかを決めよう。メニュー項目をランディングページに直接リンクさせることにした場合は、右揃えのアイコンを使わないようにしよう。
要約
ユーザーはアコーディオンのアイコンとラベルの両方をほぼ同じくらいクリックする傾向があるので、それらに異なる機能をそれぞれ割り当てて、両者を切り離さないようにしよう。デスクトップでもモバイルでも、アコーディオンを示すにはキャレットアイコンを使用するとよい。我々の調査によると、この文脈で使用される標準的なアイコン群のうちでキャレットだけが、アイコンを使わなかったり無意味なアイコンを使った場合よりも、アコーディオンであることを示す効果が高いことがわかった。
