Designing UX to design user interface

UI for UX

Yoshinori Wakizaka | 2nd Aug 2011 at TUAD

11年8月4日木曜日

はじめまして

Yoshinori Wakizaka

Project manager on UI/UX and marketing対象分野はスマートフォン、モバイル

yoshinori wakizaka @wackiesrock

11年8月4日木曜日

Key message

プロダクトやサービスを心地よく利用してもらうためにUIをデザインする

11年8月4日木曜日

アジェンダ

• 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日木曜日

User Interface Design

11年8月4日木曜日

UIデザインとは

Interfaceものごとの境界となる部分と、その境界でのプロトコル（手順）を指す

User Interface (UI) 機械、特にコンピューターとユーザーがやりとりするためのインターフェース

User Interface Design (UID) ユーザーのエクスペリエンスと相互作用に関わる部分、なるべく直感的にインターフェースが使えるように設計すること。

[wikipediaより]

11年8月4日木曜日

ユーザーエクスペリエンスや

インタラクションに関わる部分が

直感的に使えること

11年8月4日木曜日

User Experience (UX)

11年8月4日木曜日

「製品とユーザーのインタラクションのあらゆる面、すなわちどのように気づかれ、学ばれ、使われるのか」に関わる。ユーザーエクスペリエンス（UXと略記されることが多い）とは、ユーザーがある製品やシステムを使ったときに得られる経験や満足など全体を指す用語である ......

...... 特定のシステム/機器についてのユーザーエクスペリエンスに良い影響を与えることを目的としている。ユーザーエクスペリエンスデザインでは画面表示/ユーザインタフェース/システムの反応を定義し、ユーザーの満足とビジネス要求を同時に満たそうとする。

（Wikipediaから抜粋）http://www.littlespringsdesign.com/wp-content/themes/LSD%20theme/images/experiencemap1.pdf

ユーザーエクスペリエンス（デザイン）

11年8月4日木曜日

役に立つ→使いやすい→使い心地がよい→全体的な経験が良い

source: http://wn.com/Usability_research

11年8月4日木曜日

ユーザーエクスペリエンスのために

できること

11年8月4日木曜日

ユーザーリサーチユーザーのことを知る、利用シーンを理解する製品に対する満足度を評価する

マーケティングビジネスニーズを満たす商品開発、市場開拓ユーザーのニーズを満たし、ビジネスニーズも満たす

デザイン商品やサービスのユーザビリティを向上させるユーザーが満足する魅力的な商品をつくる

11年8月4日木曜日

ユーザーに合った機能を、使いやすくデザインする

使いやすいだけでなく、使い心地をよくする

プロダクトだけでなく利用経験全体の質を向上させる

デザインにできること

11年8月4日木曜日

11年8月4日木曜日

サービスエクスペリエンスのデザイン

11年8月4日木曜日

入り口でのもてなし注文から商品の受け取り店内での過ごし方 ...

11年8月4日木曜日

プロダクトのユーザーエクスペリエンス

Sony Digital Camera Interaction flow (c)axis

11年8月4日木曜日

ユーザーエクスペリエンスのフローUnbox the digital camera to take picture

UnboxSetting Shooting

picture

Start Start

Shooting

パッケージデザイン ドキュメンテーション

ハードウェアデザイン ソフトウェアデザイン

User experience

11年8月4日木曜日

何をデザインするのか？どういう価値を提供するのか？

11年8月4日木曜日

http://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/

情報構造

ビジュアル

インタラクション

工業デザイン

アーキテクチャ

コンテンツ

UXデザインの要素

11年8月4日木曜日

多様化しているUIデザインは、どのようにして進化してきたのか？

11年8月4日木曜日

UIデザインの歴史

11年8月4日木曜日

UIデザインの歴史～80年代：産業デザイン、人間工学

　90年代：ソフトウェア、ユーザビリティ

　00年代：ウェブ、UX、サービス

　10年代：ソーシャルインタラクション

作業環境、入出力機器、制御画面の設計

ソフトウェアデザインのUI設計

ウェブにおけるUXのはじまり、サービスのデザイン

ソーシャルネットワークとUIデザイン

11年8月4日木曜日

1970’sWord processor

11年8月4日木曜日

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日木曜日

1990‘s Graphical User Interface

11年8月4日木曜日

2000’s-2010: web & mobile

11年8月4日木曜日

デザインの進化

デザインの多様化

11年8月4日木曜日

ソフトウェアプロダクトの時代

• プロダクトもUIも単体で利用

11年8月4日木曜日

Software product design: NOKIA N9

11年8月4日木曜日

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日木曜日

サービスソフトウェアの時代• サービスをいろんなデバイスで利用

11年8月4日木曜日

UIデザインの多様性

HardwareHardware

Software

Hardware

Software

Service

11年8月4日木曜日

O2OOnline to Offline

オンラインの情報がオフラインの購買活動に影響を与えること。

オンラインで情報取得、リアルな店舗に足を運ぶ

→Goodzerオフラインの情報をキーとしてオンラインで行動する

→Shazam

11年8月4日木曜日

