UI/UX

• 【今さら聞けない！】UI/UXデザインの違いとその学習方法とは！
• 今さら聞けない！UI/UXを確実に学ぶオススメの良スライド10選

• ITエンジニアに易しいUI/UXデザイン ... このスライドがすごく分かりやすかった
• 『ノン・デザイナーズ・デザインブックを読み解く』スライドがとても参考になった

• プロダクト開発プロセスの改善におけるUXデザイナーの存在

UXとUI †

• 使っていて「気持ちいい」を目指す

• デザイン ... 目的達成のため、対象（手段）をより気持ちよく、使いやすく、魅力的にすること。ユーザに対する心遣い。

• いいデザインをするには、まずユーザを正しく定義し、ユーザのニーズを詳しく理解しないといけない。そうでないと正しい心遣いができない。

• UXという分野は、システムの利用（あるいはシステムとの出会い）を通じて、人々が持つ「経験について研究すること」、その「経験のためにデザインすること」、そしてその「経験を評価すること」
• UXは、あるシステムと接する前から使用中、使用後におけるユーザの全ての経験
  • 「いい経験」は何で判断する？ => ユーザの満足度

• UXの期間
  • 利用前 ... 予期的UX（体験を想像する）
  • 利用中 ... 一時的UX（体験する）
  • 利用後 ... エピソード的UX（ある体験を内省する）
  • 利用時間全体 ... 累積的UX（多種多様な利用期間を回想する）

• いいUXを実現するには？
  • システムとユーザとの全ての「接点」でいい経験を提供できるように心掛ける
  • 接点 = User Interface

• UI
  • 企業が制御できる UI ... 個々のシーンでいいUIを提供することがいいUXに繋がる
    • 購入時のUI ... 販売サイト、販売店
    • 製品受領時のUI ... パッケージ
    • 使用中のUI ... HW&SW
    • トラブル時のUI ... サポート
  • 企業を取り巻く環境が提供するUI ... 企業はマーケティングやPRを通じてUXの向上を目指す
    • 情報 ... 雑誌など
    • 口コミ ... 他のユーザ
    • イメージ ... 有名人が使っている etc
    • 比較 ... 競合製品
• UIはUXのために存在する
  • UI = 手段
  • UX = 結果
• 目指すUX => 実現手段としてのUI => 結果としてのUX ... UXはUIのデザインの理由であり結果。「なぜこのようなUIにしたの？』という問いに対する答えがUX

• 目指すUXを明確にするのに必要なスキル
  • 人に対する理解（認知心理学）
  • 共感力（なりすまし力）
  • 分析力
  • コミュニケーションスキル（インタビュー、ファシリテーション、プレゼンテーション）

UI †

• Web/アプリのUIデザイン改善・UI設計を10分で把握! 基本とトレンドまとめ
• UIの基本と、設計方法│UI改善で成果6倍！
• UI設計の時に参考になるサイト

• 管理画面のUIデザインにおける20の改善ポイント
• 画面レイアウト設計の標準化
• UI 改善：優れたUIデザイン／UI 設計（ユーザーインターフェース）を作るためにWebやアプリで意識すべき、たった1つの原則
• 画面をデザインするということ

UX †

• User Needs
• Site Objectives

• Functional Specifications
• Content Requirements

• Interaction Design
  • ユーザのゴールを達成するためのソフトウェアの操作フローを定義
  • ユーザの操作に対するソフトウェアの反応を定義
• Information Architecture
  • ユーザが直感的に分かりやすい情報構造の定義

• Information Design
  • ユーザに分かりやすい情報の表現を考えること（文書／グラフ／他のフォーマット？）
• Interface Design
  • ユーザに分かりやすく、使いやすいインタフェースを考えること
  • メニュー、ボタン、画像の配置・サイズなど、UIの構成を考える
• Navigation Design
  • ユーザが必要な情報にアクセスしやすいメニューの構成／配置を考える
  • 必要な処理と情報を如何に簡単に見つけ出し、利用できるかを考量

• Visual Design
  • GUIの美的表現で雰囲気を演出
  • 色、サイズ、形などの変化で各要素の意味とモードの変化などを表現
  • ユーザの使用性の向上を考慮する

Visual Design の基本要素 †

• 近接
  • 関連が強いものを近くに配置する
  • 要素間の距離により各要素間の関係の強さを表現する
  • 情報を視覚的に構造化、組織化することによってユーザの理解を助ける
  • 空間（スペース）は近接の大事な要素
• 整列
  • 画面内の全ての要素を意図をもって配置する
  • 内容が明快に伝わり、洗練されたイメージを与える
