メニューおよびサイト内検索をスキップして、本文へジャンプ



ここから本文です。 現在位置表示(パンくずリスト)は、このすぐ上にあります。

「ユーザビリティ」の記事一覧

話題「ユーザビリティ」に関連するコラム記事の一覧です。
(記事数:52)

枝葉末節な話かもしれませんが、Webサイトの閲覧中におけるマウスポインタの形状について、気になっていることがあるので、主観的な意見ではありますが記しておきたいと思います。特にアクセシビリティの観点で、問題になるケースが見られたためです。

今回の話題で採り上げる「ページ内スクロールエリア」とは、ブラウザの機能として標準装備されているスクロールバーとは別に、Webページの中で表示されるスクロール領域を意味します。下図のようなイメージです。
ページ内スクロールエリア

Webページの途中に、リンクの目的地があるような場合がありますね。いわゆる、「ページ内アンカー」と呼ばれているものです。図示すると、下記のようなイメージです。
ページ内アンカーのイメージ図

ページが存在しないアドレス(URL)にアクセスすると、「ページが見つかりません」といったメッセージが表示されるのを見たことがあると思います(いわゆる「Not Found(404エラー)」と呼ばれる現象です)。

Not Found(404エラー)が起こる原因としては、以下のようなものが挙げられます。

先のコラム記事「フリガナのカナ表記」に、とても印象的なコメントをいただきました(ありがとうございます!)。フォームに名前を入力する際、いつも「かな漢字変換」でいったん名前を入力しているのに、再度読み仮名入力をさせられるのがとても面倒、というものです。

先のコラム記事「パスワードは隠すべきか?」で、Jacob Nielsen(ヤコブ・ニールセン)氏の「Alertbox」の記事(パスワードを隠すのをやめよう)を引き合いに出し、現時点での私の意見として「多少の不便はあっても、今の慣例どおりデフォルトではパスワードを非表示にしておいて、ユーザーが任意でパスワードの表示/非表示を選択できる機能を付加するのが良いのではないか」ということを述べました。

このところ、Web以外での、リアルワールドにおけるプロダクトのユニバーサルデザイン(UD)関係者とお話をさせていただくことが何度かあり、その中で、久々に「Ronald Mace(ロナルド メイス)のユニバーサルデザイン7原則」に触れる機会がありました。古くからある有名な原則なので、すでにご存知の方も多いと思いますが、今見ても興味深い内容なので、この場でも採り上げてみたいと思います。

Web Designing ( ウェブデザイニング ) 2010年 02月号 [雑誌] 毎日コミュニケーションズ「Web Designing(ウェブデザイニング)」誌の2010年2月号にて、記事を執筆させていただきました。テーマは、Ajaxにおけるユーザビリティです。「Ajax時代のユーザビリティ 30のポイント」という特集の中で、「レイヤー型ポップアップ」の項を担当させていただきました。

お問い合わせフォームをAjaxのポップアップで表示できる面白いサービスがありますので、ご紹介したいと思います。「VisitorContact」というサービスです。

456 Berea Streetという、主にWeb標準やアクセシビリティ、ユーザビリティに関する話題を簡潔にまとめて発信しているスウェーデン発のサイトがあります。その中に、「Don't fear the fold -- people do scroll」という興味深い記事がありました。Webユーザーはちゃんとスクロールしてくれるもだから、「fold」を恐れるな、というものです。

URLとは、ブラウザのアドレスバーに表示される文字列で、簡単に言うと「どのWebページを開くか」を示したものです。このURL、何気なくWebユーザビリティに影響しているので、今回は、ユーザビリティという側面からURLのあり方について考えてみたいと思います。

Webページに実装されているリンクの中には、画像とテキスト(このコラム記事では以下、HTMLテキストだけでなく画像化された文字情報も含みます)のリンクが一対になっているもの、つまり両者が隣接していて、かつリンク先が同一になっているケースをよく見かけます。たとえば、テキストリンクにアイキャッチャーとなるアイコンが付随している場合や、テキストリンクを補足するイメージ写真が付いている場合、などです。たとえば、以下のような例があります。

