見出し画像

iOSのデザインから考えるヤコブ・ニールセンの 10ヒューリスティックス | UI/UX Weekly vol.13

世の中には数多くの「デザイン原則」が存在します。

その中でも、UIデザインやユーザビリティに関して最も広く使われている原則として、ヤコブ・ニールセンが提唱した
10のユーザビリティヒューリスティックス(Ten Usability Heuristics)」があります。(以下10ヒューリスティックス)
UIデザインやUXデザインに関わる方であれば一度は聞いたことがあるかもしれません。

今回はその10のヒューリスティックを見直して、iOSのデザインを例にまとめてみたいと思います。

10ヒューリスティックスとは?

そもそもヒューリスティックスとは?
ヒューリスティックスとは日本語で「経験則」、つまり人が無意識に使っている法則や手掛かりを意味します。
ユーザビリティに関する指針をその経験則に従ってヤコブ・ニールセン氏がまとめたものが、この10ヒューリスティックスです。

▼ ヤコブ・ニールセンって誰?
ヤコブ・ニールセン氏は、デンマーク出身のアメリカの工学博士で、Webサイトのユーザビリティ研究の第一人者と言われています。

どんな時に使うの?
ユーザビリティの専門家がWebサイトやアプリの問題点を様々な観点から指摘する手法として多く用いられています。
具体的な評価方法としては、3〜5名の専門家が、同じ評価対象に対して評価を行い、その結果を持ち寄り問題点と改善を決める...といったものが一般的です。
従って、10ヒューリスティックスは「この原則を守ってデザインするといいよ」というようなガイドラインではありません。さらに、あくまでユーザー体験の改善を向上させる一つの手段に過ぎないため、ユーザーテストの代わりになるようなものでもありません。
しかし個人的には、そのような評価を必ずしも実践しなくても、ユーザーインターフェースの良し悪しを判断する材料として理解しておくべき指針の1つなのではと考えています。

ここからはそんな10ヒューリスティックスを、iOSのデザインを例に紹介していこうと思います。


1. システムの状態がわかるようにする

システム側で行っている処理を、適切なフィードバックを通じてユーザーに「今何が起こっているか?」を知らせる。

画像2

例えば...
ホーム画面のアプリアイコンが、クラウド上のみに保存されている / インストール中 / 通常 / 編集中 のように、ステータスによって表示が変わることで、なぜ開けないのか?等、ユーザーにわかりやすい形で対象のステータスが表示されている。
その他、コンテンツをダウンロードしている時に「80%ダウンロード済み」のようなステータスが表示される場合など。


2. 現実世界とシステムが一致している

専門用語などを使わず、現実世界でユーザーが慣れ親しんでいる言葉や概念をシステムでも使う。

画像2

例えば...
iPhoneの「計算機」は、実世界で使われている「電卓」を模して作られている。ユーザーの多くが「電卓」を使ったり、少なくとも目にしたことがあるため、全く何も知らない状態からUIの操作方法を覚えてもらうより遥かに早く使いこなせる。
他にも、受話器を模した電話アイコン(📞)や、封筒を模したメールアイコン(📩)等のアイコンもこの例と言える。


3. ユーザーに操作の主導権と自由度を与える

操作を誤った時に、自分の間違いを修正できて元に戻せる。いつでも取り消し/やり直しの選択肢を与える。

画像3

例えば...
写真アプリでは一度編集した画像を「元に戻す」ボタンがある。画像を編集していて編集がうまくいかず戻したい時や、間違えて編集内容を保存してしまった時にいつでも元の画像に戻ることができる。
他にもGmailでは、間違えて送信してしまったメールを一定期間取り消すことができる。


4. 一貫性を保っていて、標準にならっている

同じシステムで表現や操作方法などに一貫性がある。また、世の中で一般的に使われているUIに従っていて、プラットフォームのしきたりに倣っている。

画像4

例えば...
iOS標準のアプリケーション(設定・Apple Music・メモ等)では、色が変わっても一貫して共通した戻るアイコン( < )が使われていて、その位置はいつも画面の左上となっている。「1つ前の画面に戻る」ボタンに共通した表現が使われている。
一方Androidでは基本的に戻るアイコンは矢印( )になっていることが多い。iOS / Androidそれぞれのプラットフォームで推奨されているガイドライン規定のアイコンがそれぞれに用いられている。


5. エラーを防止する

ユーザーが無意識に行ってしまうミスを予め注意深く予想し、先回りして防止したりエラーを減らすサポートをする。

画像5

