Webカメラを使った視線プロット - ならば
ウェブサイトのユーザビリティテストの方法にはユーザの視線を可視化するものがある。gaze plotと呼ばれる方法はユーザの視線の軌跡を記録し、注視した部分に円を描画する。円内の番号は注視した順番を表し、円の大きさは注視時間の長さを表す。この結果から、ウェブサイトのどの部分がどの順番でどのくらい注目されるのかを知ることができる。 面白そうだったからウェブカメラとオープンソースの視線追跡ソフトで簡易なgaze plot環境を作って遊んだ。対象をウェブサイトに限らずに、いろいろ試した結果一覧。 はてなトップページ（はてな） Google Chromeテーマ選択画面（https://tools.google.com/chrome/intl/ja/themes/google.html） 英文（Eye movement in music readingの冒頭を真面目に読む） 楽譜（ラフマニノフ「ピアノ
「慎ましやかな妻」のような会員サービス : LINE Corporation ディレクターブログ
オンライン婚活サイトyoubride担当の北村です。 私は会員向けサービスとしてメールマガジンを配信したり、イベント・キャンペーンを行うなど、会員とのコミュニケーションを中心とした業務を担当しています。これらの業務を行う際、大切にしているのが発信者と受け取る会員との「距離感」です。 距離が近すぎると「うっとうしい」「馴れ馴れしい」と思われてしまいますし、遠すぎても「ぎこちない」「よそよそしい」と思われてしまいます。ですので、コミュニケーションを行うときは、ちょうど中間の「邪魔にならない程度の存在」を常に目指しています。 その微妙な「距離感」をどう保つか、心がけているポイントをご紹介したいと思います。 うっとうしくない距離感で傍にいる youbrideでは週に2〜3通、会員に向けてメールマガジンを配信しています。サービスの紹介や新機能追加などのお知らせが中心ですが、時々読み物的な要素もはさん
パスワードは隠すべきか？ | Accessible & Usable
公開日 : 2009年7月26日 (2024年3月23日 更新) カテゴリー : ユーザビリティ ウェブユーザビリティの第一人者である Jacob Nielsen (ヤコブ・ニールセン) 氏が、自身のブログ記事「Alertbox」の中で、「Stop Password Masking」という興味深い問題提起をしています。通常、ウェブサイトなどでパスワードを入力すると、画面には入力された文字列が表示されず、代わりに文字の数だけ「黒い点」が表示されます。こうした状況は、「フィードバックをユーザーに提供し、システムの状態を視覚化する」という基本的なユーザビリティ原則に反している、というのです。 さらにニールセン氏は、パスワードを隠すユーザーインターフェース (UI) について、以下のように否定的な見解を述べています。 画面上でパスワード表示を隠したところで、本当にスキルのある輩は、入力しているユー
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
ケータイサイトでのユーザビリティ : LINE Corporation ディレクターブログ
こんにちは。livedoor でモバイルディレクターをしている岡本です。 今回はケータイサイトでのユーザビリティについてお話します。 【01】PCと違うところって？ PCとケータイでのユーザビリティの違いを考えたとき、「画面」、「操作方法」、「スペック」、「容量」という主な4つのポイントがあると思います。 1）画面 画面が大きく、解像度も高いPCの方が視覚的に訴えやすく、Flashを使った表現などはPCとケータイサイトで格段の差が生じます。 2）操作方法 PCでは、主にマウスとキーボードによる操作ですが、ケータイではほとんどキー操作で行います。また、ケータイではほとんどの端末で「JavaScript」が使えません。 3）スペック ケータイでは端末やキャリア、各世代に依存してしまう問題が多いといえます。 （htmlの定義、アプリのプラットフォームなど) 4）容量 これだけみると、ケータイサイ
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ
ユーザビリティの大切さに気づいてもらう - inucaraの日記
こないだの「インターネットってどういう仕組みで動いているの？」に書いた事前研修でユーザビリティの大切さについても話したいと思って簡単なフォームを作ってみたよ。 想定ターゲットはユーザビリティのユの字も知らないような人や、これからウェブサイトの設計、構築の仕事をしようとしている人。これらの人にユーザビリティの大切さに気づいてもらうために、前回と同じように話す内容をとりあえず書いてってみる。 ちなみに前回のインターネットの仕組みからユーザビリティって話が飛んでるけど、そういうことは気にしないで思いつくことをメモ的にどんどん書いてって、流れは最後に考えようかなって感じ。 じゃあ、さっそく始める！ ユーザビリティって何？ まず始めに、みんなは「ユーザビリティ」って言葉は聞いたことあるかな？ 日本語で「使いやすさ」って意味なんだけど、利用者がいかにストレスなく、便利で簡単で直感的な操作ができるか、っ
ユーザビリティの高い、使いやすいフォームを制作するための12のポイント
Li'l Engineのエントリー「ユーザビリティフォームのためのチェックリスト」の意訳で、ユーザビリティの高いフォームを制作するための12のポイントの紹介です。 Checklist for Usability Forms 不明な箇所は英文のまま記載してましたが、皆様の協力により3,5を和文にしました。 フォームは正しく入力できるように、可能な限り簡潔に。 フォームには、必要なインフォーメーションを含める。 タイトル：なんのためのフォームか フォームのヘルプ キャンセル(中止)の選択肢 入力すべき項目は、多くしない。 重複する入力項目は設置しない。 フォームの公開後しばらくしたら、収集したデータが実際に使用されているかチェックする。利用されていないものがあれば、収集しないようにする。 長いフォームは紛らわしいので、分ける。 タスクごとに分ける それぞれのページごとにチェックをし修正すること
ウェブサイトを使いやすくするための43の法則
R6K.Net Pressにエントリーされている「あなたが避けるべきウェブデザインの43のミス」の意訳です。 43 Web Design Mistakes You Should Avoid 上記エントリーによると、よく見かけるデザインのミスリストは10個くらいが通常ですが、それでは足らなく、増やしていくうちに43個になったそうです。 43の法則は、常識として浸透しているものもあれば、論争になるようなものもあります。 個人的には、いくつかは条件しだいでと思いますが、概ね相違無いです。 The user must know what the site is about in seconds. サイトに来訪したユーザーは、数秒で何のサイトか知らなくてはいけません。 Make the content scannable. コンテンツが一覧できるリストが必要です。 Do not use fancy
画像一つ使う際にもユーザーが何を感じ取るかを考えよう（powered by beBit） | SiMPLE*SiMPLE
※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。 beBit社から「画像一つでもコンバージョン率がこんなに違う」という事例を紹介してもらいました。今回事例としてご紹介いただいたのはある住宅ローンサイトの画像について。 ↑ 説明してもらった同社コンサルタントの土井さん。 あなたは住宅ローンサイトで「お問合せはこちらから」というページをつくるとしたら、そこにどんな画像を使いますか？ やわらかい印象のイラスト、ヘッドセットをした女性が電話に出ている写真、などが候補にあがると思いますが、ユーザビリティテストの結果、一番効果的だったのは・・・（考えてみてください）・・・「男性社員の写真」でした。 よく「お問合せ」というと「女性のオペレータ」を連想してしまいますが、大事なのはこれは住宅ローンのページだということです。 実際にテストをしてみると「支店にいるようなロ
ウノウラボ Unoh Labs: ユーザビリティテスト初心者のための備忘録 - 準備の話
こんにちわ、Sashaです。9月も終わりに近づいているというのにまだまだ暑いですね。 私はユーザビリティテストの専門家ではありませんし、ユーザビリティテストを実施していても、不慣れから来る反省点が毎回のように残ります。今日は、そんなユーザビリティテストにまだ不慣れな方のために、私がこれまでに書きとめておいた反省点やコツをみなさんと共有したいと思います。スムースなテストを開始して、被験者の方にもリラックスして頂くことが出来るように気をつけるべき細かい点ですので、テスト方法とか、被験者の選定方法など、ユーザビリティテストのコアの部分には触れていませんが、ご了承ください。 1. 会場取り ビデオカメラやモニタを設定するため、被験者が来られる15分ほど前から会場となる部屋を押さえておきましょう。11時に被験者の方がいらっしゃるのに、 11時からしか部屋を押さえていないと、準備する時間がないため
未経験者がユーザーテストを行う際の10のポイント - livedoor ディレクター Blog
こんにちは、ディレクターのほうの谷口です（余談ですが、ライブドアには3名の谷口がいて、私はプログラマーじゃないほうの谷口です）。今回は、ユーザーテストについてお話したいと思います。 ユーザーテストは、ウェブサイトの新規立ち上げやリニューアルの際、ユーザーがウェブサイトやプロトタイプを実際に操作してもらう様子を目の当たりにすることで、問題点を発見する方法です。 ライブドアのサービスは、作る側とユーザー像が近いことが多かったので、頻繁にはユーザーテストをしてきませんでした。しかし、今後は自分たちと違うユーザー像も対象としていきたいことから、ユーザーテストの数を増やしていきたいと思っています。 ユーザーテストの専門会社に頼むという手もあり、そうすることで厳密に調査をしてくれます。しかし、ポイントをしぼって外注せずにすむ方法もあるので、ここに紹介します。 1. 被験者は友人か知り合いでいい 専門会
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場合、チェックボックス（ラジオボタン）の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ
成功するショッピングサイトに必要な17の新常識 | POP*POP
SEO関連の話題を扱っているseomoz.orgにて興味深い記事がありました。「17 New Rules for Successful E-Commerce Websites」です。 ショッピングサイトを作るときにはどういった点に気をつければいいか、かなり参考になるのではないでしょうか。 以下に詳しくご紹介（あまり好きではないですが、説明の都合上、元記事からそのまま画像を拝借しています）。 ユーザーがどこにいるのか教えてあげよう ユーザーがトップページ以外にいる場合、どのセクションにいるのかわかるようにしましょう。パンくず型のナビゲーションも有効です。 選択条件を解除できるようにしよう ユーザーは一般的に選択条件を追加しながらサイトを見ていきます。そうした選択条件はすぐにはずして元に戻れるようにしておきましょう。 一般的な並び替え方法はきちんと用意しよう ユーザーが選択しやすいように「価格
「左上の魔術師」理論
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
ブログのユーザビリティを高めるための20の秘策 | P O P * P O P
良いブログとそうでないブログの違いは何だろうか？そう思ったTomさんがまとめたのが今回ご紹介する「Twenty Usability Tips for Your Blog （ブログのユーザビリティを高めるための20の秘策）」です。 もちろんこれが100%正しいというわけではないですが（彼もそう言っています）、とても参考になりますね。ブログのリニューアルを検討されている方には役立つのではないでしょうか。 ではその20の秘策を以下に詳しくご紹介。 ブログのテーマを決めよう ブログのテーマを決めたらそれに関する投稿にフォーカスしよう。そしてロゴの近くにそのテーマが何であるかわかるようにしよう。またそのテーマに関する簡単な説明もすぐそばに置くようにしよう。 これは奇妙に思えるかもしれませんが、実際のところ、テーマを広くとるよりも、一つテーマを決めたほうがたくさん書くことができますよ。 コメントを推奨
YSTのSEOとYahoo! Japanからのトラフィック誘導 - SEO 検索エンジン最適化
テクニカルSEOとは、オンページSEOの一部であり、検索結果での順位を向上させるためにウェブサイトの技術的な側面を改善することを指します。検索エンジンにとって、クロールしやすく理解しやすくすることがテクニカルSEOの中心です。具体的には、サイト内のリンク構造を最適化したり、ページ内の論理的な構造を最適化したり、ページの読み込みを高速化することなどの技術的な最適化が含まれます。 ECサイトのSEOでは、正確で詳細にわたる商品情報に加えて、上位表示のためには高い評判や人気が必要となります。通販系のトランザクショナルクエリの検索結果には、その分野における人気の高いショップから順にリストされるからです。この記事ではGoogle検索品質評価ガイドラインをもとに、ECサイトのSEOの方法を解説します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.openvista.jp/archives/note/257/?257/
サイト解析を使ったユーザビリティを収益に変える為のまとめ*ホームページを作る人のネタ帳
わかりやすい404エラーページについて考えてみる | caramel*vanilla