ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
Post on:2009年6月5日
ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。
10 Tips to Create a More Usable Web
以下、各ポイントのピックアップです。
1. Creating active navigation
アクティブ機能をもったナビゲーションの設置
サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。
2. Clickable labels & buttons
ラベルやボタンをクリック可能に
フォームのラベル(label)やボタン(button)に、クリック可能であることが分かるようにスタイルシートで設定します。
例:
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> label, button, input[type="submit"]{cursor:pointer;} </textarea> |
3. Linking your logo
ロゴはリンクとして活用
多くのユーザーは、ウェブページ上のロゴがトップページへのリンクであることを期待します。
ロゴのリンクがどの程度利用されているかは、例えばリンクの記述を「/index.html?ref=logo」として測定することができます。
4. Increasing the hit area on a link
リンクのヒットエリアは大きく
リンクのホットスポットは可能な限り大きくし、クリックしやすくします。
これはあらゆるサイト・コンテンツに適用すべきことです。
5. Adding focus to form fields
フォームのフィールドにはフォーカスの指定
ユーザーがフォームに入力する際、そのフィールドのフォーカス時に背景に微妙な色をつけることは非常に有用です。
6. Providing a useful 404 page
有用な404ページを設置
404ページには、エラーコードを表示するだけではなく、ユーザーに有用な情報を提示します。適切なメッセージと、検索ボックスやトップを含むリンク集などはユーザーの助けになります。
決して、ユーザーを非難することはしないでください。
7. Using language to create a casual environment
カジュアルな雰囲気を言葉遣いで演出
ユーザーがリラックスした気持ちで接せられるように、コピーをカジュアルなものにしてみてください。
8. Applying line height for readability
リーダビリティのために適切なline-heightを
テキストには、line-heightプロパティで行の高さを適切に指定し、可読性を確保します。
9. Utilizing white space to group elements
ホワイトスペースを有効活用
適切なホワイトスペースは、要素をグルーピングする際にも大きな効果を発揮します。
10. Being accessible
アクセシブルであること
視覚障害者だけでなく、帯域が制限されていたり、古いブラウザで閲覧するユーザーでも可能な限りアクセス可能にするために最善を尽くしてください。
sponsors