実用的なユーザビリティの10のポイント：ケーススタディ編

先日紹介した「実用的なユーザビリティの10のポイント」の中から、コンテンツやフォームやタイポグラフィなどの制作に役立つ実用的なケーススタディを紹介します。

10 Useful Usability Findings and Guidelines

以下の意訳は英語圏内のため、特にタイポグラフィなど日本語ではなく英語を想定したデータのためご注意ください。

タイポグラフィ

• 行間 ÷ フォントのサイズ = 1.48
  ウェブサイトの英語フォントでは、一般的に「1.48」が読みやすいです。
  クラシックなタイポグラフィの本では一般的に「1.5」が推奨されています。
• 行幅 ÷ 行間 = 27.8
  一つのパラグラフの幅は平均538.64ピクセルです。
  多くのウェブサイトのフォントサイズが12, 13ピクセルであることを考えるとかなり長いものとなっています。
• パラグラフ間のスペース ÷ 行間 = 0.754
  一つのパラグラフの最後と次のパラグラフの最初の間のスペースは、十分にスペースをとる必要があります。
• 一行の文字数は55～75文字
  クラシックなタイポグラフィの本によれば、一行の最適な文字数は55～75とされていますが、実際には75～85文字あたりの人気が高いです。

ブログのデザイン

• 固定幅を使用したレイアウトは、92%。
  そして、センターに配置しているのは、94%。
  固定幅のサイズが951px～1000pxの間は、56%。
• トップページに掲載している抜粋記事の数は、10～20。
• 全体的なデザインの中でコンテンツ箇所が占める割合は、58%。

フォームのデザイン

• 登録するリンクの文言は「sign up」が40%で、上右の角に設置。
• 登録ページのデザインをシンプルにしているのは、61%。
• 入力フィールドのタイトルが太字なのは、62%。
  フィールドの配置は水平ではなく垂直にしているのは、86%。
• デザイナーのほとんどは必須とオプションを含まない傾向にあります。
• メール確認が無いのは82%。
  パスワードの確認があるのは72%。
• サブミットボタンの配置は、左寄せが56%、中央が26%。

ポートフォリオのデザイン

• レイアウトを中央にしているのは、89%。
  そして大部分のサイトが大きな水平型のナビゲーションを配置しています。
• ポートフォリオサイトの47.2%は、クライアントの紹介ページがあります。
  67.2%が何らかのスタンドアローンのサービスページがあります。
• 63.6%がプロジェクトやケーススタディなどが紹介されています。
  スクリーンショットやスケッチなどを使用して詳細に説明します。
• コンタクトのページには、電話番号、メールアドレス、vCardなどの情報が掲載されており、オンラインのフォームがあります。