第6回 ユーザビリティはどこでチェックするか | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

タイトル画像、Webユーザビリティ―信頼を生む“使いやすさ”のデザイン

第6回 ユーザビリティはどこでチェックするか


前回は、サイトリニューアル時のユーザビリティ改善を中心にお送りしましたが、今回は、新規サイトを制作する過程で、ユーザビリティチェックをどのように制作フローの中に盛り込むかについてお話します。サイトがほとんど完成してからユーザビリティチェックを行うような場合がありますが、それでは問題を修正しようとしても作業工数がかさみます。企画からリリースまでの各段階でチェックを重ねることで、無駄なコストをかけずにサイトを制作することができます。

(解説:石田優子)

著者プロフィール用イラスト [プロフィール]
いしだ・ゆうこ●クロッシングフィンガーズ代表。ユーザーエンパワーメントという手法により、ユーザー視点に立ったサイト構築、コミュニティ運営のコンサルティングなどを行っている。近著に『Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。』がある。
(イラスト:MIKAさん)
クロッシングフィンガーズ:http://www.crossingfingers.org/
KeiYu HelpLab:http://www.keiyu.com/



企画・構成段階


リニューアルの場合は、すでにユーザーからのフィードバックやアクセスログなど、参考となるデータがありますが、新規制作の場合は手探りからの状態になります。

まず、ターゲットユーザーとその目的を明確にし、サイトの構成や主要コンテンツ、導線を考える必要があります。たとえば法人ユーザー向けに製品をアピールしたいというクライアントの要望に対し、そのサイトができた後で実際に興味を示したのが個人のビジネスユーザーだったというようなこともありえます。

最初の部分を履き違えると、ユーザーが求めているコンテンツとかけ離れたものを盛り込んでしまいますし、また、ユーザーが実際にほしい情報にたどりつくのに多くのステップが必要になってしまうかもしれません。このため、どういうユーザーに向けてアピールするかを想定し、その想定にズレがないかの確認が必要です。

想定ユーザー層に近い条件の外部モニターを集めてヒアリングするような機会を設けることができればよいのですが、てっとり早いところでは、サイト制作に関係していない社員や知人、家族などで、想定ユーザー層に近い人の意見を聞くだけでも参考になります。

画面プロトタイプの作成


要件定義や文字中心の仕様書だけでは、制作スタッフ間で受け取るイメージの違いがおきますし、また制作者以外の人にとっては、ビジュアルで表現してもらわないとわからない点が多々あります。このため、実際のデザイン、コーディングに入る前に、主要ページのレイアウトなどを示した画面プロトタイプを作り、まずそれを確認してもらうと、全員のイメージの刷り合わせや問題点の把握が容易になります。

プロトタイプは紙に手描きのものや、パワーポイントなどのソフトで簡単に作成したものでよいでしょう。全画面のプロトタイプを作成するのは大変ですから、トップページとそこからリンクされるページだけ、あるいは最も重要なタスク達成までの導線部分のページだけ、などのプロトタイプを作成します。前者を「水平型プロトタイプ」、後者を「垂直型プロトタイプ」と呼びますが、両者を組み合わせた「水平・垂直型プロトタイプ」も考えられます。

サイト構成ツリー図。水平型プロトタイプと垂直型プロトタイプに該当するページをマーキング
主要なページのプロトタイプを作成して、レイアウトなどをビジュアルで確認することで、イメージや問題点を把握・共有する

この段階ではまだ実際の操作はできませんから、紙芝居のように1画面ずつ見せて、誤解を招く点や、流れがわかりにくい点などがないか確認してもらいます。企画・構成段階と同様に、実ユーザーに近い第三者に見てもらうと、思わぬ見落としに気付くものです。

デザイン・コーディング段階


画面プロトタイプで概要が固まったら、デザインの作り込み、コーディングに進みます。クライアント向けには紙に印刷した画面デザインや全体構成、フロー図などで済ませる場合も多いのですが、それだけでは不十分です。発注サイドや制作関係者以外の第三者による操作チェックが欠かせません。

作り手たちは、サイトの全体構成や、各ページの操作方法などが頭に入っていますが、ユーザーは何の前知識もない状態からサイトを閲覧、操作することになります。

できるだけ多くの人に実際に触ってもらって、操作に戸惑ったり、行き詰ったりするところがないかチェックしてもらうとよいのですが、ひとりだけでもチェックしてもらわないよりは効果があります。関係者間では、この位置にボタンがあれば当然クリックしてくれるだろうと想像していたものが見過ごされたり、誰でも知っていると思っていた用語が理解できなかったりと、制作サイドが陥りがちな「インナーワールド」を突き破ることができるからです。

各過程にユーザービリティチェックを配した制作作業フロー
各段階に第三者によるチェックを行い、その結果を反映していく。サイトのリリース後もユーザーの声をフィードバックし、一層の改善を図ることが大切

全体の変更が難しくても、レイアウトの少しの変更や、注意書きを添えるといったことだけでも、使いやすさが格段に向上する場合もありますので、時間がないからとフィードバックの反映を怠ることがないようにしましょう。そして、サイトが完成・リリースされた後もユーザーの声を聞き、それをさらなる改善に向けて反映させることも忘れないでください。

次回につづく
「Webユーザビリティ―信頼を生む“使いやすさ”のデザイン」第7回は、3月20日(火)からの掲載となります。ご期待ください。
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在