選択肢とユーザビリティ

フロントエンドエンジニア岸
2018年02月23日

こんにちわ、フロントエンドエンジニアの岸です。

気がつけば入社してから半年が経ちました。
フロントエンドの実装もエンジニアの方にサポートしていただき徐々にできることが増えてきました。
ファイル名、クラス名などの名前をつけるのがすごく悩みます…

最近インターフェイスについての本を読んだので、今回は選択肢とユーザビリティについて書きたいと思います。

マジックナンバー7±2？マジックナンバー4±2？
選択肢のユーザビリティ
結局はユーザー調査

マジックナンバー7±2？マジックナンバー4±2？

聞いたことがある方もいると思います。
僕は参考書などに書かれているもので知っていたのですが、どうやら誤解されているそうです。

マジックナンバーとは、人間が短期的に記憶できるチャンク(情報まとまり)の数です。
チャンクとは

0757712881はチャンクが1つ
075-771-2881はチャンクが3つ

となります。
「マジックナンバー7±2」とは、人間は短期的にこのチャンクが7±2つまでは覚えることができるというものです。

1956年にアメリカの認知心理学者が論文で提唱したとされていますが、実際は提唱していませんでした。
さらに短期的な覚えられるといっても、活字の記憶ではなく視覚的な記憶に関して書かれたことでした。
それを誤解したオライリーの書籍で、このマジックナンバーが記載されたことで誤解が広まったそうです。

2001年には「マジックナンバー4±2」が本当のマジックナンバーだという論文が発表されました。
誤解されたマジックナンバー7±2だと
075-771-2881-03-5474-0838-771
という電話番号も覚えられるはずですが、僕は無理です。

075-771-2881
だとチャンクが4±1で中の文字数も4±1なので比較的簡単に覚えられます。

これはマーケティングとかライティングでは有効に使えそうです。
うまい、はやい、やすいなど

でもwebサイトでもマジックナンバーを使おうとして、ただ単に項目を少なくしてもユーザビリティはよくなりません。
・選択肢を減らして階層化してしまうと、目的の情報にたどり着けずにユーザーが迷子になる
・目に入る情報を少なくするとユーザーが満足できない
・前まで選べた項目を減らすと不満がでる
などといったことになる可能性があります。
極端ですが、アマゾンが商品を4つずつの表示になった場合かなり不便になると思います。
そもそもユーザーは項目を覚えようとしませんのであまり効果的とは言えないと思います。

選択肢のユーザビリティ

では、ユーザーにとって適切な選択肢を設計するためはどうすればいいでしょう。
いくつか方法があるようなので紹介します。

「選択肢が多い場合は適切に分類する」
ユーザーが迷うとこなく選択できるように、情報を適切に分類することが大事です。
遷移先の情報は遷移しないとわからず、ユーザーはクリックするのが少し億劫になります。
クリックする前から、どんな情報があるのかわかるような言葉やデザインを用意する必要があります。

「少なすぎず多すぎない選択肢にする」
ユーザーは選択肢を比較するだけでなく、最初に見つけた目的に近い項目を選択することがあるそうです。
目的となるものが、ユーザーが明確で見つけやすいのであれば、選択肢の数にこだわらずに用意してあげるのも一つの方法だと思います。
また、選択肢が多いとユーザーの満足度が上がるともされています。
なので、少なすぎず多すぎないといったバランスが大事です。

「階層化するときは空間的に見せる」
人は空間の把握が得意と言われています。
構造的には階層でも、空間的に見せることで何があるのかを把握することができます。
その実例が、iphoneのアプリをまとめるUI、trelloのUI、ドロップダウンメニューです。
このようなUIにすることで空間的な整理に見せることができます。

上の3つ以外にも、様々な方法があると思います。
このような方法をいくつも使えば、最適な設計ができるような気がしますが、おそらく不可能だと思います。

結局はユーザー調査

ユーザーは1人ではなく様々なユーザーがいます。
サイトの使用状況もユーザーによって異なるので、上の方法だけでは最適な設計ができるとは言えないと思います。
ユーザーを調査することで、緊急の場合は選択肢を最小限に、買い物などは選択肢を多くするなどの設計ができます。

「サイトやサービスがビジュアルのためだけではない場合は、本や記事の情報に頼らず、ユーザの行動を頼るべきです。
これらの記事や手法をガイドラインをして使用して、将来のユーザーとテストしてください」
と、誰かわからないですけど2003年にマジックナンバーについてのブログで言っています。

その通りだなと思います。
・適切に情報を設計できるようにサイトの目的やユーザー調査を行う
・その結果に対して上のような方法を行い、最適な設計を行う
・そしてユーザーにテスト、調査を行い分析して改善する
選択肢だけに限ったことではなくユーザビリティを考える上で必要な考えだと思います。
これらを行うことで初めて適切な設計ができるのではないかと思います。