高齢者でも使えるプロダクトUIの挑戦 / Designing User Interfaces for the Elderly

FRONTEND CONFERENCE 2019 での発表資料です。
https://2019.kfug.jp/session/jimboyoshihide

当日の質疑応答の内容はブログにまとめています。
https://jmblog.jp/posts/2019-11-03/frontend-conrefence-2019/

Transcript

1. ⾼齢者でも使えるプロダクトUIの挑戦 神保 嘉秀 Ubie株式会社 Frontend Conference 2019 | Nov 02, 2019 1
2. 2 神保 嘉秀 じんぼ よしひで フロントエンドエンジニア @jmblog
3. 3 今⽇お話しすること 医療機関向けのプロダクトにおいて ⾼齢者にも使いやすい UI を実現するために どういった取り組みを⾏ってきたか
4. 4 • 医療機関向けプロダクト「AI問診Ubie」について • ⾼齢者向け UI 改善の事例紹介 • まとめ
5. 5 • 医療機関向けプロダクト「AI問診Ubie」について • ⾼齢者向け UI 改善の事例紹介 • まとめ
6. 6 病院での⻑い待ち時間。 その裏側では
7. 7 医師は、本業の診療業務「以外」で忙殺されている 外来診療が増えると… それ以上に事務作業が増える +1時間 +1時間 +2時間 Annals of Internal Medicine（2016年9⽉）
8. 8 要因の⼀つが、病院に⾏くと渡される「紙の問診票」
9. 9 「紙の問診票」の問題点 • 患者全員に対して杓⼦定規な質問。 医師が診断に必要な事前情報としては 不⼗分。 • 記⼊した内容は、カルテに⼿⼊⼒で 書き写している。⾮効率な事務作業。
10. 10 AI で医師の業務効率化を⽀援
11. 11 紙の問診票の代わりにタブレットで症状を⼊⼒
12. 12 ⼊⼒された症状にあわせて、AIが「⼀⼈ひとりに最適な問診票」を⾃動⽣成
13. 13 問診結果は、⾃然⾔語処理により医師の専⾨的な⽂章に変換。 患者が診察室に⼊る前に、カルテ記載がほぼ終わっている状態に 【主訴】 お腹が痛い 【現病歴】 6⽉27⽇頃に緩徐発症で、右上腹部から下 腹部に、NRS 7/10程度の腹痛が出現、30 分以上持続し、その後悪化している。圧迫 すると腹痛は悪化する。 また同時期に嘔気・嘔吐が出現している。
14. 14 問診時間が 1/3 に短縮 約10.3分 約3.5分 電⼦カルテばかり⾒る問診から、患者を診る問診に 出所：「第34回⽇本頭痛学会総会 抄録」（2018年11⽉）
15. 15 • 医療機関向けプロダクト「AI問診Ubie」について • ⾼齢者向け UI 改善の事例紹介 • まとめ
16. 16 病院を訪れる、あらゆる年代の患者に対して 従来の紙の問診票と同じぐらい無理のない問診体験を タブレットで提供する プロダクトチームの挑戦
17. 10代 20代 30代 40代 50代 60代 70代 80代 90代 0% 50% 100% 「タブレットを使った問診をしてみてどう感じましたか？」 簡単だった まあまあ簡単だった ちょっと難しかった 難しかった | | |
18. 10代 20代 30代 40代 50代 60代 70代 80代 90代 0% 50% 100% ⽴ちはだかる⾼齢者の壁 「タブレットを使った問診をしてみてどう感じましたか？」 簡単だった まあまあ簡単だった ちょっと難しかった 難しかった | | |
19. 19 「なぜ⾼齢者にとって難しいのか」を知るために
20. 20 さまざまなアプローチで調査し、⾼齢者への理解を深める ⽣の声を聞く データから読み取る ツールで疑似体験 • FullStory でユーザーの 画⾯操作を確認 • アクセスログから回答 に時間がかかってる質 問を⾒つけ出す • オフィス周辺の⾼齢者 に声をかける • 社員の親戚にリモート でインタビュー • ⾃治体の福祉関連施設 でユーザーテスト • 「NoCoffee」という Chrome機能拡張 • 視覚障害を疑似体験で きるゴーグル
24. 24 こうした調査によって明らかになった問題と その解決策をいくつか紹介
25. 25 「WebやOSの標準的なUIが通⽤しない」問題 事例1
26. 26 ౰ॳ、プルダウンやテキストフィールドを使っていたが…
27. 27 「使い⽅がぜんぜんわからない」という声が多く、 使い物にならなかった。
28. 28 ⾝の回りにある UI からヒントを得て改善
29. 29 数字の⼊⼒を、ボタン式に統⼀
30. 30 参考にしたのは、銀⾏のATM 参考: みずほ銀⾏
31. 31 ⽂字の⼊⼒は、あいうえお配列の独⾃キーボードで
32. 参考にしたのは、カラオケのリモコン 32 参考: DAM CHANNEL
33. 33 痛みなどの程度を選択するUI
34. 34 参考にしたのは、温⽔洗浄便座のコントローラー
35. 35 「ボタンがうまく押されない」問題 事例2
36. 36 ボタンはありふれた UI なので、⾼齢者も迷わないが…
37. 37 スマホやタブレットに慣れていない⼈は、 うまくタップできないことが多い。
38. 38 ぐっと押し込むので⻑押しになってしまう  → contextmenuイベントが発⽕され、clickイベントが無効になる 押したまま指を動かしてしまう（指が震える症状をもつ⽅も多い）  → touchmoveイベントが発⽕され、clickイベントが無効になる
39. 39 実装でがんばる
40. 40 contextmenu イベントを無効化
41. 41 押したまま指を動かしても、50pxまでなら click として扱う処理をすべてのボタンに実装
42. 42 「スクロールされない」問題 事例3
43. 43 選択肢が多い質問では、スクロールバーを表⽰していたが…
44. 44 スクロールせずに、画⾯に⾒えている選択肢だけで 回答するユーザーが⽬⽴った
45. 45 スクロールバーの存在が気づかれていないのでは？ 仮説1
46. 46 スクロールUIを⾒直し、操作しやすいように
47. 47 が、思ったほど効果がなかった
48. 48 そもそもスマホやパソコンに馴染みがないユーザーは 「スクロール」という概念を認知していないのでは？ 仮説2
49. 49 複数のページに分割し、スクロール⾃体をなくすことで解決
50. 50 「画⾯内の変化に気づかれない」問題 事例4
51. 51 当初、このようなレイアウトにしていたが…
52. 52 検索結果が表⽰されていることに気づかず、 ⼿が⽌まってしまうユーザーが多く⾒られた
53. 53 視⼒障害を疑似体験できるゴーグルを使ってみたところ、
54. 54 タブレットに顔を近づけないとよく⾒えない。 近づけると、右側が視野に⼊らない
55. 55 おまけに、⾃分の⼿で隠れてしまう
56. 56 検索結果が視野に⼊りやすいよう、左右を⼊れ替え → Before After
57. 57 加えて、ちょっとしたアニメーションで気づきやすいように
58. 58 ユニバーサルデザインの適⽤ 事例5
59. 59 年齢や障害の有無、能⼒差を問わず、 病院を訪れる、より多くの⼈が利⽤できるように
60. 60 「⽂字の形がわかりやすく」「読みまちがえにくく」「⽂章が読みやすい」フォント UDフォントの採⽤ （現在、採⽤に向けて調整中）
61. 61 加齢による⾒え⽅の変化や視覚障害に考慮した配⾊や、WCAGの達成基準 AA Large以上を 満たすコントラストに変更 配⾊やコントラストの⾒直し
62. 62 ⾳によるフィードバック JISのガイドラインを参考に、ボタンを押したときにクリック⾳が出るように
63. 63 • 医療機関向けプロダクト「AI問診Ubie」について • ⾼齢者向け UI 改善の事例紹介 • まとめ
64. 64 ⾼齢者向けのUI は、ひと筋縄にはいかない。 加齢による⾝体的変化や、 デジタルデバイスへの経験不⾜など 考慮する点がたくさんある。
65. 65 今⽇は UI の話が中⼼だったが、 そもそもタブレットを受け取ってもらえないというケースもあり、 UI だけでは解決できない課題も多い。
66. 66 さまざまな⼈に利⽤してもらえるプロダクトにするには、 ユーザーへの理解を深めながら、 仮説検証を繰り返すしかない。
67. 67 幅広い⼈々の医療体験をアップデートできるよう これからもがんばっていきたいと思います。
69. 69 ご清聴ありがとうございました！