Webユーザビリティ

Webユーザビリティとは「Webサイトの使い勝手の良さのこと。そのページを訪れた利用者(ユーザ)がどれだけ快適に操作できるかを意味しており、ページ内の文章やボタン・画像などの各要素のわかりやすさや大きさ・配置、操作の学習しやすさ・覚えやすさ、ページ間移動の効率のよさ、ページの読み込み時間の短さなどの観点から評価される」そうだ。ふとしたことで気になり始め、いくつかのサイトを参考に2週間ぐらい前から少しずつテンプレートやプラグインを修正してきた。

主な変更点
1. ブログ内検索
ブログ内検索は元々設置していたが、「スペースを入れての検索不可 」という注意書きを追加した。実を言うと、スペースを入れると検索されないということを知らなかったのだ。…お恥ずかしい。

2. カテゴリー表記
カテゴリー表記を記事の下から上に変更した。『タイトルや日付を見た時にカテゴリーも一緒に目に入れば「ああ、今日はこの話題か」と記事のテーマについて察しが付く。記事を読んだ後に知らせるよりも、記事を読む前に知らせたほうが親切だ』という考えに賛同した。

3. 投票システム
閲覧しやすいかどうか、分からなければ聞いてみる…というこで、投票システムを設置した。今後、いろいろ皆さまの意見をお聞きしながら、より良いブログ作りを目指します。

4. パンくずリスト
パンくずリスト(topic path)を設置した。そのページより上段のカテゴリー等を直感的に知らせることができる。(トップページには表示していない)

5. リンクの色指定
リンクの色指定を止めた。今までもリンクは青で、訪問済みは紫だったけど(ポインタを乗せると赤)、ブラウザで指定されたとおりに表示されるようにした。

6. メニュー表記
メニューの英語表記を止めた。カッコいいとは思うけど、わかりやすさを最優先。

7. スクロールバー
スクロールバーの色指定を止めた。これもカッコいいと思っただけ。標準のに比べると確かに見辛かったかも。

参考にさせていただいた主なサイト
【覚え書き】

1. ブログ内検索窓
<form action="./" method="get">
<input type="text" size="22" name="q" value="ブログ内検索" onblur="if(this.value == '') this.value='ブログ内検索';" onfocus="if(this.value == 'ブログ内検索') this.value='';" maxlength="200">
<input type="submit" value="検索">
</form>

3. 投票システム
無料投票レンタル

4. パンくずリスト
初心者でもできる簡単FC2ブログの作り方を参考にさせていただきました。

5. 変更前のリンク色
a:link {color: #0000CC;}
a:visited {color: #990099;}
a:hover { color: #CC0000;}
a:active {color: #CC0000;}

6. 英語のメニュー表記
ブログ内を検索=Archives
最近のコメント=Recent comments
リンク=Links
プロフィール=About me
この記事のURL=Permalink
コメントの投稿=Comments

7. スクロールバー
scrollbar-track-color: #EEEEEE;
scrollbar-face-color: #DDDDDD;
scrollbar-arrow-color: #999999;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-darkshadow-color: #CCCCCC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #CCCCCC;
ブログ内検索
カテゴリー
月別アーカイブ
全記事一覧
モバイル版QRコード
このブログは携帯電話でも閲覧できます。下のQRコードを読み取ってアクセスしてください。
QR
プロフィール

k_sone

Author:k_sone
東北学院大学体育会アメリカンフットボール部Kayaks(カヤックス)の元監督。部員数が激減して廃部寸前にまで陥ったチームを立て直し、東北学生1部リーグに昇格させた。2011年5月、監督を辞任。

FC2カウンター
different version