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

ありがとうございました