マウスポインタの形状に関する私見

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

ほとんどのモダンブラウザ(Internet ExplorerFirefoxChromeSafari)では、リンク箇所ではないHTMLテキストにマウスオーバーすると、マウスポインタの形状がI字型になります。

I字型マウスポインタ

そのこと自体は、特に問題なさそうに見えますが(実際、私自身、これと言ったフラストレーションを感じたことはありません)、I字型になることでマウスポインタの視認性が下がることは確かで(テキストの中に埋もれて目立たない)、それによって不便を被るユーザーがいます。具体的には、ロービジョン(弱視)のユーザーです。

ロービジョンのユーザーは、特別なルーペ(拡大鏡)を使って(あるいはブラウザ側で表示を拡大し)、パソコンのディスプレイに目を近接させて、情報を読み取ろうとします。そのため、一度に情報を捕捉するための視野は晴眼者に比べて極端に狭くなりがちです。パソコンボランティアの現場で、ロービジョンの人がWebサイトを使用している様子を行動観察する機会があったのですが、マウスを動かすためにはまず、マウスポインタの現在位置をつきとめなければならず、そのためには目を(多くの場合、顔の向きごと)大きく動かす必要があります。素早くマウスポインタを見つけようとすれば、視野が動いている状態でマウスポインタの存在を認知することになり、いわば「動体視力」に依存するような状態になります。晴眼者は一目で画面全体を俯瞰できるので、「静態視力」によってマウスポインタを容易に見つけることができますが、ロービジョンユーザーはそうもいかないようで、ひと苦労です。そこに、上記で述べたマウスポインタの形状(I字型になることでテキストの中に埋もれ視認性が下がる)が追い討ちをかけていると言えそうです。

そもそも、HTMLテキスト上でマウスポインタがI字型になるのはなぜなのでしょうか?恐らくは、テキストをドラッグ選択できる(そしてコピーすることができる)というアフォーダンスをユーザーに提示するためなのでしょう。画像化された文字はドラッグ選択することができないので、文字列がHTMLテキストかどうか(選択できるかどうか)を瞬時に識別するうえでは、マウスポインタがI字型になってくれるのは、よい手がかりだと言えます。でも、Webサイトの閲覧において、マウスポインタの形状をI字型にする必然性って、実際のところあるのでしょうか?

Webブラウザ以外でマウスポインタがI字型になる例をいくつか見てみると、共通点として、「そこが編集可能」であることを示していると言えます。Webサイトのテキストは、本来は読むためのものであって、編集できる(可変である)ものではありません。その意味では、ブラウザにおいてHTMLテキスト上でマウスポインタをI字型にすることは、他のアプリケーションのインタラクションデザインのマナーと合致しないことになります。

もちろん、Webページ上のコンテンツをコピーして引用するというユースケースもあることは理解していますが、ただ、これはメインのニーズではないと思います。「テキストがコピー可能であることを学習によって理解している、比較的リテラシーの高い人が、必要に応じてコピーすればいい」くらいのものではないでしょうか。

以上のように考えると、マウスポインタの形状がHTMLテキスト上でI字型に変わってしまうことの必然性について、個人的には疑問を感じています。さらに言うと、WebページのHTMLテキストは、実際のところ、マウスポインタがI字型でなくてもドラッグ選択できてしまうのです(<a>要素でマークアップされたリンクテキストも、ドラッグして選択することができます)。

ここからは勝手な提案ですが、ブラウザベンダーには、マウスポインタの形状に関する仕様を、以下のように検討していただいてはどうかなあ、と思っています。

  • 非リンクのテキストにマウスオーバーした場合は、マウスポインタの形状は矢印型のまま維持する。
  • 非リンクのテキスト上でマウスボタンを押している状態に限って、マウスポインタの形状をI字型にする。わかる人には「ドラッグ選択してコピーできるんだな」ということが伝わる。自分がドラッグ選択を開始したいポイントと微妙にずれた箇所でI字型になってしまった場合は、マウスボタンを離して、マウスの位置を少しずらしてから、再度マウスボタンを押せばよい。

