inucaraの日記

ユーザビリティの大切さに気づいてもらう

こないだの「インターネットってどういう仕組みで動いているの？」に書いた事前研修でユーザビリティの大切さについても話したいと思って簡単なフォームを作ってみたよ。

想定ターゲットはユーザビリティのユの字も知らないような人や、これからウェブサイトの設計、構築の仕事をしようとしている人。これらの人にユーザビリティの大切さに気づいてもらうために、前回と同じように話す内容をとりあえず書いてってみる。

ちなみに前回のインターネットの仕組みからユーザビリティって話が飛んでるけど、そういうことは気にしないで思いつくことをメモ的にどんどん書いてって、流れは最後に考えようかなって感じ。

じゃあ、さっそく始める！

ユーザビリティって何？

まず始めに、みんなは「ユーザビリティ」って言葉は聞いたことあるかな？　日本語で「使いやすさ」って意味なんだけど、利用者がいかにストレスなく、便利で簡単で直感的な操作ができるか、ってこと。

日常生活でユーザビリティなんて言葉ほとんど聞くことがないと思うけど、これから使う側から作る側になると、何を作るにしてもまず始めに考えなきゃいけないくらい大事なことなのね。

ってまあ、言葉で説明しても実際イメージしにくいだろうから、今回はユーザビリティの大切さを理解するために簡単なサンプルを作ってみたよ。

まず何も考えずに次の A と B の 2 つのフォームをいじってみて。

• サンプルフォーム A
• サンプルフォーム B

どう？　何か気づいた？　実は 2 つのフォームは見た目はまったく一緒だけど使いやすさに雲泥の差があるの。

分からなかったかもしれないから、その使いやすさの差について一つずつ説明していくよ。

オートフォーカス

まず、最初にページにアクセスした時点で両者には差があったんだけど気づいたかな？

A は始めに名前を入力しようとしたら、いったん入力欄をクリックしてフォーカスを合わせなきゃならない。それに対して B はアクセスした時点で自動的にフォーカスが合ってるからそのまま入力することができる。

これは JavaScript ってものをほんの 1 行書けば実現できて、今でこそ Yahoo! も Google も大抵のサイトは導入してるんだけど、僕がインターネットに初めて触れた 7、8年前は Yahoo! みたいな超大手でもやってなかったんだよね (Google はやってたけど！)。

つまりユーザビリティってのは技術力なんかじゃなく、利用者の立場になって考え、小さな不便にいかに気づくかってことが大切なんだ。

ちなみに今でも mixi のトップページはログインフォームにフォーカス当たってなくて超不便！

ラジオボタンのチェック

次にラジオボタンについて。

性別を選ぶラジオボタンがあるでしょ。ここは両者に本当に大きな差がある。

まず A は男性・女性のラジオボタンをチェックしようとすると小さな○をクリックしなきゃならない。それに対して B は「男性」「女性」って文字をクリックしてもチェックできる。

ほんと些細なことだけどチェックのしやすさが全然違う！

HTML の label 要素ってのを使えば簡単にできちゃうのに、結構できてないところも多いからみんなも気をつけよう！

名前未入力時の送信ボタンの無効化

次は比較的分かりやすかったかもしれない。B は名前欄が空のときに送信ボタンが押せなくなってるでしょ。

これによって必須項目が未入力のまま送信されちゃうのを防ぐことができる。

よく送信ボタンを押して次の画面に行ったあと「名前が空です」なんてエラーメッセージを出して、利用者を前の画面に戻らせ再入力を求めるフォームを見かけると思うけど (ひどいのだと正しく入力したのまで消えて再入力しなきゃいけないのもあるけど)、そんなことしなくてもちょっとの工夫でこんなに便利になるんだよ。

送信ボタンクリック時のフォームの無効化

これはちょっと分かりづらかったかな？　B は送信ボタンを押したあとフォーム全体が無効化されていじれなくなってる。

これによって利用者は自分がきちんと送信ボタンを押せたかどうか判別することができるし、二重送信も防げる。

二重送信防止のため「送信ボタンのクリックは一度だけにしてください」って注意文を掲載してるページをよく見るでしょ？　そんなこといちいち利用者に強いなくても作る側の工夫で簡単に防げちゃうんだよ。

アクセスキーの設定

最後はアクセスキー。

B のフォームにはアクセスキーが設定されてて、例えば IE だと Alt + n で名前欄にフォーカスが移るし、Alt + f で「女性」にチェックを移すこともできる。

ユーザ登録みたいな一度しか通過しないフォームではあまり意味がないかもしれないけど (マウスが使えない、とかの特殊な状況を除いてね)、何度も繰り返し利用するフォームだとアクセスキーが設定されてるのといないので作業の効率が全然違ってきちゃう。

まとめ

このように、こんなシンプルなフォームでもこれだけ工夫する余地があるってことが分かってくれたかな？

みんなもこれからサービスを設計するときは利用者の立場になって考え、少しでも使いやすくなるよう心がけてください！

以上！

補足

喋る内容はここまで！　だいたいこんな感じ。

で、ここからは補足説明なんだけど必ずしも上の説明通りにフォームを設計すれば OK って訳じゃないよね。その点についても一応書いておくよ。

まずオートフォーカスについて。これは何でもかんでも自動でフォーカスを当てればいいって訳じゃない。例えば Google なんかはトップページはオートフォーカスだけど、検索結果のページは違ってる。これはそのページを訪れた人の目的が「検索すること」なのか「検索結果を見る」ことなのかの違いで、大事なのはユーザが何を目的にそのページに来たかを考えることだと思う。

送信ボタンの無効化も、ユーザ登録のフォームでは効果があるけどただの検索フォームではうざいだけだし、無効化するならするで、分かりやすい場所に「名前欄が空です」と無効の理由を書かないとユーザが混乱する。

サブミット時のフォーム無効化に至っては、そんなことをするとブラウザによっては入力内容が送信されないっていう問題があるから JavaScript でパラメータを構築して location.href で飛ばしてる。これはあまり褒められたものじゃないし、 POST にも対応できない。

アクセスキーに関しても「名前 (N)」「女性 (F)」と対応キーは書かないとユーザには絶対伝わらない。

じゃあ何でこんなフォームをサンプルとして用意したかというと、この解説の目的が「使いやすいフォームを作る」ことじゃなく「ユーザビリティの大切さに気づいてもらう」ことだから。

「見た目がまったく変わらないのに工夫次第で使いやすさがこんなにも変わる！」ってことを些事に囚われずストレートに実感してほしかったから。

補足説明で書いたようなことは実際に現場で設計するときに自分で気づき自分で考え最適な答えを出せばいいと思う。そのほうが自分のためになるし、そのプロセスって案外楽しいし。

最後に

というわけでまた間違いやこうしたらいいってとこがあったらコメントやブックマークで教えてください！　超参考にします！

ちなみにオートフォーカスのヤフー、グーグルのところは実は記憶が曖昧過ぎてます！

Permalink | コメント(5) | トラックバック(0)