google developer day 2010 japan: ここちよい android - おもいやりの ui デザイン...

(c) adamrocker / rin yano 2010

#android3

ここちよいAndroid おもいやりのUIデザイン

adamrocker / 矢野りん

http://twitter.com/search?q=%23gdd2010jp



#android3

自己紹介• ソフトウエアの研究中

• Android向け日本語IMEのSimejiを開発中

• Sandboxに「ハラタケ目：BTk」出展中

• KDDI Mobile（US）のHTC HeroにSimejiがプリインストールされています

• 最近Sony EricssonのXperia X10のPOBoxと、Simejiの一部「マッシュルーム」が合体して「POBox Plug-in」に




#android3

自己紹介• ソフトウエアのビジュアルデザイン担当

• ブリリアントサービスの「ウキウキView」/ GClue「Blocco」/ 「オクトバ」アプリのデザインまわりを担当

• 10月9日と11月13日にWebまわりのビジュアルデザインのテクニックを磨くイベント「CSS Nite LP11 / LP12」をやります

• 物販アプリ「DropCart」Developer SandBoxのデ部ブースでみてね！




#android3

アジェンダ• UX(User eXperience)とは？

• SimejiにおけるUXの考え方

• SimejiのUXにおけるグラフィックデザイン面の工夫




UX(User eXperience)とは？


#android3

UXとは？

ユーザーがある製品やシステムを使ったときに得られる経験や満足など全体を指す用語。　　　　　　　　　　　　　　　　　　　(Wikipedia)




#android3

UXとは？製品やサービスの使用・消費・所有などを通じて、人間が認知する（有意義な）体験のこと。製品やサービスを利用する過程（の品質）を重視し、ユーザーが真にやりたいこと（本人が意識していない場合もある）を「楽しく」「面白く」「心地よく」行える点を、機能や結果、あるいは使いやすさとは別の“提供価値” として考えるコンセプト。　　　　　　　　　　　　　　　　　　　　　　 (@IT)@




#android3

UXとは？

ユーザへの“おもいやり”




#android3

おもいやり？

•気持ち良くさせる？楽しませる？‣ ターゲットユーザが決まっているなら可能かも…

‣ 毎日見ても、触っても飽きませんか？

‣ どういうシーンでも鬱陶しくありませんか？




#android3

おもいやり？

“気持ち良くさせる”というよりか

“不快ではない”ようにすること




#android3

おもいやり？

不快ではない＝違和感がない




#android3

おもいやり？

静的・動的な視覚情報に対して「違和感のない」体験を提供する

‣ アニメーションを利用したインタラクション‣ グラフィックによる世界観




SimejiにおけるUXの考え方


#android3

SimejiにおけるUX

ユーザの脳への“おもいやり”




#android3

認識する

テスト- 設定を変更する -




#android3

認識する




#android3

何が変わったのかを認識するには時間が必要脳への負担

認識する




#android3

認識する

テスト- 設定を変更する -(ただしDialogなし)




#android3

認識する




#android3

認識する

どうやら比較対象が近いと簡単に認識できるらしい




#android3

認識する

Dialogがおじゃま？でも必要！




#android3

Simejiの解決策

Demo




#android3

おもいやり１

脳の処理負担を軽減するため変化は操作に対して

時間・距離的に近くする




#android3

モバイルにおける課題

•ディスプレイが狭い‣ 親指での操作が基本‣ 右手操作なら右側が見えなくなる

手が邪魔




#android3

とある解決策




#android3

Simejiの解決策❖ 4次元の活用

Time




#android3

Simejiの解決策❖ 4次元の活用

Time

認識には時間が必要ユーザが認識するための

“ゆとり”




#android3

フリックの例

Demo




#android3

おもいやり２

脳が処理する余裕を与える




#android3

UXの方法‣ マンマシンインターフェース‣ ヒューマンファクター‣ 情報アーキテクチャ‣ インタラクションデザイン‣ ユーザインターフェースデザイン‣ ユーザビリティ‣ グラフィックデザイン

　　　　　　　　　　　　　　　　　　　(Wikipedia)

‣ マンマシンインターフェース‣ ヒューマンファクター‣ 情報アーキテクチャ‣ インタラクションデザイン‣ ユーザインターフェースデザイン‣ ユーザビリティ‣ グラフィックデザイン




