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

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. 普及して、接触時間も長くなった
邪魔せずに没頭できることがより求められる
• 長時間使っている
• スマートフォンは画面が小さい
• コンテンツそのものに没頭させたい
リアルをモチーフにする必然性がなくなってくる
• 毎日３時間
• 「丁寧に説明か素早く使えるかのジレンマ」
• ほとんどの人がヘビーユーザ => 素早く使いたい
• 共有された体験をバーチャルから見出したほうが早い

29. トランジション
ビジュアルな効果 オーバーレイ シェイク

30. 今のUIが一番良いというわけではない
「みんなジョブズに騙されている！？」
ハードの発達に比べてソフトが未熟だと
指摘

31. とは言っても我々はプラットフォーム
の流儀に従って仕事するよりない

32. ご清聴ありがとうございました