サイト制作の見積もりにも大きく影響!ユーザエクスペリエンスを向上させるために必要なタスクがよく分かる -UX Recipe

UXに力をいれていきたいと考えているWeb制作者は多いと思います。
Webサイトのユーザエクスペリエンスを向上させるために必要なタスクが理解でき、見積もりも作成できるUX Recipeを紹介します。

最終成果物だけでなく、必要な途中のプロセスもドキュメント化などすることで、クライアントからの正当な評価もいただけます。

サイトのキャプチャ

UX Recipe

サイトでは、1でUXの必要なプロセスがまとめられており、2でリソース・日数・単価を入力して、UXの見積もりが作成できます。

サイトのキャプチャ

UXのプロセスを洗い出して、見積もり計算

UXのプロセスは7カテゴリに分類されており、案件によって使い分けて的確に利用したいですね。
中の人に許可を頂き、各プロセスを軽く翻訳してみました。

bA時代は大きいプロジェクトのリーダーや見積もり作成もしていたので、その時の目線でひと言コメントも添えてみました。※フリーランス目線ではないです。

Planning -準備はプロジェクトの要

ここは全項目、必須と言えます。プロジェクトは小さくても大きくても準備が肝心!

サイトのキャプチャ
Expert Review -専門家のレビュー
チェックリストを確認して、サイトやアプリを再検討します。
Stakeholder Workshop -クライアントにヒアリング
クライアントとミーティングを行い、彼らのプロダクトを理解します。
Competitor Analysis -競合相手の分析
競合相手より一歩リードできるよう、何がよく機能するか分析します。
Requirements Analysis -必要条件の分析
いきなりPhotoshopでデザインしないでください。プロダクト、クライアント、ユーザーを知ろうとしてください。
Stakeholder Interview -クライアントにインタビュー
クライアントへはできるだけ早く質問をし、それに関係している部署の人から回答を受け取ってください。
(De)Briefing -ブリーフィング
まずは簡単な報告を行うブリーフィングを設定します。もしこれさえも存在しないのであれば、クライアントと一緒にブリーフィングの場を作ってください。

Research -学ぶ

リサーチは、プロジェクトによっては前述のプラニングや次のエクスプロレイションに吸収されることがあると思います。

サイトのキャプチャ
Ethnographic Research -民族学的調査
文化や社会に基づいて対象となる市場・ユーザーを調査します。
Market Research -市場調査
潜在的なユーザーの洞察を調査します。
Photo Ethnography -写真による調査
写真は千の言葉より価値をもっています。文化や社会を理解するのに写真は大いに役立ちます。
Visual Anthropology -ビジュアル人類学
アート、彫刻、タトゥー、ダンスなどビジュアルの面での調査。
Demographics -人口統計
年齢、性別、居住地など、ユーザーの生データからユーザーを知ります。
Focus Groups -フォーカスグループ
人々が形成する小集団がプロダクトに対してどのような意見、認識、感情をもっているか調査します。
Psychographics -心理学
前述の人口統計だけでは足りません。パワーユーザーの平均的な性格やライフスタイルや属性を見つけます。
Documentation -文書化
あなたのすべての仕事を文書化して、大切に保管しておいてください。将来必ず役に立ちます。
SEO & Analytics -検索エンジン対策と解析
ユーザーがどのようにプロダクトに訪問しているのか、どのくらいの時間を過ごすのか知ることは非常に重要です。
Mobile Assessment -モバイル対応の方向性
デスクトップでできること全てをモバイル対応にする必要はありますか? どの機能を使うかどのテクニックを使うか決めておいてください。
Observational Research -観察調査
ユーザーがプロダクトページでどのような行動をとるか調査します。
Surveys -調査
書式に沿って質問を作り、シェアします。答えを受け取るまで待ちましょう。

Exploration -人々が何を求めているかを知る

十分な予算があるなら、この項目に力をいれるべきです。