上記に近い挙動をしてくれるブラウザが実はあって、それは Opera です。といっても、上の箇条書きのうち、前者の挙動をするだけで、後者のような反応はしませんが(HTMLテキスト上でマウスボタンを押しも、マウスポインタの形状は矢印型のまま)、それでも特にフラストレーションを感じることなく、テキストをドラッグ選択することはできます。この Opera のような挙動を、他のブラウザ(このページの冒頭で挙げた各種モダンブラウザ)でもさせることが簡単にできます。実際に当サイトでも、このコラム記事の執筆を機に、リンク箇所ではないHTMLテキストにマウスオーバーしてもマウスポインタの形状を矢印型のままキープするように実装してみました(CSSで、bodyセレクタに「cursor:default;」を追記しただけです)。
矢印型マウスポインタ

なお、この、マウスポインタの形状がI字型になる仕様ですが、フォームのテキストボックスやテキストエリアにマウスオーバーした際にも同様に見られます(どのブラウザでも標準的な仕様となっています)。
テキストエリアにマウスオーバーした際のポインタ形状
これについては仕様を変えないのが適切と考えます。というのも、テキストボックスやテキストエリアというのは、文字列を入力したり、入力された文字列を改変したりすることができる、言い換えれば「そこが編集可能」な領域だからです。

この記事をはてなブックマークに追加

この記事へのコメント : 5件

投稿者:てん
(2010年8月15日)

いつも勉強させていただいています。
これも、関心を持って読ませていただきました。
一つ感じたのは、アフォーダンス性の問題と、視認性の問題とは区別した方が良いと思います。
アフォーダンスの問題として見るならば、確かに、I字型アイコンは一部の人にしかメリットの無いアイコンかもしれず、新しいアイコンが検討されるべきだと思います。あるいは、アイコンが増えることに懸念があれば、通常の矢印が良いというのは大いに納得です。
視認性の問題であれば、工夫の仕方はいろいろあると思います。もっと太くてもいいと思いますし 、I字の横に何か目立つものを置いても良いと思います。(小さな矢印とか) あるいは、該当するテキスト下部にアンダーラインのような線が表示されても良いと思います。(下のテキストを隠さない程度に)
一方、I型が良いのは、その下にあるテキストを邪魔しないことだと思います。上に書いたような、太いIにするならば、XORにするとか、何か工夫が必要ということになります。このあたりも考える必要があるかと思います。
さらにさらに、この議論を進めていくと、たぶん、ポインティングというのが、指し示すという一方向のでもではなく、何かのリファレンスになる情報を先取りしてそれを提示する物として発展することを前提として、その上での議論が必要になってくると思います。難しい・・・
tenyoko

投稿者:匿名
(2010年8月15日)

通常の矢印型ポインタで文字の選択をするのは不便です。やめてください。
太めのI字ポインタを使用するなどの工夫では駄目でしょうか?
文字上でポインタが変化しないのは不安を感じさせ、ストレスでもあります。

投稿者:Kaz@Website Usability Info
(2010年8月17日)

