(c) adamrocker / rin yano 2010
#android3
ここちよいAndroid
おもいやりのUIデザイン
adamrocker / 矢野りん
(c) adamrocker / rin yano 2010
#android3
自己紹介
• ソフトウエアの研究中
• Android向け日本語IMEのSimejiを開発中
• Sandboxに「ハラタケ目:BTk」出展中
• KDDI Mo...
(c) adamrocker / rin yano 2010
#android3
自己紹介
• ソフトウエアのビジュアルデザイン担当
• ブリリアントサービスの「ウキウキView」/
GClue「Blocco」/ 「オクトバ」アプリの
デザイン...
(c) adamrocker / rin yano 2010
#android3
アジェンダ
• UX(User eXperience)とは?
• SimejiにおけるUXの考え方
• SimejiのUXにおけるグラフィックデザイン面の工夫
(c) adamrocker / rin yano 2010
UX(User eXperience)とは?
(c) adamrocker / rin yano 2010
#android3
UXとは?
ユーザーがある製品やシステムを使ったときに得られる
経験や満足など全体を指す用語。
                   (Wikipedia)
(c) adamrocker / rin yano 2010
#android3
UXとは?
製品やサービスの使用・消費・所有などを通じて、人間
が認知する(有意義な)体験のこと。製品やサービスを
利用する過程(の品質)を重視し、ユーザーが真に...
(c) adamrocker / rin yano 2010
#android3
UXとは?
ユーザへの
“おもいやり”
(c) adamrocker / rin yano 2010
#android3
おもいやり?
•気持ち良くさせる?楽しませる?
‣ ターゲットユーザが決まっているなら可能かも…
‣ 毎日見ても、触っても飽きませんか?
‣ どういうシーンでも鬱...
(c) adamrocker / rin yano 2010
#android3
おもいやり?
“気持ち良くさせる”
というよりか
“不快ではない”
ようにすること
(c) adamrocker / rin yano 2010
#android3
おもいやり?
不快ではない=違和感がない
(c) adamrocker / rin yano 2010
#android3
おもいやり?
静的・動的な視覚情報に対して
「違和感のない」体験を提供する
‣ アニメーションを利用したインタラクション
‣ グラフィックによる世界観
(c) adamrocker / rin yano 2010
SimejiにおけるUXの考え方
(c) adamrocker / rin yano 2010
#android3
SimejiにおけるUX
ユーザの脳への
“おもいやり”
(c) adamrocker / rin yano 2010
#android3
認識する
テスト
- 設定を変更する -
(c) adamrocker / rin yano 2010
#android3
認識する
(c) adamrocker / rin yano 2010
#android3
何が変わったのかを認識するには時間が必要
脳への負担
認識する
(c) adamrocker / rin yano 2010
#android3
認識する
テスト
- 設定を変更する -
(ただしDialogなし)
(c) adamrocker / rin yano 2010
#android3
認識する
(c) adamrocker / rin yano 2010
#android3
認識する
どうやら比較対象が近いと
簡単に認識できるらしい
(c) adamrocker / rin yano 2010
#android3
認識する
Dialogがおじゃま?でも必要!
(c) adamrocker / rin yano 2010
#android3
Simejiの解決策
Demo
(c) adamrocker / rin yano 2010
#android3
おもいやり1
脳の処理負担を軽減するため
変化は操作に対して
時間・距離的に 近くする
(c) adamrocker / rin yano 2010
#android3
モバイルにおける課題
•ディスプレイが狭い
‣ 親指での操作が基本
‣ 右手操作なら右側が見えなくなる
手が邪魔
(c) adamrocker / rin yano 2010
#android3
とある解決策
(c) adamrocker / rin yano 2010
#android3
Simejiの解決策
❖ 4次元の活用
Time
(c) adamrocker / rin yano 2010
#android3
Simejiの解決策
❖ 4次元の活用
Time
認識には時間が必要
ユーザが認識するための
“ゆとり”
(c) adamrocker / rin yano 2010
#android3
フリックの例
Demo
(c) adamrocker / rin yano 2010
#android3
おもいやり2
脳が処理する
余裕を与える
(c) adamrocker / rin yano 2010
#android3
UXの方法
‣ マンマシンインターフェース
‣ ヒューマンファクター
‣ 情報アーキテクチャ
‣ インタラクションデザイン
‣ ユーザインターフェースデザイン
‣...
(c) adamrocker / rin yano 2010
#android3
インタラクション?
2つ以上の存在が互いに影響を及ぼし合うこと
Android(タッチディスプレイ)では
ヒトがタッチすることでアプリが動く
❖UX視点を加える
...
(c) adamrocker / rin yano 2010
#android3
SimejiのSkinでは
❖ 動作の言語化
“Skinをインストール”
(c) adamrocker / rin yano 2010
#android3
インストールの表現
Demo
(c) adamrocker / rin yano 2010
#android3
おもいやり3
自然な動作表現
(c) adamrocker / rin yano 2010
#android3
Simejiのおもいやり
1.変化は時間・距離的に近く
2.脳が処理する余裕
3.自然な動作表現
どうやって?
(c) adamrocker / rin yano 2010
#android3
おもいやりの思考ツール1
•躍度(やくど)
‣ 生物に不快感を与える評価値
j = Δa/Δt
j:躍度, a:加速度, t:時間
jが大きいと不快感が増す
加速...
(c) adamrocker / rin yano 2010
#android3
おもいやりの思考ツール2
•フィッツの法則
‣ 対象物を特定する予測時間
T = a + blog2(1 + D/W)
T:時間, D:対象物までの距離, W:対...
(c) adamrocker / rin yano 2010
#android3
おもいやりの思考ツール3,4
•ヒックの法則
‣ 沢山あると選べない
T = a + blog2(1 + n)
•テスラーの複雑性保存の法則
‣ 複雑な処理の総量...
(c) adamrocker / rin yano 2010
SimejiのUXにおける
グラフィックデザイン面の工夫
(c) adamrocker / rin yano 2010
#android3
アプリにとって
グラフィックデザインは
•設計のあとの仕上げ
•作り手にとっては最後の仕事
•使い手にとっては最初の判断材料
(c) adamrocker / rin yano 2010
#android3
(c) adamrocker / rin yano 2010
#android3
アプリにとって
グラフィックデザインのねらいは
•情報の理解を助ける
•好きになってもらう
このふたつの
マリアージュが世界観になる
(たぶん)
(c) adamrocker / rin yano 2010
#gdd2010jp
わかりやすい?
(c) adamrocker / rin yano 2010
#gdd2010jp
わかりやすい?
(c) adamrocker / rin yano 2010
#android3
わかりやすい?
(c) adamrocker / rin yano 2010
#android3
わかりやすい?
(c) adamrocker / rin yano 2010
#android3
好き?
(c) adamrocker / rin yano 2010
#android3
好き?
(c) adamrocker / rin yano 2010
#android3
好き?
(c) adamrocker / rin yano 2010
#android3
• 情報の理解を助ける
• 情報を整理して受け取りやすく
• 好きになってもらう
• 清潔感を出す
アプリにとって
グラフィックデザインのねらいは
このふたつの条...
(c) adamrocker / rin yano 2010
#android3
SimejiのUXにおける
グラフィックデザイン面の工夫
•デザインの方針
•ロゴのデザイン
•Simejiサーバー(スキンアップロード
ページ)のレイアウト
(c) adamrocker / rin yano 2010
#android3
Simejiデザインの方針
•フラット
スタイルを単純にしてスキンを目立たせたい
•シンプル
アイコンのもつ意味をストレートに伝えたい
•ラブリー
毎日使う物だか...
(c) adamrocker / rin yano 2010
#android3
Mies van der Rohe
“Less is more.”
(c) adamrocker / rin yano 2010
#android3
フラット/シンプル
(c) adamrocker / rin yano 2010
#android3
Simejiスキン
(c) adamrocker / rin yano 2010
#android3
主役はスキン。UIの見栄えは単純に
(c) adamrocker / rin yano 2010
#android3
フラット/ラブリー
(c) adamrocker / rin yano 2010
#android3
フラット/シンプル/ラブリー
(c) adamrocker / rin yano 2010
#android3
フラット/シンプル/ラブリー
(c) adamrocker / rin yano 2010
#android3
ちなみに幅48ピクセルでもよめます
(c) adamrocker / rin yano 2010
#android3
(c) adamrocker / rin yano 2010
Simejiに使った
グラフィックデザイン理論
(c) adamrocker / rin yano 2010
#android3
くらしに役立つデザイン理論
•そろえる
•コントラストに気をつける
(c) adamrocker / rin yano 2010
#android3
そろえる/ボリューム感をそろえる
ふとっちょは短めに
(c) adamrocker / rin yano 2010
#android3
そろえる/ボリューム感をそろえる
幅のあるかたちは細めに
(c) adamrocker / rin yano 2010
#gdd2010jp
円のおおきさが目安
もともと丸いデザインは目安よりひとまわり小さく
GOOD
NOT SO GOOD
(c) adamrocker / rin yano 2010
#android3
Mies van der Rohe
“God is in the detail.”
(c) adamrocker / rin yano 2010
#android3
情報デザイン?
(c) adamrocker / rin yano 2010
#android3
ローコントラスト
ハイコントラスト
(c) adamrocker / rin yano 2010
#android3
大/小 サイズのコントラスト
(c) adamrocker / rin yano 2010
#android3
Simejiデザインの方針
•フラット
•シンプル
•ラブリー
この3つが世界観を作っている
(と、信じている)
(c) adamrocker / rin yano 2010
まとめ
(c) adamrocker / rin yano 2010
#android3
まとめ
SimejiのUX=おもいやり
‣ 不快にならないインタラクション
‣ 整理・整頓による清潔感
(c) adamrocker / rin yano 2010
#android3
Louis Henry Sllivan
“Form follows function.”
(c) adamrocker / rin yano 2010
#android3
throw life
http://www.adamrocker.com/
TwitterID:adamrocker
e-mail:adamrocker@gmai...
Upcoming SlideShare
Loading in …5
×

Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)

