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