てんさん、コメントありがとうございました。
「アフォーダンス」と「視認性」をわけて考えるという発想は、さらに考察を整理してゆくうえで参考になりそうです。ありがとうございます。
今回の記事を書くそもそもの発端になったのは「視認性」の問題でした。てんさんのアイデア(I字型ポインタを太くしたり、付随するビジュアル、たとえば小さな矢印やアンダーラインを一緒に表示する、など)を拝見するに、矢印型ポインタにすることによって、マウスオーバー部分のテキストが隠れてユーザーにフラストレーションを与えてしまわないかという点を心配されているのかな、とお見受けしました。確かに、そういった点はあるかもしれませんし、もしかしたら、ユーザー側の慣れでやがて解決するような微細な問題かもしれません。このあたりの確証はまだ持てていないので、継続してウォッチしたいところです。
ちなみに、記事中には書きませんでしたが(すでにご存知と思いますが)Windows のコントロールパネルの「マウス」の設定で、マウスポインタの大きさを変えることができます。これを使えば差し当たってのところ、I字型ポインタであっても視認性の向上が期待できますが、パソボラの現場で見たところ、ユーザー(60代、パソコン初級者、ロービジョン)は、OSの設定でマウスポインタの大きさを変える術をご存知でありませんでした。一般ユーザーがOS設定をカスタマイズすることの敷居の高さを考えると、できるだけデフォルトの状態で、識別しやすいポインタ形状がよいのだろうな、というのが、現時点での私の考えです(必ずしもベストではないかもしれませんが、その解の一案として、Web制作者が現状で比較的簡単にできそうなことを、今回の記事では提示してみました)。
突き詰めてゆくと、この手の問題は、てんさんのおっしゃるようにポインティングのありかたそのものの議論になってゆくのでしょうね。チャレンジングなテーマなので、提言する機会があれば関わってみたいと思いますが、本当に難しそうですね…。

投稿者:Kaz@Website Usability Info
(2010年8月17日)

(匿名)さん、コメントありがとうございました。
「太めのI字型ポインタでは駄目でしょうか?」とのこと、ユーザーによってはそれで十分という方もいらっしゃるでしょうね。ちなみに(ご存知かもしれませんが)Windows のコントロールパネルの「マウス」の設定で、マウスポインタの大きさを変えることができます。もし(匿名)さんが Mac ユーザーでしたら、システム環境設定の「ユニバーサルアクセス」にある「マウスとトラックパッド」で、マウスポインタの大きさを変えることができます。ロービジョンの方が身近にいらっしゃるようでしたら、お試しいただければと思います。
ただ、一般ユーザーがOSの設定をカスタマイズするのは敷居が高いという側面もあります(パソコンに詳しい人が身内や友人にいればともかく、そうでない人は初期設定のまま使用するケースが多いでしょう)。その意味では、できるだけ初期設定(デフォルト)の状態で、識別しやすいマウスポインタ形状であることがよいのだろうな、というのが、現時点での私の考えです。
「矢印型のポインタで文字を選択するのは不便」「文字上でポインタが変化しないのは不安を感じさせ、ストレス」とのご感想をいただきましたが、たしかに、一部のユーザー(特にパソコンの扱いにある程度慣れている方)には戸惑いを与える可能性がありますね。ただ私自身、職業柄、様々なブラウザを使いますが、Operaというブラウザでサイトを閲覧中、マウスポインタの形状がHTMLテキスト上でもI字型に変わらない仕様であることに対して、特に気に留めることがなかったという経験もあります(個人的な経験にすぎませんが、意外と、ユーザーはマウス形状をいちいち気にしないのかもしれません)。(匿名)さんのおっしゃる「不便」「不安」「ストレス」がどの程度大きいものなのか、より具体的に伺うと、「サイトの閲覧行動が阻害され、目的達成に支障が出るほどのストレス」「少しの学習で慣れることでは解決できないほどの不便さ」「Webサイトを安心して利用できないほどの不安」なのか、よろしければお話をお伺いできたら嬉しいと思いますし、こちらでもできるだけウォッチして参りたいと思います。

投稿者:匿名
(2010年8月21日)

別にマウスポインタの挙動が怪しかったからといって、サイトの利用に不安を覚えるようなことはありません。
ただサイトへの信頼はゼロになりますね。サイトで語られていること=ユーザビリティへの信頼感も。
バリアフリーは障害者のみが使い易いように作りません。その辺のことをよく考えてみてください。

コメントを投稿する

(投稿いただいたコメントは、当サイト管理人による承認後、公開させていただきます。)