カテゴリー: Web、GUI (page 14 of 24)

453. ユーザへの配慮と設計~文字のサイズと色のカスタマイズ機能~


インターネットをしていて、ページの文字が読みにくいと感じたことはありませんか?私はニュースサイトを見ている時に文字が小さかったり、背景色と文字色のコントラストが低かったりして、記事が読みにくいと感じることがあります。

よい解決策がないかと様々なWebサイトを探してみたらありました!なんと、文字サイズ、背景色、文字色が自分の好みに設定できるのです。 

設定パレットを表示した画面

設定は設定パレットにある色を選択すればOKです。これなら直感的で簡単ですね。また、この機能を利用すれば色弱や弱視の方なども文字を読みやすくできるので、アクセシビリティに配慮している姿勢が伺えます。

ただ、文字色と背景色が同じ色で指定できてしまったり、そもそも、機能の入り口がユーザの目に付きにくい位置にあったり、ページによって機能の有無が異なっているため、ユーザのために用意したせっかくの機能も有効に使ってもらえないのではないでしょうか。

本来、Webサイトに限らず文字の可読性は最初から十分確保してほしいのですが、個人によって「読みやすい」「読みにくい」の基準が異なるため、ユーザが必要に応じて文字を読みやすくできる配慮がされているのは良いと思います。さらに、そうした配慮に加え、機能を使用するユーザに分かりやすく使いやすく設計することが重要で、機能の入り口やその操作方法を分かりやすくすることがポイントだと思います。

例えば、障害タイプ別にワンクリックで設定できるようなカラーセットがページ上部のヘッダー部分に用意されていたらもっと使いやすくなると思います。

参考サイト

 北谷町役場アクセシビリティ http://www.chatan.jp/yakuba/1/880.html 

444. カレンダーから日付を選ぶ入力方式


先日、近い週末に旅行をしようと思い、いくつかの宿泊施設予約サイトで宿を検索していました。そのとき閲覧したほとんどのサイトでは、宿泊日をテキストボックスかプルダウンメニューで入力するようになっていましたが、『宿・ホテル予約サイト じゃらん(http://www.jalan.net/)』では下の画面のように工夫していました。

画面:カレンダーで入力

一見普通のテキストボックスに見えますが、ボックスをクリックするとカレンダーが表示されます。そしてカレンダーから日付を選択すると、日付が自動的に入力されます。

私は宿泊日を土曜日にするということしか決めていなかったので、テキストボックスやプルダウンメニューで検索する場合、毎週土曜日の日付を確認してから入力する必要がありました。しかしこのサイトの入力方法ではカレンダーから選択できるため、日付は確認せずに土曜日の列から選んで入力することができました。

宿に泊まることも旅行の楽しみの一つですから、何度も検索して理想的な条件の宿に泊まりたいと思うものですよね。検索が手軽に行えることで、宿探しも一層楽しく感じられそうです。 

435. 間違えやすいチェックボックス


自宅パソコンのウイルス対策のため、セキュリティーソフトを購入しました。

ユーザー登録のため、Webサイトの画面に従い情報を入力していきました。入力が終了し、「次へ」のボタンを押す前に確認してみると、使用しているOSの選択を間違ってしまった事に気づきました。 

間違ってしまった画面

通常、チェックボックスには、四角(□)の右隣に対応するラベル(今回の例ではOS名)がつきます。しかし、私が普段使っているブラウザの設定では、上図の様に表示がずれてしまい、チェックボックスとOS名の対応関係がわかりにくくなってしまいます。そのため、使用しているOS「Windows XP」のラベルと隣に表示された「Windows Me」のチェックボックスが対応していると思ってしまい、「Windows Me」のチェックボックスをチェックしてしまったのです。試しに文字サイズとウィンドウサイズを変えてみたのですが、下図の様にチェックボックスとOS名が正しい対応関係に見えるように表示させるためには、調整が必要でした。おそらく、この画面を作った方が使っているブラウザの設定では、わかりやすく並んでいたのでしょう。

調整後の画面

このケースでは、下図の様にチェックボックスとOS名を対応させ、縦一列に並べれば、表示がずれずに間違えなかったと思います。

間違えにくいチェックボックス

Webサイトは、様々なユーザーが使用します。また、使用しているPCの環境や設定も様々です。些細な事ですが、ちょっとした工夫で、ユーザーを間違えさせないユーザー登録画面ができたのではないでしょうか。

432. こんなかんじにタッチ ニンテンドーDS「ゼルダの伝説 夢幻の砂時計」


ニンテンドーDSにもゼルダシリーズが発売されました。このゲームは、ほとんどの操作をタッチペン1本で直感的に行える「ペンアクション」がウリの一つで、キャラクターを動かすのはもちろん、画面に直接メモを書いたりなどもできちゃいます。この「ペンアクション」、なかなか秀逸にできていて、私の2007年一押しゲームのひとつなのですが、その中で一つ感心した機能があったので紹介したいと思います。

それは、ある島の親切な奥さん(写真の赤い服のマダム)が教えてくれたのですが、 

ゲーム中の画面

セリフの中の漢字にタッチすれば、よみがなが出るそうです。早速試してみると、こんな感じになります。

読みがな表示

セリフ中の「妻」の字にタッチすると、吹き出し状のよみがなが出てきました。ほほぅ。

わからない漢字にタッチするだけ、実に直感的で簡単です。小さな子供には、よみがなが出ることはもちろんうれしい機能ですよね。しかもこの方法だと、必要な時だけ漢字にタッチして、比較的大きな文字で見ることができます。よみがなが必要ない大人にとっても、画面がすっきりして、これまたうれしい機能です。

必要な時だけよみがなが表示できる機能は、たとえば十字キーといった従来のインタフェースでは、なかなか難しかったのではないでしょうか。画面のどの場所もダイレクトに操作できるタッチペンの利点をうまく活かした、イカした機能ですね。 

429. 身近なものさしでわかりやすく~地図の縮尺表示~


インターネットで地図を見られるサービスはたくさんありますが、最近いくつかのサービスで下図のような工夫がなされていたのでご紹介します。

図1:Yahoo!地図情報/市や町など馴染みの単位
図2:Mapion(マピオン)/細道など直感的に把握しやすい単位も

地図の拡大縮小に使うスライダーの上に、マウスを持っていくと「県」や「市」などのガイドが表示されます。

インターネットの地図サービスをはじめ、カーナビなどでも地図の拡大縮小を操作することができますが、ほとんどの場合、従来からある地図の縮尺表示である「1/8000」や「1/75000」などの表示が用いられています。もちろん、元々地図を読み解くのに長けている人や、カーナビの操作に慣れている人にとっては問題ないのかもしれませんが、私などはいつも合わせたい縮尺に地図の表示をうまく合わせることができません。いきなり全国になってしまったり、誰かの家がアップになってしまったり…。
実際の何分の1に縮小されているのかを表すことは、決して間違いではないのですが、「市」や「丁目」で表してくれる方が、スケール感がダイレクトに伝わります。

今回の「縮尺表示」のように、単位や数値などを自分の身近なスケールで表してくれるものさしは、他にも色々と考えられそうですね。

« Older posts Newer posts »