コラム記事「ヒューリスティック評価の99パーセントは間違い?」を読んだ読者の中には、いわゆる「10のガイドライン(Ten Usability Heuristics)」自体が役に立たないものという誤解を受けた方もいらっしゃるかもしれません。実際に読んでいただければ「10のガイドライン(Ten Usability Heuristics)」は簡潔で優れた指針だ言えます。せっかくなのでこの機会に、わかりやすく(私のほうで意訳してみましたので)ご紹介したいと思います。

何やら刺激的なタイトルでビックリですが、「Web担当者フォーラム」というサイトで連載している「HCD-Net通信」の記事で採り上げられていた記事ですので、かいつまんでご紹介したいと思います。

ユーザビリティの評価手法として以前、ヒューリスティック評価ユーザビリティテストをご紹介しましたが、今回はもうひとつ、認知的ウォークスルーという手法をご紹介したいと思います。

一般的に、ユーザビリティを意識してユーザーインターフェース(UI)を設計する際には、前例(慣習)に従うのが良いとされることが多いです。これには理由があって、ユーザーの頭の中で構築されたメンタルモデルに適合しやすいからです。

Webユーザビリティの第一人者と言われているJacob Nielsen(ヤコブ・ニールセン)氏が、自身のコラム「Alertbox」の中で、「パスワードを隠すのをやめよう」という興味深い問題提起をしています。通常、Webサイト(ホームページ)などでパスワードを入力すると、画面には入力された文字列が表示されず、代わりに文字の数だけ「黒い点」が表示されます。こうした状況は、「フィードバックをユーザーに提供し、システムの状態を視覚化する」という基本的なユーザビリティ原則に反している、というのです。

主観的な印象ではありますが、近頃、無駄に動作が重い(ページの読み込みに時間がかかる)Webサイトが多いような気がします。一見なんてことなさそうな(リッチなアプリケーションが実装されていたり、高解像度画像や動画が貼り付けられていたり、といった様子がない)ページであっても、ブラウザに読み込まれるのに時間がかかってしまい、コンテンツ内容を閲覧したり機能を操作したりできる状態にならないケースがたびたび見受けられるのです。

Webページ上にある小さな画像(サムネイルなど)をクリックすると、画像が拡大表示される -- Ajaxを使った、そんなUI(ユーザーインターフェース)をご覧になったことがある人は多いと思います。たとえば、以下のような感じです(eコマースサイトの例)。

バナーブラインドネス(banner blindness)という言葉をご存知でしょうか?直訳すると「バナーを視認できない」という意味になりますが、より端的に言うと、Webサイト(ホームページ)上のユーザー行動において、「バナー画像がユーザーに無視される」現象を言い表した言葉です。

このたび、インプレスITが運営するソフトウェア開発者向けの情報サイト「Think IT(シンクイット)」にて、特集記事を連載させていただくことになりました。2008年9月の期間限定ですが、毎週水曜日(9月3日、10日、17日、24日)に公開されます。テーマは、Flashにおけるユーザビリティです。

CAPTCHA画像の例 皆さんは、CAPTCHA(キャプチャ)って、ご存知ですか?ブログでコメントを記入したり、何らかのサービスで認証を受ける際に見られる、文字が歪んだような不思議な画像ですね。フォームに情報を入力する際、「画像の中に見える文字を入力してくだい」といった具合に入力を求められたりします。

人間の記憶には、短期記憶長期記憶の2種類があると言われています。いずれも認知心理学の用語ですが、Webサイト(ホームページ)をデザインするうえで、知っておくと良い知識です。簡単に説明すると、以下のようになります。

