Pro Yearly is on sale from $80 to $50! »

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

790f55ccde7a62df8f25747586657090?s=47 Yoshihide Jimbo
November 02, 2019

高齢者でも使えるプロダクト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/

790f55ccde7a62df8f25747586657090?s=128

Yoshihide Jimbo

November 02, 2019
Tweet

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機能拡張 • 視覚障害を疑似体験で きるゴーグル
  21. 21

  22. 22

  23. None
  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 幅広い⼈々の医療体験をアップデートできるよう これからもがんばっていきたいと思います。

  68. 68

  69. 69 ご清聴ありがとうございました!