• 反復
  • 画面内の要素を統一してそれを繰り返して使いことでパターン化すること
  • ユーザの学習コストを減らし、誤操作を防ぐ ... Saveなら青や緑、Deleteなら赤 etc
  • ブランドや世界観を作り出す
• コントラスト
  • 画面の要素に特徴を与えて、他の要素と区別しやすくすること
  • ユーザの注意を意図した方向に向かせるのに有効
  • 多様な要素を活用してコントラストを生成
    • 色
    • サイズ
    • 形
    • スペース など
• フォント
  • 画面に表示する書体で各要素の意味と要素間の関係を表現する
  • フォントのイメージを理解し、適切に使うことが大事
  • 各環境で使用可能なフォントは異なるので注意

• メタファー
  • 現実のもの等、ユーザがその使用方法に慣れているものを真似てUIを作成する => ユーザがわかりやすい（やり過ぎには注意）
• アフォーダンス
  • 環境に対する人間の反応を利用する ... ボタンがあると押したくなる〜とか
• 既存デザイン言語
  • ユーザが既に慣れているUI要素を利用する ... リンクなら下線付きで青字 etc

考慮すべきこと †

• ユーザの特徴
• デバイスの特徴
• 使われる環境

UXデザインの方法論 †

良いUXとは †

• 価値がある ... ユーザ満足度が高い
  • 役に立つ
  • 使いやすい
  • 魅力的

• 信頼できる
• 見つけやすい
• 誰でも見れる

ITとUXデザインのプロセス †

• プロセスの反復による改善が望ましい => アジャイル開発

UXデザインのタスク †

ユーザと環境の調査 †

• ユーザ調査
  • 目的 ... 製品やサービスのユーザを正しく定義し、理解する
  • 手法 ... マーケット調査、サーベイ、ユーザインタビュー、ユーザの行動観察
  • 成果物 ... ペルソナ＋補足資料
• コンテキスト調査
  • 目的 ... 製品やサービスを囲む環境を理解する
  • 手法
    • マーケット調査、サーベイ、ユーザインタビュー
    • 現場訪問、ユーザとの同行、ユーザが行う作業の体験
    • 画像／動画の入手
    • 既存システムの分析
    • 競合製品・サービスの分析
  • 成果物 ... ストーリーボード、メンタルモデル

ユーザのゴールと対象範囲確定 †

• ペルソナ定義
  • 目的 ... 対象ユーザをより具体的に定義し、理解する
  • 手法
    • ユーザ調査から得た情報を元に代表的なユーザ像を決定
    • 対象製品／サービスと関係するユーザの特徴、環境、欲求を具体的に記述
    • 必要に応じて写真、小物、道具を追加する
    • 複数のペルソナがある場合は優先順位を付ける（主役ペルソナ、脇役ペルソナ）
• ストーリーボード作成
  • 目的 ... ユーザの行動を具体的に定義し、理解する
  • 手法
    • 製品／サービスと関わるユーザの行動を具体的に描写する
    • その行動の前提条件、目的、結果の評価基準を具体的に記述する
    • 必要に応じて写真、動画、既存システムの資料を追加する
    • 複数のペルソナがある場合は、どのペルソナのストーリーかを明確に
    • ユーザを囲む環境を描写する（時間、明るさ、室内／屋外、騒音など）
    • システムではなく、ユーザ視点で作成
    • 既存のストーリーボードと理想的なストーリーボードを書いて比較する
    • 目標とするストーリーボードを作成する際は、技術的制約などは考慮しない
• メンタルモデル作成
  • 目的 ... ユーザの認識を理解してデザインの正しい方向性を決める
  • 手法
    • ストーリーボードの行動をするときのユーザの心理状態、欲求、目的、認識を描写する
    • ユーザの行動の原因を把握することで、ユーザの真のニーズを把握する
    • ユーザに本当に価値があるのは何かを理解する

• ユーザの行動に対して「なぜ？」を確認する ... 5W1Hの手法を使って真の動機を確認
• ユーザが使っている既存の道具、システムについて他の代案を考える（既存の状況を前提にしない）

機能とデータの定義 †

• 機能一覧／データモデル作成
  • 目的 ... ストーリーボードの各ストーリーを実現するために必要な機能とデータを洗い出す
  • 手法
    • ストーリーボードの各ストーリーに対して必要な機能を定義する
    • 各機能で必要なデータを定義する
    • 複数のストーリーから抽出された機能とデータの一覧を作成し、重複がなく、かつ汎用的な機能一覧とデータモデルを作成する

