KARTEでできるデザインの活用 #2

ダウンロードしてご活用いただくことを想定したPDF資料です。
ダウンロードアイコンよりダウンロードしてご活用ください。
▼読後アンケートはこちら！
https://support.karte.io/post/3Q8xNVoYmttIGmsB9fVqg5#kartedesign2

Transcript

1. 1 ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential        でできるデザインの活⽤ #2
2. 2 ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential オンラインであってもオフラインであっても顧客との向き合い⽅、接し⽅には⼤きな違いはない と考えています。どちらの場でも⼀貫性のある接客が、ブランド、プロダクト、サイトでの顧客 体験の向上に⼤きく関係してくるものだと思っています。 ⼀貫性のあるデザインの延⻑として、「ユーザーの⾏動を促す導線」というテーマで、いくつか の事例を交えて、情報を整理しました。 顧客体験を考え、実践する⼀歩になれば幸いです。 - PLAID Customer Experience Team はじめに
3. 3 ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential ⼀貫性のあるデザイン 分かりやすく快適に⽬的を達成してもらう
4. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential ⼀貫性 Consistency in Design ⼀貫性のあるデザイン デザインに⼀貫性を持たせること はサイト内の体験を形成する上 で、⾮常に重要な役割を担ってい ます。 デザインにおける⼀貫性には、⾒ た⽬の⼀貫性と機能の⼀貫性があ ります。
5. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential ⾒た⽬の⼀貫性 Consistency in Design ⼀貫性のあるデザイン ページごとに違う⾒せ⽅や⾊が使われていた り、同じアクションなのにさまざまなレイア ウトパターンがあると、ユーザーは混乱し、 ストレスを感じてしまいます。 同じ性質のものは同じ表現で、違う性質のも のは違う表現にし、ユーザーに認知してもら いやすい状態にすることを意識しましょう。 形状やレイアウト、⽂字の⼤きさ、⾊などが 当てはまります。
6. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential Consistency in Design ⼀貫性のあるデザイン 「お知らせ」の場合 「アクションを促したい」場合 テンプレートをその都度選択するのではなく、「お知ら せ」の場合は Aテンプレート、「アクションを促したい」 場合は Bテンプレートのような形で、伝えたい情報の質に よって使⽤するテンプレートを決めておくのをおすすめ します。あらかじめデザイナー・エンジニアに必要なテ ンプレートを作成してもらうと良いでしょう。 KARTEにおける ⾒た⽬の⼀貫性
7. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential 機能の⼀貫性 Consistency in Design ⼀貫性のあるデザイン ⼈は無意識のうちにサイトの使い⽅を学習し ていきます。⼀貫性が低いと、常に学習し続 けなくてはなりません。⼀貫性が⾼まると、 学習を助け、操作性が⾼まり、ユーザーの効 率性も向上させることができます。 このことからサービスの質が安定・向上する ため、ユーザーはサイト内で良い体験を得や すくなり、信⽤や満⾜にもつながります。 接客⾃体の表⽰⽅法や操作、ボタンクリック 後の挙動などが当てはまります。
8. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential Consistency in Design ⼀貫性のあるデザイン 表⽰⽅法や型も都度考えるのではなく、「機能紹介」の 場合は⾏動を阻害しない通知形式（モードレス）のテン プレートで、「アクションを促したい」場合は全画⾯を 覆うモーダル形式（最⼩化あり）のテンプレートを利⽤ するといったルールを定めましょう。 アクションを促すボタンにはサイトカラーを利⽤するな ど決めるとよいでしょう。⾒た⽬の⼀貫性同様、最初に 設計しておくことをおすすめします。 KARTEにおける 機能の⼀貫性 「機能紹介」の場合、画⾯右下表⽰ 「アクションを促したい」場合、モーダル表⽰
9. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential Consistency in Design ⼀貫性のあるデザイン • 最初に設計し、⼀度テンプレートを作成すれば、デザイ ナーや開発者が毎回製作する必要がなくなり、接客の 提供スピード＆提供サイクルが早くなる • 接客の品質の担保ができている • デザインやコーディングのことに時間を使うのではな く、ユーザー体験の向上のための施策を考える時間を確 保できる 重要性 - 事業者 • サイトの情報を認識しやすくなり、ユーザーが混乱し、 ストレスを抱えることがなくなる（⾒た⽬） • 学習することを助け、操作性が⾼まり、ユーザーの効率 性も向上させ、信⽤や満⾜にもつながる。その結果良 い体験を得やすくなる（機能） • サイトの世界観やコンセプトを継続的に直接感じるこ とができる 重要性 - ユーザー
10. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential まとめ Consistency in Design ⼀貫性のあるデザイン オフライン（実際の店舗）のシーンで考えても、店舗内装 や、スタッフから受ける接客は、個⼈差はあれど当然のよ うに⼀貫していると思います。 同じ系列のある店舗ではお堅い接客で、別の店舗ではフレ ンドリーというようでは、良い体験につながるとは思えま せん。 オンラインにおける接客であっても考え⽅は同様です。サ イトに及ぼす影響を考慮せずにアピールしたいという想い だけで、⽬⽴たせるのではなく、あくまでもユーザーに分 かりやすく快適に⽬的を達成してもらうために接客を作り ましょう。 デザインはその場のノリで作るものではありません。⼀貫 性のあるデザインを考えることは、顧客体験を考える最初 の⼀歩なのかもしれません。
11. 11 ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential ユーザーの⾏動を促す導線       でできること
12. 12 ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential ユーザーの⾏動を促す導線 状況にあわせて、欲しい時に欲しい情報を提供する
13. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential よくある質問が特定できている場合、ユーザーに問い合わせの導線や 回答を探させるのは得策ではありません。 その場でユーザーのペインを解消（回答への導線）できることは、問 い合わせ数を減らすことができるサービス提供者側のメリットよりも 価値があり、その積み重ねはユーザーの体験向上につながります。 ☝ POINT よくある質問の該当ページに、回答につながる 質問リストを⽤意してみましょう ユーザーの⾏動を促す導線 • どのタイミングでどのように伝えるかが重要です。ユーザーの ⾏動を阻害しないことを意識してください。 GOOD
14. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential GOOD BAD よくある質問であってもトッ プページや閲覧しているペー ジで必要のない情報であれば ノイズになる可能性がありま す。 閲覧しているページに関連す るよくある質問を配信するの は有効であると⾔えます。 最初から表⽰するのではなく 滞在時間が⻑い or ページ下部 までスクロールという条件で 表⽰させるとよいでしょう。
15. 15 ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential ユーザーの⾏動を促す導線 ユーザーの⾏動⼼理を先読みし、最適なシナリオを提供する
16. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential オンライン相談∕⾯談などの対⾯コミュニケーションが発⽣する場 合、障壁をできるだけ取り除く必要があります。 内容を伝えるだけでなく、どんな状況で、どういう⼈が対応するのか といったような情報を事前に伝えておくことのがよいでしょう。 対応者の写真や名前を⽤いるのは、オンラインの中でも「⼈」を感じ ることができるので、信頼につながり、効果的だと⾔えます。 ☝ POINT ユーザーの⼼理的なハードルをできるだけ下げ ることを意識しましょう ユーザーの⾏動を促す導線 • 内容に沿うのはもちろんですが、いわゆる素材と感じるような ⼈ではなく、実際の担当者を使⽤すると良いでしょう。 GOOD
17. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential イメージ画像を利⽤すること は重要ですが、コンテキスト にあった画像を利⽤するよう にしましょう。 クリック後にどうなるか想起 できるような説明や画像を⽤ いることで、ユーザーは安⼼ して⾏動することができるよ うになります。 BAD GOOD サービス内容が理解できるこ とと、誰が対応してくれるか が想起できるだけで、ユー ザーの⼼理的な障壁は低くな ります。
18. 18 ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential ユーザーの⾏動を促す導線 ユーザーの⽬的を把握して、⾏動まで⾒据える
19. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential オンライン・オフライン限らず、イベントなどを実施する際、ユー ザーに、「いま」が開催前・開催中・開催後のどの状態であるかを伝 えましょう。その状況に合わせた提案をすることで、期待値をコント ロールした状態で、誘導先のコンテンツを閲覧してもらうことができ ます。 状況を把握し、判断してもらい、⾏動してもらうことを意識しましょ う。 ☝ POINT いまの状況を認識してもらい、状況に合わせた 案内をするよう意識しましょう ユーザーの⾏動を促す導線 • 時間軸がはっきりしている施策は、状況に合わせたコンテンツ への誘導を意識しましょう。 GOOD
20. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential BAD さらに、ユーザーの⾏動を⾒ 据え、⽬的を達成するための 導線を設置しています。 視聴へとつながる導線を設置 し、ユーザーの⽬的を完遂で きるようにしましょう。 現在の状況といつまでその状 況が続くかを明⽰していま す。 どういう状況かを伝える点で はよいですが、いまのままで は単なる情報でしかありませ ん。 GOOD
21. 21 ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
22. 22 ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential アンケートのご協⼒のお願い アンケート結果は ࠓޙͷίϯςϯπ࡞੒ͷࢀߟʹ͍͖ͤͯͨͩ͞·͢ɻ Ξϯέʔτʹճ౴͢Δ 回答時間⽬安：2ʙ3分 https://support.karte.io/post/3Q8xNVoYmttIGmsB9fVqg5#kartedesign2