Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
街中の案内表示から学ぶ「ユーザー視点のUIデザイン」
マスメディアとWEBデザインの違い
テレビ・新聞・ラジオ・雑誌などのマスメディアは、
本人の意識にかかわらず接触できるために情報が通り過ぎていく
ユーザーが自発的・能動的に行動して情報を得るWEBは、
マスに比べて、欲しいときに欲しい情報を得られるメリットがある
目的に近い情報を中心に探す
目的がハッキリしている
ユーザーが能動的であればあるほど
周りの情報が見えなくなる
知りたいキーワードに集中するために
ユーザーの知りたい所へすんなり行けることがWEBサイトの基本
分かりにくいことで評判の
東京スカイツリー・東京ソラマチを例にして
シミュレーションしてみましょう
Webサイトのメニューやナビゲーションのように、
自分の居る場所から目的地へ
最短ルートを適切に案内するのが「施設サイン表示」の役割
とうきょうスカイツリー駅
押上駅
(スカイツリー前)
東京スカイツリー
すみだ水族館 東京ソラマチ
プラネタリ...
ホーム上にある駅名表示。
東京スカリツリーへの導線がそもそも案内されていない
反対側の「正面口」よりの階段を降りた先には、誘導表示が何もない
エスカレーターで2階に上がると誘導サインで途中までは行けるが……
エスカレーターで4階まで上がると、
東京スカイツリー入口フロアの中へ直接行ける
案内サインは「正面改札口」側へ行くように、
施設側の強い意思による「導線」が示されている
施設側の思惑
★目的別に導線を分ける
★平日・休日同一オペレーション
★ルートを具体的にしない
来訪者側の不利益
施設側の都合優先・ユーザー視点の欠如
★具体的でない案内表示による時間的ロス
★情報不足による不安やストレス
★施設への不信感
分かりやすい案内表示とは?
来訪者
✓目的地
✓行きたい方向
駅案内
✓伝えたいこと
想像していることと
表示が同じ
東京スカイツリー
東京ソラマチ
すみだ水族館
プラネタリウム天空
知りたい情報と
案内表示に
ズレがある
結果としてわかりにく...
動線と導線の違い
導線動線建物などで人や物の動きの
軌跡を示す線
建物内や店内、街中などで
人を導く経路
過去 未来
建築業界 流通業界
着目ポイント
★ユーザーの行動動線から導線を作ることが、
もっとも効率的で間違いない設計となる
★導線は人の流れの太い道すじとして考える
★メインだけでなくサブの流れも考える
ユーザー視点
戦略的情報発信型
Webサイト
結果として、ユーザーが満足できる価値があること
サイト利用者
✓知りたいこと
✓調べたいこと
Webサイト
✓伝えたいこと
想像したとおりに
情報が合致する
サイトの利用動機
達成
サイトが
提供し...
何を知りたいか?
誰が
WEBサイトが目的とするゴールは誰のためのものか?
Upcoming SlideShare
Loading in …5
×

01:街中の案内表示から学ぶ「ユーザー視点のuiデザイン」サンプルv2

8,845 views

Published on

街中にある誘導表示やサイン計画、施設内の誘導導線に着目し、使う立場で感じる様々な疑問や不満から、Webサイトにも必要なユーザー視点にたった使いやすさ・わかりやすさのポイントを再認識できます。
なぜ?自分が作るWEBサイトが、分かりにくいのか?が、手に取るようにわかる2時間です。
頭では分かっているけど、ユーザビリティについて本当のところどうして「そうなの?!」をもっと知りたい方なら、WEBの専門知識がなくても楽しく理解できます。


毎月、東京神田で開催中!詳しくはこちらをご覧下さい。
東京開催:http://www.continue.jp/lectures/seminar20170121/
大阪開催:http://www.continue.jp/lectures/seminar20170218osaka/

Published in: Education
  • Be the first to comment

01:街中の案内表示から学ぶ「ユーザー視点のuiデザイン」サンプルv2

  1. 1. 街中の案内表示から学ぶ「ユーザー視点のUIデザイン」
  2. 2. マスメディアとWEBデザインの違い
  3. 3. テレビ・新聞・ラジオ・雑誌などのマスメディアは、 本人の意識にかかわらず接触できるために情報が通り過ぎていく
  4. 4. ユーザーが自発的・能動的に行動して情報を得るWEBは、 マスに比べて、欲しいときに欲しい情報を得られるメリットがある
  5. 5. 目的に近い情報を中心に探す 目的がハッキリしている ユーザーが能動的であればあるほど 周りの情報が見えなくなる 知りたいキーワードに集中するために
  6. 6. ユーザーの知りたい所へすんなり行けることがWEBサイトの基本
  7. 7. 分かりにくいことで評判の 東京スカイツリー・東京ソラマチを例にして シミュレーションしてみましょう
  8. 8. Webサイトのメニューやナビゲーションのように、 自分の居る場所から目的地へ 最短ルートを適切に案内するのが「施設サイン表示」の役割 とうきょうスカイツリー駅 押上駅 (スカイツリー前) 東京スカイツリー すみだ水族館 東京ソラマチ プラネタリウム天空
  9. 9. ホーム上にある駅名表示。 東京スカリツリーへの導線がそもそも案内されていない
  10. 10. 反対側の「正面口」よりの階段を降りた先には、誘導表示が何もない
  11. 11. エスカレーターで2階に上がると誘導サインで途中までは行けるが……
  12. 12. エスカレーターで4階まで上がると、 東京スカイツリー入口フロアの中へ直接行ける
  13. 13. 案内サインは「正面改札口」側へ行くように、 施設側の強い意思による「導線」が示されている
  14. 14. 施設側の思惑 ★目的別に導線を分ける ★平日・休日同一オペレーション ★ルートを具体的にしない 来訪者側の不利益 施設側の都合優先・ユーザー視点の欠如 ★具体的でない案内表示による時間的ロス ★情報不足による不安やストレス ★施設への不信感
  15. 15. 分かりやすい案内表示とは? 来訪者 ✓目的地 ✓行きたい方向 駅案内 ✓伝えたいこと 想像していることと 表示が同じ 東京スカイツリー 東京ソラマチ すみだ水族館 プラネタリウム天空 知りたい情報と 案内表示に ズレがある 結果としてわかりにくい状況が生まれる。 正面改札口 東改札口 東京スカイツリータウン ステーションストリート
  16. 16. 動線と導線の違い
  17. 17. 導線動線建物などで人や物の動きの 軌跡を示す線 建物内や店内、街中などで 人を導く経路 過去 未来 建築業界 流通業界
  18. 18. 着目ポイント ★ユーザーの行動動線から導線を作ることが、 もっとも効率的で間違いない設計となる ★導線は人の流れの太い道すじとして考える ★メインだけでなくサブの流れも考える
  19. 19. ユーザー視点 戦略的情報発信型 Webサイト 結果として、ユーザーが満足できる価値があること サイト利用者 ✓知りたいこと ✓調べたいこと Webサイト ✓伝えたいこと 想像したとおりに 情報が合致する サイトの利用動機 達成 サイトが 提供した 価値 満足 感 サイトへの信頼感 目的 目標 分かりやすいとは?
  20. 20. 何を知りたいか? 誰が WEBサイトが目的とするゴールは誰のためのものか?

×