Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
世界を変えるクラウドサインの取り組み
2019-07-20 Japan Accessibility Conference - digital information vol.2
弁護士ドットコム株式会社
太田 良典 / 芳賀 将至 / 田辺 宏...
クラウドサイン公式キャラクター:カプラ
まずは自己紹介を
登壇者紹介
太田 良典
弁護士ドットコム株式会社 技術統括部
UXデザインチーム エキスパートエンジニア
ウェブアクセシビリティ基盤委員会 作業部会4主査
著書「デザイニングWebアクセシビリティ」他
登壇者紹介
芳賀 将至
弁護士ドットコム株式会社 クラウドサイン事業部
リードフロントエンドエンジニア
クラウドサインのフロントをリードする一方で
Nuxt.jsの翻訳などOSS活動もしています
中本が好きです
弁護士ドットコム株式会社 クラウドサイン事業部
フロントエンドエンジニア
2018 年からクラウドサインにジョイン
主にjQueryやVue.jsでのフロントエンド開発を担当
レガシーコードの改善や新しい技術の導入を実施
登壇者紹介
田辺 宏樹
おまけ
カプラ
クラウドサイン公式キャラクター
オスの若いヤギ
白ヤギとして生まれたものの、
書類を食べすぎたことが原因で
体が黒くなってしまいました。
今日のお話
今日のお話
8
• クラウドサインとは?
• ダイアログを改善してみる
• いざ、ユーザーテスト!
• 得られた学びと今後の方針
クラウドサインとは?
クラウドで契約を簡単に
電子契約とアクセシビリティ
一般的な電子契約のメリット
• 書類作成の手間が省ける
• 紙や印紙のコストが節約できる
• 管理が容易で、検索もできる
もうひとつ大事な要素が……アクセシビリティ
14
全盲の方とクラウドサインで契約した、というツイート
https://twitter.com/mutsumimemo/status/1095662226680107010
15
全盲の方にとって、契約とは……
読めない
• 墨字は読めない
• 点訳は容易ではないし、点字を読めない人もいる
書けない
• 署名しろといわれても難しい(中にはできる人もいるが……)
確認できない
• ハンコを押しても、ちゃんと押せているかわか...
電子契約はアクセシブル
Webを使うため、Webアクセシビリティの恩恵を受ける
• 視覚障害があっても、スクリーンリーダーで読み上げできる
• 入力についても支援技術の恩恵を受けることができる
地理的・時間的な制約がない
• 地理や時間の条件に...
クラウドサインなら……
https://twitter.com/bana87naba/status/1095637162727374849
18
クラウドサインは世界を変える
• 今まで一人では契約することが困難だった人がいる
• 全盲の方、遠方の方、etc.
• アクセシビリティの問題があった
• 電子契約は、契約をアクセシブルにする
• 全く契約できなかった人も、契約できるようになる...
しかし……
いただいたご指摘
署名に同意するところがわかりにくい
• おそらく、モーダルダイアログが出ている
ラベルがないボタンがある
• 「ボタン」としか読まれないのでなんのボタンかわからない
使えたとは言っていただいたが、まだ改善すべきところがある!
...
ここまでのまとめ
ここまでのまとめ
• 視覚障害のある人は、紙での契約が難しい
• 電子契約はアクセシビリティに優れる
• 理論上、今まで契約ができなかった人も契約できるようになる
• 実際、クラウドサインは全盲の人にも使うことはできた
• クラウドサインにはま...
ダイアログを改善してみる
「モーダルダイアログ」とも。ユーザーの入力を受け取るために、
現在表示されているコンテンツの手前に表示される要素。
そもそもダイアログとは?
26
「モーダルダイアログ」とも。ユーザーの入力を受け取るために、
現在表示されているコンテンツの手前に表示される要素。
そもそもダイアログとは?
27
1. ダイアログが開いたことが分からない
• ページに変化がないように見える
• ユーザーが頑張ってダイアログを探さないといけない
2. ダイアログ以外にフォーカスが当たってしまう
• ダイアログしか操作できない(はず)なのだが
• それどころ...
具体的な改善策を検討してみる
ダイアログを操作できるようにするために
30
1. 開閉するときにフォーカスを自動で移動させる
• ダイアログが開いたことが分かる
• すぐにダイアログの操作ができる
2. ダイアログの中だけにフォーカスが当たるようにする
• ダイアログの操作...
1. 開閉するときにフォーカスを自動で移動させる
開くとき
• 開く前にフォーカスが当たっている場所を保存
• 開いたダイアログにフォーカスを当てる
閉じるとき
• 開くときに保存した場所にフォーカスを復活
31
2. ダイアログの中だけにフォーカスを当てる
案A:ダイアログ外のコンテンツにフォーカスを移動させない
• 実装者:田辺
• フレームワーク:jQuery
案B:ダイアログの中でフォーカスがループする
• 実装者:芳賀
• フレームワーク:Vu...
案Aのイメージ
タブキーを何回押してもダイアログ以外の要素にフォーカスが当た
らず、ブラウザとダイアログ間で移動する
33
最後の要素にフォーカスが当たっているときにタブキーを押すと、
最初の要素にフォーカスが移動する
案Bのイメージ
34
2つの案の違い
案A:ダイアログ外のコンテンツにフォーカスを移動させない
• ページ内のコンテンツがダイアログの中身に見える
• フォーカスは、ブラウザ→ダイアログ→ブラウザと移動する
案B:ダイアログの中でフォーカスがループする
• 操作でき...
案Aの実装
案A:設計思想
ダイアログ外のコンテンツにフォーカスを移動させない
• ブラウザにはフォーカスが移る
• 個別のページとして取り扱える
• 別ページに移動したときのように操作できる
• ダイアログを知らないユーザーでも違和感なく使えるはず
37
案A:実際の対応
• 開いているダイアログの外側にある
フォーカスが当たる要素を取得する
• それらにフォーカスが移動しないように処理する
• フォーカスが当たる要素は、ダイアログの中だけになる
• さらに、開いているダイアログ以外の読み上げを...
「開いているダイアログの外側にある、
フォーカスが当たる要素」を探すこと
• ダイアログではなく、奥に表示されている要素のこと
• 見つけた要素にフォーカスを当てないようにする必要がある
• jQuery のセレクターだけでは取得できなかった
...
案A:対策
「ページ全体のフォーカスが当たる要素」から
40
案A:対策
「ダイアログの中にあるフォーカスが当たる要素」を引く
41
引き算の結果、「ダイアログの奥にあるフォーカスが当たる要素」
が取得できる
案A:対策
42
案Bの実装
案B:設計思想
ダイアログの中でフォーカスがループする
• そもそも、なぜダイアログを表示させるのか
• 「何かを決める」という目的がある
• 他の場所にフォーカスが移動してしまうと、目的が達成できない
• 目的を達成するまで、フォーカスが移動...
案B:実際の対応
• 案Aとは別のダイアログに実装
• 対象のダイアログはVue.jsで作られている
45
Vue.jsの特長
Vue.js(びゅーじぇーえす)とは?
• JavaScriptフレームワークのひとつ
• HTMLではなくJavaScriptで楽にWebアプリケーションが作れる
• DOM操作をすることなくアプリケーションのロジックを組...
案B:苦労ポイント
役割が異なるコードが混在してしまう
• アクセシビリティ対策のコードとそれ以外のコード
• Vue.jsのメリットが失われてしまう……
47
例1:フォーカス制御
• クリックしたときにダイアログを表示(画面制御の処理)
• フォーカスをダイアログに移動(アクセシビリティの処理)
• ダイアログを閉じる(画面制御の処理)
画面制御の処理とアクセシビリティの処理が混ざり合ってしまう
48
例2:タブキーを押したときの制御
通常の動作をさせず、意図した場所にフォーカスを移動させたい
• ダイアログ内の最初・最後の要素に特別な処理が必要になる
• 最初や最後の要素かどうかを判定する必要がある
• この処理は愚直に実装すると見通しの悪...
例1:フォーカス制御
ダイアログを直接呼び出さずに中間モジュール経由で呼び出す
• 「アクセシビリティ処理」を「クリックしたときの処理」と
「ダイアログを表示する処理」の間に挟み込む
ダイアログの画面制御処理と混ざり合わずに実装できた 🎉
案B...
案B:対策②
例2:タブキーを押したときの制御
Vue.jsのMixinという機能を使い、アクセシビリティ用のコードと画
面制御用のコードを混ぜ合わせる
• コードを書くファイルを分けられる
• 実行時に2つのコードが混ぜ合わされ、あたかも1つ...
アクセシビリティ対応が完了!
これで終わりか?
実装はできたものの、
本当にユーザーが使えるかどうかは確認できていない
• 確認するために、ユーザーテストを実施する
• アクセシビリティ対応した箇所が実際に使えるか確認する
• 案Aと案Bのどちらが良いのか検証してみる
53
ここまでのまとめ
ここまでのまとめ
• ダイアログをスクリーンリーダーで扱うのは難しい
• 2つの方法でダイアログのアクセシビリティを改善した
• どちらの方法でも苦労するポイントがあった
• 改善の成果を確認するため、ユーザーテストを実施することに
55
いざ、ユーザーテスト!
ユーザーテストの目的
• ご指摘をいただいたダイアログ周りの改善(リベンジ)
• 視覚障害のある方がクラウドサインを使って契約締結できるか
• 案Aと案Bどちらがよいか検証
中根さんにご協力いただきました。ありがとうございました
57
ユーザーテストの事前インタビュー
クラウドサインについて
• 実際に個人事業の契約書・NDA で利用されているとのこと
(紙でもらえるものよりありがたい)
58
ユーザーテストの事前インタビュー
契約全般で困っていること
• 金融系・不動産系などは最初から紙で提示されて困る
• 契約の際、電子版で内容確認の後に原本作ってもらうが、
ここの原本は信頼するしかない
• 捺印や割り印は本当に押せているか不明・...
それでは実際の様子をご覧ください
ユーザーテストの結果
契約はなんとかできた
ダイアログに改善があったと感じてもらえた 💪
63
しかし……
ユーザーテストの結果 その2
入力欄への入力はうまくいかなかった
• 以前成功したことがあったとのことだが、今回は達成できず
• 開発者ツールを立ち上げるも……ダメっ……!!
• 中根さん曰く、「こういう時は、一晩寝る」
表記がわかりにくい箇所...
案Aと案Bは……
さてA案とB案の結果は…
中根さんの意見は:
• いずれにせよ統一はしたほうが良い
• どちらかといえば案Aが良い
• 全盲の方にダイアログの存在を認識してもらうのは難しい
• タブをループさせると混乱するかもしれない
※意見のある方は懇親会で...
得られた学びと今後の方針
今回得られた改善ポイントと対策
改善
• 入力欄へのフォーカスが当たらず、入力できない
• 表記のゆらぎがあり、違和感を与えてしまった
• ダイアログの実装は案Aで統一する
考えられる対策
• 入力欄にフォーカスが当たるようにすること
だが、こ...
改善が不十分な理由
PDF上の空欄とクラウドサインの入力内容は別もの
• 契約受信者が入力した内容をPDFに埋め込まない限り、
連続して読み上げることができない
• クラウドサインの入力内容を読み上げても、
契約書のどこに挿入されるものか不明
...
連続して読み上げられない契約書の例
クラウドサイン:一つの文章として成立しているように見える
PDFの読み上げ:「__いかこうというは、__いかおつという」
歯抜けの文章になり、実際の契約内容を確認することができない
72
書類を作る側でできる対応 その1
契約書を作る側で対応できることもある
• 送信者側に必要なデータをすべてPDF上に入力していただき、
受信者はPDFの確認および締結のみにする
• そもそも、入力するという行為は誰にとっても面倒
• 現段階では...
書類を作る側でできる対応 その2
入力欄のラベル(プレースホルダのようなもの)を説明的にする
• それ単独で、何を入力すれば良いか、契約書のどこに入るか
わかるようにする
• 書類作成者が配慮することで、契約書自体のデザインを
クラウドサインフ...
書類を作る側にできる対応 その2 フリーテキストの例
75
おわりに
この取り組みを通じて感じたこと
ユーザーテストを通して得られた学び・気づきは莫大
• Webの記事を見たり、人づてで話を聞くのとは桁違い
次は中根さんから合格点を貰えるように 💪
• そしてより多くの方から合格点を貰えるように…… 💪
77
クラウドサインはこれから世界を変える!
クラウドサイン公式キャラクター:カプラ
ありがとうございました
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
Nächste SlideShare
Wird geladen in …5
×