このサイトの記事「ユーザビリティの評価手法(その2):ユーザビリティテスト」の中で、テスター(テストに協力いただくユーザー)は「5人いれば十分」と述べました。Webユーザビリティの第一人者、Jacob Nielsen(ヤコブ・ニールセン)氏のコラム「Alertbox」にある「5ユーザでテストすれば十分な理由」でも有名な理論なので、ご存知の方もいらっしゃるかと思います。ただし「5人」で可能なのは、あくまでも、仮説検証ベースによる「そのユーザーインターフェースがユーザービリティ上問題ないか?」の行動観察であることに留意する必要があります。

このサイトの読者(現役でWebサイトを制作/運営されている方)の多くは、(勝手な想像ですが...)お正月などで帰省すると「親御さんのパソコンのサポート係」として重宝されるのではないでしょうか(笑)。私自身、父親のパソコンにたまったゴミデータを掃除したり、各種設定を整理したり、ウィルス対策ソフトの更新手続きをしたり、ハードディスクのデフラグをかけたり...と、毎年、ひと仕事です。

そんな、毎年の帰省のたびにつくづく思うことがあります。それは:

Webサイト(ホームページ)を閲覧するための環境(パソコン)自体が、そもそも全然、アクセシブルでない(ユニバーサルに誰でも使えるようになっていない)ではないか。

...ということです。主に「コスト」と「使い勝手」の観点から、述べてみたいと思います。

ユーザーにしてみれば、Webサイト(ホームページ)のユーザビリティアクセシビリティは、当たり前にきちんと確保されていて欲しいものです。その一方で、私自身これまで様々なサイト構築プロジェクトに関わってきた経験で言いますと、すべてが満された理想的なユーザビリティ/アクセシビリティを(一度で)実現するというのは、なかなか容易ではないなあ、という実感があります。(サービスを短期間で立ち上げなければならない、話題になりそうな華やかな演出を優先しなければならない、社内ステークホルダーのWebリテラシーやパワーバランスに合わせて合意形成する必要がある、などなど、様々な制約/阻害要因がありますよね...。)

ご自分のサイトのどこがクリックされて、ユーザーがどう動いているかは、ユーザーインターフェースを設計をする上でとても興味深い事項ですね。以前、「クリック箇所を解析する」でCrazy Eggという解析ツールをご紹介しましたが、今回はもうひとつ、RobotReplayというツールをご紹介します。

ご自分のサイトのどこがクリックされていて、どこがクリックされていないかは、ユーザーインターフェース設計をする上でとても興味深い事項のひとつですね。ユーザビリティテストでも検証が可能ですが、自動的に解析してくれるツールもあります。今回はそんなツールのひとつ、Crazy Eggをご紹介します。

Webの入力フォーム(「お問い合わせ」や「申し込み」など)で、氏名を入力させるケースは多いですが、いつも気になるのが、読み仮名(フリガナ)の入力です。カタカナで入力させる例がとても多いのですが、これは、ユーザー(お客様)にわざわざ、無駄に面倒なことを強要していると言えます。

ユーザビリティアクセシビリティに配慮したWebサイト(ホームページ)を作ろうとした場合、JavaScript(ジャバスクリプト)は、考慮すべきポイントのひとつになります。

Webサイトを制作していると、<a href="xxx" target="_blank">などとマークアップして、リンク先ページを別ウィンドウを開くようにしたいと思うことがあるでしょう。たとえば、以下のようなケースです。

Webページの「横幅」について、皆さんのサイトでは、どのようにされていますでしょうか?
固定幅にしているサイトもあれば、リキッドレイアウト(ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト)にしているサイトもあるでしょう。いずれにしても、ユーザビリティの観点から、横スクロールが発生しないことが望ましいとされています。というのも、横スクロールをしなければ見れないページですと、一行読むたびに右へ/左へとスクロールしなければならず、(仮に一文字分だけスクロールしなければならない程度だとしても)ユーザーに大きなフラストレーションを与えてしまうからです。

