Content                      &             User Interface                                       コンテンツで改善するUIデザインの極意       ...
ハ   セ   ガ   ワ   ヤ   ス   ヒ   サ長谷川恭久@yhassy
48,700,000      Reuters and ComScore (Feb. 2013)
Men   Women          Pew Internet Research 2013
1ページに    素早い多数結果    検索表示
エンゲージメントの   検索数の    低下       低下
無限スクロールを実装する前に、私たちは利用者への理解をもっと深めるべきだった。  Dan McKinley, Principal Engineer at Etsy
Add  Pin          Board   Follow        SavePost
Blog              TagPin          Board            Follow             Category
AddPin   Board           Follow              Apply                         Friend
What is UI ?
What is GUI ?
UI = Text 文字はインターフェイスである
コピーライティングはインターフェイスデザインである。ピクセルに拘るのと同様、1文字にも大きな意味がある。Jason Fried, Founder of 37Signals
言葉がサイト・アプリの印象を変える言葉で人の行動を変えることができる
コンテンツがないデザインは、ただの装飾。 Jeffrey Zeldman, Happy Cog, A List Apart
ちょっとした言葉がアプリを定義するシステムの吐き出しではなく人間との対話    コンテンツファースト
1Know your audience     利用者のことを知る
現存新規                     有料          すべて     無料         復帰
カジュアルなメッセージ少し自信アリのアーティストタイプ
利用者のペルソナを設計なぜアプリ・サービスを使うのか利用者が対話しやすい形状を考える
2Short and Clear   簡潔・明確に表現する
利用者のタスクを素早く的確に補助
検索?   ズーム?
閉じる?   削除?
フロッピーディスク???機能的表現からメタファに変化
絵より言葉のほうが明確な場合がある利用者の期待を保証する言葉は?明確さを優先。捻るのは慎重に。
ラベル ボタン メニュー告知メッセージ
3Voice and Tone   自分たちの声をみつける
ビジネス    or   カジュアルフォーマル   or   フレンドリー 面白く    or   可愛く
人格化するとしたらどんな性格? 誰をターゲットにしている?利用者にどう感じてもらいたいか
1   Know your audience2   Short and Clear3   Voice and Tone
Empathy 利用者への共感をもつ
利用者の特定の課題に応える  すべての画面を再調査コンテンツの管理と維持を始める
Content = Design  コンテンツから始めればデザインもみえてくる
Thank you!長谷川恭久mail@yasuhisa.com@yhassyyasuhisa.com/could
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Upcoming SlideShare
Loading in...5
×

コンテンツで改善する UI デザインの極意

184,112

Published on


デザインは小さなテキストから始まります。コンテンツを膨大に抱える大規模なサイトでも、ユーザーにコンテンツ作成を委ねる小さなアプリケーションでも小さなテキストが行動の変化に繋がる場合があります。 コンテンツがある状態でデザインするのと、何もないままスタートするのでは大きな差が生まれます。

UI デザインの話になると、ビジュアルやインタラクションが話題の中心になりがちですが、コンテンツも UI です。なぜコンテンツが UI デザインにおいて重要なのかを解説すると共に、今セッションでは小さなテキストの工夫からはじまるデザインについて、幾つかのケーススタディーをみながら傾向と対策を紹介します。

Published in: Design
0 Comments
255 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
184,112
On Slideshare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
0
Comments
0
Likes
255
Embeds 0
No embeds

No notes for slide

コンテンツで改善する UI デザインの極意

  1. 1. Content & User Interface   コンテンツで改善するUIデザインの極意 長谷川恭久2013年3月16日 Android Bazaar and Conference 2013 Spring
  2. 2. ハ セ ガ ワ ヤ ス ヒ サ長谷川恭久@yhassy
  3. 3. 48,700,000 Reuters and ComScore (Feb. 2013)
  4. 4. Men Women Pew Internet Research 2013
  5. 5. 1ページに 素早い多数結果 検索表示
  6. 6. エンゲージメントの 検索数の 低下 低下
  7. 7. 無限スクロールを実装する前に、私たちは利用者への理解をもっと深めるべきだった。 Dan McKinley, Principal Engineer at Etsy
  8. 8. Add Pin Board Follow SavePost
  9. 9. Blog TagPin Board Follow Category
  10. 10. AddPin Board Follow Apply Friend
  11. 11. What is UI ?
  12. 12. What is GUI ?
  13. 13. UI = Text 文字はインターフェイスである
  14. 14. コピーライティングはインターフェイスデザインである。ピクセルに拘るのと同様、1文字にも大きな意味がある。Jason Fried, Founder of 37Signals
  15. 15. 言葉がサイト・アプリの印象を変える言葉で人の行動を変えることができる
  16. 16. コンテンツがないデザインは、ただの装飾。 Jeffrey Zeldman, Happy Cog, A List Apart
  17. 17. ちょっとした言葉がアプリを定義するシステムの吐き出しではなく人間との対話 コンテンツファースト
  18. 18. 1Know your audience 利用者のことを知る
  19. 19. 現存新規 有料 すべて 無料 復帰
  20. 20. カジュアルなメッセージ少し自信アリのアーティストタイプ
  21. 21. 利用者のペルソナを設計なぜアプリ・サービスを使うのか利用者が対話しやすい形状を考える
  22. 22. 2Short and Clear 簡潔・明確に表現する
  23. 23. 利用者のタスクを素早く的確に補助
  24. 24. 検索? ズーム?
  25. 25. 閉じる? 削除?
  26. 26. フロッピーディスク???機能的表現からメタファに変化
  27. 27. 絵より言葉のほうが明確な場合がある利用者の期待を保証する言葉は?明確さを優先。捻るのは慎重に。
  28. 28. ラベル ボタン メニュー告知メッセージ
  29. 29. 3Voice and Tone 自分たちの声をみつける
  30. 30. ビジネス or カジュアルフォーマル or フレンドリー 面白く or 可愛く
  31. 31. 人格化するとしたらどんな性格? 誰をターゲットにしている?利用者にどう感じてもらいたいか
  32. 32. 1 Know your audience2 Short and Clear3 Voice and Tone
  33. 33. Empathy 利用者への共感をもつ
  34. 34. 利用者の特定の課題に応える すべての画面を再調査コンテンツの管理と維持を始める
  35. 35. Content = Design コンテンツから始めればデザインもみえてくる
  36. 36. Thank you!長谷川恭久mail@yasuhisa.com@yhassyyasuhisa.com/could

×