モバイルデザインのために再確認すべきヒューリスティック原則

Jordan DeVos

Jordanはビジュアルコミュニケーションに注目し、戦略やサービスデザイン、UX/UIを担当するアメリカのデザイナーです。

この記事はToptalからの翻訳転載です。配信元または著者の許可を得て配信しています。

Heuristic Principles for Mobile Interfaces

Jacob Nielsen氏は多くのデザインパターンを収集し、人間とコンピューターのインタラクションにおけるユーザビリティの構築を指導していました。そして1994年には、それまで学んできたことをユーザビリティヒューリスティックに反映し、それを用いた評価の原則集めて公開しました。それから25年が経ち、コンピューターがスマートフォンに変わった現在においても、Nielsen氏の唱えた原則はいまだ揺るぎません。

人間中心デザインによってユーザーの重要性に対する認識が高まり、それに応じてデザインプロセスも形を変えてきました。Nielsen氏の唱える原則はあらゆるスクリーンにおいても普遍的ですが、モバイルデバイスの人気が高まり続ける現在、強調すべきはモバイルインターフェイスです。

Web上でヒューリスティック原則と検索してみると、多少の差異はあれ1つの長いリストが表示されるでしょう。この記事では、人間中心デザインとユーザビリティの先駆者に影響を受けて集められた10の原則を紹介します。

ユーザビリティヒューリスティックはユーザーのニーズから始まる

一連の原則の紹介に移る前に、ユーザーニーズの重要性が増し続けていることを認識しておく必要があります。たとえば、デザインが修正されたGOV.UKは、政府のWebサイトであるにもかかわらず、世界からユーザビリティを評価されているユーザー先導型のプロダクトとして有名です。

プロジェクトのデザインディレクターであるBen Terrett氏は、プロダクト戦略からビジュアルデザインのアプローチに渡るUIのデザイン原則から始めました。最初の原則は、プロダクトを成功に導く北極星のようだったとTerrett氏は述べます。

「つねにユーザーのニーズから始めてください。ユーザーが何を必要としているのかわからないと、正しいプロダクトを作ることはできないでしょう。リサーチし、データを分析し、ユーザーと会話してください。ニーズを憶測で判断してはいけません。ユーザーに共感するとともに、彼らが望んでいるものが必ずしも彼らが必要としているものと同じとは限らないことを忘れないでください。」

ユーザビリティを評価するヒューリスティック原則は、UIデザインがユーザーフレンドリーな体験を提供できていない場所を特定するのに役立ちます。

1. システム構造の透明性

ユーザーがコンテキストを充分に理解できるように、要素や構造を可視化する

UIはユーザーが自分自身で制御できている実感の得られるようなものにしなければなりません。つまり、「今自分はどこにいるのか?」、「ここからどこに行くことができるのか?」といった質問にユーザーが簡単に答えられるようにしましょう。システム構造が明白だと、ユーザーは次に何が起こるのか能動的に決断していると感じます。ユーザーはインターフェイスを自律的に動かしていると感じ、それによって自信を得ることもできるのです。

