使い分けるインタフェースデザイン

コンピュータやWEB画面の使いやすさをユーザーインタフェース（UI）と呼ぶ。たとえば、オンラインショッピングの購入フローなどは、UIの出来で直接売り上げが左右されるほど重要だ。

今日は、UIデザインをする際に、知っておきたい考え方について、書きたいと思う。

まず、冒頭に述べたように、ユーザーインターフェースとは、利用者にとっての使いやすさである。一言に使いやすさといっても、大きく分けると2種類の使いやすさが存在する。WEB画面のデザインをする際に、この2つが整理できていないと、なんとも的外れなものになってしまう。

2つの考え方とは

その2つの考え方とは、

1. お客様が目的を果たすための最短距離を提供する
2. お客様がツールとして感覚的に使いこなせる環境を提供する

である。

(1)は、オンラインショッピングで購入するフローや、WEBでの資料請求のフロー、会員登録フローなどであり、(2)は、ポータルサイトの各種ツールの並べかたや、検索エンジンの検索フローなどである。
デザインが、WEB画面自体をどう取り扱ったら良いかについてのメッセージをユーザに対して発しているとする「アフォーダンス」という考え方があるが、(1)は道筋を示し、(2)は構造を示している。

(1)の場合、インターフェースをデザインするにあたって、「お客様にどれだけ抵抗感なく最終の目的を果たしてもらうか」ということのみ考える。途中で、お客様が迷ってしまわないように、どういう手順を踏めばよいかの道筋をはっきりと伝えるのが基本だ。
お客様が画面をみて、次はここを見る、次はここをクリックするなど、感覚的にわかることが重要だ。情報の整合性などは、あまり重要ではない。

対して、(2)の場合、いかに理路整然と情報が整理されているかということのみ考える。はじめてみるページでも、「あの情報はここにありそう」とか、「こうすれば、見つかりそう」といったイメージを与えれられることが基本だ。サイト全体の中で、今がどの位置にあり、この下には、こういった情報が入っているだろうという全体の構造を意識させることも重要だ。もれなく、偏りがない、足して100になるような情報構造が望ましい。

(1)と(2)の違い、お分かりいただけるだろうか？
たとえば、ショッピングサイトで、商品の画面から「購入する」のボタンは、一番目立っていなけばいけないし、購入途中で住所を入力して「確認する」のボタンは一番めだっていなければいけない。「確認する」のすぐ下に「戻る」ボタンや「商品の詳細を見る」ボタンが同じ大きさでおかれているのは、お客様の買い物の邪魔になりかねない。実際、最終的な購入率には、この辺の配慮で数％変動する。これらは(1)の考え方による。

逆に、amazonのカテゴリータブ（画面上部の書籍やCDのジャンル名が書いてあるアレ）が、ひとつだけあまりにも派手であったり、第2階層のジャンルが混ざったタブであれば、amazonのサイト全体の構成が把握できず、混乱する。（新ジャンルの商品取り扱い時など、意図的にする場合もあるが）

この画面は何の目的かをはっきりさせて、上記の2つのインタフェースを使い分けながら最適なユーザーインタフェースを模索して欲しい。

人気blogランキングに参加しています。
この記事が参考になった方は、クリックしていただけると、助かります。 ^ ^
最新の人気blogランキングをチェック