第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ
サイトの読み込み時間を詳細に調べてくれる無料診断ツール『Pingdom Tools』 | POP*POP
Firebugを使えばいいじゃん、という突っ込みはさておき、Pingdom Toolsでなかなか使える診断ツールが提供されています。 任意のURLを指定すればページのどこがどれぐらいの速度で表示されているかを診断してくれます。「最近サイトがちょっと重いなぁ」というときに使ってみてはいかがでしょうか。 詳しい使い方は以下のとおり。 ↑ このサイトでとりあえずテスト。 ↑ 結果はこのとおり。時間がかかっている画像がどれだけわかりますね。 ↑ それぞれのバーの色の見方はこんな感じです。 ↑ ロード時間のサマリーもこのように表示してくれます。 ロード時間がかかりすぎている場合はどれを圧縮すればいいかが一目瞭然ですね。またどのプラグインやスクリプトに時間がかかっているかもわかるのでサイトを軽くしたい場合には外す優先順位がわかってよろしいかと。 ご利用は以下からどうぞ。 » Pingdom Tools
検索ユーザーの目線はどう動く Yahoo！とGoogleで違い
アイレップとジャパンマーケットインテリジェンスは6月11日、Yahoo！JAPANとGoogleの検索結果画面を見ている際のユーザーの目線の動きを調べた結果を発表した。Yahoo！は「関連検索ワード」や「Yahoo！カテゴリ」が注目されており、Googleはサイトのタイトルを最初から最後までよく読まれているという傾向が見えた。 測定は昨年9月から10月にかけ、目の網膜に照射した赤外線の反射を利用する専用機器を使い、無作為に選んだ76人（男女半々）を対象に実施した。 それぞれ、画面上部に検索連動広告が表示されている場合と、表示されていない場合に分けて調べた。 Yahoo！検索で広告が表示されていない場合、目線は「逆L字型」に動く。検索結果の上に表示される「関連検索ワード」や「Yahoo！カテゴリ」を見るために目線が右に動き、その後目線が左に戻り、検索結果サイトのタイトル先頭部分を下まで流して
別ウィンドウを開くことの是非｜ウェブユーザビリティ向上を支援するWebsite Usability Info
（2012年1月28日追記） この記事内容をアップデートした記事を、別途公開しました。「別ウィンドウを開くことの是非 (その2)」をご参照ください。 Webサイトを制作していると、<a href="xxx" target="_blank"> などとマークアップして、リンク先ページを別ウィンドウを開くようにしたいと思うことがあるでしょう。たとえば、以下のようなケースです。 別サイトにリンクする場合 (できれば 別サイトを回遊した後、自サイトに戻ってきてもらいたい) 開いたページであれこれ操作が予想され、その間、元ページは残しておきたい場合（ブラウザの [戻る] ボタンではすぐに戻れないケースなど） お気持ちはよくわかるのですが、ユーザビリティやアクセシビリティの観点で考えると、リンクは別ウィンドウを開くべきではないと考えます。理由は、以下の通りです。 初心者ユーザーやシニアユーザーは、別ウィ
成功するショッピングサイトに必要な17の新常識 | POP*POP
SEO関連の話題を扱っているseomoz.orgにて興味深い記事がありました。「17 New Rules for Successful E-Commerce Websites」です。 ショッピングサイトを作るときにはどういった点に気をつければいいか、かなり参考になるのではないでしょうか。 以下に詳しくご紹介（あまり好きではないですが、説明の都合上、元記事からそのまま画像を拝借しています）。 ユーザーがどこにいるのか教えてあげよう ユーザーがトップページ以外にいる場合、どのセクションにいるのかわかるようにしましょう。パンくず型のナビゲーションも有効です。 選択条件を解除できるようにしよう ユーザーは一般的に選択条件を追加しながらサイトを見ていきます。そうした選択条件はすぐにはずして元に戻れるようにしておきましょう。 一般的な並び替え方法はきちんと用意しよう ユーザーが選択しやすいように「価格
第20回 “使いやすいURI（URL）”の設計を考える
今回は「URIの使いやすさ」について考えてみたいと思います。URIの使いやすさ，というのは，ウェブサイトやウェブ・アプリケーションにおいて，どういうURIでそれぞれのページにアクセスできるようにすると，利用者は使いやすいのか，ということです。つまりは，どのようにURIを設計するのがいいんだろう，ということです。URIの設計については，これまでもいろいろなところで議論がなされていますので，それらの議論や動向などを見ながら，考えていきたいと思います。 URIを話題として取り上げようと思ったのは，4月の4，5日に行われたYAPC ASIA 2007（YAPCはYet Another Perl Conferenceの略）で，Six Apartの創業者でMovable Typeの生みの親であるBen Trott氏がSix Apartのサービス「Vox」について発表を行ったとき，「Voxの出力するRS
＠IT：ユーザーが選びやすいフォームのカタチを考えよう
Webアプリケーションのユーザーインターフェイス[2] ユーザーが選びやすい フォームのカタチを考えよう ソシオメディア 上野 学 2005/6/24 前回「ユーザーにとっては “ユーザーインターフェイス”こそが製品そのもの」は、ユーザーインターフェイスというもののとらえ方と、それをデザインするうえでは、人とシステムとの対話であるインタラクションデザインを論理的に行わなければならないという話をしました。今回は、GUIをデザインするうえで必要な前提知識と、Webアプリケーションの課題、そしてウェブアプリケーションにおけるインタラクションの要となるフォームコントロールについて考えていきたいと思います。 ■WIMPインターフェイス GUIは、別名「WIMPインターフェイス」とも呼ばれます。WIMPとは、ウィンドウ（W）、アイコン（I）、メニュー（M）、ポインター（P）のことで、GUIを構成する代
多くのユーザーは一度に1本しかジュースを買わない ― ＠IT
ユーザビリティのヒント（1） 多くのユーザーは 一度に1本しかジュースを買わない 「自動販売機での不要な動作から考える」 ソシオメディア 上野 学 2006/6/2 Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなTips集。自動販売機でジュースを買うときの不要な動作から考える。（編集部） 今回からはWebアプリケーションのユーザーインターフェイスの続編の「Tips編」として、ウェブアプリケーションのユーザーインターフェイスをデザインするうえで役立つさまざまなヒントを、少し細かな視点から具体的に見ていきます。 複雑な構成物を作り上げるには、基本となるコンセプトやアーキテクチャといった抽象度の高い部分から考えていくトップダウン式のアプローチと、構成要素の細部から考えていくボトムアップ式のアプローチの両方が必要になりますが、前回までの経験則編はどちらかといえばトップダ
「メールが送信できました」伝えるのなら、控えめに ― ＠IT
ユーザビリティのヒント（2） 「メールが送信されました」 伝えるのなら、控えめに 「Yahoo!メール vs Gmail」 ソシオメディア 上野 学 2006/7/28 Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなTips集。Yahoo!メールとGmail、使いやすいのはどっち？という疑問から使いやすいユーザーインターフェイスを考えてみましょう（編集部） 前回から始まったこの「ユーザビリティのヒント」ですが、今回もいくつかのTipsをご紹介しながら、Webアプリケーションのユーザーインターフェイスやインタラクションデザインについてボトムアップに考えていきたいと思います。 Webアプリケーションによっては、JavaScriptなどを使用して、ウィンドウの開閉、サイズの変更、スクロールバーやボタン類を隠す、アドレスバーやステータスバーを隠す、といったことを行ってい
「左上の魔術師」理論
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
ユーザーのフィードバックをどうサービスに反映させるべきか？（12の指針） | POP*POP
何かサービスをつくったときにはなるべくユーザーの声に耳を傾けたいものです。しかしながら闇雲にユーザーの声を取り入れているとわけがわからなくなってしまいます。 そこで今回はTara Huntさんのブログから「ユーザーのフィードバックをサービスに反映させるときの12の指針」をご紹介します。Taraさんは画像認識ベンチャーのRiyaにもかかわっていらっしゃったようですね。 どういったフィードバックを反映させるべきで、どういったものは反映させるべきではないのでしょうか。サービスの開発をされている方にはかなり参考になるのでは・・・では以下よりどうぞ。 上級者ユーザーの意見は聞くべきだが、（あまり）反映すべきではない。 上級者のためにサービスを設計すると普通の人が使えなくなります。そして普通のユーザーの方が上級者ユーザーよりずっと多いことを知るべきです。 普通のユーザーは何が欲しいのか教えてくれない。
キャズムを超えろ！-家電メーカーよ、今すぐその時代遅れのUIから脱却せよ
TVのリモコンやデジタルカメラの操作ボタン類は、なんでああも使いにくいものなのか。PCやケータイを使い慣れた層にとっては苦痛以外の何者でもない。商品企画を仕切っているコンサバティブなオヤジどもを今すぐシルバー層向け商品の担当に転向させ、PCやケータイに慣れたユーザにメインストリーム商品のUI設計，リモコン設計を任せるべきだ。 リモコンと画面を行ったり来たり... 家電のUI設計の基本は、もとが1ボタン1機能である。とはいえ多機能化するデジタルTVやDVDレコーダー、デジタルカメラといった機器をこの思想で設計すると、100個はくだらないボタンを備えたリモコンが必要になる。これらの機器は全てディスプレイを備えているため、カーソルキーと決定キーを用意し、PCライクなGUIによる操作体系を加えた。が、ここでどっかの誰かがぶっとんだ間違いを犯した。 『操作回数が少ないことは何を差し置いてもいいことだ
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論 [絵文録ことのは]2006/11/25
このブログの本文の横幅は、かなり狭い。それはなぜか。 結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。 このことを実際の統計数値を交えて書いてみたいと思う。 ■画面の広さ 以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。たとえばここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも（狭すぎると困るが）はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に鬱陶しい。 だから、可変幅というのは、ある意味、無難な正解といえる。 ■一行の長さは40字前後にしたい しかし、画面そのものがかなり大きくな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイト解析を使ったユーザビリティを収益に変える為のまとめ*ホームページを作る人のネタ帳
ソシオメディア | UIデザインパターン
http://e0166nt.com/blog-entry-171.html
訪問者を寄せ付けないWebサイトにならない為の10のチェックリスト*ホームページを作る人のネタ帳
なつみかん＠はてな - ユーザビリティ関連記事 まとめ
http://plaza.rakuten.co.jp/catfrog/diary/200701140026/