UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
13 likes2,625 views
2014年9月27日 (土) に開催したセミナーイベント UX-Sapporo x CSS Nite で講演した「仮説で進めるUXデザイン Hypothesis-based Design within UX Design」のスライドです。 UX-Sapporo × CSS Nite in SAPPORO「UXスペシャル」が終了しました | CSS Nite in SAPPORO http://cssnite-sapporo.jp/news/post-347.html
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
- 1. 仮説で進めるUXデザイン Hypothesis-based Design within UX Design 坂本貴史 UX Sapporo x CSS Nite #ux_sapporo by Stuart Rankin 2014.9.27
- 4. IAとUX UXデザインのキーファクター ケーススタディ カスタマージャーニーマップ
- 5. グラフィックデザイナー出身 ネットイヤーグループ参画 HCD-Net 評議員 OpenUM プロジェクト発足 寄稿・講演多数 著書『IAシンキング』ほか 坂本貴史 @bookslope
- 10. 具現化 表層 骨格 構造 要件 戦略 ビジュアルデザイン ナビゲーション デザイン インターフェース デザイン 情報デザイン インタラクション デザイン 機能仕様 情報アーキテクチャ コンテンツ要求 ユーザーニーズ サイトの目的
- 11. by Sgkh
- 12. 情報は少ないほどきちんと処理される 読むことと理解することは同じではない 一度に覚えられるのは4つだけ 目標に近づくほど「ヤル気」が出る データより物語のほうが説得力がある
- 14. IA thinking to make the world a better place IA思考を通じて、世界をより良くする World IA Day 2014 The Information Architecture Institute
- 15. koboを開封 YouTube
- 17. What are key success factors? サービスデザインタイムラインデザインパターン
- 19. プロダクトデザインサービスデザイン 広告商品 ウェブサイト CMS サービスブループリント カスタマージャーニーマップ ステークホルダーマップ
- 21. サービスデザインアクティビティデザインインタラクションデザイン サービス自体の価値定義サービスを実現のための シナリオ定義 インターフェースの検討 戦略策定UXジャーニーマッププロトタイピング
- 23. ニーズや目的対応サービス 心地良く過ごしたいアロマの香り どこでも仕事がしたい 支払いを手早くしたい Wi-Fi 環境 クレジットカード支払い
- 25. 87.2% 4.0% 外出先や移動中での利用 D2C, マルチデバイス利用動向調査, 2013/05
- 26. 81.7% 8.5% 情報をじっくり調べる時 D2C, マルチデバイス利用動向調査, 2013/05
- 27. iPhoneの利用時間帯 Pocket Trend, 2011 早朝通勤 帰宅時就寝 自宅
- 28. © UX INSPIRATION! http://uxxinspiration.com/2014/02/ux-timeline/
- 29. First Time User Experiences http://firsttimeux.tumblr.com/
- 32. モバイルデザインのヒント 必要十分な表現に留める ちら見しやすいようにデザインする 階層を深くしない 自然な形で接点を見せる 途中で操作を止めても同じ事ができる 時間軸を使って情報を整理する
- 34. ジェスチャによる操作 タップドラッグ ボタンを押す動作やアイテ ムの選択などで頻繁に用い られます 画面および要素内を垂直方 向や水平方向にスクロール する際に用いられます フリック/スワイプ 複数の画面や要素をまたが る場合のページ送りなどに 用いられます
- 35. はじめに操作方法がわからないため、マニュアルや説 明を読む必要がある。 メニューが常時表示されないため、記憶だけを頼りに する必要がある。 動作の違いで結果が異なる場合、フィードバックが得ら れにくい(動かす速さの違いなど)。 コンテンツに集中しているため、画面上のアラートが見 落とされがちになる。
- 36. モバイルにおけるデザインパターン デバイスエコシステムIAパターン デバイス単位（PCとタブレットと モバイルなど）の組み合わせにより、 利用順序や使い方を定義します コンテンツ単位（画面やファイル） の組み合わせにより、画面フローや コンテンツの表示順序を定義します UIパターン コンポーネント単位の組み合わせ により、表示スタイルや表示方法（振 る舞い）などを定義します
- 37. First Time User Experiences http://firsttimeux.tumblr.com/
- 39. ユーザビリティテストで問題点を抽出し修正すること (治療) に依存しすぎるのではなく、 設計/開発の段階でユーザビリティ上の問題を あらかじめ潰しておくこと (予防) が大事 Usability testing myths Rolf Molich
- 43. Axure: Interactive Wireframe Software & Mockup Tool http://www.axure.com/
- 44. Justinmind: Interactive wireframes for web and mobile http://www.justinmind.com/
- 45. POP - Prototyping on Paper | Mobile App Prototyping Made Easy https://popapp.in/
- 46. Axure: Interactive Wireframe Software & Mockup Tool http://www.axure.com/
- 47. Flinto ‒ iPhone, iPad and Android Prototyping https://www.flinto.com/
- 48. Prott - Rapid prototyping tool. Now gets an app. https://prottapp.com/
- 49. Placeit: Free Screenshot App Marketing Tool & Templates https://placeit.net/
- 50. コンセプトが大事、というと抽象的すぎるけれど、 「ユーザーにどのようなストーリーを体験してほしいか」と 言えば想像がしやすいですね。 IAシンキング Takashi Sakamoto
- 51. Customer Journey Mapping アプローチフォーマット
- 53. 定量 カスタマージャーニー 分析
- 54. Webサイト分析カスタマージャーニー分析 Webサイト セッション単位 流入フロー・サイト構造 顧客接点全体 ユーザー単位 ユーザー行動プロセス・LTV
- 55. 定性 UXマップ
- 56. AS IS TO BE 現状把握 課題にフォーカス 組織横断の課題把握 企画（ビジョン） ソリューション クロスチャンネルの提案
- 57. 要求事項を整理するためのツール ユーザー行動の可視化 顧客接点の俯瞰 関係者と共有 調査などの準備が必要 課題がフォーカスできない 文書を作ることが目的
- 59. ケーススタディ ユーザーフローとシステムフロー オンラインとオフライン アクティビティシナリオ
- 60. ステージ発見登録利用（提供） 対応 感情曲線 患者 医者 フロー
- 61. ステージ利用前利用開始時初回利用時継続利用時 アクション コンテンツ機 能 顧客の課題 ビジネスの課 題 改善点
- 62. 朝（午前中） 昼（日中） 晩（夕方～深夜） ステージ ストーリー 感情曲線 デバイス環境 要求事項の整理
- 63. ワークショップ 3ステップの横軸（利用前・中・後） 行動と感情（思考・心情） 課題とソリューション
- 65. 参加前 アクション 感情 感情曲線 参加中参加後
- 67. 利用前 アクション 感情 感情曲線 利用中利用後
- 68. ジャーニーマップに、網羅性は重要ではない。 3つを抽出することで、新たな課題を見いだすことができる。 クロスチャンネルタッチポイントマルチスクリーン Hypothesis-based Design within UX Design Takashi Sakamoto
- 69. What this person do you? ミニワークショップ
- 70. What this person do you? GoPro
- 71. 演習 行動の順番を、横軸に整理してください 動画を見たうえで、ユーザーの行動ステップを横軸（ステージ）に整理してください。 あらかじめ4列用意しているため、行動を4つに分けて名称をつけてください。 行動と感情を書いてください ステージごとの行動（～をする）を行動欄に記入し、そのとき「この人が思うであろ う」気持ちや心情・思考について感情欄に記入してください。 課題を見つけ、解決策を書いてください 行動欄および感情欄から、ここは解決すべき課題だと感じた箇所に印をつけて、その解決策 を最下部の解決欄に記入してください。 STEP 1 STEP 2 STEP 3 5 min 5 min 5 min
- 72. Thinking… ミニワークショップ 5 min
- 73. WORKSHEET UX Sapporo x CSS Nite 2014.09.27 ステージ 行動 感情 感情 曲線 解決案
- 74. WORKSHEET UX Sapporo x CSS Nite 2014.09.27 ステージ 行動 感情 感情 曲線 解決案 来店商品を探す会計退店 ・商品棚に行き、目的の 商品を探す ・商品を持ち、レジに向 かう ・コンビニに入る ・商品を渡し、財布を開 ける ・小銭を取り出し、お金 を渡し、商品を受取る ・商品を持って、店の外 に出る ・喉が乾いたので、コン ・ドリンクは奥のほうに ・小銭出すのが面倒… ・搬出する人が邪魔で出 ビニで水でも買おうあったはず… にくい… ・よく売れるドリンク類 は入り口付近に陳列する ・近くのコンビニの場所 を知らせてくれる ・スイカなどの電子マネー での支払いができる ・搬入・搬出口を一般客 とは別にする
- 75. カスタマージャーニーマップを作ることは、ユーザー行動を基点 にしたシナリオを俯瞰することです。 そのため、自分の担当領域を大きく越えたところの課題を 発見することにもつながります。 Hypothesis-based Design within UX Design Takashi Sakamoto
- 76. IAとUX UXデザインのキーファクター ケーススタディ カスタマージャーニーマップ
- 77. カスタマージャーニーマップを使うことで、 顧客がどのようにサービスを利用するか仮説立て、 チャネル横断・組織横断の課題を解決する取り組み Hypothesis-based Design within UX Design Takashi Sakamoto
- 78. by Stuart Rankin ありがとうございました Thank you! Hypothesis-based Design within UX Design Takashi Sakamoto @bookslope bookslope@gmail.com