UXとフラットデザイン

20150613わんくま勉強会にて発表

  1. Taiji Nakao
    20150613わんくま勉強会にて発表
    Transcript Header:
    UXとフラットデザイン
    Transcript Body:
    • 1. UXとフラットデザイン 業務システムの視点から 中尾泰治 @ntaiji
    • 2. 自己紹介 仕事 • クラウド型の業務システム • HTML5 Sencha、WebAPI C# 勉強会コミュニティ • IT勉強宴会 • SenchaUG • もろもろ C#読書会、わんくま その他 • ランチトリップ
    • 3. 今日、お話しすること インタラクション設計時の関心 • ユーザに苦労を掛けさせない • シグニファイアを活用する UXについてざっくりと • 構造化シナリオ法 • まずアクティビティシナリオを考えること! 業務システムとUX • 業務フローとユースケース • どこまでやるか フラットデザイン • ほぼ決まった路線 • スキューモフィズムからの脱却 • ヒューマンインターフェースの歴史
    • 4. ※注意 私は今日話す内容の専門家ではありません もしかすると間違っているかも (その時は教えてください) こういう考え方もある、という参考になれば
    • 5. インタラクション設計時の関心
    • 6. ユーザに苦労を掛けてしまったら負け 「私が間違えた使い方をしてしまったかもしれません。」 「異常を発生させる使い方をした方が悪い」が通った時代 間違えた使い方をさせてしまった方が悪い
    • 7. コンピュータは難しいもの? アラン クーパー 2000年 ファイルシステムもマウスもわかり にくい ハードやOSから自由になって、もっ と直感的なアプリを作れるはず
    • 8. 新幹線の券売機 クレジットカードで購入した時の、 切符とカードの出てくる順番 人間心理を考えることが大事 出典:http://westjapan-b2.cocolog-nifty.com/b2/2008/07/post_907e.html
    • 9. 電子マネーによって変わる自販機 リアルマネー(硬貨)の場合 • 硬貨を投入する • 金額を満たすと点灯する • 買いたい商品のボタンを押す 電子マネーの場合 • 買いたい商品のボタンを押す • 金額が表示される • 電子マネーをかざして決済
    • 10. それは、慣れか?本質か? 硬貨の投入口があると、最初に硬貨を入れたいと思う • これは、人間の普遍的な性質か • それとも、単に慣れただけか 買い物を考えると、むしろ、先に商品を選ぶのがふつう
    • 11. 丁寧に説明か素早く使えるかのジレンマ 初めての人にとっても勘違いしないためのしくみ 慣れたユーザがすばやく使えること トレードオフになりやすいが、アイディアで解決できることも多い。
    • 12. 説明を極力省くことの美学 出典:https://instagram.com/p/cg5fPmwDLf/
    • 13. 「シグニファイア」の活用 出典:http://www.kagiyasan.jp/fs/kagi/c/doorknob-manshon-m 初めての人でも見たら行動が促される兆候「シグニファイア」 を活用しましょう
    • 14. UXについてざっくりと
    • 15. 出典:http://asanoken.jugem.jp/?eid=3208※出典というよりも、浅野先生の図をそのまま借りています。
    • 16. 出典:http://asanoken.jugem.jp/?eid=3208
    • 17. 例)出前館 「出前をとる」というアクティビ ティを徹底的に研究している(は ず) 毎日のように注文する人 たまに集まった時に頼む人
    • 18. 業務システムとUX
    • 19. UIは今風に ユーザがこなれたUIに慣れてきた フレームワークの発達
    • 20. ユースケース・業務フロー とアクティビティシナリオ ユースケースや業務フローの分析段階ではデバイスのことは問わないはず • 例えば、帳票で回した方が効率的かもしれない ユースケースや業務フローはアクティビティシナリオに近いと考えられる ユースケース分析や業務フロー分析にUXの知見は生かせるはず
    • 21. UXは手間暇かかる ペルソナ分析 アクティビティの詳細な分析 UIとインタラクションの整理 • 一般に、スマホ開発ではこの工程に一番時間がかかる ペイするのか?
    • 22. 費用対効果を考える軸 人間の学習コスト • 人がシステムに合わせる/システムが人に合わせる ※B2Cは強烈な競争にさらされているので、ちょっとでも使いにくければ即アウト 業務設計 • システムを業務に合わせる/業務をシステムに合わせる システムの種類 • 守りのシステム/攻めのシステム • 守り:変更は少ない、確実に動いてほしい • 攻め:変化が多い、情報を入れてほしい 入力業務の位置づけ • 入力は業務の一部である/入力結果が業務を支援する
    • 23. フラットデザイン
    • 24. 決まった路線 Microsoft • 2006年 Zuneメディアプレイヤー • 2010年 Windows Phone7 Metroデザインを採用 Apple • 2013年 iOS7 Google • 2014年 マテリアルデザインを発表 違いはあるものの、大手OSベンダー3社はフラットデザインを採用 参考サイト http://www.seojapan.com/blog/flat-design http://www.gizmodo.jp/2013/06/post_12510.html https://technet.microsoft.com/ja-jp/magazine/gg552995.aspx http://wired.jp/wp-content/uploads/2013/06/ios7_redesign-9.png http://octoba.net/archives/20140627-android-feature-material-design.html
    • 25. スキューモフィズムからの脱却 スキューモフィズム =現実に存在する物のシグニファイ アを利用する 「直感的」でなくなった? 出典:「フラットデザインで考える 新しいUIデザインのセオリー」 電子版p29
    • 26. ヒューマンインターフェースの変遷 より多くの人が使えるインター フェースが登場するごとにユーザ数 は増えた パンチカード CUI キーボード GUI キーボード+マウス タッチ 指 (音声) 参考サイト http://media.looops.net/saito/2014/01/17/smartphone_market/
    • 27. 接触時間が長くなった 出典:「メディア定点調査・2014」レポート • 東京20代男性に至っては、1 日平均180分をタッチデバイ スに触れている
    • 28. 普及して、接触時間も長くなった 邪魔せずに没頭できることがより求められる • 長時間使っている • スマートフォンは画面が小さい • コンテンツそのものに没頭させたい リアルをモチーフにする必然性がなくなってくる • 毎日3時間 • 「丁寧に説明か素早く使えるかのジレンマ」 • ほとんどの人がヘビーユーザ => 素早く使いたい • 共有された体験をバーチャルから見出したほうが早い
    • 29. トランジション ビジュアルな効果 オーバーレイ シェイク
    • 30. 今のUIが一番良いというわけではない 「みんなジョブズに騙されている!?」 ハードの発達に比べてソフトが未熟だと 指摘
    • 31. とは言っても我々はプラットフォーム の流儀に従って仕事するよりない
    • 32. ご清聴ありがとうございました
    View More