Webページを閲覧する際、スクロールが使えることは「当たり前」ですよね。恐らく「スクロールをしたことが無い」というWebユーザーはいないでしょう。しかし、その「当たり前」に意外な落とし穴があること、ご存知でしょうか?

「フィードバック」という言葉には、色々な意味がありますが、ここでは「ユーザーがあるアクションを起こしたときに、反応を返すこと(または返す反応のこと)」を意味します。Webサイト(ホームページ)に限らず、ユーザーインターフェースを設計するうえで、このフィードバックはとても重要な要素と言えます。

アフォーダンス(affordance)という言葉を聞いたことはありますか?「〜を提供する」「〜を利用可能にする」という意味の英語「afford」の名詞形ですが、ユーザーインターフェース設計の世界では、モノの属性(形状、材質、色など)がヒト(ユーザー)に対して「どう取り扱えば良いか」という情報を発している、という考え方のことをいいます。
たとえば、(無意識にですが)皆さんこんな経験があるのではないでしょうか?

フレームの使用例 一部のWebサイト(ページ)では、「フレーム」と呼ばれる手法が使われています。フレームとは、図に示すように、ひとつのページを(多くの場合、2つから3つに)分割して、たとえば「ナビゲーション」と「本文」といった具合に機能をわけて表示する手法です(各々、個別のHTMLファイルを読み込んで表示します)。

企業サイト ユーザビリティランキングという調査があるのをご存知でしょうか?日経BP社が2004年から毎年実施しているヒューリスティック調査で、国内主要企業のWebサイトを調査対象とし、点数によってランク付けをするものです。

ユーザビリティテストとは、ユーザビリティ評価のための手法のひとつで、ユーザー(サイト閲覧者)に、実際に評価対象のサイト(またはそのプロトタイプ)を使ってもらい、その様子を観察することで、様々な問題点を発見する手法です。

ヒューリスティック評価とは、ユーザビリティ評価のための手法のひとつで、ユーザビリティの専門家が、評価対象のサイトを見て、様々な問題点を指摘する手法です。

皆さんは、ご自身の運営されているWebサイト(ホームページ)が、ユーザビリティという観点で問題ないかどうか、評価してみたことはありますでしょうか?

「やったことがない」「やってみたいけど、どうやったらいいのかわからない」「やっている暇がない」という方も少なくないと思います。そこで今回は、ユーザビリティの評価手法について簡単にご紹介したいと思います。

ウェブ進化論ウェブ進化論」という本があります。本屋さんの新書コーナーで平積みされたりしているのでご存知の方も多いと思いますが、お読みになりましたか?

Google、Web 2.0、ブログ、オープンソースなどを例に「消費者とインターネットの関わり方が今後どうなってゆくか」がわかりやすくまとめられている良書です。お仕事でWeb (インターネット)を活用されている方、これから活用したいと思われる方は、ぜひ一度読んでおくと良いでしょう。

近頃、SEO(検索エンジン最適化)やSEM(検索エンジンマーケティング)の専門家が「LPO」というコトバを口にするのをしばしば耳にします。3文字略語が多い業界ですが、このLPOとはどういうものなのでしょうか。また新しく、ノウハウを勉強しなければならないシロモノなのでしょうか?

最近、Webマーケティングの世界でロングテール(long tail)という言葉をよく聞きます。「ニッチな商品の売り上げの合計が、主力商品の売り上げの合計を上回る」という現象のことです。グラフにすると「長い尻尾」に見えることから、このように呼ばれています。

「ユーザビリティ」という言葉は、Web制作/運営の現場において、もはや珍しい言葉ではなくなっています。その一方で、「ユーザビリティ」という言葉の意味を、正しく理解されていないケースもよく見受けられます。ユーザビリティを語る際、「万人にとって使いやすいものが、すなわちユーザビリティの優れたものである」と思っている方は、案外多いのではないでしょうか?

