Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

日常に見るUI/UX

1,961 views

Published on

UI/UX in the Life

Published in: Design
  • Be the first to comment

日常に見るUI/UX

  1. 1. 日常に見るUI/UX 2014/09/22 @takapyyy
  2. 2. あんただれ? ● たかぴー(Twitter@takapyyy) ● エンジニア/しゃべり担当 ● JavaScriptがすきな 『自称』フロントエンドエンジニア
  3. 3. なにはなすん? ● CakePHP3系リリース ● Vagrant/Docker/Chefとかサーバ周り ● 最近のJavaScript動向がどうこう(大爆笑 )
  4. 4. なにはなすん? ● CakePHP3系リリース 話しません! ● Vagrant/Docker/Chefとか ● 最近のJavaScript動向がどうこう(大爆笑 )
  5. 5. ほななにはなすん? ● セブンカフェテプラ事件 ● エレベータ開閉まちがえ事件 ● トイレながせない事件
  6. 6. そもそもUI/UXって? UI:ゆぅざぁいんたぁふぇいす ちょっと違うけど、画面デザインとか UX:ゆぅざぁえくすぺあえんす 「あっ、これやべえ」とか 「すげえアレだわ」とか。体験。
  7. 7. 前提:そもそもUI/UXって? ● 良いUX ○ いいUIからのみ生まれる ○ 悪いUIからは絶対生まれない ● 悪いUX ○ いいUIからも生まれる ○ 悪いUIなら絶対悪いUXになる 絶対とかいったけどタヴン
  8. 8. 前提:なにがよくてなにがわるい ● WEBサイトはつかいやすくて当たり前 ● 基本的にユーザはせっかちでイラチ ● 3イラッくらいでブラウザバックする
  9. 9. セブンカフェテプラ事件
  10. 10. セブンカフェテプラ事件 こんなん 左が「R」? 右が「L」?
  11. 11. セブンカフェテプラ事件 よくいわれる「テプラが貼られるデザインはあ かん」問題。 デザイナがセンスだけで作っちゃうとこういう 問題が頻発する。 「わかりやすい」より「おしゃれ」が先行する 、デザインにとってはジレンマの種。
  12. 12. セブンカフェテプラ事件:結論 WEBの場合、説明書のあるWEBページはない ので、ボタンデザインをおしゃんにしたり、イ カしたアニメーションをキメた場合に、本来必 要な「わかりやすさ」が犠牲になってしまうこ とが多い。 常に「だれもが」「つかいやすい」の2点を意 識することが大事。
  13. 13. エレベータ開閉まちがえ事件 http://yamagra.jp/yamablo/2009/07/post-51.html
  14. 14. エレベータ開閉まちがえ事件 「おっとお嬢さん、開けておいてさしあg ガンッ 「チッ(おっさんてめぇ)」
  15. 15. エレベータ開閉まちがえ事件 WEBでも話題
  16. 16. エレベータ開閉まちがえ事件 出会いのチャンスを一気にピンチに変える上に 結構な頻度で起こる。 ボタンひとつで2人に最悪の体験を味わわせら れる優れもの。 ユーザーに恐怖心を植え付け、 半端者を排除する副作用もある。
  17. 17. エレベータ開閉まちがえ事件:結論 妖怪の仕業
  18. 18. エレベータ開閉まちがえ事件:結論 WEBの場合、よくわからんボタン押した瞬間 に 後戻りできなくなったり、なんかしら 「えーまじかよ・・・ 期待してた動きとちゃうやん。。。」 って気持ちが芽生えて超ストレス。 その時点でブラウザバックしたりする。かも。
  19. 19. エレベータ開閉まちがえ事件:結論 「あらオシャレ」ってなるデザイン(UI)でも 最悪のUXを生むことがある!たぶん!
  20. 20. トイレながせない事件
  21. 21. トイレながせない事件 (ふぅ・・・ あれ!?レバーないやん。 これどないしたらいいん? ボタンどれや!これでええわ!おらっ!)
  22. 22. トイレながせない事件 _人人人人人人人_ > 非常ボタン<  ̄Y^Y^Y^Y^Y^Y ̄
  23. 23. トイレながせない事件:結論 流せないどころか店員とか駅員とかきて 「あ・・・なが・・・うんk・・・あの」 みたいなパティーンもある。 「流す」というワンアクションで 手軽に最悪のUX与えられるツワモノ。
  24. 24. トイレながせない事件:結論 WEBの場合、資料請求とかお問い合わせとか 、はたまた購入などのコンバージョンにつなが る動作が起こせなくなったりする。 ユーザに不快感与えるばかりか、 デザインのせいで売り上げ落ちたりする。 「ここ使いづれえし他で買お」ってなる。 かも。
  25. 25. トイレながせない事件:結論 いい
  26. 26. まとめ ● ユーザの動きを予想・予測して、使いやす くする-> ストレス減らそうね ● 「わかりやすい」の上に「おしゃれ」をそ える-> 服とかでもそうよね ● 親切な心をもってデザイン(設計)するこ とで戦争がなくなる
  27. 27. まとめ ● デザインソンに参加しよう! ● 注目のWEBサイト集(Colissとか)を見て 常に刺激を受け続けよう! ● 日常の「つかいやすい」「つかいにくい」 を覚えておこう!
  28. 28. 最後にいい例:セブン銀行 http://news.mynavi.jp/articles/2013/09/02/kindatm/
  29. 29. 最後にいい例:セブン銀行 わざわざUI改善のためにリニューアルしただ けあって超つかいやすい! 是非一度その最高のUXを皆様にも体験してい ただきたい!
  30. 30. ご清聴ありがとうございました。 ._ \ヽ, ,、 `''|/ノ .| _ | \`ヽ、| \, V `L,,_ |ヽ、) ,、 / ヽYノ / r''ヽ、.| | `ー-ヽ|ヮ | `| |. | ヽ、ノ┼ヽ-|r‐、. レ| ヽ____ノd⌒) ./| _ノ__ノ

×