Googzerローカル店舗のオンラインショッピングサイトを自動でクローリングし、そのローカル店舗の所在地をアイテムデータと紐付けてGoogle Maps上にマッピング。各社と提携して在庫データを配信してもらう今までのモデルでは時間がかかりスケールしないという考えに基づき、完全自動型のクローリング技術を構築し現在のインターフェースに落とし込んでいる。

http://svlifelog.blogspot.com/2011/06/o2o-commerce-now-and-future.html

11年8月4日木曜日

Shazam

http://itomasahiro.arrow.jp/?p=425

音声検索による音楽検索アプリ、街中で、ラジオから流れてくる曲で、この曲何だっけ？という時に曲名を調べることができる。そのまま楽曲購入も可能。タグをシェアすることも可能。

11年8月4日木曜日

マルチデバイス

11年8月4日木曜日

デバイスへの最適化

11年8月4日木曜日

デバイスは持ち替えてもサービスは使い続ける

TV Everywhere – Thoughts on designing for multiple devices

http://sherylyulin.com

11年8月4日木曜日

何をデザインするのか？どういう価値を提供するのか？

11年8月4日木曜日

UIデザインの仕事

11年8月4日木曜日

デザインの多様化職能の細分化

11年8月4日木曜日

Case study: Rakuten

現在の募集職種（経験者採用）

- ウェブディレクター - フロントエンドエンジニア - プロジェクトマネージャー - ユーザビリティマネージャー - SEO コンサルタント

11年8月4日木曜日

Case study: Facebook

現在の募集職種 - コミュニケーションデザイナー - コンテンツストラテジスト - プロダクトマネージャー（ソフトウェアプロダクト、UI） - ユーザーインターフェースエンジニア - ユーザーエクスペリエンスリサーチャー

11年8月4日木曜日

UIデザイン関連のJob

• ビジュアルクリエイティブのデザイン

• UI／インタラクションのデザイン、実装

• コンセプト、コンテンツのデザイン

• UX、ユーザビリティのリサーチ

• プロジェクトマネジメント

11年8月4日木曜日

チームビルディング

11年8月4日木曜日

source: http://www.jjg.net/elements/pdf/elements.pdf

ビジュアルデザイン

インフォメーションアーキテクチャー

ユーザーエクスペリエンスリサーチャー

UIデザイナーフロントエンドエンジニア

ユーザビリティリサーチャー

ユーザーエクスペリエンスデザイナー

11年8月4日木曜日

チームビルディング

source: http://shermanux.com/Files/UXKit/UX_Kit_Aug09.pdf

UXディレクター

UXマネージャー

ユーザーリサーチャーユーザビリティ

インタラクションデザイナー

ビジュアルデザイナー ＋α

SHERMAN UXの考えるデザインチームづくりユーザビリティ、インタラクション、クリエイティブと、必要に応じてそれ以外の専門家を入れてチームを構成する

11年8月4日木曜日

UIデザインのプロセス

11年8月4日木曜日

成功するデザインの主要3原則

• 必ず早い段階でユーザに焦点を合わせ、デザイン作業を開始する前にフィールド調査を実施すること。

• 開発プロセス全体を通じて、実験的ユーザビリティ評価を行うこと。

• 反復的デザインのプロセスに従うこと。

source: http://www.usability.gr.jp/alertbox/20080421_25-years-usability.html

John Gould, Clayton Lewis (1983)

11年8月4日木曜日

UCDデザインプロセスsource: http://www.sapdesignguild.org/resources/ucd_process.asp

プランUCDプロジェクトの企画

リサーチユーザーゴール、マーケットニーズのリサーチ、理解

デザインラフスケッチ、UIデザイン

アダプトベストソリューションを実際の制約条件のもとで実装

メジャー製品リリース後に、ユーザビリティなど利用品質を計測

11年8月4日木曜日

UIデザインに必要なこと• UIデザインの関連領域が広がってきている、デザインの役割が多様化してきた。

• UXのためにUIがある、経験をデザインする。

• 何をデザインするか、どうデザインするか。

• デザインに関する役割も多種多様、自分のロールを意識して、チームで仕事する。

11年8月4日木曜日

Workshop

11年8月4日木曜日

テーマ：テレビ

新しいデザインコンセプトの理解ストーリーボードで表現する - 現在の生活への導入イメージ - 新サービスが今の生活をどう変えるか

ゴール

11年8月4日木曜日

テーマ：Google TVsource: http://www.google.com/tv/

11年8月4日木曜日

テーマ

• 新しいデザインコンセプトを

• 現在の生活の中に導入

• 新サービスが今の生活をどう変えるか

• ストーリーボードで表現する

11年8月4日木曜日

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日木曜日

＝TV＆レコーダー＆インターネット

TV

動画

ネット

番組検索 番組録画 録画コンテンツの再生

オンラインコンテンツ検索＆再生 YouTube web + TV

Twitterなどウェブコンテンツ ストリーミング音楽再生 オンラインフォト検索、閲覧

11年8月4日木曜日

6-up テンプレート6コマでシナリオを表現、利用シーンのポイントを伝える。

source: http://www.boxuk.com/blog/using-sketchboards-to-design-great-user-interfaces

ペルソナ想定ユーザーの代表者について、キャラクターやニーズを書き出す。

アウトプット

名前、性別、年齢職業好きなこと生活パターンなど

11年8月4日木曜日