• ユーザの視点での機能とデータの定義を行う
  • ユーザに価値を提供する単位として機能とデータを定義する
  • システムの実装方式は記述しない
• データモデルはインフォメーションアーキテクチャのレベルで検討する

UI作成 †

• UIスケッチ／画面フロー作成
  • 目的 ... 各ストーリーを実現するために必要な画面と処理フローを構想する
  • 手法
    • 紙とペンなど、できるだけ手軽く多量のアイデアを短時間で出せる道具（= 手描き）を使う
    • Try&Errorの費用を最小化することで複数回反復する
    • ユーザビリティテストはこの段階から始める

• UIプロトタイプ作成
  • 目的 ... 作成した画面スケッチと画面フローでストーリーを実現できるかを確認する
  • 手法
    • ユーザあるいは被験者が実際に触りながら画面操作と画面の処理フローを確認できるようにする
    • 最初はペーパープロトタイプでも良いが、ある程度アイデアが固まったら動きが表現できるツールを利用する
    • ユーザビリティテストを行い、改善作業を行う
    • 費用をあまりかけずにできる方法を探す（プロトタイピングツールの活用）

評価 †

• ユーザビリティテスト
  • 目的 ... 作成したプログラムが目的とした価値をユーザに提供しているか確認、改善点を探す
  • 手法
    • ユーザテストおよび専門家によるヒューリスティックテスト
    • 定量的に評価可能なKPIの定義と測定
    • 初期テスト及びある程度期間を置いてのテストを行う
    • できるだけ実環境と類似した状況でテストを行う

• 近くのユーザを見つけてテストする
• 「5人テスト」を行う
  • 5人までテストするとほとんどの問題が検出できる
• ヒューリスティックテストを行う ... 5人テストから得られる情報の80%は得られる
• データの収集はできるだけ早期から行う ... 比較できるデータがないと判断ができない

ポイント †

• UI/UXデザインに正解はない
  • 全ての面において最高なデザインはない
  • ある部分を改善すると、他の部分は改悪になる
  • 適切に定義されたペルソナとUXデザイナーの判断でトレードオフを検討するしかない

• みんなを幸せにはできない
  • 人によってニーズは異なる
  • 対象を広げると質が落ちる
  • 製品やサービスのペルソナを定義し、そのペルソナの満足だけに集中する

• 部分だけでなく、全体に注目する
  • 一つの場面での最適解が UX全体の一貫性を壊す場合がある
  • 常に全体としての一貫性を意識するように気をつける

• 顧客から製品やサービスを守る
  • 顧客とユーザを区別する
    • ユーザのためにデザインする
    • 顧客のためにデザインしたものは結果的にうまく行かない
  • 顧客のエゴや思い込みから製品を守る
    • ペルソナ定義とメンタルモデルの作成に顧客を参加させる
    • ペルソナとメンタルモデルを活用して説得
    • それでも納得させられない場合は、ユーザテストの結果で説得

• ユーザになりきる
  • UI/UXについて考えたり議論したりするときには、必ずユーザの視点で考える

• みんなを専門家にする
  • ヒューリスティックテストに必要な専門家の経験則を形式知として組織で共有する
  • 専門家の評価基準をガイドラインとして作成し、作業中に参考にする
  • 各プラットフォームベンダーが提供しているデザインガイドラインを参考にチェックシートを作成して共有する

• ユーザテストは逃げ道ではない
  • ユーザテストは仮説検証の場
    • 正しい仮説を持たずにユーザテストしても無駄
    • まずはベストの案を出し、その後に検証するためにユーザテストを行う
  • ユーザテストは複数の案が対立したときに有効

関連ツール †

• UI/UXデザインツール『Figma』入門

プロトタイピングツール †

• おすすめのプロトタイピングツール5選(2016年5月時点)
• どれを使う？プロトタイピングツールの特徴・使用感まとめ
• Flinto と Principleを比較～Web・アプリ開発にプロトタイピングツールを～
• プロトタイプやワイヤーフレーム作成ツールまとめ

Prott †

InVision †

UIデザインツール †

• 2017年アツい！注目のUIデザインツール徹底比較

グラフィックレコーディング †

• 明日から使えるグラフィックレコーディング入門 How Graphic Recording
• グラフィックレコーディングをやってみよう！ワークショップ　開催レポート〜「3つの筋肉」の鍛え方

共通言語 †

• Tokens Studio for FigmaとStyle Dictionaryでデザインの共通言語をつくる

色 †

• webデザインにおける背景のムフフな法則