ゲームから学ぶUX設計 / UX Design Inspired from Games

Transcript

1. ゲームから学ぶUX設計 Daichi KUDO (@da1chi24) 立川.any #1 at 立川こども未来センター
2. 自己紹介 • Daichi KUDO ◦ GitHub @kudoas ◦ Twitter @da1chi24 • 興味・関心ごと ◦ UI/UX、フロントエンド全般 ◦ 開発者体験、Devtools
3. 日々サービス開発に携わる皆さんへ
4. ユーザーに 作ったものを使ってもらいたい ですよね？
5. 最初のハードルはオンボーディング（導入） Onboarding 導⼊‧理解 Adoption 定着‧活⽤深化 Expansion 成⻑‧契約拡⼤ Feedback 進化‧製品還元 今日は この話をします
6. ユーザーにサービスの使い方を伝える方法 • ドキュメント・取扱説明書 ◦ 網羅的に記載できる ◦ しかしユーザーは説明書をいきなり読まない • 営業・ダイレクトマーケティング ◦ 費用対効果の高い顧客なら効果的 ◦ しかしユーザー全員に行うことは物理的に難しい
7. サービスを自然に使う中で ユーザーが学習する仕組みがほしい
8. そこで参考になる”古典”があります
9. 画像出典：『スーパーマリオブラザーズ』ゲーム画面 © Nintendo
10. 「まず何をすればいいか」 「どうすれば成功体験が積めるか」
11. 画像出典：『スーパーマリオブラザーズ』ゲーム画面 © Nintendo
12. 右向きのマリオ 進んでみたい 右側の余白 埋めたくなる 画像出典：『スーパーマリオブラザーズ』ゲーム画面 © Nintendo
13. 右向きのマリオ 進んでみたい 右側の余白 埋めたくなる 画像出典：『スーパーマリオブラザーズ』ゲーム画面 © Nintendo 次に取るべき行動が自然にわかる
14. 右向くマリオ 進んでみたい 悪そうなのが来る どうする？ 画像出典：『スーパーマリオブラザーズ』ゲーム画面 © Nintendo
15. 右向くマリオ 進んでみたい 踏んだら倒せた！ 画像出典：『スーパーマリオブラザーズ』ゲーム画面 © Nintendo
16. 右向くマリオ 進んでみたい 踏んだら倒せた！ 画像出典：『スーパーマリオブラザーズ』ゲーム画面 © Nintendo 開始数秒で小さな成功体験が味わえる
17. 画像出典：『スーパーマリオブラザーズ』ゲーム画面 © Nintendo 小さな成功体験が大きな目標達成につながる
18. もっと知りたい方へ 宮本茂さん解説 Miyamoto on World 1-1: How Nintendo made Mario's most iconic level
19. １−１の設計をサービスで活かせる場所
20. エンプティステート
22. エラーなのか 読み込み中なのか ユーザーに伝わらない
23. 意図的にデザインされたエンプティステートは、以下 の目的のために利用することができる • システムの状態をユーザーに伝える。 • 利用されていない機能を発見しやすくし、アプ リケーションの学習しやすさを向上させる。 • 重要なタスクを開始するための直接的な経路を 提供する。 （中略） アプリケーションのデザインをするときに、エンプ ティステートのデザインを後回しにしないようにしよ う。意図的にデザインされたエンプティステートは、 ユーザーに自信を持たせ、システムの学習しやすさを 向上させ、重要なタスクを開始するのに役立つはず だ。 https://u-site.jp/alertbox/empty-state-interface-design
24. エラーなのか 読み込み中なのか ユーザーに伝わらない
25. ユーザーに 次の行動を自然に 伝えられる
26. 小さな成功体験 をすぐ積める設計
27. テンプレート見本で 機能を知るきっかけになる
28. おわりに 学ぶことは真似ること
29. おわりに 学ぶことは真似ること ジャンルは問わず 良いアイデアはどんどん真似ていきましょう！