いいUIとは？初心者向けに事例をもとにUIデザインを分解

ハマる、便利、続けられるUIはなぜいいのか？身近なUIを観察してひも解きます。ユーザーが迷わず機能を使えること、その結果として良い変化が起きること、さらにその価値がサービスらしく届くことが「いいUI」だと仮説を立てました。

Transcript

1. 「いいUI」とは？ 原 佑一 About “UI” YUICHI HARA 1
2. クリエイティブディレクター 原 佑一 (ゆーいち) 2021年新卒・6年目 東京都立大学 システムデザイン学部 明石高専 建築学科 yuichi_hara7 About “UI” YUICHI HARA 2
3. 3 3 Ameba Developer Conference 興行本部 プロダクトデザイン・アートディレクション クリエイティブディレクション クリエイティブディレクション About “UI” YUICHI HARA 3
4. 「いいUI」は、 サービスの機能 を ユーザーの「いい体験」に変えられる。 About “UI” YUICHI HARA 4
5. About “UI” YUICHI HARA 5
6. 何を聞かれているかがわかりづらい 問いと答え方が結びつきづらい About “UI” YUICHI HARA ユーザーにとって 聞き馴染みがないもの いつ何をしたらいいかが 想像しづらい 6
7. 改善案 1 お支払い方法を選んでください 2 利用するカードを挿入してください 提携カードで支払う その他のお支払い方法 About “UI” YUICHI HARA 7
8. 改善案 問いとアクションを見れば 1 どんな画面かイメージできる お支払い方法を選んでください 2 利用するカードを挿入してください 提携カードで支払う その他のお支払い方法 アイコン付きで アクションがイメージしやすい About “UI” YUICHI HARA 必要なアクションは 必要なタイミングで伝える 8
9. About “UI” YUICHI HARA 9
10. なくても伝わりそう どちらがメインのアクションか 一目でわかりづらい About “UI” YUICHI HARA 認識したい順番が逆 10
11. 改善案 投入金額 購入金額 おつり 取消 About “UI” YUICHI HARA 5,000円 1,250円 3,750円 発券 11
12. 改善案 余分な説明を 読まなくて良い 投入金額 購入金額 おつり 取消 5,000円 1,250円 3,750円 金額を確認してから アクションができる 発券 アクションは時系列で 右に向かうように About “UI” YUICHI HARA 12
13. 良質なUI設計の三大原則 1 発見できる About “UI” YUICHI HARA 2 予測できる 3 学習できる 13
14. 1 発見できる ユーザーが、 何をすればいいかが 一目でわかる About “UI” YUICHI HARA 投入金額 5,000円 購入金額 1,250円 おつり 3,750円 取消 発券 14
15. 2 予測できる 押す前に 何が起きるか 想像できる Before After 提携カードで支払う その他のお支払い方法 About “UI” YUICHI HARA 15
16. 3 学習できる 一度使えば 次から説明なしでも 使える About “UI” YUICHI HARA 発券しますか？ 取消 この内容でいいですか？ 発券 戻る OK 16
17. これで 「いいUI」になった？ About “UI” YUICHI HARA 17
18. これで 「いいUI」になった？ 機能としてはかなり良くなった でも「いいUI」かはまだ分からない About “UI” YUICHI HARA 18
19. 「いいUI」を目指すには BRAND ブランド そのサービスらしいか VALUE 価値 ユーザーに良い変化が起きるか FUNCTION 機能 ストレスなく使えるか About “UI” YUICHI HARA 19
20. 「いいUI」を目指すには BRAND ブランド そのサービスらしいか VALUE 価値 ユーザーに良い変化が起きるか FUNCTION 機能 ストレスなく使えるか About “UI” YUICHI HARA 20
21. 「いいUI」を目指すには 磨き上げ BRAND ブランド そのサービスらしいか VALUE 価値 ユーザーに良い変化が起きるか FUNCTION 機能 ストレスなく使えるか About “UI” YUICHI HARA 21
22. Duolingo トーン 遊び心がある よく褒める 失敗を責めない 少ししつこい 学習が続かない人が 明日も楽しく続けたくなる About “UI” YUICHI HARA 22
23. Ameba Amebaらしさ 敬意を表そう 心を動かそう 快く迎え入れよう 発信が少しこわい人でも 安心して 書いたり読んだりできる About “UI” YUICHI HARA 23
24. 就活生向けのカレンダーアプリ About “UI” YUICHI HARA 24
25. 就活生向けのカレンダーアプリの場合 機能 予定を登録・確認できる 便益 締切を見落としにくい 価値 就活への不安が減る・就活が楽しい 体験 自分のペースで前に進める About “UI” YUICHI HARA 25
26. 就活生向けのカレンダーアプリの場合 機能 予定を登録・確認できる 便益 締切を見落としにくい 価値 就活への不安が減る・就活が楽しい 体験 自分のペースで前に進める About “UI” YUICHI HARA 26
27. 就活生向けのカレンダーアプリの場合 機能 予定を登録・確認できる 便益 締切を見落としにくい 価値 就活への不安が減る・就活が楽しい 体験 自分のペースで前に進める About “UI” YUICHI HARA 27
28. 就活生向けのカレンダーアプリの場合 機能 予定を登録・確認できる 便益 締切を見落としにくい 価値 就活への不安が減る・就活が楽しい 体験 自分のペースで前に進める About “UI” YUICHI HARA 28
29. 就活生向けのカレンダーアプリの場合 機能 予定を登録・確認できる 便益 締切を見落としにくい 価値 就活への不安が減る・就活が楽しい 体験 自分のペースで前に進める About “UI” YUICHI HARA 29
30. 「いいUI」は、 サービスの機能 を ユーザーの「いい体験」に変えられる。 About “UI” YUICHI HARA 30