Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

Yoshihide Jimbo

November 02, 2019
Tweet

More Decks by Yoshihide Jimbo

Other Decks in Design

Transcript

  1. ⾼齢者でも使えるプロダクトUIの挑戦
    神保 嘉秀
    Ubie株式会社
    Frontend Conference 2019 | Nov 02, 2019
    1

    View Slide

  2. 2
    神保 嘉秀
    じんぼ よしひで
    フロントエンドエンジニア
    @jmblog

    View Slide

  3. 3
    今⽇お話しすること
    医療機関向けのプロダクトにおいて
    ⾼齢者にも使いやすい UI を実現するために
    どういった取り組みを⾏ってきたか

    View Slide

  4. 4
    • 医療機関向けプロダクト「AI問診Ubie」について
    • ⾼齢者向け UI 改善の事例紹介
    • まとめ

    View Slide

  5. 5
    • 医療機関向けプロダクト「AI問診Ubie」について
    • ⾼齢者向け UI 改善の事例紹介
    • まとめ

    View Slide

  6. 6
    病院での⻑い待ち時間。
    その裏側では

    View Slide

  7. 7
    医師は、本業の診療業務「以外」で忙殺されている
    外来診療が増えると… それ以上に事務作業が増える
    +1時間 +1時間
    +2時間
    Annals of Internal Medicine(2016年9⽉)

    View Slide

  8. 8
    要因の⼀つが、病院に⾏くと渡される「紙の問診票」

    View Slide

  9. 9
    「紙の問診票」の問題点
    • 患者全員に対して杓⼦定規な質問。
    医師が診断に必要な事前情報としては
    不⼗分。
    • 記⼊した内容は、カルテに⼿⼊⼒で
    書き写している。⾮効率な事務作業。

    View Slide

  10. 10
    AI で医師の業務効率化を⽀援

    View Slide

  11. 11
    紙の問診票の代わりにタブレットで症状を⼊⼒

    View Slide

  12. 12
    ⼊⼒された症状にあわせて、AIが「⼀⼈ひとりに最適な問診票」を⾃動⽣成

    View Slide

  13. 13
    問診結果は、⾃然⾔語処理により医師の専⾨的な⽂章に変換。
    患者が診察室に⼊る前に、カルテ記載がほぼ終わっている状態に
    【主訴】
    お腹が痛い
    【現病歴】
    6⽉27⽇頃に緩徐発症で、右上腹部から下
    腹部に、NRS 7/10程度の腹痛が出現、30
    分以上持続し、その後悪化している。圧迫
    すると腹痛は悪化する。
    また同時期に嘔気・嘔吐が出現している。

    View Slide

  14. 14
    問診時間が 1/3 に短縮
    約10.3分
    約3.5分
    電⼦カルテばかり⾒る問診から、患者を診る問診に
    出所:「第34回⽇本頭痛学会総会 抄録」(2018年11⽉)

    View Slide

  15. 15
    • 医療機関向けプロダクト「AI問診Ubie」について
    • ⾼齢者向け UI 改善の事例紹介
    • まとめ

    View Slide

  16. 16
    病院を訪れる、あらゆる年代の患者に対して
    従来の紙の問診票と同じぐらい無理のない問診体験を
    タブレットで提供する
    プロダクトチームの挑戦

    View Slide

  17. 10代
    20代
    30代
    40代
    50代
    60代
    70代
    80代
    90代
    0% 50% 100%
    「タブレットを使った問診をしてみてどう感じましたか?」
    簡単だった まあまあ簡単だった ちょっと難しかった 難しかった
    | | |

    View Slide

  18. 10代
    20代
    30代
    40代
    50代
    60代
    70代
    80代
    90代
    0% 50% 100%
    ⽴ちはだかる⾼齢者の壁
    「タブレットを使った問診をしてみてどう感じましたか?」
    簡単だった まあまあ簡単だった ちょっと難しかった 難しかった
    | | |

    View Slide

  19. 19
    「なぜ⾼齢者にとって難しいのか」を知るために

    View Slide

  20. 20
    さまざまなアプローチで調査し、⾼齢者への理解を深める
    ⽣の声を聞く データから読み取る ツールで疑似体験
    • FullStory でユーザーの
    画⾯操作を確認
    • アクセスログから回答
    に時間がかかってる質
    問を⾒つけ出す
    • オフィス周辺の⾼齢者
    に声をかける
    • 社員の親戚にリモート
    でインタビュー
    • ⾃治体の福祉関連施設
    でユーザーテスト
    • 「NoCoffee」という
    Chrome機能拡張
    • 視覚障害を疑似体験で
    きるゴーグル

    View Slide

  21. 21

    View Slide

  22. 22

    View Slide

  23. View Slide

  24. 24
    こうした調査によって明らかになった問題と
    その解決策をいくつか紹介

    View Slide

  25. 25
    「WebやOSの標準的なUIが通⽤しない」問題
    事例1

    View Slide

  26. 26
    ౰ॳ、プルダウンやテキストフィールドを使っていたが…

    View Slide

  27. 27
    「使い⽅がぜんぜんわからない」という声が多く、
    使い物にならなかった。

    View Slide

  28. 28
    ⾝の回りにある UI からヒントを得て改善

    View Slide

  29. 29
    数字の⼊⼒を、ボタン式に統⼀

    View Slide

  30. 30
    参考にしたのは、銀⾏のATM
    参考: みずほ銀⾏

    View Slide

  31. 31
    ⽂字の⼊⼒は、あいうえお配列の独⾃キーボードで

    View Slide

  32. 参考にしたのは、カラオケのリモコン
    32
    参考: DAM CHANNEL

    View Slide

  33. 33
    痛みなどの程度を選択するUI

    View Slide

  34. 34
    参考にしたのは、温⽔洗浄便座のコントローラー

    View Slide

  35. 35
    「ボタンがうまく押されない」問題
    事例2

    View Slide

  36. 36
    ボタンはありふれた UI なので、⾼齢者も迷わないが…

    View Slide

  37. 37
    スマホやタブレットに慣れていない⼈は、
    うまくタップできないことが多い。

    View Slide

  38. 38
    ぐっと押し込むので⻑押しになってしまう
     → contextmenuイベントが発⽕され、clickイベントが無効になる
    押したまま指を動かしてしまう(指が震える症状をもつ⽅も多い)
     → touchmoveイベントが発⽕され、clickイベントが無効になる

    View Slide

  39. 39
    実装でがんばる

    View Slide

  40. 40
    contextmenu イベントを無効化

    View Slide

  41. 41
    押したまま指を動かしても、50pxまでなら
    click として扱う処理をすべてのボタンに実装

    View Slide

  42. 42
    「スクロールされない」問題
    事例3

    View Slide

  43. 43
    選択肢が多い質問では、スクロールバーを表⽰していたが…

    View Slide

  44. 44
    スクロールせずに、画⾯に⾒えている選択肢だけで
    回答するユーザーが⽬⽴った

    View Slide

  45. 45
    スクロールバーの存在が気づかれていないのでは?
    仮説1

    View Slide

  46. 46
    スクロールUIを⾒直し、操作しやすいように

    View Slide

  47. 47
    が、思ったほど効果がなかった

    View Slide

  48. 48
    そもそもスマホやパソコンに馴染みがないユーザーは
    「スクロール」という概念を認知していないのでは?
    仮説2

    View Slide

  49. 49
    複数のページに分割し、スクロール⾃体をなくすことで解決

    View Slide

  50. 50
    「画⾯内の変化に気づかれない」問題
    事例4

    View Slide

  51. 51
    当初、このようなレイアウトにしていたが…

    View Slide

  52. 52
    検索結果が表⽰されていることに気づかず、
    ⼿が⽌まってしまうユーザーが多く⾒られた

    View Slide

  53. 53
    視⼒障害を疑似体験できるゴーグルを使ってみたところ、

    View Slide

  54. 54
    タブレットに顔を近づけないとよく⾒えない。
    近づけると、右側が視野に⼊らない

    View Slide

  55. 55
    おまけに、⾃分の⼿で隠れてしまう

    View Slide

  56. 56
    検索結果が視野に⼊りやすいよう、左右を⼊れ替え

    Before After

    View Slide

  57. 57
    加えて、ちょっとしたアニメーションで気づきやすいように

    View Slide

  58. 58
    ユニバーサルデザインの適⽤
    事例5

    View Slide

  59. 59
    年齢や障害の有無、能⼒差を問わず、
    病院を訪れる、より多くの⼈が利⽤できるように

    View Slide

  60. 60
    「⽂字の形がわかりやすく」「読みまちがえにくく」「⽂章が読みやすい」フォント
    UDフォントの採⽤
    (現在、採⽤に向けて調整中)

    View Slide

  61. 61
    加齢による⾒え⽅の変化や視覚障害に考慮した配⾊や、WCAGの達成基準 AA Large以上を
    満たすコントラストに変更
    配⾊やコントラストの⾒直し

    View Slide

  62. 62
    ⾳によるフィードバック
    JISのガイドラインを参考に、ボタンを押したときにクリック⾳が出るように

    View Slide

  63. 63
    • 医療機関向けプロダクト「AI問診Ubie」について
    • ⾼齢者向け UI 改善の事例紹介
    • まとめ

    View Slide

  64. 64
    ⾼齢者向けのUI は、ひと筋縄にはいかない。
    加齢による⾝体的変化や、
    デジタルデバイスへの経験不⾜など
    考慮する点がたくさんある。

    View Slide

  65. 65
    今⽇は UI の話が中⼼だったが、
    そもそもタブレットを受け取ってもらえないというケースもあり、
    UI だけでは解決できない課題も多い。

    View Slide

  66. 66
    さまざまな⼈に利⽤してもらえるプロダクトにするには、
    ユーザーへの理解を深めながら、
    仮説検証を繰り返すしかない。

    View Slide

  67. 67
    幅広い⼈々の医療体験をアップデートできるよう
    これからもがんばっていきたいと思います。

    View Slide

  68. 68

    View Slide

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

    View Slide