Dialog Design

Transcript

1. Dialog Design
2. ダイアログってUIの話をします
3. こんなやつです
5. モーダルウィンドウとか
6. ポップアップとか
7. いろいろな呼び方がありますが
8. とりあえず 同じものとします
9. ダイアログとは
10. ユーザーが対話することを要求し
11. ユーザーが対話することを要求し ユーザーからの応答を引き出すように
12. ユーザーが対話することを要求し ユーザーからの応答を引き出すように 設計されたオーバーレイ
13. 良い例
16. 画面を遷移せずにフォームが出てくる！
17. 便利！
18. 悪い例
20. 見たらわかるやつ
21. Appsumoによると、ポップアップが 30日で10万件以上のメアドの収集に 役立ったそうです
22. http://www.appsumo.com/7-tips-grow-your-emails/
23. アルバータ大学ではポップアップで、 ニュースレターのサインアップ数が 1日に12件~15件まで増加したそうです
24. https://blog.kissmetrics.com/a-little-nudge/
25. コンバージョンには ダイアログは効きます！
26. でも、最近はユーザに嫌われてます
27. 「うざっ」
28. と言われないように 以下の点を注意しましょう
29. 1.中断を減らす
30. ポップアップの出現で ユーザの操作を中断してしまいます 控えめに使用しましょう
31. ◦ ユーザの了承を要求
32. 間違いが起こりやすい場合に 使用するのは理にかなっています
35. ☓ 突然の表示
37. 広告とかよくありますが やめましょう
38. 必ずユーザの操作によって 使用されるべきです
39. 2.見た目の統一
40. コンテンツと同じ質問や文を使います
43. 見出し
44. タイトルを持つことで ユーザにコンテキストを与えます
46. ボタン
47. ボタンのラベルには わかりやすい名前が必要です
49. タイトルとボタンのラベルが 一致することも大切です
51. 悪い例
53. 3.構造
55. ポップアップを閉じる方法を ユーザに教えてください
56. キャンセルボタン
58. キャンセルボタン 閉じるボタン
60. キャンセルボタン 閉じるボタン エスケープキー
62. キャンセルボタン 閉じるボタン エスケープキー ウィンドウの外側をクリック
64. Sizing & Location
65. ポップアップが大きすぎたり 小さすぎたりしてはいけません
66. 位置 モバイルでは画面の真ん中より 下に配置されると 表示されない可能性があります
67. サイズ オーバーレイに画面の50％以上を 使用しないでください 超える場合は新しいページを検討してください
69. ポップアップを開く時 ライトボックスエフェクトを使用します （背景を暗くします）
71. ユーザの操作によって ポップアップが開くようにします
72. 予期しないポップアップは ユーザの離脱を促します
73. アメリカのユーザのうち70%が ポップアップの広告に苛立っている という統計もあります
74. ダイアログは良いUIには なれないと言う人もいます
75. http://www.appsumo.com/7-tips-grow-your-emails/
76. まとめ
77. コンテキストを維持し、UIを単純化すること は、モーダルの大きな利点です
78. しかし
79. 操作を中断し、 ダイアログでコンテンツを隠してしまうという 欠点があります
80. いつモーダルを表示しますか？ どのようにモーダルを表示しますか？ モーダルの外観はどうですか？ どのような情報を収集しますか？
81. ユーザーとそのタスクに最適なものを 見つけるようにしましょう