ui for ux_aug2011
DESCRIPTION
User interface design in TUAD 2011TRANSCRIPT
![Page 1: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/1.jpg)
Designing UX to design user interface
UI for UX
Yoshinori Wakizaka | 2nd Aug 2011 at TUAD
11年8月4日木曜日
![Page 2: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/2.jpg)
はじめまして
Yoshinori Wakizaka
Project manager on UI/UX and marketing対象分野はスマートフォン、モバイル
yoshinori wakizaka @wackiesrock
11年8月4日木曜日
![Page 3: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/3.jpg)
Key message
プロダクトやサービスを心地よく利用してもらうためにUIをデザインする
11年8月4日木曜日
![Page 4: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/4.jpg)
アジェンダ
• UIデザインについて
• デザインの広がり
• UIデザインの仕事
• UIデザインの手法
• UIデザインのパラダイム
What UI design mean?
A definition of Design is changing
Role and responsibility
UI Design and evaluation methods
Agenda
+ 30min workshop
A new paradigm of UI design
50min
11年8月4日木曜日
![Page 5: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/5.jpg)
User Interface Design
11年8月4日木曜日
![Page 6: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/6.jpg)
UIデザインとは
Interfaceものごとの境界となる部分と、その境界でのプロトコル(手順)を指す
User Interface (UI) 機械、特にコンピューターとユーザーがやりとりするためのインターフェース
User Interface Design (UID) ユーザーのエクスペリエンスと相互作用に関わる部分、なるべく直感的にインターフェースが使えるように設計すること。
[wikipediaより]
11年8月4日木曜日
![Page 7: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/7.jpg)
ユーザーエクスペリエンスや
インタラクションに関わる部分が
直感的に使えること
11年8月4日木曜日
![Page 8: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/8.jpg)
User Experience (UX)
11年8月4日木曜日
![Page 9: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/9.jpg)
「製品とユーザーのインタラクションのあらゆる面、すなわちどのように気づかれ、学ばれ、使われるのか」に関わる。ユーザーエクスペリエンス(UXと略記されることが多い)とは、ユーザーがある製品やシステムを使ったときに得られる経験や満足など全体を指す用語である ......
...... 特定のシステム/機器についてのユーザーエクスペリエンスに良い影響を与えることを目的としている。ユーザーエクスペリエンスデザインでは画面表示/ユーザインタフェース/システムの反応を定義し、ユーザーの満足とビジネス要求を同時に満たそうとする。
(Wikipediaから抜粋)http://www.littlespringsdesign.com/wp-content/themes/LSD%20theme/images/experiencemap1.pdf
ユーザーエクスペリエンス(デザイン)
11年8月4日木曜日
![Page 10: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/10.jpg)
役に立つ→使いやすい→使い心地がよい→全体的な経験が良い
source: http://wn.com/Usability_research
11年8月4日木曜日
![Page 11: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/11.jpg)
ユーザーエクスペリエンスのために
できること
11年8月4日木曜日
![Page 12: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/12.jpg)
ユーザーリサーチユーザーのことを知る、利用シーンを理解する製品に対する満足度を評価する
マーケティングビジネスニーズを満たす商品開発、市場開拓ユーザーのニーズを満たし、ビジネスニーズも満たす
デザイン商品やサービスのユーザビリティを向上させるユーザーが満足する魅力的な商品をつくる
11年8月4日木曜日
![Page 13: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/13.jpg)
ユーザーに合った機能を、使いやすくデザインする
使いやすいだけでなく、使い心地をよくする
プロダクトだけでなく利用経験全体の質を向上させる
デザインにできること
11年8月4日木曜日
![Page 14: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/14.jpg)
11年8月4日木曜日
![Page 15: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/15.jpg)
サービスエクスペリエンスのデザイン
11年8月4日木曜日
![Page 16: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/16.jpg)
入り口でのもてなし注文から商品の受け取り店内での過ごし方 ...
11年8月4日木曜日
![Page 17: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/17.jpg)
プロダクトのユーザーエクスペリエンス
Sony Digital Camera Interaction flow (c)axis
11年8月4日木曜日
![Page 18: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/18.jpg)
ユーザーエクスペリエンスのフローUnbox the digital camera to take picture
UnboxSetting Shooting
picture
Start Start
Shooting
パッケージデザイン ドキュメンテーション
ハードウェアデザイン ソフトウェアデザイン
User experience
11年8月4日木曜日
![Page 19: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/19.jpg)
何をデザインするのか?どういう価値を提供するのか?
11年8月4日木曜日
![Page 20: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/20.jpg)
http://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/
情報構造
ビジュアル
インタラクション
工業デザイン
アーキテクチャ
コンテンツ
UXデザインの要素
11年8月4日木曜日
![Page 21: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/21.jpg)
多様化しているUIデザインは、どのようにして進化してきたのか?
11年8月4日木曜日
![Page 22: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/22.jpg)
UIデザインの歴史
11年8月4日木曜日
![Page 23: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/23.jpg)
UIデザインの歴史~80年代:産業デザイン、人間工学
90年代:ソフトウェア、ユーザビリティ
00年代:ウェブ、UX、サービス
10年代:ソーシャルインタラクション
作業環境、入出力機器、制御画面の設計
ソフトウェアデザインのUI設計
ウェブにおけるUXのはじまり、サービスのデザイン
ソーシャルネットワークとUIデザイン
11年8月4日木曜日
![Page 24: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/24.jpg)
1970’sWord processor
11年8月4日木曜日
![Page 25: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/25.jpg)
The Xerox Star 8010 "Dandelion"http://www.digibarn.com/collections/systems/xerox-8010/index.html
The Xerox Star 8010(1981)
1980’sPersonal computer
11年8月4日木曜日
![Page 26: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/26.jpg)
1990‘s Graphical User Interface
11年8月4日木曜日
![Page 27: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/27.jpg)
2000’s-2010: web & mobile
11年8月4日木曜日
![Page 28: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/28.jpg)
デザインの進化
デザインの多様化
11年8月4日木曜日
![Page 29: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/29.jpg)
ソフトウェアプロダクトの時代
• プロダクトもUIも単体で利用
11年8月4日木曜日
![Page 30: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/30.jpg)
Software product design: NOKIA N9
11年8月4日木曜日
![Page 31: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/31.jpg)
NOKIA N9 UI design guideline
!"#$%&'()*%+$,-#*.'/*$',)0102&*,).+%#3'$4)*,)")-"4&'(*$-)+5)4&+#-&4,)"$.),#--',4*+$,)5+()4&')%('"4*+$)+5)%+$,*,4'$4)"$.)6"/"$%'.)2++/6"()7''8+)*%+$,1)2&')9':)+6;'%4*<')+5)4&*,).+%#3'$4)*,)4+)-#*.')"$.)",,*,4=)$+4)4+)4'//)"$.).'3"$.1)
��������������������������������������������������������������� �����������������������(*-&4)(',#/4,1
>#$')?@00
11年8月4日木曜日
![Page 32: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/32.jpg)
サービスソフトウェアの時代• サービスをいろんなデバイスで利用
11年8月4日木曜日
![Page 33: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/33.jpg)
UIデザインの多様性
HardwareHardware
Software
Hardware
Software
Service
11年8月4日木曜日
![Page 34: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/34.jpg)
O2OOnline to Offline
オンラインの情報がオフラインの購買活動に影響を与えること。
オンラインで情報取得、リアルな店舗に足を運ぶ
→Goodzerオフラインの情報をキーとしてオンラインで行動する
→Shazam
11年8月4日木曜日
![Page 35: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/35.jpg)
Googzerローカル店舗のオンラインショッピングサイトを自動でクローリングし、そのローカル店舗の所在地をアイテムデータと紐付けてGoogle Maps上にマッピング。各社と提携して在庫データを配信してもらう今までのモデルでは時間がかかりスケールしないという考えに基づき、完全自動型のクローリング技術を構築し現在のインターフェースに落とし込んでいる。
http://svlifelog.blogspot.com/2011/06/o2o-commerce-now-and-future.html
11年8月4日木曜日
![Page 36: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/36.jpg)
Shazam
http://itomasahiro.arrow.jp/?p=425
音声検索による音楽検索アプリ、街中で、ラジオから流れてくる曲で、この曲何だっけ?という時に曲名を調べることができる。そのまま楽曲購入も可能。タグをシェアすることも可能。
11年8月4日木曜日
![Page 37: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/37.jpg)
マルチデバイス
11年8月4日木曜日
![Page 38: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/38.jpg)
デバイスへの最適化
11年8月4日木曜日
![Page 39: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/39.jpg)
デバイスは持ち替えてもサービスは使い続ける
TV Everywhere – Thoughts on designing for multiple devices
http://sherylyulin.com
11年8月4日木曜日
![Page 40: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/40.jpg)
何をデザインするのか?どういう価値を提供するのか?
11年8月4日木曜日
![Page 41: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/41.jpg)
UIデザインの仕事
11年8月4日木曜日
![Page 42: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/42.jpg)
デザインの多様化職能の細分化
11年8月4日木曜日
![Page 43: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/43.jpg)
Case study: Rakuten
現在の募集職種(経験者採用)
- ウェブディレクター - フロントエンドエンジニア - プロジェクトマネージャー - ユーザビリティマネージャー - SEO コンサルタント
11年8月4日木曜日
![Page 44: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/44.jpg)
Case study: Facebook
現在の募集職種 - コミュニケーションデザイナー - コンテンツストラテジスト - プロダクトマネージャー(ソフトウェアプロダクト、UI) - ユーザーインターフェースエンジニア - ユーザーエクスペリエンスリサーチャー
11年8月4日木曜日
![Page 45: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/45.jpg)
UIデザイン関連のJob
• ビジュアルクリエイティブのデザイン
• UI/インタラクションのデザイン、実装
• コンセプト、コンテンツのデザイン
• UX、ユーザビリティのリサーチ
• プロジェクトマネジメント
11年8月4日木曜日
![Page 46: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/46.jpg)
チームビルディング
11年8月4日木曜日
![Page 47: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/47.jpg)
source: http://www.jjg.net/elements/pdf/elements.pdf
ビジュアルデザイン
インフォメーションアーキテクチャー
ユーザーエクスペリエンスリサーチャー
UIデザイナーフロントエンドエンジニア
ユーザビリティリサーチャー
ユーザーエクスペリエンスデザイナー
11年8月4日木曜日
![Page 48: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/48.jpg)
チームビルディング
source: http://shermanux.com/Files/UXKit/UX_Kit_Aug09.pdf
UXディレクター
UXマネージャー
ユーザーリサーチャーユーザビリティ
インタラクションデザイナー
ビジュアルデザイナー +α
SHERMAN UXの考えるデザインチームづくりユーザビリティ、インタラクション、クリエイティブと、必要に応じてそれ以外の専門家を入れてチームを構成する
11年8月4日木曜日
![Page 49: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/49.jpg)
UIデザインのプロセス
11年8月4日木曜日
![Page 50: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/50.jpg)
成功するデザインの主要3原則
• 必ず早い段階でユーザに焦点を合わせ、デザイン作業を開始する前にフィールド調査を実施すること。
• 開発プロセス全体を通じて、実験的ユーザビリティ評価を行うこと。
• 反復的デザインのプロセスに従うこと。
source: http://www.usability.gr.jp/alertbox/20080421_25-years-usability.html
John Gould, Clayton Lewis (1983)
11年8月4日木曜日
![Page 51: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/51.jpg)
UCDデザインプロセスsource: http://www.sapdesignguild.org/resources/ucd_process.asp
プランUCDプロジェクトの企画
リサーチユーザーゴール、マーケットニーズのリサーチ、理解
デザインラフスケッチ、UIデザイン
アダプトベストソリューションを実際の制約条件のもとで実装
メジャー製品リリース後に、ユーザビリティなど利用品質を計測
11年8月4日木曜日
![Page 52: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/52.jpg)
UIデザインに必要なこと• UIデザインの関連領域が広がってきている、デザインの役割が多様化してきた。
• UXのためにUIがある、経験をデザインする。
• 何をデザインするか、どうデザインするか。
• デザインに関する役割も多種多様、自分のロールを意識して、チームで仕事する。
11年8月4日木曜日
![Page 53: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/53.jpg)
Workshop
11年8月4日木曜日
![Page 54: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/54.jpg)
テーマ:テレビ
新しいデザインコンセプトの理解ストーリーボードで表現する - 現在の生活への導入イメージ - 新サービスが今の生活をどう変えるか
ゴール
11年8月4日木曜日
![Page 55: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/55.jpg)
テーマ:Google TVsource: http://www.google.com/tv/
11年8月4日木曜日
![Page 56: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/56.jpg)
テーマ
• 新しいデザインコンセプトを
• 現在の生活の中に導入
• 新サービスが今の生活をどう変えるか
• ストーリーボードで表現する
11年8月4日木曜日
![Page 57: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/57.jpg)
What is Google TV?Get more than just shows and movies on your television. Watch videos on the web, browse photos, play games, and more -- all in one seamless experience. Now this is entertainment.
source: http://www.youtube.com/watch?v=vS0la9SmqWA&feature=mh_lolz&list=FLrDkPzvWSgbs
11年8月4日木曜日
![Page 58: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/58.jpg)
=TV&レコーダー&インターネット
TV
動画
ネット
番組検索 番組録画 録画コンテンツの再生
オンラインコンテンツ検索&再生 YouTube web + TV
Twitterなどウェブコンテンツ ストリーミング音楽再生 オンラインフォト検索、閲覧
11年8月4日木曜日
![Page 59: UI for UX_Aug2011](https://reader036.vdocuments.net/reader036/viewer/2022081404/55890015d8b42a42708b458c/html5/thumbnails/59.jpg)
6-up テンプレート6コマでシナリオを表現、利用シーンのポイントを伝える。
source: http://www.boxuk.com/blog/using-sketchboards-to-design-great-user-interfaces
ペルソナ想定ユーザーの代表者について、キャラクターやニーズを書き出す。
アウトプット
名前、性別、年齢職業好きなこと生活パターンなど
11年8月4日木曜日