デザイン、ユーザビリティ解析#1 Amazon Prime

はじめに

デザインには理由があります。デザインには必然性があります。
的確にユーザーに情報を提供するために、または目的へ素早く導くために画面を設計（デザイン）します。
作り方や目的を紐解くために、ユーザビリティの解析を記録します。

解析する項目

- 注目度（Attention Heatmap Report）
- 明瞭度（opacity report）
- 視覚計測（Gaze Plot Report）
- 美しさ（Aesthetics Report）
Feng-GUIを利用して解析を実施し、結果に対してフィードバックを行います。

Amazon Prime購入画面

初回の解析対象はAmazon Primeの購入画面のファーストビューです。どのような目的でどのように設計されているか、ユーザビリティの観点から紐解いて見たいと思います。

注目度（Attention Heatmap Report）

【ページトップからポイントを利用するブロックまで】
各要素の注目レベルはほぼ同一となっています。
ユーザーが情報をスキャンする前提としたUXDが実行されています。ユーザーは該当の商品に対してポジティブなアクションを行って入ってきます。殆どが既知の情報ブロックになるので、注目レベルを上げる必然性はありません。

【ご請求額ブロック以下】
ビュー内で最も注目レベルが高い場所です。商品をいくらで購入できるのかが、ユーザーの関心が高いということを考えて設計されていることが伺えます。
「ご請求額」と「金額」が左右に分かれているのにも理由があります。続けて表示すると、ユーザーは一つの塊として認識します。そうなると重要な指標である「金額」を認識している時間が減り、指標とするには不十分な要素となります。左右に分けて配置することで、「金額」を確実に認識させることで、指標としての役割を果たすことに成功しています。
1-Clickボタンのアイコンも非常に重要な役割をしています。これについては、下記の明瞭度にて解説します。

明瞭度（opacity report）

非常に素晴らしい明瞭度の設計です。

【ヘッダーブロック】
ブランドロゴ、検索、カートにフォーカスされています。このブロックでユーザーに行って欲しいアクションをデザインで導くことに成功しています。

【コンテンツブロック】
興味のある商品の画像・タイトル、仕様、金額、1Clickボタン、利用規約にフォーカスされています。購入時に必要となる最小限の情報と、購入を実行できるボタンの明瞭度を上げることで、ユーザーが考えることなく購入まで進める設計となっています。

【1Clickボタンのアイコン】
視覚的にアクションを喚起しています。上記の通り、ユーザーはこのアイコンに辿り着くまでに必要な情報をスキャンしています。次のアクション（最上位のアクション、購入）を無条件に実行できるよう、タップするアイコンが配置されています。

視覚計測（Gaze Plot Report）

ここでも最重要の指標である、「金額」とその周辺にフォーカスが集まっています。
前述した通り、購入対象情報はユーザーにとって既知の情報です。あくまでオプションの情報として伝達されるように設計されています。
また、「購入」以外のアクション全てにも目線が行くように設計し、ユーザーに能動的なアクションすることを求めています。ユーザーの思考がポジティブになるような動線を実装しています。

美しさ（Aesthetics Report）

デザインの明確さ、バランスは非常に整っています。そのため、不用意な場所でユーザーが目止まりすることがなく、気持ちのよいエクスペリエンスを提供できていると考えます。
多めの色展開（6色程度）を採用することで画面の寂しさを和らげつつ、デザイン美しさを実装することで一貫性を保つことに成功しています。

まとめ

さすがAmazon。お手本のような設計となっていました。明確に画面の目的を設計し、ユーザーのスキャン〜アクションまでを一画面で綺麗に実装しています。
今後も業態・形態を問わず様々にピックアップしていきます。また、解析してほしいプロダクトなどのリクエストあればお気軽にメッセージください。