【devlove甲子園2013】uiと画面遷移を設計するときに...
DESCRIPTION
DevLOVE甲子園2013 【創】トラックでの二回表のセッションでのスライドTRANSCRIPT
UIと画面遷移を設計するときに破綻しないようにするための、
株式会社ツクロア 秋葉ちひろ
DevLOVE 現場 甲子園 20132013.11.09
ひと手間
株式会社ツクロアデザイナー集団ビジュアルデザイングラフィックデザインCI/VI、ブランディングUXデザインUIデザインアプリやWebサイトの設計フロントエンドの実装プロトタイプ作成
@tommmmy
デザイナーズハック
破綻しないためのプロトタイプ作成
画面遷移 UIデザイン
Designer EngineerDirector
画面遷移をつくるときの
罠
HOME tab A tab A[list] [detail]
tab B
tab B’
geolocation[list]
tab B[detail]
alertyes
no
すでに決まっている!
整理されているように見えるが、かなり難解
なんでこれつくるときに呼んでくれないんだろう。。
HOME tab A tab A[list] [detail]
tab B
tab B’
geolocation[list]
tab B[detail]
alertyes
no
機能ありきの機械的な画面フロー
I am here
スマホと対話する
やあ、どうしたの?
グルメアプリ
登録したお店のみチェックインでき、そのお店にいるときは、撮った写真を複雑なフローなく簡単にアップできる
台本
I am here
I am here
こんにちは、今、君がどこにいるか探しているから、待ってね
考え中だよー … わかった!今、「楽天タワー」にいるよ、ここでチェックインする?それとも、ここは間違ってる?
I am here
あってる、チェックインするよ
わかりました、「楽天タワー」にチェックインしました。ここで食べたものを写真に撮ってアップする?それともあとにする?
I am here
わかりました、あとにしますね、ではまた!I am here
考え中だよー … わかった!今、「楽天タワー」にいるよ、ここでチェックインする?それとも、ここは間違ってる?
I am here
あってる、チェックインするよ
わかりました、「楽天タワー」にチェックインしました。ここで食べたものを写真に撮ってアップする?それともあとにする?
I am here
あとにするよ
photo by http://www.flickr.com/photos/yuiseki/4038847937/
I am here
はい、あなたはまだ「楽天タワー」にいるようです。ここで食べた写真をアップしますか?
わかりました、ではカメラを立ち上げるのでシャッターボタンをおしてください。I am here
そうだな、しようかな
おーい
カシャ
少しボケていますが、いいですか?I am here
少しボケていますが、いいですか?I am here
I am here
わかりました、ではこの写真をアップしますので少しお待ちください。…アップしおわりました。他にもアップしますか?
いや、もういいよ、ありがとう
いいよ、そのままで
I am here
わかりました、ではまた御用のときは呼んでくださいね!
人間的な対話からの機能の設計
I am here
コミュニケーショ
ン
大事よ
平和に生きよ
うよ
NEW!!NEW!!
no no
yes yessplashcheck in
[list]uploadcamera
timeline
yescompelete
geolocation
WakeLockgeolocation
I am here
台本スマホと対話する
寸劇アプリをつかう
技術者も
デザイナーも
やるべき!
Designer EngineerDirector
UIデザインをつくるときの
罠
静止画でしか確認しない!
プロトタイプで確認する
デザイン操作性
仕様決定
Designer
Engineer
Director
動きをつくれる人
静止画デザイン作成
Designer
Engineer
Director 画像
実装
仕様決定
Designer
Engineer
Director
静止画デザイン作成
動きを含むプロトタイプ
Designer
Engineer
Director 画像、動き
実装
実際につかった感じを経験して確認することが
できる
UIと画面遷移を設計するときに破綻しないようにするための、
ひと手間プロトタイプをつくる
人とのコミュニケーション
I am here
ありがとうございました