分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司

118,534 views

Published on

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/344/room
ーーーーーーーーーーーーーーーーーーーーーーー

Published in: Business
0 Comments
186 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
118,534
On SlideShare
0
From Embeds
0
Number of Embeds
87,094
Actions
Shares
0
Downloads
1
Comments
0
Likes
186
Embeds 0
No embeds

No notes for slide

分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司

  1. 1. 分かりやすく使いやすい デザインの工夫 い け だ た く じ 池田拓司 2013/12/25 schoo
  2. 2. 今日の内容 • • • • • • • はじめに(1分) プラットフォームの話(9分) アイコンの話(9分) メッセージの話(9分) 事例に基づいた送客の話(9分) まとめ(3分) 質疑・応答(20分)
  3. 3. 自己紹介 • • 池田拓司 takuji ikeda クックパッド株式会社 デザイン部 • • • • • クックパッドサービス全体のデザイン ユーザー体験の責任 デザイン フロントエンド基盤の構築 ・ 新規事業 サービスへの送客 ・ http://tikeda.net/ twitter: @tikeda
  4. 4. 自己紹介
  5. 5. 第 0 問 この授業を受講しているみなさんと デザインの関わりについて教えて下さい
  6. 6. A フリーランスのデザイナー B 会社の中でサービスに関わるデザイナー C 制作会社のデザイナー D 学生 E デザインの仕事をしたいと思ってる方 F デザイナー以外の方
  7. 7. 分かりやすい?伝わりやすい?
  8. 8. 分かりやすい?伝わりやすい? ギャップ
  9. 9. 分かりやすい?伝わりやすい? ギャップを見極めて自然な関係に
  10. 10. 第 1 問 Smart Phone 次の3つの画面は iOS アプリ Android アプリ Web それぞれ、 どれに適したUI?
  11. 11. 空想のサービス「植物辞典」 A 4月の植物 ホーム B 人気順 4月の植物 お気に入り お知らせ 人気順 設定 アッツザクラ アッツザクラ スズラン スズラン ナ ノハナ 4月の植物 スミレ アッツザクラ 五十音順 イカリソウ スミレ 植物辞典 月を選ぶ アッツザクラ イカリソウ C ナ ノハナ アッツザクラ イカリソウ スミレ アッツザクラ スズラン ナ ノハナ ムラサキカタバミ ホーム お気に入り お知らせ 設定 ムラサキカタバミ お気に入り お知らせ 並び替え
  12. 12. 空想のサービス「植物辞典」 A B C ナビゲーションバー メインアクションバー 4月の植物 ホーム 人気順 お気に入り お知らせ 人気順 設定 アッツザクラ スミレ アッツザクラ アッツザクラ スズラン スズラン ナ ノハナ 4月の植物 イカリソウ スミレ 五十音順 アッツザクラ イカリソウ 植物辞典 月を選ぶ 4月の植物 ナ ノハナ アッツザクラ イカリソウ スミレ アッツザクラ スズラン ナ ノハナ ムラサキカタバミ ホーム お気に入り お知らせ 設定 ムラサキカタバミ お気に入り お知らせ 並び替え
  13. 13. 空想のサービス「植物辞典」 A 4月の植物 ホーム B 人気順 4月の植物 お気に入り アッツザクラ お知らせ 人気順 設定 C 植物辞典 月を選ぶ 五十音順 4月の植物 アッツザクラ トップバー アッツザクラ イカリソウ イカリソウ スミレ スミレ アッツザクラ アッツザクラ スズラン スズラン ナ ノハナ ナ ノハナ イカリソウ スミレ アッツザクラ スズラン タブバー ムラサキカタバミ ホーム お気に入り お知らせ 設定 ナ ノハナ ムラサキカタバミ お気に入り お知らせ 並び替え
  14. 14. 空想のサービス「植物辞典」 A B スピナー 4月の植物 ホーム 人気順 お気に入り お知らせ 人気順 アッツザクラ スミレ アッツザクラ アッツザクラ スズラン スズラン ナ ノハナ 4月の植物 イカリソウ スミレ 五十音順 アッツザクラ イカリソウ 植物辞典 月を選ぶ 4月の植物 設定 C セグメンテッド コントロール ナ ノハナ アッツザクラ イカリソウ スミレ アッツザクラ スズラン ナ ノハナ ムラサキカタバミ ホーム お気に入り お知らせ 設定 ムラサキカタバミ お気に入り お知らせ 並び替え
  15. 15. iOS Human Interface Guideline Android Design (English only)
  16. 16. 空想のサービス「植物辞典」 A 4月の植物 ホーム B 人気順 4月の植物 お気に入り お知らせ 人気順 設定 アッツザクラ アッツザクラ スズラン スズラン ナ ノハナ 4月の植物 スミレ アッツザクラ 五十音順 イカリソウ スミレ 植物辞典 月を選ぶ アッツザクラ イカリソウ C ナ ノハナ アッツザクラ イカリソウ スミレ アッツザクラ スズラン ナ ノハナ ムラサキカタバミ ホーム お気に入り お知らせ 設定 ムラサキカタバミ お気に入り お知らせ 並び替え
  17. 17. ユーザーの導線が違う アプリの場合
  18. 18. ユーザーの導線が違う Webの場合 • • • • • 「クックパッド」で検索 「ハロウィン かぼちゃ」で検索 ブラウザのお気に入り ともだちのメール 他のサービス
  19. 19. 参考 スマートフォンとPCのログアウトの事例 SP Web PC
  20. 20. 第1問より • プラットフォームの特徴や利点を理解して 設計することにより、ユーザーが慣れによって 習得した経験を自然に引き出してあげることができる • アプリとウェブではユーザーにとってサービスへの 関わり方が違う場合がある • デバイスの特性によってユーザー環境が変わるため 設計を変える場合もある
  21. 21. 第 2 問 「 設定 」 を意味しない アイコンはどれ
  22. 22. A B C D
  23. 23. 誰もが分かるこのアイコン なぜ分かる?
  24. 24. 誰もが分かるこのアイコン ?
  25. 25. 第 3 問 「 同期」 を意味する アイコンはどれ
  26. 26. A B C D
  27. 27. 第2,3問より • 同じ意味を持つアイコンも、 プラットフォームによって変わる場合がある • サービスオリジナルのアイコンは1サービスで 1つになるように心がける • 新しいものを生み出すだけではなく、 長く使い続けて浸透するための工夫や努力も大切
  28. 28. 第 4 問 Smart Phone 次の画面の 「お気に入りに追加」 機能で 追加後のメッセージ表示に 最適なデザインはどれ?
  29. 29. A お気に入りに追加 お気に入りに追加 お気に入りに追加しました お気に入り一覧を確認する
  30. 30. B お気に入りに追加 お気に入りに 追加しました お気に入りに追加 閉じる
  31. 31. C お気に入りに追加 お気に入りに追加 お気に入りに追加しました 確認する
  32. 32. A バルーン ツールチップ ・ (モードレス) B ダイアログ ・ アラート (モーダル) お気に入りに追加しました お気に入り一覧を確認する C お気に入りに 追加しました トースト (モードレス) 閉じる お気に入りに追加しました 確認する
  33. 33. モーダルの特徴 • • • 確実に伝えられる一方、乱用するとストレス アクションを事前に確認するのに有効 iOS、Androidアプリともに標準のものがある モードレスの特徴 • • • 確実に伝えられない一方、ユーザーの行動を妨げない 想定通りのアクション完了後に表示するのに有効 Androidアプリでは標準のものがある
  34. 34. 第4問より • 同じメッセージのデザインでも複数が考えられ 機能の特徴に合わせて適したUIを選ぶ • モーダルは連続して行うようなアクションには 強制力が強くて不向き • トーストは連続して行うようなアクションに 便利だが気づかれない恐れもある • メッセージもプラットフォームで標準がある
  35. 35. 第 5 問 PC 次の3つのデザインで ユーザーを次の画面へ より多く遷移させた デザインはどれ?
  36. 36. A B C
  37. 37. A B C ? B
  38. 38. 第5問より • 作るだけではなく検証してみないと分からない • 新しい機能やサービスを伝えるのは説明だけではない • 長い説明をすればよいとは限らない。 省略すればよいとも限らない。バランスが大切
  39. 39. まとめ
  40. 40. 分かりやすい?伝わりやすい? • ユーザーがどういう環境かを配慮し それに合わせたデザインを心がける • ユーザーに馴染みのある標準的なものがあるか それとも新しいものが必要なのか判断が必要 • 機能の役割やユーザーの行動を意識し 画面の流れを考えながら適切なデザインを考える • ユーザーへの伝え方は1つではない。 多方面から考えて試行錯誤が必要である
  41. 41. 宿題 分かりやすさ、 使いやすさだけでなく 愛着を持たれる よりよいサービスにするには どんな工夫が考えられるでしょうか?
  42. 42. 一緒にクックパッ クックパッ ドではサービス アプリを作る ドでサービス アプリを作る ・・ UXデザイナー・UIデザイナー UXデザイナー・UIデザイナー 絶賛募集中 http://info.cookpad.com/jobs/?affcd=eetmm

×