#android3

インタラクション？２つ以上の存在が互いに影響を及ぼし合うこと

Android(タッチディスプレイ)ではヒトがタッチすることでアプリが動く

❖UX視点を加えるヒトがタッチすることでアプリが

違和感なく動く




#android3

SimejiのSkinでは❖動作の言語化

“Skinをインストール”




#android3

インストールの表現

Demo




#android3

おもいやり３

自然な動作表現




#android3

Simejiのおもいやり

1.変化は時間・距離的に近く2.脳が処理する余裕3.自然な動作表現

どうやって？




#android3

おもいやりの思考ツール１•躍度(やくど)‣ 生物に不快感を与える評価値

j = Δa/Δtj:躍度, a:加速度, t:時間

jが大きいと不快感が増す加速度の変化(Δa)を小さくする




#android3

おもいやりの思考ツール２•フィッツの法則‣ 対象物を特定する予測時間

T = a + blog2(1 + D/W)T:時間, D:対象物までの距離, W:対象物の幅

距離(D)を小さく、モノ(W)を大きくする




#android3

おもいやりの思考ツール３,4

•ヒックの法則‣ 沢山あると選べない

T = a + blog2(1 + n)

•テスラーの複雑性保存の法則‣ 複雑な処理の総量は普遍‣ 複雑な処理はあっち(アプリ)が負担するかこっち(ヒト)が負担するか




SimejiのUXにおけるグラフィックデザイン面の工夫


#android3

アプリにとってグラフィックデザインは

•設計のあとの仕上げ•作り手にとっては最後の仕事•使い手にとっては最初の判断材料




#android3


#android3

アプリにとってグラフィックデザインのねらいは

•情報の理解を助ける•好きになってもらう

このふたつのマリアージュが世界観になる

（たぶん）





#gdd2010jp

わかりやすい？


#android3

わかりやすい？


#android3

好き？




#android3

•情報の理解を助ける• 情報を整理して受け取りやすく

•好きになってもらう• 清潔感を出す

アプリにとってグラフィックデザインのねらいは

このふたつの条件さえ満たしていればOKだ！





#android3

SimejiのUXにおけるグラフィックデザイン面の工夫

•デザインの方針•ロゴのデザイン•Simejiサーバー（スキンアップロードページ）のレイアウト




#android3

Simejiデザインの方針

•フラットスタイルを単純にしてスキンを目立たせたい

•シンプルアイコンのもつ意味をストレートに伝えたい

•ラブリー毎日使う物だから、愛着を持って欲しい




#android3

Mies van der Rohe

“Less is more.”




#android3

フラット／シンプル




#android3

Simejiスキン




#android3

主役はスキン。UIの見栄えは単純に




#android3

フラット／ラブリー




#android3

フラット／シンプル／ラブリー




#android3

ちなみに幅48ピクセルでもよめます




#android3




Simejiに使ったグラフィックデザイン理論


#android3

くらしに役立つデザイン理論

•そろえる•コントラストに気をつける




#android3

そろえる/ボリューム感をそろえる

ふとっちょは短めに




#android3

そろえる/ボリューム感をそろえる

幅のあるかたちは細めに




#gdd2010jp

円のおおきさが目安もともと丸いデザインは目安よりひとまわり小さく

GOOD

NOT SO GOOD




#android3

Mies van der Rohe

“God is in the detail.”




#android3

情報デザイン？




#android3

ローコントラスト

ハイコントラスト




#android3

大／小サイズのコントラスト




#android3

Simejiデザインの方針

•フラット•シンプル•ラブリーこの３つが世界観を作っている（と、信じている）




まとめ


#android3

まとめ

SimejiのUX＝おもいやり

‣ 不快にならないインタラクション

‣ 整理・整頓による清潔感




#android3

Louis Henry Sllivan

“Form follows function.”




#android3

throw lifehttp://www.adamrocker.com/

TwitterID:adamrockere-mail:[email protected]

adamrocker

ものづくりにっぽんhttp://yanorin.blogspot.com/

TwitterID:yanorine-mail:[email protected]

Rin Yano#andronjo



http://www.adamrocker.com




mailto:[email protected]


http://yanorin.blogspot.com

http://yanorin.blogspot.com



google developer day 2010 japan: ここちよい android - おもいやりの ui デザイン...

Technology