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