近頃は、ブロードバンド環境が一般的になり、高解像度画像や動画など、リッチなコンテンツのWebサイト(ホームページ)でも比較的ストレス無く楽しめるようになりました。実際、Flashや画像をふんだんに使ったサイトをよく見かけますよね。
そんな流れの中、多くのWebサイトでは、テキストのライティングがおざなりになっていないでしょうか。今回は、Webサイト(ホームページ)におけるテキストのライティングの重要性について、確認したいと思います。

こんな経験はありませんか?

デパートで買い物をして、エスカレーターで一階に下り、そのまま食材を買いにデパ地下に行こうとしたら、地下一階への下りエスカレーター乗り場が離れたところにあった。あーめんどくさい。

実はこれ、災害時のことを考えて、敢えてこのような造りにしているそうです。
というのも、火災などでエスカレーター(おそらくは停止していて「階段状態」になっていると思いますが)を下りて非難する際、一階で屋外に出る必要がありますが、仮にエスカレーターがデパ地下までスムーズにつながっていると、パニック状態の人はつい、一階にとどまらずそのまま地下に流れてしまう(つまり、屋外に出られない)という危険性があるからです。この話を聞いたとき、私は「なるほど〜!」と思いましたね。

Webユーザビリティを改善するには、当然のことながらユーザーのことを理解しなければなりません。ターゲットユーザー像を明確にすることや、一般的なユーザー特性を理解しておくことをご紹介したのも、そのためです。
ここではもうひとつ、ユーザーを理解する助けとして、メンタルモデルをご紹介します。

SEO(検索エンジン最適化)を実施するにあたっては、ユーザビリティと同様のアプローチ、すなわち、まずはターゲットユーザー像を明確にし、その上で、そのターゲットユーザーの視点に立ってキーワードを見極めることが大事であると、先の記事SEOとユーザビリティ(その1)/(その2)で述べました。
では、こうして見極めたキーワードは、実際サイト(ページ)の中にどう配置してゆけばよいのでしょうか?

SEO(Search Engine Optimization:検索エンジン最適化)を実施するには、ユーザビリティの向上を考えるときと同様に、まずはターゲットユーザー像を明確にすることが大事であると、SEOとユーザビリティ(その1):小手先のテクニックに溺れないでは述べました。

具体的にSEOを進めるにあたっては、そのターゲットユーザーの使用語彙(どんな検索キーワードを使って検索エンジンで調べものをするのか)を見極める必要があります。ここで留意すべきことは、検索キーワードを検討し見極める際は常に、ターゲットユーザーのペルソナ、シナリオに立ち返ることです。

Webユーザビリティについてご提案すると、よく「ユーザビリティを改善したって、サイトへの訪問者(アクセス数)が増えるわけじゃないでしょう?」と言われます。ユーザビリティがサイトに貢献できるのは「お客様がサイトに来訪した後、いかに楽しく使って満足いただけるか」という部分なので、その意味では、ごもっともな感想ですね。
というわけで、ユーザビリティに配慮すると同時に、サイトへの集客についてもしっかり考えなければいけません。

「良いWebサイト」考察で述べた5つの条件、とりわけ下記の2つを直接的に満たすための考え方として、Webユーザビリティというものがあります。

  • 求める情報が探しやすいこと
  • ターゲット顧客にマッチしていること

「ユーザビリティ(usability)」とは、「use」+「〜able(〜できる)」(の名詞形)であり、すなわち、アクセスしたWebサイトが、実際のところ「使えるのか?」を意味します。もう少し具体的に解説しましょう。

突然ですが、「良いWebサイト」ってなんでしょう。

世の中には様々なWebサイト(ホームページ)が存在しており、そのコンセプトは千差万別です。したがって「これこそがWebサイトの理想形である」というのは難しいでしょう。うーん、じゃ、「良いWebサイト」っていったい...?

Twitterでの反応 (TOPSY)

最近のRetweet

人気のページ (はてなブックマーク)