KPI から生まれるアクセシビリティ
•
3 likes•1,990 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to KPI から生まれるアクセシビリティ
Similar to KPI から生まれるアクセシビリティ (20)
More from Yusuke Goto
More from Yusuke Goto (20)
KPI から生まれるアクセシビリティ
- 1. KPI から⽣まれる アクセシビリティ 株式会社サイバーエージェント 五藤 佑典 〜 Story-Assured Design のキッカケ 〜 2019.03.08 CA11Y #1 〜アクセシビリティはじめて物語〜 LT
- 2. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築
- 3. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築
- 4. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築
- 12. New Device チーム あらゆるデバイスに AbemaTV を展開するための技術を 提供するチーム • AbemaTV 開発本部が既存で開発技術を持っていない領域を対象 • スマートスピーカー∕VUI デバイス • xR • 家庭⽤テレビ • セットトップボックス • etc...
- 13. New Device チーム あらゆるデバイスに AbemaTV を展開するための技術を 提供するチーム • AbemaTV 開発本部が既存で開発技術を持っていない領域を対象 • スマートスピーカー∕VUI デバイス • xR • 家庭⽤テレビ • セットトップボックス • etc...
- 14. 家庭⽤テレビ AbemaTV リモコンボタン付き Panasonic VIERA 発売中
- 19. カーソル カーソルの特性による違い スマホアプリ 指 PC アプリ マウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル
- 20. カーソル 指やマウス・カーソルは現在フォーカスされている要素から 物理的距離が離れた要素でも⼀度で選択が可能 スマホアプリ 指 PC アプリ マウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル
- 21. 1
- 22. 2
- 23. カーソル スペーシャル・ナビゲーション・カーソルは基本的には⼗字キーにより 隣合う要素にフォーカスを移しながら、順番に離れた要素に近づいていきます スマホアプリ 指 PC アプリ マウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル
- 24. 1
- 25. 2
- 26. 3
- 27. 4
- 28. 5
- 29. 6
- 30. 7
- 31. 8
- 32. カーソル スペーシャル・ナビゲーション・カーソルは基本的には⼗字キーにより 隣合う要素にフォーカスを移しながら、順番に離れた要素に近づいていきます スマホアプリ 指 PC アプリ マウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル キーボードのタブキーで Web ブラウジングしているような 慣れないはがゆさ
- 34. どうしよう？
- 37. Google I/O 2018
- 38. 動画技術エバンジェリスト活動の⼀環で Google I/O 2018 にて 動画技術について情報収集中に…
- 39. An accessible process for inclusive design
- 43. Accessible Process 従来は アクセシビリティは 後に考えていた 1. ビジュアルデザイン 2. アクセシビリティどうする？Google の Accessibility Expert の⼈
- 44. Accessible Process Google’s example of an accessible process for inclusive design 1. プロダクトビジョン 2. アクセシビリティ 3. ビジュアル
- 45. Accessible Process Google’s example of an accessible process for inclusive design 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ 3. ビジュアル
- 46. Accessible Process Google’s example of an accessible process for inclusive design 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ = それをどのようにユーザーに届けるか 3. ビジュアル
- 47. Accessible Process Google’s example of an accessible process for inclusive design 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ = それをどのようにユーザーに届けるか 3. ビジュアル = 最終的な成果物は何か
- 48. Accessible Process Google’s example of an accessible process for inclusive design 1. プロダクトビジョン = Why? 2. アクセシビリティ = How? 3. ビジュアル = What? ⾃分の中でこう置き替えると 各プロセスにおける アウトプットの定義がしっくりきた
- 49. Accessible Process Google’s example of an accessible process for inclusive design 1. プロダクトビジョン = Why? 2. アクセシビリティ = How? 3. ビジュアル = What? （「Why? How? What?」の順で 物事を考えるのは 割と万能だと思ってる）
- 50. Accessible Process Google’s example of an accessible process for inclusive design 1. プロダクトビジョン = Why? 2. アクセシビリティ = How? 3. ビジュアル = What? とにもかくにも価値を届ける ⼿段（アクセシビリティ）を 考えないことには ユーザーに価値は届かない
- 52. そしたら、KPI が⽣まれた プロダクトデザインの KGI と KPI KGI 多くのコンテンツに出会う機会 KPI コンテンツに出会うまでの リモコンボタンを押す回数
- 53. そしたら、KPI が⽣まれた プロダクトデザインの KGI と KPI KGI 多くのコンテンツに出会う機会 KPI コンテンツに出会うまでの リモコンボタンを押す回数 ユーザーがコンテンツに出会うまでの ストーリー１つ１つのパフォーマンスを計測する
- 55. KPI をどう追う？
- 56. プロダクトデザインの KPI プロダクトデザインの KGI と KPI KGI 多くのコンテンツに出会う体験 KPI コンテンツに出会うまでの リモコンボタンを押す回数
- 57. プロダクトデザインの KPI プロダクトデザインの KGI と KPI KGI 多くのコンテンツに出会う体験 KPI コンテンツに出会うまでの リモコンボタンを押す回数 数えよう
- 59. 数えた
- 62. 数えた
- 66. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例：A/B 2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、 欲しい情報に辿り着きづらずアクセシブルじゃないです
- 67. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例：A/B 2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、 欲しい情報に辿り着きづらずアクセシブルじゃないです 何がサービスにとって ⼤事なのかが明確
- 68. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例：A/B 2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、 欲しい情報に辿り着きづらずアクセシブルじゃないです こういうレビューはありがちだけど、 成果物（What）の話なので致命的ではない
- 69. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例：A/B 2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、 欲しい情報に辿り着きづらずアクセシブルじゃないです 対して、この指摘は 致命的な問題を防いでいる
- 81. アクセシビリティは特別ではない ⾃分たちの価値をどうすればユーザーに届くのか、 ただそれだけのこと 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ = それをどのようにユーザーに届けるか 3. ビジュアル = 最終的な成果物は何か
- 84. まずは、みんなで考えればいい • KPI ならチーム全員の問題 • ＝ アクセシビリティも チーム全員の問題 • デザイナー、エンジニアだ けが悩む必要はない • 集合知：全員で解決する
- 90. 終わりに • KPI によりアクセシビリティが何なのかを 常に意識してプロダクト開発に臨むことができた • 今後も気付きがあれば、更にインクルーシブに サービスを展開するための下地になった • 媒体が変われば何がアクセシブルかも 変わるけど、媒体問わず臨む姿勢を得た