UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

139,430 views

Published on

3/26/2014 @LightningSpot Shibuya - Powered by PROsheet -
Designed by IMPATH

Published in: Design
0 Comments
351 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
139,430
On SlideShare
0
From Embeds
0
Number of Embeds
80,482
Actions
Shares
0
Downloads
463
Comments
0
Likes
351
Embeds 0
No embeds

No notes for slide

UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

  1. 1. UI Design and UX for Engineer Powered by 26/3/2014 @Lightningspot Shibuya / Kazuki Yamashita Designed by IMPATH
  2. 2. 山 下 一 樹 インフォメーションアーキテクト
  3. 3. アプリ開発  Web、スマフォアプリの設計/開発  プロトタイプ設計  UI改善コンサルティング Webサイト制作  Webサイトの企画、UXデザイン
  4. 4. UI Design and UX for Engineer
  5. 5. UX
  6. 6. UI/UX? UIとUXの関連は?
  7. 7. “ユーザーとサービス、商品の  相互作用すべてで、
  混乱や面倒なしで顧客の的確  なニーズを満たし、所有する
  楽しさ、使用する楽しさを
  生み出す「簡潔さと優雅さ」” http://www.nngroup.com/about-user-experience-definition/ Donald Norman UX“User Experience”とは?
  8. 8. ISO 13407(1999)人間中心設計が定義 ISO 9241-210(2010)UXについても定義 UX“User Experience”とは? 製品やシステム、サービスの利用、及び/もしくは 予想された使い方によってもたらされる人々の知覚と反応
  9. 9. 暑い日、のどが渇いた人が自販機で水を買う。 ! その買い方がよく分からなかったり、 いくらの値段で販売しているのか分かりにくく、 なかなか水が買えずイライラした。 ! 暑い日なのに、せっかく買えた水がぬるい、 もう二度とこの自販機で買おうとは思わない。 UI UI UX UX UX
  10. 10. モノ コト ユーザー
  11. 11. 多くのモノを作れば売れた 良いモノを作ればもっと売れた モノからコトへ モノがあふれている時代 デザインや機能だけでは売れない モノ→コト 大量 生産 スペック デザイン
  12. 12. 趣味 食事 旅行 外食 貯金 書籍 家電 車 何にお金をかけていますか? 2010年4月 経産省 消費者購買動向調査 自身の「経験や体験」
  13. 13. 体験とは? 期待 予感 もらう 出会う 触れる 使う 記憶 思い出 触れる前から思い出までのストーリー 時間の流れ
  14. 14. 視覚、聴覚、触覚、味覚、嗅覚 五感もUXをもたらす
  15. 15. UX(体験)をデザインするとは?
  16. 16. 時間の流れ 顧客の思考・感情 顧客接点 サービス要素
  17. 17. 人間工学 ユーザビリティ工学 工業デザイン インタラクションデザイン UXデザイン マーケティング 情報アーキテクチャ コンピューター工学 ライティング コミュニケーション デザイン http://www.designingforinteraction.com/ 音響デザイン モーションデザイン UIデザイン
  18. 18. UXデザインのフローとアウトプット(アプリの場合) ユーザー・環境の理解 ユーザー調査 コンテキスト ペルソナ定義 ユーザーのゴールと機能 メンタルモデル エクスペリエンスマップ UIのイメージ化 画面遷移 UIワイヤーフレーム プロトタイピング機能要件
  19. 19. UIが良いとUXが向上? 良いUIがUXをもたらすとは限らない
  20. 20. 良いUXとは? 役に立つ 使いやすい 見つけやすい 価値がある 信頼できる 魅力的 誰でも見れる http://semanticstudios.com/publications/semantics/000029.php
  21. 21. 良いUXとは? Web以前のデザインから
 重視されている Webによって 重視されるようになった これまでのデザイン手法だけ では実現不可能 役に立つ 使いやすい 見つけやすい 価値がある 信頼できる 魅力的 誰でも見れる
  22. 22. ユーザーはモノより経験に関心がある。 ! クリエイターはストーリーと世界観をつくり、 良い始まりと結末によって ユーザーの記憶に残す使命がある。 ! 機能以上に価値のあるコトをつくる。
  23. 23. UI Design and UX for Engineer
  24. 24. UI Design
  25. 25. Design=設計とは? http://www.jjg.net/elements/pdf/elements.pdf ビジュアル 構造化 表現方法
  26. 26. 近接 整列 コントラスト 反復 レイアウトの原則 デザインの概念 デザインパターン アフォーダンス メタファ 構造化の手法 論理的に解決する
  27. 27. 近接 情報の関連性を視覚化する(見やすくする) 効果:ユーザーの理解を助ける 手法:導線を考慮しスペースを調整する
  28. 28. 商品A 商品B 商品C ¥2,000 ¥1,500 ¥3,000 購入 購入 購入 商品A ¥2,000 購入 商品B ¥1,500 購入 商品C ¥3,000 購入
  29. 29. 整列 要素を組織的に構造化する(見やすくする) 効果:統一感を持たせる 手法:基準となる線を引いて配置する
  30. 30. 左揃え 左揃えは複数行にわたる長い文章を読みやすくします。 主に見出しでは左揃えが用いられます。 中央寄せ 中央に寄せることで、要素の近接関係を強める 右揃え 続きはここをクリック ボタンなど、ユーザーに「次の」操作を促す場合は右に 揃える場合があります。
  31. 31. コントラスト 異なる要素の差異を強める(注意をひく) 効果:ユーザーを意図して誘導できる 手法:濃淡やサイズなどを調整する
  32. 32. 商品A ¥2,000 購入 商品B ¥1,500 購入 商品C ¥3,000 購入 商品A ¥2,000 購入 商品B ¥1,500 購入 商品C ¥3,000 購入
  33. 33. 反復 レイアウトの原則を繰り返すこと 効果:一貫性を持たせ、文化を生む 手法:原則をガイドラインとして表出する
  34. 34. 近接 整列 コントラスト 反復 タイポグラフィ レイアウトの原則 デザインの概念 デザインパターン アフォーダンス メタファ 構造化の手法 論理的に解決する
  35. 35. デザインパターン 既存のパターンを逸脱しない − 追加 ? 削除 テキストで見かけるアンカーリンクです。 多くの人はこちらのリンクをクリックします。 ×+
  36. 36. アフォーダンス ユーザーが次に何をすれば良いのか明示する
  37. 37. メタファ ユーザーが馴染んでいるものを継承する Apple Inc. iOS 7 Human Interface
  38. 38. ビジュアルデザインは構造化の後で行う。 ! ユーザーの理解を助け、正しく、意図した通りに 導くためのインタフェースを「設計」する。 ! 各々のガイドラインに忠実であること。
  39. 39. UI Design and UX for Engineer
  40. 40. for Engineer
  41. 41. ①クライアントの真の声を聴く クライアント 「商品名が見にくいので少し目立つようにしてください」 ユーザーは写真が見たいのかもしれない 仕様が知りたいのかもしれない 配送料が知りたいのかもしれない クライアント→ユーザーの真のニーズ
  42. 42. ②UIは慣れると間違いに気付かなくなる ビジュアルよりも配置や構成、構造化
  43. 43. アプリケーション定義ステートメント アプリケーションの主要な目的とその対象を、 簡潔かつ具体的に宣言したもの https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf ③機能やコンセプトが一言で言えるかどうか 1. ユーザに好まれる可能性のあるすべての機能の洗い出し  ex. ○○○を○○○できる 2. 対象ユーザの決定  →ユーザーのライフスタイル 3. 対象ユーザの定義による機能の絞り込み 4. このアプリではしないこと
  44. 44. ④ユーザーのコンテキストをいかに描けるか 運賃表:駅名と料金 お金を入れて下さい 切符?カード? 路線を選択 ここで選択 ユーザーの行動を想像してシステムに落とし込む
  45. 45. ⑤すべてのユーザーを幸せにするUIはない 対象を広げず真のユーザーにまっすぐであること
  46. 46. UI Design and UX for Engineer
  47. 47. User

×