世界を変えるクラウドサインの取り組み

456 Aufrufe

Veröffentlicht am

2019-07-20
Japan Accessibility Conference - digital information vol.2
セッション C-2 「世界を変えるクラウドサインの取り組み」の登壇資料です。

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

世界を変えるクラウドサインの取り組み

  1. 1. 世界を変えるクラウドサインの取り組み 2019-07-20 Japan Accessibility Conference - digital information vol.2 弁護士ドットコム株式会社 太田 良典 / 芳賀 将至 / 田辺 宏樹 1
  2. 2. クラウドサイン公式キャラクター:カプラ まずは自己紹介を
  3. 3. 登壇者紹介 太田 良典 弁護士ドットコム株式会社 技術統括部 UXデザインチーム エキスパートエンジニア ウェブアクセシビリティ基盤委員会 作業部会4主査 著書「デザイニングWebアクセシビリティ」他
  4. 4. 登壇者紹介 芳賀 将至 弁護士ドットコム株式会社 クラウドサイン事業部 リードフロントエンドエンジニア クラウドサインのフロントをリードする一方で Nuxt.jsの翻訳などOSS活動もしています 中本が好きです
  5. 5. 弁護士ドットコム株式会社 クラウドサイン事業部 フロントエンドエンジニア 2018 年からクラウドサインにジョイン 主にjQueryやVue.jsでのフロントエンド開発を担当 レガシーコードの改善や新しい技術の導入を実施 登壇者紹介 田辺 宏樹
  6. 6. おまけ カプラ クラウドサイン公式キャラクター オスの若いヤギ 白ヤギとして生まれたものの、 書類を食べすぎたことが原因で 体が黒くなってしまいました。
  7. 7. 今日のお話
  8. 8. 今日のお話 8 • クラウドサインとは? • ダイアログを改善してみる • いざ、ユーザーテスト! • 得られた学びと今後の方針
  9. 9. クラウドサインとは?
  10. 10. クラウドで契約を簡単に
  11. 11. 電子契約とアクセシビリティ
  12. 12. 一般的な電子契約のメリット • 書類作成の手間が省ける • 紙や印紙のコストが節約できる • 管理が容易で、検索もできる もうひとつ大事な要素が……アクセシビリティ 14
  13. 13. 全盲の方とクラウドサインで契約した、というツイート https://twitter.com/mutsumimemo/status/1095662226680107010 15
  14. 14. 全盲の方にとって、契約とは…… 読めない • 墨字は読めない • 点訳は容易ではないし、点字を読めない人もいる 書けない • 署名しろといわれても難しい(中にはできる人もいるが……) 確認できない • ハンコを押しても、ちゃんと押せているかわからない 16
  15. 15. 電子契約はアクセシブル Webを使うため、Webアクセシビリティの恩恵を受ける • 視覚障害があっても、スクリーンリーダーで読み上げできる • 入力についても支援技術の恩恵を受けることができる 地理的・時間的な制約がない • 地理や時間の条件に縛られない • 遠隔地の人はもちろん、移動が困難な人でも使える • 深夜でも早朝でも契約締結可能 17
  16. 16. クラウドサインなら…… https://twitter.com/bana87naba/status/1095637162727374849 18
  17. 17. クラウドサインは世界を変える • 今まで一人では契約することが困難だった人がいる • 全盲の方、遠方の方、etc. • アクセシビリティの問題があった • 電子契約は、契約をアクセシブルにする • 全く契約できなかった人も、契約できるようになる • 電子契約が普及すれば、誰でも自分で契約ができる世界になる • つまり、クラウドサインは世界を変える! 19
  18. 18. しかし……
  19. 19. いただいたご指摘 署名に同意するところがわかりにくい • おそらく、モーダルダイアログが出ている ラベルがないボタンがある • 「ボタン」としか読まれないのでなんのボタンかわからない 使えたとは言っていただいたが、まだ改善すべきところがある! 22
  20. 20. ここまでのまとめ
  21. 21. ここまでのまとめ • 視覚障害のある人は、紙での契約が難しい • 電子契約はアクセシビリティに優れる • 理論上、今まで契約ができなかった人も契約できるようになる • 実際、クラウドサインは全盲の人にも使うことはできた • クラウドサインにはまだまだ改善の余地がある! • 特にモーダルダイアログまわりでご指摘をいただいた 24
  22. 22. ダイアログを改善してみる
  23. 23. 「モーダルダイアログ」とも。ユーザーの入力を受け取るために、 現在表示されているコンテンツの手前に表示される要素。 そもそもダイアログとは? 26
  24. 24. 「モーダルダイアログ」とも。ユーザーの入力を受け取るために、 現在表示されているコンテンツの手前に表示される要素。 そもそもダイアログとは? 27
  25. 25. 1. ダイアログが開いたことが分からない • ページに変化がないように見える • ユーザーが頑張ってダイアログを探さないといけない 2. ダイアログ以外にフォーカスが当たってしまう • ダイアログしか操作できない(はず)なのだが • それどころかダイアログの中に入ることも難しい • 一度ダイアログから離れてしまうと戻ることが難しい ダイアログをスクリーンリーダーで読み上げると…… 28
  26. 26. 具体的な改善策を検討してみる
  27. 27. ダイアログを操作できるようにするために 30 1. 開閉するときにフォーカスを自動で移動させる • ダイアログが開いたことが分かる • すぐにダイアログの操作ができる 2. ダイアログの中だけにフォーカスが当たるようにする • ダイアログの操作だけに集中できる • 想定外の操作をしてしまわない
  28. 28. 1. 開閉するときにフォーカスを自動で移動させる 開くとき • 開く前にフォーカスが当たっている場所を保存 • 開いたダイアログにフォーカスを当てる 閉じるとき • 開くときに保存した場所にフォーカスを復活 31
  29. 29. 2. ダイアログの中だけにフォーカスを当てる 案A:ダイアログ外のコンテンツにフォーカスを移動させない • 実装者:田辺 • フレームワーク:jQuery 案B:ダイアログの中でフォーカスがループする • 実装者:芳賀 • フレームワーク:Vue.js 32
  30. 30. 案Aのイメージ タブキーを何回押してもダイアログ以外の要素にフォーカスが当た らず、ブラウザとダイアログ間で移動する 33
  31. 31. 最後の要素にフォーカスが当たっているときにタブキーを押すと、 最初の要素にフォーカスが移動する 案Bのイメージ 34
  32. 32. 2つの案の違い 案A:ダイアログ外のコンテンツにフォーカスを移動させない • ページ内のコンテンツがダイアログの中身に見える • フォーカスは、ブラウザ→ダイアログ→ブラウザと移動する 案B:ダイアログの中でフォーカスがループする • 操作できるのはダイアログの中だけ • ダイアログの最後の次の要素は、ダイアログの最初の要素 実装してみて、どちらがいい方法か検証してみる! 35
  33. 33. 案Aの実装
  34. 34. 案A:設計思想 ダイアログ外のコンテンツにフォーカスを移動させない • ブラウザにはフォーカスが移る • 個別のページとして取り扱える • 別ページに移動したときのように操作できる • ダイアログを知らないユーザーでも違和感なく使えるはず 37
  35. 35. 案A:実際の対応 • 開いているダイアログの外側にある フォーカスが当たる要素を取得する • それらにフォーカスが移動しないように処理する • フォーカスが当たる要素は、ダイアログの中だけになる • さらに、開いているダイアログ以外の読み上げを無効化する • WAI-ARIA(aria-hidden)を使用 38
  36. 36. 「開いているダイアログの外側にある、 フォーカスが当たる要素」を探すこと • ダイアログではなく、奥に表示されている要素のこと • 見つけた要素にフォーカスを当てないようにする必要がある • jQuery のセレクターだけでは取得できなかった プログラムの話ですので、雰囲気で見ていただければと 案A:苦労ポイント 39
  37. 37. 案A:対策 「ページ全体のフォーカスが当たる要素」から 40
  38. 38. 案A:対策 「ダイアログの中にあるフォーカスが当たる要素」を引く 41
  39. 39. 引き算の結果、「ダイアログの奥にあるフォーカスが当たる要素」 が取得できる 案A:対策 42
  40. 40. 案Bの実装
  41. 41. 案B:設計思想 ダイアログの中でフォーカスがループする • そもそも、なぜダイアログを表示させるのか • 「何かを決める」という目的がある • 他の場所にフォーカスが移動してしまうと、目的が達成できない • 目的を達成するまで、フォーカスが移動できる範囲を制限する • ブラウザにフォーカスが当たらないようになる 44
  42. 42. 案B:実際の対応 • 案Aとは別のダイアログに実装 • 対象のダイアログはVue.jsで作られている 45
  43. 43. Vue.jsの特長 Vue.js(びゅーじぇーえす)とは? • JavaScriptフレームワークのひとつ • HTMLではなくJavaScriptで楽にWebアプリケーションが作れる • DOM操作をすることなくアプリケーションのロジックを組める 見た目と処理内容をきれいに分けられるのが特長 • 役割が違うコードは分けた方が見通しがよくなる 便利で楽だが、アクセシビリティに向き合うと問題が発生 46
  44. 44. 案B:苦労ポイント 役割が異なるコードが混在してしまう • アクセシビリティ対策のコードとそれ以外のコード • Vue.jsのメリットが失われてしまう…… 47
  45. 45. 例1:フォーカス制御 • クリックしたときにダイアログを表示(画面制御の処理) • フォーカスをダイアログに移動(アクセシビリティの処理) • ダイアログを閉じる(画面制御の処理) 画面制御の処理とアクセシビリティの処理が混ざり合ってしまう 48
  46. 46. 例2:タブキーを押したときの制御 通常の動作をさせず、意図した場所にフォーカスを移動させたい • ダイアログ内の最初・最後の要素に特別な処理が必要になる • 最初や最後の要素かどうかを判定する必要がある • この処理は愚直に実装すると見通しの悪い処理になってしまう 49
  47. 47. 例1:フォーカス制御 ダイアログを直接呼び出さずに中間モジュール経由で呼び出す • 「アクセシビリティ処理」を「クリックしたときの処理」と 「ダイアログを表示する処理」の間に挟み込む ダイアログの画面制御処理と混ざり合わずに実装できた 🎉 案B:対策① 50
  48. 48. 案B:対策② 例2:タブキーを押したときの制御 Vue.jsのMixinという機能を使い、アクセシビリティ用のコードと画 面制御用のコードを混ぜ合わせる • コードを書くファイルを分けられる • 実行時に2つのコードが混ぜ合わされ、あたかも1つのファイル に書いたかのように動作する 51
  49. 49. アクセシビリティ対応が完了!
  50. 50. これで終わりか? 実装はできたものの、 本当にユーザーが使えるかどうかは確認できていない • 確認するために、ユーザーテストを実施する • アクセシビリティ対応した箇所が実際に使えるか確認する • 案Aと案Bのどちらが良いのか検証してみる 53
  51. 51. ここまでのまとめ
  52. 52. ここまでのまとめ • ダイアログをスクリーンリーダーで扱うのは難しい • 2つの方法でダイアログのアクセシビリティを改善した • どちらの方法でも苦労するポイントがあった • 改善の成果を確認するため、ユーザーテストを実施することに 55
  53. 53. いざ、ユーザーテスト!
  54. 54. ユーザーテストの目的 • ご指摘をいただいたダイアログ周りの改善(リベンジ) • 視覚障害のある方がクラウドサインを使って契約締結できるか • 案Aと案Bどちらがよいか検証 中根さんにご協力いただきました。ありがとうございました 57
  55. 55. ユーザーテストの事前インタビュー クラウドサインについて • 実際に個人事業の契約書・NDA で利用されているとのこと (紙でもらえるものよりありがたい) 58
  56. 56. ユーザーテストの事前インタビュー 契約全般で困っていること • 金融系・不動産系などは最初から紙で提示されて困る • 契約の際、電子版で内容確認の後に原本作ってもらうが、 ここの原本は信頼するしかない • 捺印や割り印は本当に押せているか不明・確信が持てない 59
  57. 57. それでは実際の様子をご覧ください
  58. 58. ユーザーテストの結果 契約はなんとかできた ダイアログに改善があったと感じてもらえた 💪 63
  59. 59. しかし……
  60. 60. ユーザーテストの結果 その2 入力欄への入力はうまくいかなかった • 以前成功したことがあったとのことだが、今回は達成できず • 開発者ツールを立ち上げるも……ダメっ……!! • 中根さん曰く、「こういう時は、一晩寝る」 表記がわかりにくい箇所があった • 転送するには「宛先の追加」を押す必要がある、など 66
  61. 61. 案Aと案Bは……
  62. 62. さてA案とB案の結果は… 中根さんの意見は: • いずれにせよ統一はしたほうが良い • どちらかといえば案Aが良い • 全盲の方にダイアログの存在を認識してもらうのは難しい • タブをループさせると混乱するかもしれない ※意見のある方は懇親会でお話してくれると嬉しいなぁ 68
  63. 63. 得られた学びと今後の方針
  64. 64. 今回得られた改善ポイントと対策 改善 • 入力欄へのフォーカスが当たらず、入力できない • 表記のゆらぎがあり、違和感を与えてしまった • ダイアログの実装は案Aで統一する 考えられる対策 • 入力欄にフォーカスが当たるようにすること だが、これだけでは不十分 70
  65. 65. 改善が不十分な理由 PDF上の空欄とクラウドサインの入力内容は別もの • 契約受信者が入力した内容をPDFに埋め込まない限り、 連続して読み上げることができない • クラウドサインの入力内容を読み上げても、 契約書のどこに挿入されるものか不明 71
  66. 66. 連続して読み上げられない契約書の例 クラウドサイン:一つの文章として成立しているように見える PDFの読み上げ:「__いかこうというは、__いかおつという」 歯抜けの文章になり、実際の契約内容を確認することができない 72
  67. 67. 書類を作る側でできる対応 その1 契約書を作る側で対応できることもある • 送信者側に必要なデータをすべてPDF上に入力していただき、 受信者はPDFの確認および締結のみにする • そもそも、入力するという行為は誰にとっても面倒 • 現段階では多数の項目を入力していただくのは難しい 73
  68. 68. 書類を作る側でできる対応 その2 入力欄のラベル(プレースホルダのようなもの)を説明的にする • それ単独で、何を入力すれば良いか、契約書のどこに入るか わかるようにする • 書類作成者が配慮することで、契約書自体のデザインを クラウドサインフレンドリーにすることができる 74
  69. 69. 書類を作る側にできる対応 その2 フリーテキストの例 75
  70. 70. おわりに
  71. 71. この取り組みを通じて感じたこと ユーザーテストを通して得られた学び・気づきは莫大 • Webの記事を見たり、人づてで話を聞くのとは桁違い 次は中根さんから合格点を貰えるように 💪 • そしてより多くの方から合格点を貰えるように…… 💪 77
  72. 72. クラウドサインはこれから世界を変える!
  73. 73. クラウドサイン公式キャラクター:カプラ ありがとうございました

×