アイコンヒューリスティック
今回の視伝研のテーマは「アイコン」
研究員全員でのインプットを経てそれぞれ研究しました。
僕は経験則から持っているアイコンのルールが多くあることに気づいたので、それらが正しいのかを調査しました。
ヒューリスティック（heuristic）という言葉があります、それは完璧ではないものの、経験則や先入観によって直感的に正解に近い答えを得ることができる、という思考法のこと。
この記事ではアイコンを使う際に経験則から判断していることを、アイコン+ヒューリスティック=「アイコンヒューリスティック」と呼びます。
思い込みの部分も多々あるので、そのヒューリスティックは正しいのかもできる範囲で調べてみました。
タブバー（ナビゲーションバー）のアイコンラベルは必要
タブバーとは常時表示する箇所であり、省スペースでシンプルにしたいエリアなので、ラベルなしにしたいと思うことが多いが、クライアントからは「アイコンの意味がわかりにくい」とフィードバックをもらうことが多く、ラベルは必要だと考える様になった。
その経験からアイコンヒューリスティックとして「ラベルは必要」になりました。さらに「文字数は全角5文字MAX」と「タブバーの項目は最大5つ」も経験則として挙げておきます。
本当に必要か調べてみた
UserTestingのテストでは、ラベル付きアイコンとラベルなしアイコンを比較する一連のテストを実施しました。
ユーザーはラベル付きアイコンをタップしたときに何が起こるかを 88% の確率で正確に予測できました。
ラベルのないアイコンでは、その数は 60% に減少しました。
アプリに固有のラベルのないアイコンの場合、ユーザーがアイコンをタップしたときに何が起こるかを正しく予測した確率は 34% のみでした。
上記テストから、ユーザーはラベルがないと40% はわからずに押している。と言えそうで、ユーザビリティの面からタブバーのアイコンにラベルは必要だと考えて良さそうです。
サービス全体のブランディングとして、無しのデザイン選択はあり得ます。
アコーディオンのアイコンは右側
長い内容を省略表示できることで便利なアコーディオン。デザインパターンとして「+」アイコンで左と、「V」アイコンで右の2つに大きく分けることができます。僕としては見出しと本文が頭揃えになるので、「V」アイコンで右にすることがほとんど。
その経験からアイコンヒューリスティックとして基本的には右側に置く。になりました。
調査結果：左右差はなく、デザインに合わせるでOK
vigetではアコーディオンメニューのデザインとアイコンのテストを実施しています。この記事では、アコーディオンメニューのアイコンデザインとその配置に関するユーザビリティテストの結果を紹介しています。
右側にアイコンがあると多くのユーザーがアイコンをクリックしています。
上記から
右側にアイコンがあると多くのユーザーがアイコンをクリックし、タスク時間が長くなることが分かりましたが、だからと言って、悪いわけでは無く左か右かは状況に応して検討するのが正しいのかなと、ぼんやりした結論。
Other
リストにアイコンを利用するときは左はカテゴライズ、右は状態の表示
左はカテゴライズ、右は状態の表示を表す。
アウトラインアイコンはOFF表現に見え、塗りアイコンはONに見える
アイコン自体のデザイン的要素に関わらずそう感じる。
ハンバーガメニューに「menu」ラベルは不要
色々な種類はあるが、スペース優先でも伝わるほど一般に理解されている。
この記事は視覚伝達情報設計研究室（通称：視伝研）の研究発表テーマ06「アイコン」の研究発表の1つになります。
その他の視伝研の研究はこちら
この記事が気に入ったらサポートをしてみませんか？