Age-Friendly Web UI

社外向けにいくつかスライドや文章削ってます

Transcript

1. Age-Friendly Web UI 2021/02/10 LT会
2. 自己紹介 • 好きなもの ◦ ゲームをやる/作る ◦ 料理 ◦ ビール • 最近読んでいる本 ◦ データ指向アプリケーションデザイン (at 輪読会) ◦ 入門監視 ◦ リファクタリング・ウェットウェア (もっと上達したい)
3. リングフィッター
4. ゲーム開発者 Halloween Scramble!! @unity1week “さがす”
 FUEL LAND @unity1week “ふえる”
 リンクからフリーで遊べます！ 

5. Voxel model Voxel = 3Dのpixel art。Volume + pixel.

6. Age-Friendly Web UI
7. Age-Friendly? • Accessibilityの観点のひとつ • 幼くても歳を取っていても使えるということ • 今回は後者をテーマに進めます
8. 加齢によりスマホを操作しづらくなる • 目の問題 ◦ 老眼 ▪ 近くの文字にピントが合わなくなる ◦ 白内障 ▪ 視野が白っぽく霞む • 身体の問題 ◦ 指先がうまく動かない • 脳の問題 ◦ 短期記憶の弱まり 白内障の見え方 http://www.asahi-net.or.jp/~pd2k-nim/sub1.htm より
9. 加齢するユーザーに対応した方が良い • 何より自分が老けてもインターネットさせて欲しい
10. どう寄り添っていくか
11. 適切なサイズで表示する • レスポンシブ対応 • 16pt以上のfont-size • 押下できる要素は間隔を広くとる ◦ font-sizeに相対的なpadding, mergin, line-heightの設定 • 拡大縮小できるようにする ◦ meta tagのuser-scalable=noの使用は HTML5.2では使うべきでないとされている https://www.w3.org/TR/html52/documen t-metadata.html#the-meta-element
12. • 動画コンテンツの利用 • 音声案内 ◦ 音声案内の声を最適化する研究も ▪ 声のピッチ ▪ 速度 ▪ 大きさ 文字・画像以外のコンテンツの利用
13. • デジタル機器に慣れていない人々は、デジタルネイティブに対してデジタル移民と も呼べる ◦ コロナ禍でその差がより浮き彫りになってきている • メンタルや認知のモデルからして別なので、それを理解した上で設計する必要があ る ◦ 初期iPhoneのスキューモーフィックデザインもそれかも？ ▪ デジタル移民船と呼べなくもない 根深い問題に設計から寄り添う
14. • Age-FriendlyなUIを設計・実装することでより多くのユーザーに使ってもらえるかも しれません • とは言えいきなり完全対応は厳しい • やれる範囲からスタートすれば良さそう ◦ 完全に老齢者向けのサービスでない限り最優先に置く必要はない ◦ あくまでもサービス拡大戦略のうちの一つとして進められると馴染みが良い まとめ
15. ご清聴ありがとうございました！ おわりじゃよ

16. 参考資料 • Age-friendly: UI UX design thinking for senior citizens • https://www.w3.org/TR/html52/document-metadata.html#the-meta-element • シニア層を対象にしたスマートフォンサイトのユーザビリティ • 白内障とは｜白内障と白内障手術｜白内障の症状・原因・予防・治療・手術・費用 ・眼内レンズ • Towards Age-friendly E-commerce Through Crowd-improved Speech Recognition, Multimodal Search, and Personalized Speech Feedback • Learning from COVID-19: Design, Age-friendly Technology, Hacking and Mental Models