http://gigazine.net/index.php?/news/comments/20091127_fenrirfs/
それぞれのファイルにタグ付けできる、エキスプローラ。
土曜日, 11月 28, 2009
土曜日, 11月 14, 2009
水曜日, 10月 28, 2009
月曜日, 10月 26, 2009
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集
1. サイトのナビゲーション風にデザインされたリスト
2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト
3. 矢印画像を使ったリスト
4. iPhoneスタイルのクールなボックスリスト
5. ツリーっぽい形式にできるリストデザイン
6. 複数行にしてテキストっぽく表示できるテキストリスト
7. ワンラインにして、カンマを付与するリストデザイン
8. カーソルを合わせたときに、アイテムが回転するCSS3のフィーチャーを使ったリストと、なんとも素晴らしいリストデザインのサンプルですね。各々のソースコードは以下より参照してください。
2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト
3. 矢印画像を使ったリスト
4. iPhoneスタイルのクールなボックスリスト
5. ツリーっぽい形式にできるリストデザイン
6. 複数行にしてテキストっぽく表示できるテキストリスト
7. ワンラインにして、カンマを付与するリストデザイン
8. カーソルを合わせたときに、アイテムが回転するCSS3のフィーチャーを使ったリストと、なんとも素晴らしいリストデザインのサンプルですね。各々のソースコードは以下より参照してください。
木曜日, 10月 15, 2009
日曜日, 10月 11, 2009
使えるユーザビリティーガイドライン
1. フォームのラベルはフィールドの上がベスト
study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。
2. ユーザーの視線は人の顔に向く
Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いている方向を見るということがわかっている。
3. デザインのクオリティーは信頼感を増す
ユーザーがWebサイトを信頼するときに何が影響するのかについて、様々な研究がされている。これらの研究から、面白いことにユーザーはカバーデザインで本を選んでいる、ということがわかる。Webサイトを見るときも、そのデザインに左右されるということだ。レイアウトや統一感、タイポグラフィー、色やスタイルなどがユーザーに届く要素である。
4. ほとんどのユーザーはスクロールしない
Prioritizing Web UsabilityでJakob Nielsenが、ユーザーのスクロール度合いについて行った研究によると、23%の人しか初めて訪問したサイトでスクロールしないということだ。つまり、77%の訪問者がスクロールしないということになる。彼らはabove the fold（ファーストビュー）のコンテンツしか見ない。
5. リンクカラーは青がベスト
ユニークなデザインをすることは素晴らしいが、ユーザビリティーに関して言うと、みんながやっていることがベストだと言える。Van Schaik and Lingの研究によると、ユーザビリティーを優先で考えるなら、リンクカラーは青がベスト。ブラウザのデフォルトリンクカラーは青であるし、ユーザーはそれを期待する。
6. 理想的な検索ボックスの長さは27文字入るwidth
検索ボックスの理想的な幅はどれくらいだろう？Jakob Nielsenはそれについての研究を行っている。平均的な検索ボックスは18文字が入るwidthであることがわかった。27%のクエリーがそれに収まらず、長過ぎることになってしまう。27文字入るようにすると、90%のクエリーがカバーされる。
7. ホワイトスペースは理解を高める
ほとんどのデザイナーはホワイトスペース（空白）の効用について知っている。ホワイトスペースは要素間の関係を示し、ページの統一感を出してくれる。ChaperroとShaikh、Bakerによると、ホワイトスペースをうまくつかったページレイアウトは、パフォーマンスには影響せず、ユーザーの満足につながるとのこと。
8. 効果的なユーザーテストは、多くのユーザーに行わなくてもよい
Jakob Nielsen's studyによると、ユーザビリティーテストは5人のユーザーによるテストで85%の結果をカバーする。
9. 使いやすい製品ページは目立つ
多くの製品ページは満足な情報を欠いている。Appleの製品ページは製品の仕様をうまく説明している。製品情報は要約して簡潔にすることが鉄則。
10. ほとんどのユーザーは広告を見ていない
Jakob NielsenがAlertBox entryで発表した内容によると、ほとんどのユーザーは広告バナーを見ていない。ユーザーは例え広告でなくても、広告のように見えるものを無視する。そのため、ナビゲーションアイテムが広告バナーのように見えてしまう場合は注意が必要。
かなりためになりますね。諸々注意していきたいですね。
詳しくは以下からどうぞ。
» 10 Useful Usability Findings and Guidelines
study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。
2. ユーザーの視線は人の顔に向く
Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いている方向を見るということがわかっている。
3. デザインのクオリティーは信頼感を増す
ユーザーがWebサイトを信頼するときに何が影響するのかについて、様々な研究がされている。これらの研究から、面白いことにユーザーはカバーデザインで本を選んでいる、ということがわかる。Webサイトを見るときも、そのデザインに左右されるということだ。レイアウトや統一感、タイポグラフィー、色やスタイルなどがユーザーに届く要素である。
4. ほとんどのユーザーはスクロールしない
Prioritizing Web UsabilityでJakob Nielsenが、ユーザーのスクロール度合いについて行った研究によると、23%の人しか初めて訪問したサイトでスクロールしないということだ。つまり、77%の訪問者がスクロールしないということになる。彼らはabove the fold（ファーストビュー）のコンテンツしか見ない。
5. リンクカラーは青がベスト
ユニークなデザインをすることは素晴らしいが、ユーザビリティーに関して言うと、みんながやっていることがベストだと言える。Van Schaik and Lingの研究によると、ユーザビリティーを優先で考えるなら、リンクカラーは青がベスト。ブラウザのデフォルトリンクカラーは青であるし、ユーザーはそれを期待する。
6. 理想的な検索ボックスの長さは27文字入るwidth
検索ボックスの理想的な幅はどれくらいだろう？Jakob Nielsenはそれについての研究を行っている。平均的な検索ボックスは18文字が入るwidthであることがわかった。27%のクエリーがそれに収まらず、長過ぎることになってしまう。27文字入るようにすると、90%のクエリーがカバーされる。
7. ホワイトスペースは理解を高める
ほとんどのデザイナーはホワイトスペース（空白）の効用について知っている。ホワイトスペースは要素間の関係を示し、ページの統一感を出してくれる。ChaperroとShaikh、Bakerによると、ホワイトスペースをうまくつかったページレイアウトは、パフォーマンスには影響せず、ユーザーの満足につながるとのこと。
8. 効果的なユーザーテストは、多くのユーザーに行わなくてもよい
Jakob Nielsen's studyによると、ユーザビリティーテストは5人のユーザーによるテストで85%の結果をカバーする。
9. 使いやすい製品ページは目立つ
多くの製品ページは満足な情報を欠いている。Appleの製品ページは製品の仕様をうまく説明している。製品情報は要約して簡潔にすることが鉄則。
10. ほとんどのユーザーは広告を見ていない
Jakob NielsenがAlertBox entryで発表した内容によると、ほとんどのユーザーは広告バナーを見ていない。ユーザーは例え広告でなくても、広告のように見えるものを無視する。そのため、ナビゲーションアイテムが広告バナーのように見えてしまう場合は注意が必要。
かなりためになりますね。諸々注意していきたいですね。
詳しくは以下からどうぞ。
» 10 Useful Usability Findings and Guidelines
登録:
投稿 (Atom)