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