Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

KPI から生まれるアクセシビリティ

768 views

Published on

The presentation describes how to design a product's accessibility before its visual design and how to commit to KPIs for accessible user stories as a team.

Published in: Design
  • Be the first to comment

KPI から生まれるアクセシビリティ

  1. 1. KPI から⽣まれる
 アクセシビリティ 株式会社サイバーエージェント 五藤 佑典 〜 Story-Assured Design のキッカケ 〜 2019.03.08 CA11Y #1 〜アクセシビリティはじめて物語〜 LT
  2. 2. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を
 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに
 コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、
 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築
  3. 3. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を
 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに
 コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、
 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築
  4. 4. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を
 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに
 コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、
 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築
  5. 5. 後ろに控えていて
 ドキドキしています 💓
  6. 6. https://www.amazon.co.jp/dp/B07CJ5TLK2 Atomic Design
 堅牢で使いやすいUIを効率良く設計する
  7. 7. AbemaTV とアクセシビリティ
  8. 8. AbemaTV とアクセシビリティ
  9. 9. AbemaTV とアクセシビリティ
  10. 10. New Device チーム あらゆるデバイスに AbemaTV を展開するための技術を
 提供するチーム • AbemaTV 開発本部が既存で開発技術を持っていない領域を対象 • スマートスピーカー∕VUI デバイス • xR • 家庭⽤テレビ • セットトップボックス • etc...
  11. 11. New Device チーム あらゆるデバイスに AbemaTV を展開するための技術を
 提供するチーム • AbemaTV 開発本部が既存で開発技術を持っていない領域を対象 • スマートスピーカー∕VUI デバイス • xR • 家庭⽤テレビ • セットトップボックス • etc...
  12. 12. 家庭⽤テレビ AbemaTV リモコンボタン付き Panasonic VIERA 発売中
  13. 13. 『とにかくリモコンでボタンを 
   押す回数を少なくしてほしい』
  14. 14. アクセシビリティの低さ スマートフォンに慣れた現代に⽣きる私達は、
 リモコンでボタンを何回も押さないと
 欲しい情報まで辿り着けないテレビの UI に
 アクセシビリティの低さを感じている
  15. 15. テレビの UI になぜ
 アクセシビリティの低さを感じるのか
  16. 16. カーソル カーソルの特性による違い スマホアプリ 指 PC アプリ マウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル
  17. 17. カーソル 指やマウス・カーソルは現在フォーカスされている要素から
 物理的距離が離れた要素でも⼀度で選択が可能 スマホアプリ 指 PC アプリ マウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル
  18. 18. 1
  19. 19. 2
  20. 20. カーソル スペーシャル・ナビゲーション・カーソルは基本的には⼗字キーにより
 隣合う要素にフォーカスを移しながら、順番に離れた要素に近づいていきます スマホアプリ 指 PC アプリ マウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル
  21. 21. 1
  22. 22. 2
  23. 23. 3
  24. 24. 4
  25. 25. 5
  26. 26. 6
  27. 27. 7
  28. 28. 8
  29. 29. カーソル スペーシャル・ナビゲーション・カーソルは基本的には⼗字キーにより
 隣合う要素にフォーカスを移しながら、順番に離れた要素に近づいていきます スマホアプリ 指 PC アプリ マウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル キーボードのタブキーで
 Web ブラウジングしているような
 慣れないはがゆさ
  30. 30. 『とにかくリモコンでボタンを 
   押す回数を少なくしてほしい』
  31. 31. どうしよう?
  32. 32. Google I/O 2018
  33. 33. 動画技術エバンジェリスト活動の⼀環で
 Google I/O 2018 にて
 動画技術について情報収集中に…
  34. 34. An accessible process for inclusive design
  35. 35. アクセシビリティを
 先にデザインするプロセス
 との出会い
  36. 36. Accessible Process 従来は
 アクセシビリティは
 後に考えていた 1. ビジュアルデザイン 2. アクセシビリティどうする?Google の Accessibility Expert の⼈
  37. 37. Accessible Process Google’s example of an accessible process
 for inclusive design 1. プロダクトビジョン 2. アクセシビリティ 3. ビジュアル
  38. 38. Accessible Process Google’s example of an accessible process
 for inclusive design 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ 3. ビジュアル
  39. 39. Accessible Process Google’s example of an accessible process
 for inclusive design 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ = それをどのようにユーザーに届けるか 3. ビジュアル
  40. 40. Accessible Process Google’s example of an accessible process
 for inclusive design 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ = それをどのようにユーザーに届けるか 3. ビジュアル = 最終的な成果物は何か
  41. 41. Accessible Process Google’s example of an accessible process
 for inclusive design 1. プロダクトビジョン = Why? 2. アクセシビリティ = How? 3. ビジュアル = What? ⾃分の中でこう置き替えると
 各プロセスにおける
 アウトプットの定義がしっくりきた
  42. 42. Accessible Process Google’s example of an accessible process
 for inclusive design 1. プロダクトビジョン = Why? 2. アクセシビリティ = How? 3. ビジュアル = What? (「Why? How? What?」の順で
 物事を考えるのは
 割と万能だと思ってる)
  43. 43. Accessible Process Google’s example of an accessible process
 for inclusive design 1. プロダクトビジョン = Why? 2. アクセシビリティ = How? 3. ビジュアル = What? とにもかくにも価値を届ける
 ⼿段(アクセシビリティ)を
 考えないことには
 ユーザーに価値は届かない
  44. 44. アクセシビリティを考えた ⾃分たちのプロダクトビジョンとアクセシビリティ プロダクトビジョン 多くのコンテンツに出会う体験を提供する アクセシビリティ リモコンボタンを押す回数が最⼩限で
 コンテンツに出会うことができる
  45. 45. そしたら、KPI が⽣まれた プロダクトデザインの KGI と KPI KGI 多くのコンテンツに出会う機会 KPI コンテンツに出会うまでの
 リモコンボタンを押す回数
  46. 46. そしたら、KPI が⽣まれた プロダクトデザインの KGI と KPI KGI 多くのコンテンツに出会う機会 KPI コンテンツに出会うまでの
 リモコンボタンを押す回数 ユーザーがコンテンツに出会うまでの
 ストーリー1つ1つのパフォーマンスを計測する
  47. 47. アクセシビルなユーザーストーリー KPI を追うことで
 アクセシブルなユーザーストーリーのデザインに
 コミットすることになる
  48. 48. KPI をどう追う?
  49. 49. プロダクトデザインの KPI プロダクトデザインの KGI と KPI KGI 多くのコンテンツに出会う体験 KPI コンテンツに出会うまでの
 リモコンボタンを押す回数
  50. 50. プロダクトデザインの KPI プロダクトデザインの KGI と KPI KGI 多くのコンテンツに出会う体験 KPI コンテンツに出会うまでの
 リモコンボタンを押す回数 数えよう
  51. 51. 数えた
  52. 52. 数えた
  53. 53. Story-Assured Design
  54. 54. Story-Assured Design ユーザーストーリーを先にデザインし、
 ストーリーを保証しながら⾒た⽬をデザインしていく
 ワークフローとして体系化した https://ygoto3.com/posts/story-assured-design/
  55. 55. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例:A/B 2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、
 欲しい情報に辿り着きづらずアクセシブルじゃないです
  56. 56. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例:A/B 2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、
 欲しい情報に辿り着きづらずアクセシブルじゃないです 何がサービスにとって
 ⼤事なのかが明確
  57. 57. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例:A/B 2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、
 欲しい情報に辿り着きづらずアクセシブルじゃないです こういうレビューはありがちだけど、
 成果物(What)の話なので致命的ではない
  58. 58. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例:A/B 2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、
 欲しい情報に辿り着きづらずアクセシブルじゃないです 対して、この指摘は
 致命的な問題を防いでいる
  59. 59. どんなレビューでも
 真っ先に指摘すべきは
 致命的なもの
  60. 60. KPI が存在していることにより
 「お互いが考える『良い』をぶつけ合う」のではなく、
 何がプロダクトビジョンを実現するデザインかを
 誰もが同じ⽬線でレビューできる
  61. 61. でも、考えられる
 ユーザーストーリーは
 いくつもあって、
 全部数えるのは⼤変だ
  62. 62. プライマリーストーリーメソッド 各ページで
 ⼀番重要な(プライマリーな)
 ユーザーストーリーを設定 とりあえず各ページ
 1ストーリーだけ
 数えるところから始めた
  63. 63. プライマリーストーリーメソッド ○ 導⼊しやすい。
 ユーザーストーリーを明⽰的に
 考えることに慣れていないチーム にもオススメ
  64. 64. プライマリーストーリーメソッド 慣れてきたら
 複数のストーリーも数える
  65. 65. ユーザーが⼀番やりたいことは
 ⼀番リモコンボタン押さなくても
 できるようにしたいよね
  66. 66. プライマリーストーリー セカンダリーストーリー
  67. 67. プライマリーストーリー セカンダリーストーリー 迷ったときに実際の数字を⾒て
 優先度を変更することも
  68. 68. アクセシビリティは特別ではない ⾃分たちの価値をどうすればユーザーに届くのか、
 ただそれだけのこと 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ = それをどのようにユーザーに届けるか 3. ビジュアル = 最終的な成果物は何か
  69. 69. アクセシビリティは特別ではない それでもアクセシビリティを考えるのは難しい
  70. 70. アクセシビリティは特別ではない それでもアクセシビリティを考えるのは難しい どういう状況の⼈が世の中にいるのか
 知ることも重要だし
 たぶん⼀番必要なのは想像⼒
  71. 71. まずは、みんなで考えればいい • KPI ならチーム全員の問題 • = アクセシビリティも
 チーム全員の問題 • デザイナー、エンジニアだ けが悩む必要はない • 集合知:全員で解決する
  72. 72. アクセシビリティは特別ではない ⾃分たちの価値をどうすればユーザーに届くのか、
 ただそれだけのこと • ターゲットにしている市場に
 多数パターンの事情が存在している状態が普通であれば
 価値の提供⽅法にもバリエーションが必須になる
  73. 73. アクセシビリティは特別ではない ⾃分たちの価値をどうすればユーザーに届くのか、
 ただそれだけのこと • 例えば、市場が多⾔語を前提にしていれば、
 ⾔語ディクショナリーを当然のように⽤意する
  74. 74. アクセシビリティは特別ではない ⾃分たちの価値をどうすればユーザーに届くのか、
 ただそれだけのこと • たぶん僕らも状況が変われば異なる視点で
 アクセシビリティを考えなければ⽣き残れなくなる
  75. 75. 終わりに • KPI によりアクセシビリティが何なのかを
 常に意識してプロダクト開発に臨むことができた • 今後も気付きがあれば、更にインクルーシブに
 サービスを展開するための下地になった • 媒体が変われば何がアクセシブルかも
 変わるけど、媒体問わず臨む姿勢を得た
  76. 76. 五藤 佑典 YUSUKE GOTO ありがとうございました https://ygoto3.com/ @ygoto3_

×