http://note.openvista.jp/2012/ux-design-on-cooking/ ‎ UI改善をユーザ体験をベースにして行う、ことをクックパッドのUI改善という例を交えて説明してみました。 また、そのユーザ体験も想像するのではなく、自身で体験してみるというのも場合によってはひとつの手かもしれません。

1. キッチンから
UXデザインを考える
橋本直樹（インタラクションデザイナー）
出典：ぱんだ珈琲店のオムライス
hashcc info@openvista.jp

2. 良いユーザ体験を
目指すには
どうすれば良いのか？

3. 例 を挙げて
考えてみよう

4. 突然ですけど‥

5. 割と料理が好きです
な や
ん か や
ん

6. バレンタインデーに
ブラウニーを作った話
こいの
うう

7. まず、Cookpadで一番人気のレシピを検索してみた

8. 出てきたレシピがこれ

9. 手順はこんな感じ

10. しかし、実際試してみるとわかりにくい部分も‥

11. いろいろ混ぜてるけど、容器は一体いくつ必要なの？

12. 1 2 3
ボウルを
4 混ぜる
‥実は4つです

13. いっぱいあるけど、それぞれいつ使うものなの？

14. 2
3
4
1
先ほどのボウルに対応づけると、こうなります

15. 1 2 3
4
お料理は計画的にね‥

16. 実際試してみるとわかりにくい部分も‥

17. 実際試してみるとわかりにくい部分も‥
他の手順の参照が多くてややこしい

18. 要するに
手順や材料が適切に
構造化されていないので
全体の流れが把握しづらい

19. 考えてみた改善案がこちらになります

20. 材料はボウル単位でまとめ、後々の作業をスムーズにする

21. 工程を配置し、現在地と全体像を把握しやすくする

22. いつ、何に何を混ぜるのかパッと分かるように

23. （旧来のレシピ表示に比べた）
デメリット
・工程部分に高さを取るので、調理途中の
スクロール＝端末操作回数が多くなりやすい
・レシピを作る側の手間が増えてしまう

24. よいユーザ体験を
デザインする
とは？

25. 体験 → UI
よい体験を
よい体験を
デザイン → 実現できる
UIをデザイン
UIデザインは体験ありき

26. 体験 → UI
立ち返る よい体験を
よい体験を →
実現できる
行き詰まり
デザイン
UIをデザイン
よい体験がデザインできていれば
UIデザインが行き詰っても
立ち返って考えることができる

27. 体験ありき
ともかく、自分自身が
体験してみないことには
やろうとしていることの
善し悪しがわからない

28. 知りすぎている？
→競合をあたろう

29. 言いたいこと
現状体験の
問題・原因→理想を
モノを作る前に
語れるようにしておこう

30. おしまい
[注]
本スライドでクックパッドを例に出したのは、
良いユーザ体験を目指すための説明であって、思うところはあれど、
サイトやレシピ作者を否定するような意図はありません。
（むしろ、いつもお世話になっています）
なお、当然ですが前半で示したスクリーンショットの著作権はCookpadに
レシピの著作権は作者にあることを了解の上で、
発表のためにアクチュアルな材料が必要だということで転載させていただきました。