5,347 views
5,244 views

Published on

プリの操作から醸し出されるつかいごこち-UX(ユーザ- エクスペリエンス)を生み出す手法を,具体的な事例を通して紹介します。 Android むけ日本語入力アプリケーション 「Simeji」 の UX を 1.アプリの世界観づくり 2.インタラクション 3.グラフィックデザインの 3 つの視点に分けて、制作者の立場から解説するセッションです。1 では世界観を作る意義を、2 では動きのデザインを作る理論の紹介や考え方の例を、3 ではグラフィックデザインの基礎的なセオリーや外観の整え方の基本、UX に与える効果についてお話しする予定です。

Published in: Technology, Business
1 Comment
6 Likes
Statistics
Notes
  • 「不快ではない」ようにすることはとても大切なことだと思います。違和感のない操作を提供するのは作る側としてはとても大変ですが、、、まだまだ勉強します@車谷
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,347
On SlideShare
0
From Embeds
0
Number of Embeds
3,143
Actions
Shares
0
Downloads
41
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)

  1. 1. (c) adamrocker / rin yano 2010 #android3 ここちよいAndroid おもいやりのUIデザイン adamrocker / 矢野りん
  2. 2. (c) adamrocker / rin yano 2010 #android3 自己紹介 • ソフトウエアの研究中 • Android向け日本語IMEのSimejiを開発中 • Sandboxに「ハラタケ目:BTk」出展中 • KDDI Mobile(US)のHTC HeroにSimejiが プリインストールされています • 最近Sony EricssonのXperia X10のPOBox と、Simejiの一部「マッシュルーム」が合体 して「POBox Plug-in」に
  3. 3. (c) adamrocker / rin yano 2010 #android3 自己紹介 • ソフトウエアのビジュアルデザイン担当 • ブリリアントサービスの「ウキウキView」/ GClue「Blocco」/ 「オクトバ」アプリの デザインまわりを担当 • 10月9日と11月13日にWebまわりのビジュ アルデザインのテクニックを磨くイベント 「CSS Nite LP11 / LP12」をやります • 物販アプリ「DropCart」Developer SandBoxのデ部ブースでみてね!
  4. 4. (c) adamrocker / rin yano 2010 #android3 アジェンダ • UX(User eXperience)とは? • SimejiにおけるUXの考え方 • SimejiのUXにおけるグラフィックデザイン面の工夫
  5. 5. (c) adamrocker / rin yano 2010 UX(User eXperience)とは?
  6. 6. (c) adamrocker / rin yano 2010 #android3 UXとは? ユーザーがある製品やシステムを使ったときに得られる 経験や満足など全体を指す用語。                    (Wikipedia)
  7. 7. (c) adamrocker / rin yano 2010 #android3 UXとは? 製品やサービスの使用・消費・所有などを通じて、人間 が認知する(有意義な)体験のこと。製品やサービスを 利用する過程(の品質)を重視し、ユーザーが真にやり たいこと(本人が意識していない場合もある)を「楽し く」「面白く」「心地よく」行える点を、機能や結果、 あるいは使いやすさとは別の“提供価値” として考えるコ ンセプト。                        (@IT)
  8. 8. (c) adamrocker / rin yano 2010 #android3 UXとは? ユーザへの “おもいやり”
  9. 9. (c) adamrocker / rin yano 2010 #android3 おもいやり? •気持ち良くさせる?楽しませる? ‣ ターゲットユーザが決まっているなら可能かも… ‣ 毎日見ても、触っても飽きませんか? ‣ どういうシーンでも鬱陶しくありませんか?
  10. 10. (c) adamrocker / rin yano 2010 #android3 おもいやり? “気持ち良くさせる” というよりか “不快ではない” ようにすること
  11. 11. (c) adamrocker / rin yano 2010 #android3 おもいやり? 不快ではない=違和感がない
  12. 12. (c) adamrocker / rin yano 2010 #android3 おもいやり? 静的・動的な視覚情報に対して 「違和感のない」体験を提供する ‣ アニメーションを利用したインタラクション ‣ グラフィックによる世界観
  13. 13. (c) adamrocker / rin yano 2010 SimejiにおけるUXの考え方
  14. 14. (c) adamrocker / rin yano 2010 #android3 SimejiにおけるUX ユーザの脳への “おもいやり”
  15. 15. (c) adamrocker / rin yano 2010 #android3 認識する テスト - 設定を変更する -
  16. 16. (c) adamrocker / rin yano 2010 #android3 認識する
  17. 17. (c) adamrocker / rin yano 2010 #android3 何が変わったのかを認識するには時間が必要 脳への負担 認識する
  18. 18. (c) adamrocker / rin yano 2010 #android3 認識する テスト - 設定を変更する - (ただしDialogなし)
  19. 19. (c) adamrocker / rin yano 2010 #android3 認識する
  20. 20. (c) adamrocker / rin yano 2010 #android3 認識する どうやら比較対象が近いと 簡単に認識できるらしい
  21. 21. (c) adamrocker / rin yano 2010 #android3 認識する Dialogがおじゃま?でも必要!
  22. 22. (c) adamrocker / rin yano 2010 #android3 Simejiの解決策 Demo
  23. 23. (c) adamrocker / rin yano 2010 #android3 おもいやり1 脳の処理負担を軽減するため 変化は操作に対して 時間・距離的に 近くする
  24. 24. (c) adamrocker / rin yano 2010 #android3 モバイルにおける課題 •ディスプレイが狭い ‣ 親指での操作が基本 ‣ 右手操作なら右側が見えなくなる 手が邪魔
  25. 25. (c) adamrocker / rin yano 2010 #android3 とある解決策
  26. 26. (c) adamrocker / rin yano 2010 #android3 Simejiの解決策 ❖ 4次元の活用 Time
  27. 27. (c) adamrocker / rin yano 2010 #android3 Simejiの解決策 ❖ 4次元の活用 Time 認識には時間が必要 ユーザが認識するための “ゆとり”
  28. 28. (c) adamrocker / rin yano 2010 #android3 フリックの例 Demo
  29. 29. (c) adamrocker / rin yano 2010 #android3 おもいやり2 脳が処理する 余裕を与える
  30. 30. (c) adamrocker / rin yano 2010 #android3 UXの方法 ‣ マンマシンインターフェース ‣ ヒューマンファクター ‣ 情報アーキテクチャ ‣ インタラクションデザイン ‣ ユーザインターフェースデザイン ‣ ユーザビリティ ‣ グラフィックデザイン                    (Wikipedia) ‣ マンマシンインターフェース ‣ ヒューマンファクター ‣ 情報アーキテクチャ ‣ インタラクションデザイン ‣ ユーザインターフェースデザイン ‣ ユーザビリティ ‣ グラフィックデザイン
  31. 31. (c) adamrocker / rin yano 2010 #android3 インタラクション? 2つ以上の存在が互いに影響を及ぼし合うこと Android(タッチディスプレイ)では ヒトがタッチすることでアプリが動く ❖UX視点を加える ヒトがタッチすることでアプリが 違和感なく動く
  32. 32. (c) adamrocker / rin yano 2010 #android3 SimejiのSkinでは ❖ 動作の言語化 “Skinをインストール”
  33. 33. (c) adamrocker / rin yano 2010 #android3 インストールの表現 Demo
  34. 34. (c) adamrocker / rin yano 2010 #android3 おもいやり3 自然な動作表現
  35. 35. (c) adamrocker / rin yano 2010 #android3 Simejiのおもいやり 1.変化は時間・距離的に近く 2.脳が処理する余裕 3.自然な動作表現 どうやって?
  36. 36. (c) adamrocker / rin yano 2010 #android3 おもいやりの思考ツール1 •躍度(やくど) ‣ 生物に不快感を与える評価値 j = Δa/Δt j:躍度, a:加速度, t:時間 jが大きいと不快感が増す 加速度の変化(Δa)を小さくする
  37. 37. (c) adamrocker / rin yano 2010 #android3 おもいやりの思考ツール2 •フィッツの法則 ‣ 対象物を特定する予測時間 T = a + blog2(1 + D/W) T:時間, D:対象物までの距離, W:対象物の幅 距離(D)を小さく、モノ(W)を大きくする
  38. 38. (c) adamrocker / rin yano 2010 #android3 おもいやりの思考ツール3,4 •ヒックの法則 ‣ 沢山あると選べない T = a + blog2(1 + n) •テスラーの複雑性保存の法則 ‣ 複雑な処理の総量は普遍 ‣ 複雑な処理はあっち(アプリ)が負担するか こっち(ヒト)が負担するか
  39. 39. (c) adamrocker / rin yano 2010 SimejiのUXにおける グラフィックデザイン面の工夫
  40. 40. (c) adamrocker / rin yano 2010 #android3 アプリにとって グラフィックデザインは •設計のあとの仕上げ •作り手にとっては最後の仕事 •使い手にとっては最初の判断材料
  41. 41. (c) adamrocker / rin yano 2010 #android3
  42. 42. (c) adamrocker / rin yano 2010 #android3 アプリにとって グラフィックデザインのねらいは •情報の理解を助ける •好きになってもらう このふたつの マリアージュが世界観になる (たぶん)
  43. 43. (c) adamrocker / rin yano 2010 #gdd2010jp わかりやすい?
  44. 44. (c) adamrocker / rin yano 2010 #gdd2010jp わかりやすい?
  45. 45. (c) adamrocker / rin yano 2010 #android3 わかりやすい?
  46. 46. (c) adamrocker / rin yano 2010 #android3 わかりやすい?
  47. 47. (c) adamrocker / rin yano 2010 #android3 好き?
  48. 48. (c) adamrocker / rin yano 2010 #android3 好き?
  49. 49. (c) adamrocker / rin yano 2010 #android3 好き?
  50. 50. (c) adamrocker / rin yano 2010 #android3 • 情報の理解を助ける • 情報を整理して受け取りやすく • 好きになってもらう • 清潔感を出す アプリにとって グラフィックデザインのねらいは このふたつの条件さえ 満たしていればOKだ!
  51. 51. (c) adamrocker / rin yano 2010 #android3 SimejiのUXにおける グラフィックデザイン面の工夫 •デザインの方針 •ロゴのデザイン •Simejiサーバー(スキンアップロード ページ)のレイアウト
  52. 52. (c) adamrocker / rin yano 2010 #android3 Simejiデザインの方針 •フラット スタイルを単純にしてスキンを目立たせたい •シンプル アイコンのもつ意味をストレートに伝えたい •ラブリー 毎日使う物だから、愛着を持って欲しい
  53. 53. (c) adamrocker / rin yano 2010 #android3 Mies van der Rohe “Less is more.”
  54. 54. (c) adamrocker / rin yano 2010 #android3 フラット/シンプル
  55. 55. (c) adamrocker / rin yano 2010 #android3 Simejiスキン
  56. 56. (c) adamrocker / rin yano 2010 #android3 主役はスキン。UIの見栄えは単純に
  57. 57. (c) adamrocker / rin yano 2010 #android3 フラット/ラブリー
  58. 58. (c) adamrocker / rin yano 2010 #android3 フラット/シンプル/ラブリー
  59. 59. (c) adamrocker / rin yano 2010 #android3 フラット/シンプル/ラブリー
  60. 60. (c) adamrocker / rin yano 2010 #android3 ちなみに幅48ピクセルでもよめます
  61. 61. (c) adamrocker / rin yano 2010 #android3
  62. 62. (c) adamrocker / rin yano 2010 Simejiに使った グラフィックデザイン理論
  63. 63. (c) adamrocker / rin yano 2010 #android3 くらしに役立つデザイン理論 •そろえる •コントラストに気をつける
  64. 64. (c) adamrocker / rin yano 2010 #android3 そろえる/ボリューム感をそろえる ふとっちょは短めに
  65. 65. (c) adamrocker / rin yano 2010 #android3 そろえる/ボリューム感をそろえる 幅のあるかたちは細めに
  66. 66. (c) adamrocker / rin yano 2010 #gdd2010jp 円のおおきさが目安 もともと丸いデザインは目安よりひとまわり小さく GOOD NOT SO GOOD
  67. 67. (c) adamrocker / rin yano 2010 #android3 Mies van der Rohe “God is in the detail.”
  68. 68. (c) adamrocker / rin yano 2010 #android3 情報デザイン?
  69. 69. (c) adamrocker / rin yano 2010 #android3 ローコントラスト ハイコントラスト
  70. 70. (c) adamrocker / rin yano 2010 #android3 大/小 サイズのコントラスト
  71. 71. (c) adamrocker / rin yano 2010 #android3 Simejiデザインの方針 •フラット •シンプル •ラブリー この3つが世界観を作っている (と、信じている)
  72. 72. (c) adamrocker / rin yano 2010 まとめ
  73. 73. (c) adamrocker / rin yano 2010 #android3 まとめ SimejiのUX=おもいやり ‣ 不快にならないインタラクション ‣ 整理・整頓による清潔感
  74. 74. (c) adamrocker / rin yano 2010 #android3 Louis Henry Sllivan “Form follows function.”
  75. 75. (c) adamrocker / rin yano 2010 #android3 throw life http://www.adamrocker.com/ TwitterID:adamrocker e-mail:adamrocker@gmail.com adamrocker ものづくりにっぽん http://yanorin.blogspot.com/ TwitterID:yanorin e-mail:rinyano@gmail.com Rin Yano #andronjo

×