サイトのキャプチャ
Persona -ペルソナ
あなたのプロダクトに関係するであろうユーザーを定義します。
User Flow -ユーザーフロー
ユーザーがサイトで目的を達成するために必要なステップを検証します。
Storyboards -ストーリーボード
プロダクトの内外共にユーザエクスペリエンスを説明するラフスケッチを作成します。
Journey Maps -ジャーニーマップ
ユーザーがプロダクトでしなければならない遷移を検証します。
User Stories -ユーザストーリー
ある目的を達成するためにユーザーが何をすることを望むか検証します。
Acceptance Criteria -承認の基準
さまざまなユーザストーリーが適切であるか、望ましい結果になるか検証します。
QOC -質問・オプション・基準
質問をし、可能なオプションをあげ、それぞれの基準を提示します。
まだデザインを決断する必要はありません。

Information Architecture -情報設計

サイトを制作する上で大なり小なり行っている項目です。最後の「DoGo Mapping」はいいですね、ここまで明確な役割をもっていませんでしたが、似たことをしていました。

サイトのキャプチャ
Sitemap -サイトマップ
サイトマップは、プロダクトやWebサイトやアプリの構造を見せます。
この時点ではテキストベースであったり、スプレッドシートを使います。
Card Sorting -カードソーティング
情報を正しい構造にするために、カードを使って情報を整理します。
Content Audit -内容の監査
すべての情報をチェックし、それを評価します。
Content Inventory -内容の一覧
すべてのプロダクトの内容を保存し、記録します。修正履歴も残しておきます。
Brainstorming -ブレーンストーミング
チーム内全員でアイデアを出し合い、話し合います。
Organization Schemes -組織のスキーム
内容を整理したら、それぞれの関係性を検証します。
Organization Structure -組織の構造化
組織化するにはさらに多くを必要とします。構造が内容とどのように定義されるか検証します。
DoGo Mapping -マッピング
典型的なマップとは違ったアプローチで、現在の場所から他のどこへ行けるか何ができるかを示すものです。

Design -デザイン

プロジェクトの規模が小さいと省略されがちですが、手戻りなどを考えると取り入れた方がスムーズに進みます。

サイトのキャプチャ
Sketching -スケッチ
紙と鉛筆を使って、まずはスケッチしてみます。
Wireframes -ワイヤーフレーム
スケッチを終えたら、プロダクトのスケルトンを作成します。できる限りカラーは使わないようにします。
Styleguide -スタイルガイド
サイトやプロダクトを適切なレベルの一貫性を守るために、スタイルを定義します。
Mockups -モックアップ
成果物となるプロダクトのビジュアルの表現を作成します。
Style Tiles -スタイルタイル
プロダクトのビジュアルのスタイルをタイルを使って整理します。カラー、タイポグラフィなど、洗練されている必要がある大切なものを中心に。

Prototyping -プロトタイプ

思ってたのと違う!なんてことがないようにリスクの少ない短いサイクルで確認することは大切です。

サイトのキャプチャ
Paper Prototyping -ペーパープロトタイピング
スケッチとは異なります。これはインタラクションを検証するためのものです。
HTML Demo -HTMLのデモ
ページのフローが分かるようにHTML/CSSを使ってページを作ります。
CSS3アニメーションやエフェクトなども加えれば、完璧です。
IXD Prototyping -IXDプロトタイピング
デザインを適用し、デジタルのプロトタイプを作成します。
Mobile Showcase -モバイルショーケース
レスポンシブなのか、スタンドアローンのアプリなのか、モバイルでの表示を作成します。

Testing -公開する前にテスト

ここを省略してしまうと、クライアントの好みになってしまったり、制作者のエゴになりがちなので、注意しましょう。

サイトのキャプチャ
A/B Testing -A/Bテスト
選ぶことができない時は、このA/Bテストがクライアントのお気に入りです。
Guerilla Testing -ゲリラテスト
デザインをもってコーヒーショップに入り、そこであなたのプロダクトをテストしてみてください。お礼として、飲み物を買うことを忘れないように。
Lab Testing -ラボテスト
機材が揃った環境で、ユーザーの行動を記録し、ヒートマップを作成します。
Remote testing -リモートテスト
リモートツールを使ってデザインやプロトタイプをテストします。

top of page

©2017 coliss