Download as PDF, PPTX
Uploaded byYusuke Goto
KPI から生まれるアクセシビリティ
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.
![[ESM_CM セミナー]小さく作って大いに役立つスマートフォンアプリ(CYCLONE)公開用](https://cdn.slidesharecdn.com/ss_thumbnails/withesmsmartphoneapplicationandcyclonecodename1000-111207215903-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
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 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. New Device チーム あらゆるデバイスにAbemaTV を展開するための技術を 提供するチーム • AbemaTV 開発本部が既存で開発技術を持っていない領域を対象 • スマートスピーカー∕VUI デバイス • xR • 家庭⽤テレビ • セットトップボックス • etc...
- 13. New Device チーム あらゆるデバイスにAbemaTV を展開するための技術を 提供するチーム • AbemaTV 開発本部が既存で開発技術を持っていない領域を対象 • スマートスピーカー∕VUI デバイス • xR • 家庭⽤テレビ • セットトップボックス • etc...
- 14. 家庭⽤テレビ AbemaTV リモコンボタン付き PanasonicVIERA 発売中
- 16.
- 17.
- 18.
- 19. カーソル カーソルの特性による違い スマホアプリ 指 PC アプリマウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル
- 20. カーソル 指やマウス・カーソルは現在フォーカスされている要素から 物理的距離が離れた要素でも⼀度で選択が可能 スマホアプリ 指 PC アプリマウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル
- 21.
- 22.
- 23. カーソル スペーシャル・ナビゲーション・カーソルは基本的には⼗字キーにより 隣合う要素にフォーカスを移しながら、順番に離れた要素に近づいていきます スマホアプリ 指 PC アプリマウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. カーソル スペーシャル・ナビゲーション・カーソルは基本的には⼗字キーにより 隣合う要素にフォーカスを移しながら、順番に離れた要素に近づいていきます スマホアプリ 指 PC アプリマウスカーソル テレビアプリ スペーシャル・ナビゲーション・カーソル キーボードのタブキーで Web ブラウジングしているような 慣れないはがゆさ
- 33.
- 34.
- 37.
- 38. 動画技術エバンジェリスト活動の⼀環で Google I/O 2018にて 動画技術について情報収集中に…
- 39. An accessible processfor inclusive design
- 40.
- 43. Accessible Process 従来は アクセシビリティは 後に考えていた 1. ビジュアルデザイン 2.アクセシビリティどうする？Google の Accessibility Expert の⼈
- 44. Accessible Process Google’s exampleof an accessible process for inclusive design 1. プロダクトビジョン 2. アクセシビリティ 3. ビジュアル
- 45. Accessible Process Google’s exampleof an accessible process for inclusive design 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ 3. ビジュアル
- 46. Accessible Process Google’s exampleof an accessible process for inclusive design 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ = それをどのようにユーザーに届けるか 3. ビジュアル
- 47. Accessible Process Google’s exampleof an accessible process for inclusive design 1. プロダクトビジョン = どんな価値を提供するのか 2. アクセシビリティ = それをどのようにユーザーに届けるか 3. ビジュアル = 最終的な成果物は何か
- 48. Accessible Process Google’s exampleof an accessible process for inclusive design 1. プロダクトビジョン = Why? 2. アクセシビリティ = How? 3. ビジュアル = What? ⾃分の中でこう置き替えると 各プロセスにおける アウトプットの定義がしっくりきた
- 49. Accessible Process Google’s exampleof an accessible process for inclusive design 1. プロダクトビジョン = Why? 2. アクセシビリティ = How? 3. ビジュアル = What? （「Why? How? What?」の順で 物事を考えるのは 割と万能だと思ってる）
- 50. Accessible Process Google’s exampleof an accessible process for inclusive design 1. プロダクトビジョン = Why? 2. アクセシビリティ = How? 3. ビジュアル = What? とにもかくにも価値を届ける ⼿段（アクセシビリティ）を 考えないことには ユーザーに価値は届かない
- 51.
- 52. そしたら、KPI が⽣まれた プロダクトデザインの KGIと KPI KGI 多くのコンテンツに出会う機会 KPI コンテンツに出会うまでの リモコンボタンを押す回数
- 53. そしたら、KPI が⽣まれた プロダクトデザインの KGIと KPI KGI 多くのコンテンツに出会う機会 KPI コンテンツに出会うまでの リモコンボタンを押す回数 ユーザーがコンテンツに出会うまでの ストーリー１つ１つのパフォーマンスを計測する
- 54.
- 55.
- 56. プロダクトデザインの KPI プロダクトデザインの KGIと KPI KGI 多くのコンテンツに出会う体験 KPI コンテンツに出会うまでの リモコンボタンを押す回数
- 57. プロダクトデザインの KPI プロダクトデザインの KGIと KPI KGI 多くのコンテンツに出会う体験 KPI コンテンツに出会うまでの リモコンボタンを押す回数 数えよう
- 59.
- 62.
- 64.
- 65.
- 66. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例：A/B2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、 欲しい情報に辿り着きづらずアクセシブルじゃないです
- 67. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例：A/B2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、 欲しい情報に辿り着きづらずアクセシブルじゃないです 何がサービスにとって ⼤事なのかが明確
- 68. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例：A/B2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、 欲しい情報に辿り着きづらずアクセシブルじゃないです こういうレビューはありがちだけど、 成果物（What）の話なので致命的ではない
- 69. KPI 基準でデザインレビュー KPI が設定されることによりデザインのレビュー基準が明確になる 例：A/B2 パターンのデザインがレビューされるとき 1. A パターンは⽂字⽂字しさがあり、伝えたい情報が伝わりずらそ うです 2. B パターンはアイコンが伝わりずらいので、A パターンが良いです 3. A パターンはリモコンボタンを押す回数が多いので、 欲しい情報に辿り着きづらずアクセシブルじゃないです 対して、この指摘は 致命的な問題を防いでいる
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 77.
- 79.
- 80.
- 81. アクセシビリティは特別ではない ⾃分たちの価値をどうすればユーザーに届くのか、 ただそれだけのこと 1. プロダクトビジョン =どんな価値を提供するのか 2. アクセシビリティ = それをどのようにユーザーに届けるか 3. ビジュアル = 最終的な成果物は何か
- 82.
- 83.
- 84. まずは、みんなで考えればいい • KPI ならチーム全員の問題 •＝ アクセシビリティも チーム全員の問題 • デザイナー、エンジニアだ けが悩む必要はない • 集合知：全員で解決する
- 85.
- 88.
- 89.
- 90. 終わりに • KPI によりアクセシビリティが何なのかを 常に意識してプロダクト開発に臨むことができた •今後も気付きがあれば、更にインクルーシブに サービスを展開するための下地になった • 媒体が変われば何がアクセシブルかも 変わるけど、媒体問わず臨む姿勢を得た
- 91.