UI/UX in the Life

1. 日常に見るUI/UX
2014/09/22 @takapyyy

2. あんただれ？
● たかぴー(Twitter@takapyyy)
● エンジニア/しゃべり担当
● JavaScriptがすきな
『自称』フロントエンドエンジニア

3. なにはなすん？
● CakePHP3系リリース
● Vagrant/Docker/Chefとかサーバ周り
● 最近のJavaScript動向がどうこう（大爆笑
）

4. なにはなすん？
● CakePHP3系リリース
話しません！
● Vagrant/Docker/Chefとか
● 最近のJavaScript動向がどうこう（大爆笑
）

5. ほななにはなすん？
● セブンカフェテプラ事件
● エレベータ開閉まちがえ事件
● トイレながせない事件

6. そもそもUI/UXって？
UI：ゆぅざぁいんたぁふぇいす
ちょっと違うけど、画面デザインとか
UX：ゆぅざぁえくすぺあえんす
「あっ、これやべえ」とか
「すげえアレだわ」とか。体験。

7. 前提：そもそもUI/UXって？
● 良いUX
○ いいUIからのみ生まれる
○ 悪いUIからは絶対生まれない
● 悪いUX
○ いいUIからも生まれる
○ 悪いUIなら絶対悪いUXになる
絶対とかいったけどﾀｳﾞﾝ

8. 前提：なにがよくてなにがわるい
● WEBサイトはつかいやすくて当たり前
● 基本的にユーザはせっかちでイラチ
● ３イラッくらいでブラウザバックする

9. セブンカフェテプラ事件

10. セブンカフェテプラ事件
こんなん
左が「R」？
右が「L」？

11. セブンカフェテプラ事件
よくいわれる「テプラが貼られるデザインはあ
かん」問題。
デザイナがセンスだけで作っちゃうとこういう
問題が頻発する。
「わかりやすい」より「おしゃれ」が先行する
、デザインにとってはジレンマの種。

12. セブンカフェテプラ事件：結論
WEBの場合、説明書のあるWEBページはない
ので、ボタンデザインをおしゃんにしたり、イ
カしたアニメーションをキメた場合に、本来必
要な「わかりやすさ」が犠牲になってしまうこ
とが多い。
常に「だれもが」「つかいやすい」の２点を意
識することが大事。

13. エレベータ開閉まちがえ事件
http://yamagra.jp/yamablo/2009/07/post-51.html

14. エレベータ開閉まちがえ事件
「おっとお嬢さん、開けておいてさしあｇ
ガンッ
「ﾁｯ（おっさんてめぇ）」

15. エレベータ開閉まちがえ事件
WEBでも話題

16. エレベータ開閉まちがえ事件
出会いのチャンスを一気にピンチに変える上に
結構な頻度で起こる。
ボタンひとつで２人に最悪の体験を味わわせら
れる優れもの。
ユーザーに恐怖心を植え付け、
半端者を排除する副作用もある。

17. エレベータ開閉まちがえ事件：結論
妖怪の仕業

18. エレベータ開閉まちがえ事件：結論
WEBの場合、よくわからんボタン押した瞬間
に
後戻りできなくなったり、なんかしら
「えーまじかよ・・・
期待してた動きとちゃうやん。。。」
って気持ちが芽生えて超ストレス。
その時点でブラウザバックしたりする。かも。

19. エレベータ開閉まちがえ事件：結論
「あらオシャレ」ってなるデザイン(UI)でも
最悪のUXを生むことがある！たぶん！

20. トイレながせない事件

21. トイレながせない事件
（ふぅ・・・
あれ！？レバーないやん。
これどないしたらいいん？
ボタンどれや！これでええわ！おらっ！）

22. トイレながせない事件
＿人人人人人人人＿
＞ 非常ボタン＜
￣Y^Y^Y^Y^Y^Y￣

23. トイレながせない事件：結論
流せないどころか店員とか駅員とかきて
「あ・・・なが・・・うんｋ・・・あの」
みたいなﾊﾟﾃｨｰﾝもある。
「流す」というワンアクションで
手軽に最悪のUX与えられるツワモノ。

24. トイレながせない事件：結論
WEBの場合、資料請求とかお問い合わせとか
、はたまた購入などのコンバージョンにつなが
る動作が起こせなくなったりする。
ユーザに不快感与えるばかりか、
デザインのせいで売り上げ落ちたりする。
「ここ使いづれえし他で買お」ってなる。
かも。

25. トイレながせない事件：結論
いい

26. まとめ
● ユーザの動きを予想・予測して、使いやす
くする-> ストレス減らそうね
● 「わかりやすい」の上に「おしゃれ」をそ
える-> 服とかでもそうよね
● 親切な心をもってデザイン（設計）するこ
とで戦争がなくなる

27. まとめ
● デザインソンに参加しよう！
● 注目のWEBサイト集（Colissとか）を見て
常に刺激を受け続けよう！
● 日常の「つかいやすい」「つかいにくい」
を覚えておこう！

28. 最後にいい例：セブン銀行
http://news.mynavi.jp/articles/2013/09/02/kindatm/

29. 最後にいい例：セブン銀行
わざわざUI改善のためにリニューアルしただ
けあって超つかいやすい！
是非一度その最高のUXを皆様にも体験してい
ただきたい！

30. ご清聴ありがとうございました。
.＿
＼ヽ, ,、
`''|/ﾉ
.|
＿ |
＼｀ヽ、|
＼, V
`L,,_
|ヽ､) ,､
/ ヽYﾉ
/ r''ヽ、.|
| `ｰ-ヽ|ヮ
| `|
|. |
ヽ、ﾉ┼ヽ-|r‐､. ﾚ|
ヽ＿＿＿_ﾉｄ⌒) ./| _ﾉ__ﾉ