ナビゲーションメニューがハンバーガーメニューに姿を変え、その後どこに必要な情報があるのか示してくれます。(参照元:Gal Shir

2. アクションへの早急なフィードバック

システムがユーザーのアクションに対して応答し、リクエストを受け取ったことを知らせる

どのようなユーザーのアクションに対しても、インターフェイスからの迅速な返答は欠かせません。すぐにフィードバックを返すことで、ユーザーはシステムが自分の希望どおりに動いていることを確かめることができます。

Nick Babich氏はSmashing Magazineにて、あるアクションに対する状態をわかりやすく伝える優れた事例として、プログレスインジケータを挙げています。Babich氏によれば、プログレスインジケータは、ユーザーのアクションが受理されて、システムが次のアクションをすぐに表示することを視覚的に伝えています。インジケータがなければ、ユーザーはプロセスが中断されるかもしれないという不安や不満を募らせることになるでしょう。

単純なアニメーションによって、Pull-to-refresh(引っ張って更新)という行為が受理され、その後に表示されるコンテンツが新しくなることが確認できます。(参照元:jiangxiaobei

3. エラーを認識できる

ユーザーが進むべきでない方向へ進んでしまったとき、ユーザーがとれる選択肢だけでなく、その他の情報も提供する

ユーザーは、どこかで必ず意図されていない方法でモバイルインターフェイスを使ってしまい、ニーズが満たされず不満に思う非生産的な状況に陥るでしょう。障壁や行き詰まりはユーザージャーニーが早く終わってしまう典型的な理由です。UIではユーザーが認知し、診断し、エラーから回復しやすいよう十分な数のインジケータを提供しなければいけません。

カスタマーサービスにはいつでも簡単にアクセスできるようにしましょう。しかし、情報量のバランスをとるのは難しいことです。あまりに多くの選択肢が存在すると認知的過負荷を引き起こすこともあります。エラーをどのように解消し、将来のエラーをどのように防ぐべきかユーザーが明確に理解できるようにしましょう。

このモバイルインターフェイスに表示されている空の状態は、この画面が表示されている理由を説明し、エラーを解決するために必要な2つのアクションを提供しています。(参照元:Murat Mutlu

4. 柔軟な使用感

さまざまな経験値を持つ幅広いユーザーにとって直感的で効率的に使用できるインターフェイス

インタラクティブなモバイル体験は、外部のユーザーガイダンスから独立している必要があります。モバイルアプリを初めて使うユーザーだとしても、たくさん利用しているユーザーだとしても、インターフェイスはどちらのシナリオにも対応している必要があります。

経験豊かなユーザーはショートカットや高度なシステムを活用したいと考えるはずです。一方で初心者のユーザーなら、少し混乱しているだけでもこちらが手助けする必要があります。UIに柔軟性があれば、ユーザーは自分の能力やニーズにもっとも即したプロセスを選択し、操作することができるでしょう。

Jill Gerhardt-Powal氏の認識工学原理によれば、デザイナーは「適切なタイミングで複数のコーディングデータを提供しなければなりません。つまり、ユーザーがより柔軟にデータを認識して自分の好みを満たせるように、システムは色々なフォーマットや情報量のデータを提供する必要があります」。ユーザーが圧倒されるインターフェイスや、データが限定的なインターフェイスを使えば、ユーザーは確実に体験に不満を持つでしょう。

初心者のユーザーにはツールの機能を紹介する必要がありますが、経験豊富なユーザーは普段使っているツールTIPSを何度も見直すことはないでしょう。(参照元:Lakshmi Karuppiah

5. 馴染みのあるユニバーサルな体験

多くのユーザーに共通する体験や期待感を持つデザイン要素を使用する

GUIの歴史は、Appleがユーザーフレンドリーなコンピューターインターフェイスデザインを現実世界と関連させたことから始まります。『Lisa』はファイルが組織化されていることを示すために、フォルダーアイコンのような要素を使ってデザインされました。このように現実世界と関連させることは、ほとんどの人がデジタルインタラクションに馴染みのない時代には役立っていました。しかし、デジタルリテラシーが高まるにつれて、大半のユーザーが思い浮かべる体験が、必ずしも現実に忠実であるとは限らなくなっています。

私たちがスクリーンを眺める時間が増えるにつれて、多くのユーザーが期待することも進化してきました。たとえば、より多く情報が欲しければ「+」の記号を思い浮かべます。また、ナビゲーションメニューはモバイルスクリーンの上か下に表示されていると予想します。ユーザーの大半が理解するであろう体験を活用することで、インターフェイスは直感的なものになるでしょう。

これらの2つのアイコンはすぐに認識でき、多くのユーザーが理解できるアクションをわかりやすく提示しています。(参照元:Mohammad Amiri

6. 情報の制限とデザイン美学

目的に沿い、洗練された体験を邪魔する不必要な要素を削除したミニマルデザインをつくる

すべてのデジタルインタラクションに共通する大まかな原則は、ユーザーの混乱を避けることです。Jill Gerhardt-Powal氏は、意思決定にかかる時間やエラーを減らすために、デザイナーは簡潔で明確な形でデータを示して、不確実性を減らすべきだと述べました。

これは、不必要なコンテンツを削除し、色やレイアウト、タイポグラフィを用いてユーザーをスクリーンに誘導することで達成できます。ユーザーの注意を散らしてはいけませんが、目的を簡単に達成できるように充分なガイダンスを提供する必要もあります。

Ben Terrett氏はしばしばGOV.UKのデザイン原則の4番目をよく用います。それは、「シンプルにするためにできる限り努力する」ことです。直観的で有益なユーザー体験によって最高のソリューションを提供するプロセスだけでなく、ユーザーが直面している問題も深く理解できるかどうかは、デザインチーム次第だとTerrett氏は指摘します。彼らの方法論のいくつかは、このケーススタディで表現されています。

イギリス政府のデジタルサービスは、ユーザーが知るべきことを決めるために情報を分解しました。そして、明確に伝わるように不必要な情報を排除したビジュアルデザインを作成しました。(参照元:Government Digital Services

7. 形式より機能を優先する

デザインはビジュアルスタイルよりも、その要素が何のためにあるのかによって決定されるべきである

もし(デザインが)クレバーで洗練されていると感じたなら、注意しなければなりません。おそらくそれは身勝手なデザインに仕上がっていることでしょう。
―Don Norman氏(多作なプロダクトデザイナーで『The Design of Everyday Things』の著者)

インターフェイスのビジュアルデザインは定義づけられた機能から始めるべきです。スタイルやトレンドを優先すると、美しく目を引く作品が完成するかもしれませんが、最終的に支離滅裂なユーザー体験になる可能性があります。つまり、見た目の美しさで機能不全のデザインを補うことはできないのです。

視覚的な手がかりは、ユーザーの目をアプリの機能に向けるために使われます。フィッツの法則によれば、形や空間、サイズによってユーザーに状況を理解させ、望ましいアクションをとらせることができます。この段階まで来てから、その形式が機能をサポートし拡張するのです。

このデジタル搭乗券では、旅行者が情報をどのように扱うのか考慮し、情報が機能するような視覚的な技術を用いています。(参照元:Marin Begovic

8. 情報の参照しやすさ

記憶に頼らなくてもいいように、インターフェイス要素をユーザーの手の届きやすいところに戦略的に配置する

情報は記憶を辿るよりも実物を認識するほうが簡単です。もしモバイルインターフェイスの機能が一般的には馴染みのない情報やシステムの理解に頼っているのなら、ユーザーが簡単に参照できるように、利用しやすい情報にする必要があります。

Nielsen氏のヒューリスティック原則の1つによれば、デザイナーは「オブジェクトや行動、選択肢を可視化することで、ユーザーの記憶負荷を最小化しなければなりません」。つまり、ユーザーがある対話の中で、別の対話を覚えておく必要がないようにすべきです。システムを使用する際の説明は可視化し、必要なときにはいつでも簡単に検索できる必要があります。

Jill Gerhardt-Powal氏は「認知負荷を減らすために、具体的なデータは、より抽象的な要約の中にまとめる」ことを提案しています。同時に、「ネームやラベルを表示する際には、コンテキストに即すことで、再生や再認の可能性が向上する」とも述べています。重要なのは、初めてインターフェイスを見るユーザーは、デザイナーのようにインターフェイスの情報について知識も親しみも持っていないことです。情報を繰り返し表示するのは、熟練したデザインチームには過剰に見えるかもしれませんが、初心者のユーザーにとっては必要不可欠なこともあります。

Uberのアプリは3つのレベルのタクシーサービスを提供し、ユーザーが必要なとき、それぞれの選択肢に簡単にアクセスできるようにしています。(参照元:Uber)

9. 一貫性は信頼性につながる

一貫したユーザー体験を作り出すために、単語や状況、アクションなどは標準化したものを終始用いる

人間はパターン化されたものに惹かれます。私たちはそうすることで世の中の事柄を親しみやすくしているのです。モバイルインターフェイスにパターンを作ることで、ユーザーがインターフェイスデザインに何を望み、どのようにインタラクションすべきかを学習するツールになるでしょう。

GOV.UKのデザイン原則によれば、「パターンは拘束具でもなければ、ルールブックでもありません。あらゆる状況は異なっているからです。」つまり、インターフェイスは一貫しているべきですが、まったく同一であってもいけません。Gerhardt-Powal氏が繰り返すように、「新しい情報は、理解されやすいように馴染みのあるフレームワーク(図式やたとえ、普遍的な言葉など)を用いて表示する必要があります」。

GoogleはすべてのUIデザインに向けた詳細なガイドラインにおいて、デザインマニフェストそのものに焦点をあてています。(参照元:Material

10. 効果的に反復する

UIデザイン原則とユーザビリティヒューリスティックがプロダクトの目的やユーザーのニーズに確実にマッチするために、デザインプロセスで何度も反復を続ける

Nielsen氏は、UIデザインに普遍的な解決策を提示することは不可能だと初めて認めた人です。たとえばNielsen氏の「ユーザーの意思決定に必要な情報はすべて提供する」という6つ目の原則と、「不必要なものはすべて削除する」という8つ目の原則は矛盾しているようにも思えます。

それぞれの異なる使用状況に対して最善の決断を下せるかどうかは、ヒューリスティック評価とデザインチームにかかっています。もしプロダクトが人間中心的で、ユーザーのニーズに沿って構築されているならば、それを意識することでチームは意思決定において強い目的意識を持つことができるでしょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

イベント