Copyright © 2014 Glagrid Inc. All Rights Reserved.
ユーザーの活動に溶け込む UIを設計するための考え方
株式会社グラグリッド
尾形 慎哉
2014.7.29
北海道モバイルコンテンツ・ビジネス協議会 勉強会
Copyright © 2014 Glagrid Inc. All Rights Reserved. 1
尾形 慎哉
自己紹介
株式会社グラグリッド 代表取締役 サービスプロデューサー/HCD-Net認定 人間中心設計専門家
・事業戦略立案の支援 ・プロジェクトファシリテーション ・ユーザエクスペリエンスデザイン コンサルティング ・コミュニティによるサービスプロデュース
【対象】
モバイルアプリ、事務機器、旅行、学習塾、家電、
イベント企画、農業、など
Copyright © 2014 Glagrid Inc. All Rights Reserved.
活動事例
ユーザー起点のサービス開発への移行プロセス ―株式会社エムティーアイの事例―
尾形慎哉 堀口麻奈 松尾睦
(神戸大学大学院 ディスカッション・ペーパー)
http://www.b.kobe-u.ac.jp/paper/2013_06.html
ユーザー起点での開発を、組織的に、より強化するための仕組みづくり
2
Copyright © 2014 Glagrid Inc. All Rights Reserved.
ユーザインタフェースの概念
【ユーザインタフェース】
ユーザーが機器システムを使用するときに、ユーザーと
機器システムが接する接面のこと ユーザビリティハンドブック,共立出版(2007)
ユーザー システム
4
Copyright © 2014 Glagrid Inc. All Rights Reserved.
出典:認知的インタフェース,海保博之(1991)
映画が見られる
水が流れる
照明がつく
インタフェースの二重接面性
13
Copyright © 2014 Glagrid Inc. All Rights Reserved.
ユーザインタフェースの概念
【ユーザインタフェース】
UIの向こう側の世界を変えるための窓口
映画が見られる
水が流れる
照明がつく
14
Copyright © 2014 Glagrid Inc. All Rights Reserved.
本日の内容
Photo:j0sh
・写真を撮影 ・撮影した写真をシェア ・コメントをチェック
・自分の撮影した写真を、 友人がすぐに確認できる
第一接面
第二接面 向こう側の世界が 複雑化してきている
Copyright © 2014 Glagrid Inc. All Rights Reserved.
本日の内容
それらを取り巻く社会、文化、技術に関連し、使った側の(おもに不
愉快な)経験を通じて変更が重ねられていく。
出典:フォークの歯はなぜ四本になったか,ヘンリー・ペトロスキー(1995)
物理的世界の変化に合わせて、 道具の世界も変わっていく
Photo:wikipedia
Copyright © 2014 Glagrid Inc. All Rights Reserved.
2つのキーワード
取り巻く社会、文化、技術に関連し、
使った側の(おもに不愉快な)経験を通じて
変更が重ねられていくもの
利用状況 意味性 理解する上での キーワード
向こう側の世界
これらを理解した上で、 UIを設計することがポイント
ユーザーの生活に溶け込むUI
18
Copyright © 2014 Glagrid Inc. All Rights Reserved.
意味性
意味性とは、製品やサービスなど、
その人工物のそもそもの目標が
本当に意味あることなのかを問う考え方
U-Site 黒須教授のユーザ工学講義http://www.usability.gr.jp/lecture/meaningfulness.html
ドライヤーの例 イオン注入機能付き、見た目のバランス、操作性もよい。 しかし、「風力が弱すぎる」のでは髪を乾かすという本来の目標が達成できない。
20
Copyright © 2014 Glagrid Inc. All Rights Reserved.
現場ロイドの意味性は?
現場ロイド:http://www.gembaroid.jp/gembaroid/ 22
Copyright © 2014 Glagrid Inc. All Rights Reserved.
利用状況
ユーザー、仕事、装置、並びに製品が使用される物理的及び社会的環境
ユーザー、仕事、装置、並びに製品が使用される物理的及び社会的環境
Copyright © 2014 Glagrid Inc. All Rights Reserved.
なぜタオル掛けに 色が付いているのか?
一般的なタオル掛け 色のついたタオル掛け
気仙沼プラザホテル
利用状況:タオル掛けの例
27
Copyright © 2014 Glagrid Inc. All Rights Reserved.
利用状況:タオル掛けの例
W h o ( 誰 が )
W h e n ( い つ )
Where(どこで)
W h a t ( 何 を )
W h y ( な ぜ )
How(どのように)
宿泊客(複数人)
お風呂から戻った時
ホテルの部屋で
同じ柄のタオルを
乾かすため
半分に折って掛ける
顧客の要求:自分が使ったタオルを再度使いたい
28
Copyright © 2014 Glagrid Inc. All Rights Reserved.
インタビュー対象者: 日時: / / :
活動 やっていること 理由/目的 感じていること
聞きたい活動 どんなもので/どんなことをしているか
利用している理由や目的/
他のものを利用しない理由
意識していること
嫌なこと/不満なこと ←→ 嬉しいこと/好きなこと
例:音楽を聴く
例:電車の中で、ハードロックの音楽を聴く 満員電車の嫌な気分を紛らわす 爽快な気分になりたい
現状把握シート
Copyright © 2014 Glagrid Inc. All Rights Reserved.
その時「チーズカレー鍋」の
下段に、見慣れたようで
ちょっと違う
鍋の素が目に飛び込んできた。
「キモチ鍋の素」
あれ、これなんだろう???
菜美子は思わず手にとって確
認した。
顧客の体験を記述する
シナリオ スケッチ カスタマージャーニーマップ
とある日、菜美子は夕食の食
材を買いにいつものスーパー
に出かけた。
そういえば最近鍋していない
し困ったときの鍋頼み、とい
うことでいつものチーズカ
レー鍋にしよう、自然と行き
慣れた陳列棚へ向かった。
※昔(独身時代)、鍋の定番
だったキムチ鍋の存在を菜
体験に合わせて適切なタイミングで提供する 機能・情報と操作デバイスを考える
利用状況を把握するために
31
Copyright © 2014 Glagrid Inc. All Rights Reserved. 32
サービスを通した体験 Back S
tage
Fro
nt
Sta
ge
体験前 体験中 体験後後
Member
Staff
User Action
Physical Evidence
Stage
Line of Interaction
Work Flow
Activity
Think
Activity
Copyright © 2014 Glagrid Inc. All Rights Reserved.
デバイスエコシステムにおける6つのパターン
パターン1.一貫性の保持 パターン2.状態の同期 パターン3.画面共有
パターン4.デバイス間の移動 パターン5.相互補完 パターン6.同時発生
出典:モバイルIAシンキング,坂本貴史(2014)
Copyright © 2014 Glagrid Inc. All Rights Reserved.
取り巻く社会、文化、技術に関連し、
使った側の(おもに不愉快な)経験を通じて
変更が重ねられていくもの
利用状況 意味性 理解する上での キーワード
向こう側の世界
これらを理解した上で、 UIを設計することがポイント
ユーザーの生活に溶け込むUI設計に向けて
36
Copyright © 2014 Glagrid Inc. All Rights Reserved.
領域横断の事業設計パートナー
株式会社グラグリッド
www.glagrid.jp
尾形 慎哉 [email protected]