こんにちは！
チョイス事業本部 プロダクト統括部 プロダクト企画部 UXリサーチグループの佐藤と、内定者の加藤です。14日目は、UI・UX系の記事の続編を書かせていただきます。
昨年はPCブラウザ版を紹介しましたが、今回はスマートフォンブラウザ版からUI例をピックアップして紹介します！
よろしくお願いします。
ヤコブ・ニールセンのユーザビリティ１０原則
みなさんは、ヤコブ・ニールセンのユーザビリティ１０原則（10 Usability Heuristics for User Interface Design）をご存じでしょうか？
工学博士ヤコブ・ニールセンが、ユーザーインターフェース設計のための経験則を10個にまとめたもので、使いやすいプロダクトを作成するための大きな指針のようなものです。
Nielsen Norman Groupウェブサイトに英語で掲載されており、日本語訳はU-Siteに掲載されています。本記事では、U-Siteに掲載された日本語訳を引用させていただきます。
下記が１０原則です。
1.システム状態の可視性（Visibility of system status）
2.システムと現実世界の一致（Match between system and the real world）
3.ユーザーの主導権と自由（User control and freedom）
4.一貫性と標準（Consistency and standards）
5.エラーの予防（Error prevention）
6.再生より再認（Recognition rather than recall）
7.利用の柔軟性と効率性（Flexibility and efficiency of use）
8.美的で最小限のデザイン（Aesthetic and minimalist design）
9.ユーザーによるエラーの認識・診断・回復のサポート（Help users recognize, diagnose, and recover from errors）
10.ヘルプとドキュメンテーション（Help and documentation）
1～10の原則のそれぞれの観点を引用し、その例となるUIをふるさとチョイスのスマートフォン用ウェブサイト表示のなかで探し、キャプチャを掲載してご紹介していきます。
1.システム状態の可視性
デザインは、妥当な時間内に適切なフィードバックを通じて、今、何が起こっているのかを絶えずユーザーに知らせる必要がある。
ユーザーが現在のシステムの状態を把握できれば、彼らは自分がそれまでに行ったインタラクションの結果を知り、次のステップを決定することができる。予測可能なインタラクションは、その製品だけでなくブランドへの信頼も生み出す。
原則1のUI例は、シミュレーション内の「かんたんシミュレーション」「控除上限額シミュレーション」のボタン型タブです。
このボタン型タブによって、控除上限額のシミュレーション方法が2つあるということがわかります。また、シミュレーション内でいまどちらの画面に訪問しているか、サイト内の自分の位置（現在のシステムの状態）がわかります。
上図のように、自分が訪問中のボタンは黒地色＋白文字に、自分が訪問していないボタンは白地色＋黒文字に表示されているため、寄付者はほぼ無意識で“今はかんたんシミュレーションにいる”と認識していると思います。
寄付者が必要と思えば、次はより正確な控除上限額シミュレーションを使おうというアクションに移ることができます。
2.システムと現実世界の一致
デザインは、ユーザーの知っている言葉によって情報を伝える必要がある。内部向けの専門用語ではなく、ユーザーに馴染みのある語句や概念を使おう。現実世界の慣例にのっとり、自然で論理的な順序で情報を提示しよう。
しかるべきデザインのやり方というのは、ユーザーによって大きく異なる。自分や同僚にとっては完全に明確であるように見える用語や概念、アイコン、画像も、ユーザーにとっては馴染みがなかったり、混乱を招くことがあるからだ。
原則2のUI例は、ヘッダー右上の「寄付カート」のアイコンデザインです。
あなたは店舗で買い物するときに何を使いますか？カートやカゴを使いますよね。現実世界のカートは買いたい商品を入れる入れ物という概念があり、手で押せる取っ手がついて下に車輪のある形が一般的です。
また、日常的に店舗で買い物をすることは多く、この形には馴染みがあります。
一方で、“ 通常の商品の買い物 ”と、“ ふるさと納税のお礼の品の寄付 ” は似て非なる行動です。
ふるさとチョイスではその違いを踏まえ、寄付したいお礼の品を入れる入れ物の名称を検討して、カートとは呼ばずに「寄付カート」というラベルにしました。
UIデザインとして、カートアイコンは現実世界と一致させ、ラベルはふるさと納税の寄付の文脈を表して寄付カートと名付ける工夫がされています。
3.ユーザーの主導権と自由
ユーザーは、誤ってアクションを実行してしまうことがよくある。そのため、「非常口」を明確に示して、長いプロセスを経なくても、望まないアクションを彼らがやめられるようにしなければならない。
プロセスを途中で抜けたり、アクションを元に戻したりするのが容易な場合、ユーザーは自由な感覚と自信をもつことができるようになる。非常口を設けることで、システムについての決定権がユーザー側に残るので、彼らが立ち往生したり、不満を感じたりするのを回避することができる。
原則3のUI例は、お気に入りのハートアイコンと上まで戻るボタンです。
はじめに、サムネイル画像右上のお気に入りのハートアイコンの例をご紹介します。ふるさとチョイスを使っていて、「あ、お気に入り登録するはずじゃなかったのに、お気に入りにしちゃった！」「でも、すぐお気に入り解除できてよかった。」っていうことありませんか？
このハートアイコンは、ワンタップでお気に入り登録（アイコンがピンク色に変化）し、ワンタップでお気に入り解除（アイコンが半透明に変化）も簡単にできるので、ユーザーは誤ったアクションをしても不安にならず利用することができます。
次に、上まで戻るボタンの例をご紹介します。ふるさとチョイスの画面のなかには、スクロールした画面下部までたくさんのコンテンツが載っている場合もあります。
例えばトップページで下スクロールしていくと、「カテゴリの種類や、おすすめのお礼の品や、いろいろな特集などが書いてあるんだね。やっぱり、一番上のメインビジュアルへ戻りたい！」と思った時に、スクロールするよりも早い方法がこの上向き矢印ボタンです。
画面下部から長いプロセスを経ずに一気に上へ行ける主導権を与えているので、ユーザーのちょっと痒い所に手が届いているのではないでしょうか。
4.一貫性と標準
ユーザーに、異なる言葉や状況、アクションが同じことを意味するかどうかを疑問に思わせてはならない。プラットフォームと業界の慣例に従おう。
ヤコブの法則によると、ユーザーは大半の時間を「あなたが作ったもの以外の」デジタル製品の利用に費やす。彼らの期待はそうした他社製品でのエクスペリエンスによって設定されている。そのため、そうした製品との一貫性を保たないと、ユーザーは新しいことを学ぶことを余儀なくされ、彼らの認知負荷が高まる恐れがある。
原則4のUI例は、フッター要素とお気に入りリスト機能です。
普通のユーザーは、ふるさと納税サイトを使う機会よりも、他のECサイトや様々なサイトを使う機会のほうが多いですよね。そうした他社サイトとの一貫性を保つUIの一例がフッターです。
上図のフッターには各種SNSアイコンが並んでいます。比較的多くのサイトでは公式ソーシャルへのボタン導線をフッター付近に設置していますので、多くのサイトの慣例に習うことで、もし公式ソーシャルが見たくなった場合に、画面下部へと進むことでその目的が達成されます。
また、弊社が運営する通販サイト「めいぶつチョイス」へのボタン導線には、右上矢印のついたアイコンが表示されています。
これは別タブで表示されることをボタンタップ前に認識してもらうためのアイコンですが、多くのサイトのUIアイコンで同様な意味として使われいる標準に沿うことで、あらたな認知負荷を高めないデザインとなっています。
次に、お気に入りリスト機能の例です。
ヤコブの法則4を弊社に当てはめると、ユーザーは大半の時間を“トラストバンクが作ったふるさとチョイス以外の”デジタル製品の利用に費やし、他社のエクスペリエンスから期待が設定されることになります。
例えば、欲しい商品をリストにして誰かにシェアする機能を使う経験をしていたり、あるいは、自分の好きな曲のプレイリストを作って世に公開する経験をしているユーザーが多く存在しています。
弊社では、ふるさと納税サイトにおいても、類似のシェアするエクスペリエンスを期待しているのではと考えています。
その期待を具現化したのが、お礼の品のお気に入りリスト機能です。（上図は佐藤のお気に入りリスト）
ふるさと納税のお礼の品選びの際には、夫婦でどのお礼の品に寄付するか話して決めていたり、離れて暮らす親や子どもなどとお礼の品の情報をやり取りする場合があります。
そのようなシェアするコミュニケーションをより便利にしやすくする機能として提供しており、今後もブラッシュアップして使いやすさを高めたいと思っています。
5.エラーの予防
エラーメッセージは適切であることが重要だ。しかし、最も良いのは、細心の注意を払って、そもそも問題が発生しないようなデザインにすることである。エラーが発生しやすい状況をなくすか、エラーの状況を確認して、ユーザーがアクションを行う前に確認オプションを提示しよう。
エラーには、スリップとミステークの2種類がある。スリップとは、不注意によって引き起こされる無意識のエラーだ。一方、ミステークとは、ユーザーのメンタルモデルとデザインのミスマッチに基づく意識的なエラーのことである。
原則5のUI例は、品切れ中・削除済みのお礼の品の申し込みボタンのグレーアウトです。
申し込みを受け付けていないお礼の品に申し込むというミステークは起きてはいけません。
ふるさとチョイスの仕様では、それを防ぐために、寄付カートに入っている品切れ・削除済みのお礼の品は「この自治体の申し込みへ進む」ボタンがグレーアウトされます。申し込みを受け付けている時は赤色のボタンなので、グレーに変化していることによってボタンをタップする前に申し込めないということが認識できます。
それでも万が一、申し込みボタンをタップしまった場合でも、エラー表示ではなくモーダルが表示され、現在の状況と対応方法が提示されます。
このようにエラーが発生しやすい状況をなくしミステークを防いでくれる設計がされていると、ユーザーは安心して使えますね。
6.再生より再認
要素やアクション、選択肢を表示して、ユーザーの記憶への負荷を最小限に抑えよう。インタフェースのある部分の情報を別のところで思い出させるようなことをしてはならない。デザインを利用するために必要な情報（フィールドラベルやメニュー項目など）は、表示されているか、必要に応じてすぐに取得できる必要がある。
人間の短期記憶には限界がある。インタフェースによって再認が促進されれば、ユーザーの認知的な努力の量を減らすことができる。
原則6のUI例は、検索フィールドに文字を入力しようとした場合に、自動的に過去の検索キーワードが表示されるUIです。
あなたは前回どんなキーワードで検索をかけたか覚えていますか？「うーん、覚えているような覚えていないような…」という感じでしょうか。
以前探したお礼の品やカテゴリをもう一度見る目的で再訪した際に、同じキーワードで探しなおす場面があると思います。
その際、以前入力したキーワードを思い出すことは寄付者には負荷となりますし、覚えていないこともあり得ます。この記憶を思い出す負荷を最小限にすることが重要です。
負荷を軽減させるためには、上図のように検索フィールド直下に検索履歴を自動的に提示するUIが役立ちます。キーワードの左に時間を巻き戻すアイコンがついていることで、過去に検索したことが認識できると思います。
この検索履歴の提示によって再認が促されるだけでなく、再検索するという導線がスムーズになっています。
7.利用の柔軟性と効率性
ショートカット（初心者には見えない）は、経験の浅いユーザーも経験豊富なユーザーの両方に対応できるデザインで、エキスパートユーザーのインタラクションを高速化することができる。頻繁に行うアクションをユーザーが自分の好みに合わせて調整できるようにしよう。
プロセスが柔軟だと様々な方法で実行が可能なので、ユーザーは自分に合った方法を選ぶことができる。
原則7のUI例は、お礼の品を申し込む際に、通常の寄付申し込みと「ファスト寄付」で寄付申し込みができる2つの方法を用意している点です。
通常の寄付申込みは、下図のように5ステップが必要ですが、
ファスト寄付の場合は下図のように2ステップで寄付申し込みを終えることができます。
寄付経験が豊富で申し込みをする際に時間短縮をしたい寄付者をエキスパートとするならば、ファスト寄付はこの原則に沿ったエキスパートに対してインタラクションを高速化する機能・UIと言えると思います。
8.美的で最小限のデザイン
インタフェースに無関係な情報や、めったに必要のない情報を入れてはならない。インタフェース内の余分な情報はすべて、関連する情報と競合することになり、関連する情報の相対的な可視性が低下するからだ。
このヒューリスティックは、フラットデザインを使用しなければならないということを言っているのではない。そうではなく、本質的な部分に焦点を当てたコンテンツとビジュアルデザインにする必要があるということだ。インタフェースのビジュアル要素が寄付者の主要な目標をサポートしているかを確認しよう。
原則8のUI例は、「ふるさとチョイス災害支援」のトップページ内の画面構成です。
上図の通り、重要な情報のみを絞って掲載しており、支援金の寄付の受付件数や、日本地図で現在寄付を受け付けている地域が一目瞭然でわかります。
また、画面に余白を多く残しボタンを大きく配置することで、タップすることを躊躇させないシンプルなデザインになっています。
緊急時に最低限の要素とビジュアルで情報を伝え操作を迷わせない、災害支援にふさわしいUIだと思います。
9.ユーザーによるエラーの認識・診断・回復のサポート
エラーメッセージは、（エラーコードではなく）わかりやすい言葉で表現され、問題を正確に示し、建設的に解決策を提案する必要がある。
さらに、こうしたエラーメッセージは、ユーザーがメッセージに気づいて認識できるように、視覚処理をして表示する必要がある。
原則9のUI例は、過去に会員登録した記録（クッキー）がある場合の、新規会員登録画面のメッセージです。
寄付者の方が再来訪した際に、以前ふるさとチョイスに会員登録したかどうか、記憶が曖昧になってしまうこともあります。
そのような場合に、誤って新たに新規会員登録してしまうと、2重のアカウントが出来てしまって、その後のふるさと納税の管理がしにくい状況に陥ってしまいます。
こちらの行動そのものは完全なエラーではありませんので、赤文字・赤枠の強めのエラーメッセージ表現ではなく、上図のような緑文字・緑枠で現在の状況と解決策を表記しています。
このメッセージに触れることで、過去に会員登録したどうかを思い出すきっかけをつくり意図しない2重アカウント登録を防ぎ、もしID・PWを覚えていた場合は、ログインページへのリンクから進めばいいことがすぐにわかります。
10. ヘルプとドキュメンテーション
システムは、追加の説明が必要ないのが一番だ。とはいえ、ときにはユーザーがタスクを完了する方法を理解するのに役立つドキュメンテーションの提供が必要なこともある。
ヘルプとドキュメンテーションの内容は、検索しやすく、ユーザーのタスクに焦点を当てたものでなければならない。簡潔さを保とう。そして、実行する必要のある具体的な手順を示そう。
原則10のUI例は、ツールチップとガイドコンテンツです。
弊社では、？マークアイコンを押して補足説明を表示する機能を「ツールチップ」と呼んでいます。
上図は寄付カート画面に設置されたツールチップで、お礼の品の申し込みに加えて「追加寄付」ができるという新しい機能の理解を促し、追加寄付が自治体に役立てられることを簡潔に説明しています。
このツールチップは？アイコンをタップした場合にのみ表示されるため、追加寄付がわからないユーザーのみに役立つように情報提供（ヘルプ）している好例です。
次に、ガイドコンテンツの例です。
ふるさとチョイスには、ふるさと納税の制度自体の理解を促進をするための読み物コンテンツを多く用意しています。
上図は「ふるさと納税確定申告ガイド」です。主にふるさと納税の初心者の方に向けて、寄付をした後の確定申告を行うために必要な情報を掲載しています。
ふるさと納税を何年か経験して確定申告手続きに慣れてしまうと必要ないけれども、初めて確定申告する際に知りたい詳しい情報や具体的な手順を示したコンテンツです。
このような初心者向けのコンテンツは、ヘッダー上の初心者マークアイコンをタップして閲覧できるようになっており、必要な方が必要な時に読めるドキュメンテーションの配置場所として適切だと考えられます。
まとめ
今回はスマートフォンで原則に従っているUIデザインを探してみましたが、同じ原則で同じ箇所でもPC画面とスマートフォン画面で1画面内のデザインが違っていて見比べるのが面白いと思います。
今回、新しく原則に当てはまるUIを発見できた部分もあり新たな気づきが生まれたと思います。原則以外でも画面が小さい分、情報の数を減らしていたり、指でタップしやすいようにボタンが大きくなっていたりデザインの基本的なことも再確認できて学びになりました。
最後に、トラストバンクでは一緒に働く仲間を募集しています。ご興味がある方がいらっしゃいましたらぜひご連絡ください！