例えば...
iOSで文字入力で、スペルを間違えると正しいスペルを提案してくれる。提案されたワードを押すことで自動的に正しいワードが入力され、1から入力し直す手間を省いてくれる。
Googleの検索が代表的な例で、単語を間違えると本来検索したかったワードを先回りして検索結果に表示してくれる。
他にもGmailでは、メール本文に「添付します」と書いてあるのにファイルが何も添付されていない場合に「ファイルが添付されていないようです」とヒューマンエラーをスマートに正してくれる仕組みがある。

6. 記憶を呼び起こさなくても、見ただけでわかる

何もない0の状態からユーザーに思い出させるのではなく、選択肢や必要だと予測される情報を与え、記憶負荷を最小限にする。

画像6

例えば...
Apple Musicでは、「今朝電車で聴いたアルバムなんだっけ?」とユーザーに記憶をたどらせるのではなく、「最近の再生」項目で過去に聴いた音楽を選択肢としてユーザーに見せることで思い出す手間や労力を省く。
他にもアンケートなどで、「好きな食べ物のカテゴリは?」と自由記述式にするのではなく、「和食 / イタリアン / 中華...」のようにある程度想定し得る選択肢を提示することで、ユーザーが考える負荷を軽減する。


7. 柔軟性と効率性を持たせる

そのシステムに慣れているユーザーにとっては効率的に使える仕組みを提供し、逆に初心者にはわかりやすいUIを提供する。

画像7

例えば...
ホーム画面からアプリを検索する場合、自分が今探したいアプリ名がすぐにわかるユーザー向けにはフリーワードで検索する「検索窓」が設けられている一方、「Siriからの提案」では比較的よく使うアプリに行き着きやすい仕組みを提供している。
代表的な例としては、パソコンのショートカットキーがある。⌘Cでコピーすることもできるが、ショートカットを覚えていないユーザー向けに右クリックやメニューからもコピーする選択肢がある。


8. 最小限で美しいデザインを施す

文字や画像が多すぎるコンテンツや過剰な装飾などは避け、余計な情報でユーザーを混乱させない。

画像8

例えば...
iOS標準の「計測」アプリの「水準器」機能では、傾斜を表す数字と円のみが要素として表示されていて、2つの円が重なり合う(=0°になる)と背景が緑になるというシンプルなデザインで、機能の役割を十分に果たしている。
従来あった物理的なボタンを減らすなど、iPhoneの設計思想自体もこの項目に当てはまっていると言える。

9. ユーザーによるエラー認識、診断、回復をサポートする

エラーが起こってしまった時に、「どうしたら直せるのか?」がすぐにわかる。ユーザーが見慣れないプログラムコードではなく、自然言語でそれが表現されている。

画像9

例えば...
同じく「計測」アプリの「計測」機能では、「離れてください / ゆっくり / 近づいてください」など自然な表現を使い「どうしたら正しく測れるのか?」がわかりやすくユーザーに伝わっている。
他にも、例えば電話番号を入力するフォームで「エラーがあります」と伝えるだけでなく、「半角数字で入力してください」と明示することで、ユーザーがすぐにエラーの原因を修正することができる。


10. ヘルプとマニュアルを用意する

ヘルプなしで使えるに越したことはないが、システムのヘルプやマニュアルには簡単にアクセスできるようにする。

画像10

例えば...
iOS8から標準搭載された「ヒント」アプリは、iPhoneの基本的な使い方から、新機能の紹介や、高度な使い方に関するマニュアルを網羅していて、簡単にアクセスできるようになっている。
ヒューリスティックスの1〜9を全てクリアした完璧と思われるシステムでも、ユーザーの思考や行動を完全に把握できるわけではない。


最後に

以上が10ヒューリスティックスの概要とそれぞれの具体例でした。

冒頭でも少し触れたように、「これらの項目をパスしさえすればユーザビリティの問題はなくなる」というような魔法のリストでは全くありませんが、
基本的なユーザビリティの考え方として、拠り所になる項目がまとめられたデザイン原則だと思っています。

ヤコブ・ニールセンの10ヒューリスティックスについて詳しく知りたい方は、ヤコブ・ニールセングループが運営するこちらのサイトがおすすめです:

その他参考:
10 Usability Heuristics for User Interface Design - Nielsen Norman Group
Accessible & Usable - Jacob Nielsen の「ユーザビリティに関する10のヒューリスティクス (問題解決に役立つ知見) / Ten Usability Heuristics」
UI設計のユーザビリティヒューリスティック - UX TIMES
ヒューリスティック評価・エキスパートレビュー - UX.txt

この記事が気に入ったらサポートをしてみませんか?