uxデザインの前にすること - ux catchup
TRANSCRIPT
15/5/2015 UX CatchUp - Osaka / Kazuki Yamashita - Designed by IMPATH
の前にすることUX Design
山下 一樹
Web、アプリの設計・開発 プロトタイプ、UIの設計 UXデザインによる改善
UX Design
UX Design 関わる人が共創しながら
良いUXを設計すること
理解する 改善する
ユーザーを知る
Human: User
HCD
ユーザーを知る
理解する
改善する
ユーザーシナリオアクティングアウトカスタマージャーニーマップ
ペルソナ
ユーザーインタビュー
エスノグラフィ
上位下位分析法
オブザベーション
プロトタイピングユーザーテストヒューリスティック評価
HCD
手法によるプロセスからは
「新たな発見」はあるが、
” が、
カタチにするまでが難しい。
クライアントから要件が出ない
制作プロセスを阻むシーン①
クライアントから要件が出ない
「まずペルソナを定義しましょう。
そしてユーザーのコンテクストを洗い出し…
おそらく進みません
要件のためのプロトタイピング
いきなり ワイヤーフレーム
ユーザー・環境の理解
ユーザー調査
コンテキスト
ペルソナ定義
ユーザーのゴールと機能
メンタルモデル
エクスペリエンスマップ
イメージ化
画面遷移
UI ワイヤーフレーム
プロトタイピング機能要件
UX Design のワークフロー
ワイヤーフレームは本来、後の工程です
そもそもクライアントの要件とは
「アプリやアプリ！
「
「カレンダー風にしたら毎日やるんちゃうか
「パッと出してシュッとする動きで
みたいな、なんか楽しそうなやつ
それでもカタチにしてみることで気づきが生まれる
- モノクロ＋1色
⇒ 色が入るとイメージや議論を発散させます
- 制作時間をかけないパワポや Keynote で十分
⇒ 作っては再作成し議論・検証を繰り返すため
- 遷移など動きを表現
- 実際のサイジングと実際に近いテキストを入れる
⇒ 具体的な利用中の体験を再現します
ワイヤーフレームのポイント
プロトタイピングにより話が前に進みます
ユーザー体験の疑似体験ができます
早期に失敗に気付きやすくなります
要件が出なければ
いきなり ワイヤーフレーム
要件が出てきたと思ったら発散する
制作プロセスを阻むシーン②
「男女でも両方いけそうな色で
「フラットデザインでしょ、でも使いやすく
「カスタマイズできる機能は絶対に要るよ
「通知機能があれば便利やね
彼らはユーザーではありません
あれこれ言わせないために
ガイドライン・ステートメントをつくる
Source: Google design guidelines
デザインのための「スタイルガイド」
- デザインの原則（ex. 大胆で力強く）
- カラー、タイポグラフィ、ワーディング
- レイアウトパターン
- アクセシビリティ
- Do / Don’t
スタイルガイドに含まれるもの
デザインのための「スタイルガイド」
Source: Apple iOS Human Interface Guidelines
サービス・アプリのための「ステートメント」
アプリ定義ステートメント
各項目の例はあくまでも文例であり実際のサービスとは異なります
1. アプリのステートメント このアプリの一文で表す説明、アジャイルやリーンスタートアップでも推奨しているピッチ形式で（ ）を埋めると完成する。
ex) （Google）というサービスは、 （インターネット上のあらゆる情報をすぐに検索しマッチしたサイトを表示）したい （インターネット世界ユーザー）向けの、 （検索エンジンサービス）である。 ユーザーは（無料で利用かつ最速で結果表示）ができ、 （Yahoo!）とは違って、 （リッチスニペットやオーサーランクを基準に採用した、検索者に最も有益だと思われるコンテンツを表示する機能）が備わっていることが特長である。
2. ターゲット 年代別、性別ではなく、職業属性や地域など具体的なセグメンテーションが望ましい。
ex) 研究者、医学系のポストドクター
3. 利用シーン ユーザーはアプリをいつ、どのように使われるのか利用シーンを想定する。
ex) ユーザーの多くはスマートフォンを利用しており、通勤時やちょっとした待ち時間でアプリを起動し利用する。またユーザーは、日中はオフィスで ノートPC を利用する仕事スタイルであり、Webブラウザでインターネットにアクセスできる環境にある。
（サービス名）というサービスは、 （潜在的なニーズを満たし、抱えている課題を解決）したい （ターゲット）向けの、 （アプリのカテゴリー）である。 ユーザーは（対価に見合う価値）ができ、 （競合サービス）とは違って、 （差別化要素）が備わっていることが特長である。
4. 利用シーンを踏まえた特徴的なもの 利用ユーザーと利用シーンに最適な機能や特徴はどういったものがあるか。ここではすべての機能を検討するのではなく、なぜその機能や特徴がアプリに必要なのかに絞る。
ex) スマートフォンと PC を行き来するユーザーのために、スマートフォンでチェックした内容を PC でも持続して閲覧できる機能が必須である。スマートフォンでは少しの時間の合間でチェックする程度のため、検索画面はシンプルかつ入力は最小限にとどめる必要がある。スマートフォン用とPC用の違いを明確化する。
5. ユーザー数の拡散ポイント アプリのユーザーが増える要素は何か。ここでは販売広告やチャネル拡大といったマーケティング要素ではなく、アプリで実現し得るポイントを検討する。
ex) ユーザーが利用するためにはユーザー登録が必要であるが、互いをフォローし合い、それを数値で可視させることでフォロー度合いを確かめることができる。フォロー結果が周囲にも通知されるため、フォローを誘発させる。また、ユーザー属性が近いユーザーのフォローをリコメンドする機能もある。登録されることが第一のコンバージョンであることから、ユーザー登録のステップは最短である必要がある。
6. ビジネス（キャッシュ）ポイント アプリの課金ポイントはどこにあるか。そのポイントをゴールとし、ユーザーが迷わずにたどり着けるフロー検討する。
ex) 登録は無料であり、機能の大部分が利用できる。データを保存する容量には限りはないが、3か月経過するとデータは消失するため、データを保持したいユーザーは月額料金を支払うことにより、1年単位で継続してデータを保持することができる。月額料金を支払わないでデータを保持するには、データを手動でコピーしそれぞれファイルに保存することはできるが、ユーザーにとってその手順が面倒であり、データ保持サービスの対価はユーザーに有益である。
7. このアプリでは将来においても実装しないこと アプリはリリース時、または将来的にユーザーの要望などにより機能を多く望まれることがある。ただしアプリのステートメントから離脱した機能の安易な実装は、設計思想から外れていくことを意味する。ここでは望まれるであろう機能であっても、ステートメントを一貫するために実装しない機能を定義しておく。
ex) ユーザーが検索条件を定義し履歴などで保持しておくカスタマイズ機能は実装しない。これは検索操作を1～2単語で検索しても、最もマッチした検索結果が表示できるというステートメントにより、シンプルな設計で検索から結果参照までの操作を統一するためである。また、過去に検索した条件を保持しておく必要性は低く、参照履歴があるため、これと重複することになる。
サービス・アプリのための「ステートメント」
アプリ定義ステートメント
各項目の例はあくまでも文例であり実際のサービスとは異なります
1. アプリのステートメント このアプリの一文で表す説明、アジャイルやリーンスタートアップでも推奨しているピッチ形式で（ ）を埋めると完成する。
ex) （Google）というサービスは、 （インターネット上のあらゆる情報をすぐに検索しマッチしたサイトを表示）したい （インターネット世界ユーザー）向けの、 （検索エンジンサービス）である。 ユーザーは（無料で利用かつ最速で結果表示）ができ、 （Yahoo!）とは違って、 （リッチスニペットやオーサーランクを基準に採用した、検索者に最も有益だと思われるコンテンツを表示する機能）が備わっていることが特長である。
2. ターゲット 年代別、性別ではなく、職業属性や地域など具体的なセグメンテーションが望ましい。
ex) 研究者、医学系のポストドクター
3. 利用シーン ユーザーはアプリをいつ、どのように使われるのか利用シーンを想定する。
ex) ユーザーの多くはスマートフォンを利用しており、通勤時やちょっとした待ち時間でアプリを起動し利用する。またユーザーは、日中はオフィスで ノートPC を利用する仕事スタイルであり、Webブラウザでインターネットにアクセスできる環境にある。
（サービス名）というサービスは、 （潜在的なニーズを満たし、抱えている課題を解決）したい （ターゲット）向けの、 （アプリのカテゴリー）である。 ユーザーは（対価に見合う価値）ができ、 （競合サービス）とは違って、 （差別化要素）が備わっていることが特長である。
4. 利用シーンを踏まえた特徴的なもの 利用ユーザーと利用シーンに最適な機能や特徴はどういったものがあるか。ここではすべての機能を検討するのではなく、なぜその機能や特徴がアプリに必要なのかに絞る。
ex) スマートフォンと PC を行き来するユーザーのために、スマートフォンでチェックした内容を PC でも持続して閲覧できる機能が必須である。スマートフォンでは少しの時間の合間でチェックする程度のため、検索画面はシンプルかつ入力は最小限にとどめる必要がある。スマートフォン用とPC用の違いを明確化する。
5. ユーザー数の拡散ポイント アプリのユーザーが増える要素は何か。ここでは販売広告やチャネル拡大といったマーケティング要素ではなく、アプリで実現し得るポイントを検討する。
ex) ユーザーが利用するためにはユーザー登録が必要であるが、互いをフォローし合い、それを数値で可視させることでフォロー度合いを確かめることができる。フォロー結果が周囲にも通知されるため、フォローを誘発させる。また、ユーザー属性が近いユーザーのフォローをリコメンドする機能もある。登録されることが第一のコンバージョンであることから、ユーザー登録のステップは最短である必要がある。
6. ビジネス（キャッシュ）ポイント アプリの課金ポイントはどこにあるか。そのポイントをゴールとし、ユーザーが迷わずにたどり着けるフロー検討する。
ex) 登録は無料であり、機能の大部分が利用できる。データを保存する容量には限りはないが、3か月経過するとデータは消失するため、データを保持したいユーザーは月額料金を支払うことにより、1年単位で継続してデータを保持することができる。月額料金を支払わないでデータを保持するには、データを手動でコピーしそれぞれファイルに保存することはできるが、ユーザーにとってその手順が面倒であり、データ保持サービスの対価はユーザーに有益である。
7. このアプリでは将来においても実装しないこと アプリはリリース時、または将来的にユーザーの要望などにより機能を多く望まれることがある。ただしアプリのステートメントから離脱した機能の安易な実装は、設計思想から外れていくことを意味する。ここでは望まれるであろう機能であっても、ステートメントを一貫するために実装しない機能を定義しておく。
ex) ユーザーが検索条件を定義し履歴などで保持しておくカスタマイズ機能は実装しない。これは検索操作を1～2単語で検索しても、最もマッチした検索結果が表示できるというステートメントにより、シンプルな設計で検索から結果参照までの操作を統一するためである。また、過去に検索した条件を保持しておく必要性は低く、参照履歴があるため、これと重複することになる。
アプリ定義ステートメント
各項目の例はあくまでも文例であり実際のサービスとは異なります
1. アプリのステートメント このアプリの一文で表す説明、アジャイルやリーンスタートアップでも推奨しているピッチ形式で（ ）を埋めると完成する。
ex) （Google）というサービスは、 （インターネット上のあらゆる情報をすぐに検索しマッチしたサイトを表示）したい （インターネット世界ユーザー）向けの、 （検索エンジンサービス）である。 ユーザーは（無料で利用かつ最速で結果表示）ができ、 （Yahoo!）とは違って、 （リッチスニペットやオーサーランクを基準に採用した、検索者に最も有益だと思われるコンテンツを表示する機能）が備わっていることが特長である。
2. ターゲット 年代別、性別ではなく、職業属性や地域など具体的なセグメンテーションが望ましい。
ex) 研究者、医学系のポストドクター
3. 利用シーン ユーザーはアプリをいつ、どのように使われるのか利用シーンを想定する。
ex) ユーザーの多くはスマートフォンを利用しており、通勤時やちょっとした待ち時間でアプリを起動し利用する。またユーザーは、日中はオフィスで ノートPC を利用する仕事スタイルであり、Webブラウザでインターネットにアクセスできる環境にある。
（サービス名）というサービスは、 （潜在的なニーズを満たし、抱えている課題を解決）したい （ターゲット）向けの、 （アプリのカテゴリー）である。 ユーザーは（対価に見合う価値）ができ、 （競合サービス）とは違って、 （差別化要素）が備わっていることが特長である。
4. 利用シーンを踏まえた特徴的なもの 利用ユーザーと利用シーンに最適な機能や特徴はどういったものがあるか。ここではすべての機能を検討するのではなく、なぜその機能や特徴がアプリに必要なのかに絞る。
ex) スマートフォンと PC を行き来するユーザーのために、スマートフォンでチェックした内容を PC でも持続して閲覧できる機能が必須である。スマートフォンでは少しの時間の合間でチェックする程度のため、検索画面はシンプルかつ入力は最小限にとどめる必要がある。スマートフォン用とPC用の違いを明確化する。
5. ユーザー数の拡散ポイント アプリのユーザーが増える要素は何か。ここでは販売広告やチャネル拡大といったマーケティング要素ではなく、アプリで実現し得るポイントを検討する。
ex) ユーザーが利用するためにはユーザー登録が必要であるが、互いをフォローし合い、それを数値で可視させることでフォロー度合いを確かめることができる。フォロー結果が周囲にも通知されるため、フォローを誘発させる。また、ユーザー属性が近いユーザーのフォローをリコメンドする機能もある。登録されることが第一のコンバージョンであることから、ユーザー登録のステップは最短である必要がある。
6. ビジネス（キャッシュ）ポイント アプリの課金ポイントはどこにあるか。そのポイントをゴールとし、ユーザーが迷わずにたどり着けるフロー検討する。
ex) 登録は無料であり、機能の大部分が利用できる。データを保存する容量には限りはないが、3か月経過するとデータは消失するため、データを保持したいユーザーは月額料金を支払うことにより、1年単位で継続してデータを保持することができる。月額料金を支払わないでデータを保持するには、データを手動でコピーしそれぞれファイルに保存することはできるが、ユーザーにとってその手順が面倒であり、データ保持サービスの対価はユーザーに有益である。
7. このアプリでは将来においても実装しないこと アプリはリリース時、または将来的にユーザーの要望などにより機能を多く望まれることがある。ただしアプリのステートメントから離脱した機能の安易な実装は、設計思想から外れていくことを意味する。ここでは望まれるであろう機能であっても、ステートメントを一貫するために実装しない機能を定義しておく。
ex) ユーザーが検索条件を定義し履歴などで保持しておくカスタマイズ機能は実装しない。これは検索操作を1～2単語で検索しても、最もマッチした検索結果が表示できるというステートメントにより、シンプルな設計で検索から結果参照までの操作を統一するためである。また、過去に検索した条件を保持しておく必要性は低く、参照履歴があるため、これと重複することになる。
4. 利用シーンを踏まえた特徴的なもの 利用ユーザーと利用シーンに最適な機能や特徴はどういったものがあるか。ここではすべての機能を検討するのではなく、なぜその機能や特徴がアプリに必要なのかに絞る。
ex) スマートフォンと PC を行き来するユーザーのために、スマートフォンでチェックした内容を PC でも持続して閲覧できる機能が必須である。スマートフォンでは少しの時間の合間でチェックする程度のため、検索画面はシンプルかつ入力は最小限にとどめる必要がある。スマートフォン用とPC用の違いを明確化する。
5. ユーザー数の拡散ポイント アプリのユーザーが増える要素は何か。ここでは販売広告やチャネル拡大といったマーケティング要素ではなく、アプリで実現し得るポイントを検討する。
ex) ユーザーが利用するためにはユーザー登録が必要であるが、互いをフォローし合い、それを数値で可視させることでフォロー度合いを確かめることができる。フォロー結果が周囲にも通知されるため、フォローを誘発させる。また、ユーザー属性が近いユーザーのフォローをリコメンドする機能もある。登録されることが第一のコンバージョンであることから、ユーザー登録のステップは最短である必要がある。
6. ビジネス（キャッシュ）ポイント アプリの課金ポイントはどこにあるか。そのポイントをゴールとし、ユーザーが迷わずにたどり着けるフロー検討する。
ex) 登録は無料であり、機能の大部分が利用できる。データを保存する容量には限りはないが、3か月経過するとデータは消失するため、データを保持したいユーザーは月額料金を支払うことにより、1年単位で継続してデータを保持することができる。月額料金を支払わないでデータを保持するには、データを手動でコピーしそれぞれファイルに保存することはできるが、ユーザーにとってその手順が面倒であり、データ保持サービスの対価はユーザーに有益である。
7. このアプリでは将来においても実装しないこと アプリはリリース時、または将来的にユーザーの要望などにより機能を多く望まれることがある。ただしアプリのステートメントから離脱した機能の安易な実装は、設計思想から外れていくことを意味する。ここでは望まれるであろう機能であっても、ステートメントを一貫するために実装しない機能を定義しておく。
ex) ユーザーが検索条件を定義し履歴などで保持しておくカスタマイズ機能は実装しない。これは検索操作を1～2単語で検索しても、最もマッチした検索結果が表示できるというステートメントにより、シンプルな設計で検索から結果参照までの操作を統一するためである。また、過去に検索した条件を保持しておく必要性は低く、参照履歴があるため、これと重複することになる。
4. 利用シーンを踏まえた特徴的なもの 利用ユーザーと利用シーンに最適な機能や特徴はどういったものがあるか。ここではすべての機能を検討するのではなく、なぜその機能や特徴がアプリに必要なのかに絞る。
ex) スマートフォンと PC を行き来するユーザーのために、スマートフォンでチェックした内容を PC でも持続して閲覧できる機能が必須である。スマートフォンでは少しの時間の合間でチェックする程度のため、検索画面はシンプルかつ入力は最小限にとどめる必要がある。スマートフォン用とPC用の違いを明確化する。
5. ユーザー数の拡散ポイント アプリのユーザーが増える要素は何か。ここでは販売広告やチャネル拡大といったマーケティング要素ではなく、アプリで実現し得るポイントを検討する。
ex) ユーザーが利用するためにはユーザー登録が必要であるが、互いをフォローし合い、それを数値で可視させることでフォロー度合いを確かめることができる。フォロー結果が周囲にも通知されるため、フォローを誘発させる。また、ユーザー属性が近いユーザーのフォローをリコメンドする機能もある。登録されることが第一のコンバージョンであることから、ユーザー登録のステップは最短である必要がある。
6. ビジネス（キャッシュ）ポイント アプリの課金ポイントはどこにあるか。そのポイントをゴールとし、ユーザーが迷わずにたどり着けるフロー検討する。
ex) 登録は無料であり、機能の大部分が利用できる。データを保存する容量には限りはないが、3か月経過するとデータは消失するため、データを保持したいユーザーは月額料金を支払うことにより、1年単位で継続してデータを保持することができる。月額料金を支払わないでデータを保持するには、データを手動でコピーしそれぞれファイルに保存することはできるが、ユーザーにとってその手順が面倒であり、データ保持サービスの対価はユーザーに有益である。
7. このアプリでは将来においても実装しないこと アプリはリリース時、または将来的にユーザーの要望などにより機能を多く望まれることがある。ただしアプリのステートメントから離脱した機能の安易な実装は、設計思想から外れていくことを意味する。ここでは望まれるであろう機能であっても、ステートメントを一貫するために実装しない機能を定義しておく。
ex) ユーザーが検索条件を定義し履歴などで保持しておくカスタマイズ機能は実装しない。これは検索操作を1～2単語で検索しても、最もマッチした検索結果が表示できるというステートメントにより、シンプルな設計で検索から結果参照までの操作を統一するためである。また、過去に検索した条件を保持しておく必要性は低く、参照履歴があるため、これと重複することになる。
発散しないために
ガイドラインに力関係は働きません
宣言によりビジョンを共有できます
全員がデザインに関わることができます
ガイドライン・ステートメントをつくる
ガイドライン・ステートメント
ワイヤーフレーム
の前にすることUX Design
UX Design 関わる人が共創しながら
良いUXを設計すること
UX Design 共創しながら
手法のやり方にこだわらない
作業や合意のサイクルをどんどん回す
迷ったときはユーザーはどうだろう？と問う
オーナーを含め、みんなで
UX Design
主役はあくまでもユーザー
Thank you