UXデザインコンサルによるUXデザインの基本講座


UXデザインの基本とその考え方

ハーバード大学のイノベーションラボ内に本社を置く、Webコンサル会社、エクステンション・エンジン社(Extention Engine)のクリエイティブ・ディレクター、Scout StevensonによるUXデザインの講義の動画がわかりやすかったので、要約したうえでご紹介します。一部、訳し方を迷ったので、表現が忠実ではない場合があります。ご了承ください。
(※動画はすべて英語です。)

誰にとってUXデザインがプラスか?

この動画のなかでスコットはUXデザインが役立つ4つのケースを例にあげています。

  • リッチなWebアプリやEコマースなど複雑ものに取り組むチーム
  • 業務の掛け持ちの多いスタートアップ
  • ユーザー体験をプロジェクトに統合させたいプロフェッショナル
  • 関わるプロジェクトを効率的に進めたい人

UXデザインとは何か?

UX(ユーザーエクスペリエンス)とは
ユーザーが特定のプロダクトに出会うときの体験の質のこと

優れたUX(ユーザーエクスペリエンス)とは
ユーザーと製品を作成した組織の目標が満たされること

UXデザインの5つの階層

UXデザインの5つの階層を定義し、amazon.comを例に説明していきます。
5つの階層とは下記のもの。

  • Surface
  • Skelton
  • Sturucture
  • Scope
  • Strategy

Strategy (戦略)

まずはストラテジー(戦略)に対する考え方から。
最終到達点を定義します。

  • 最終目標はどこか?何か?
  • ユーザーが何を求めているのか?を定義づける
  • ビジネスが何をしたいのか?を定義づける

Amazonの場合
  • ユーザーは本を買いたい
  • アマゾンは本を売りたい

Scope (視野)

最終的な目標が設定できたら、今度はそのために、何が必要で、何をおこなうべきか?を考えます。

  • 戦略を必要条件に落とし込む
  • ユーザーストーリーとタスクの構築
  • (サイト上でユーザーが目標を達成するために行うタスクを洗い出す)
  • ユーザーを理解し、利益に影響を与える正しいタスクを提供する
  • 簡略化したストーリー(ユーザーができること)を洗い出す

Amazonの場合
  • 本を検索できる
  • 概要を確認でき、比較できる
  • 他の本やオススメの本を見る事ができる
  • ウィッシュリストに追加できる
  • 送料がわかる
  • デビットカードやクレジットカードで購入できる

Sturucture (情報階層と構造の設計)

必要な要素を洗い出しだので、それらを分類し、構造化します。
サイトマップなどはこの段階でつくるべきでしょう。

  • タクソノミーの分類を始める
  • スタート時にどのようにまとめるか考える
  • どのようにしてユーザーは直感的に商品を見つけるか
  • サイト内で起きるアクションとインタラクションのフローはどのようになるか
マインドマップ
カテゴリーや関連した情報のグルーピングに役立つ
ユーザーフローダイアグラム
サイト内の導線とアクションの視覚化に役立つ

Skelton (スケルトン)

各ページ内に含まれる内容や見せ方などを考えます。
ワイヤーフレームの設計をこの段階で行います。

  • どの要素がどのページに必要か?
  • ボタンをどこに配置するか?
  • コピー文の量
  • どのような行動喚起を促すのか
  • ワイヤーフレームはサイトの設計図であり、空のデザイン

ローファイ

  • 手書きのスケッチ
  • 静的なもの

ハイファイ

  • クリックできるhtml
  • その他の技術

Surface (表層的な部分)

サイトのトーン&マナーなど視覚的な要素を最後にデザインします。

  • 全てのインターフェースを揃えたもの
  • コンテンツとトーン
  • カラーと文字
  • ブランドとパーソナリティ
  • 画像とボタン

なぜUXが大事なのか?UXの価値

優れたUX

  • サイトに対する印象を良くしたり、売り上げアップやコンバージョン率の向上に繋がる。
  • ユーザーのリピート率を高め、他のレコメンデーションを促進する。

UXデザインのプロセス

UXプロセスの多用性

UXデザインのプロセスには多様性があります。
それは開発するプロダクトやサービスなどによって体験自体が変わることや、組織毎に違っていたりなどの背景があるそうです。

  • 異なるタイプの経験(サービス、プロダクト、デジタル)
  • 独立したエージェンシー
  • 礼儀作法
  • 依然として主観的なものである
  • ある人がリサーチと呼ぶものを他のところでは分析と呼ぶ

そのうえでエクテンション・エンジン社では下記のプロセスに沿ってUXデザインを行っているそうです。
UXデザインのプロセス

UXデザインを学ぶ際に参考にすべきサイト

スコットによる参考サイトです。

まとめ

近年、より注目度が高まっているUXデザインの領域ですが、僕自身もUX関連の資料などは可能な限り、目を通すようにしています。この動画は入門用として、とてもわかりやすいと思っていましたので、今回記事としてまとめてみました。
組織によって、言い回しや定義は異なるかもしれませんが、この流れを意識して日頃からデザインを行うよう心がけることで、デザイナーやクライアントが自己満足するだけのウェブサイトを作ってしまうリスクを軽減できるのではないでしょうか。