10代のユーザビリティ： ティーン向けWebサイトのデザイン
ティーンは、自分のウェブを扱う能力に（過剰に）自信を持っているが、彼らのパフォーマンスは大人に劣る。読解レベルの低さや、忍耐力のなさ、発展途上の情報収集スキルにより、ティーンのタスク成功率は低くなる。そのため、サイトはシンプルで共感しやすいものにする必要がある。 Teenage Usability: Designing Teen-Targeted Websites by Jakob Nielsen on February 4, 2013 日本語版2013年2月18日公開 ティーンはインターネットにつながっている。テクノロジーがティーンエイジャーの生活に深く溶け込んでいるため、彼らに役立つ、ユーザブルなウェブサイトを作り出すことがこれまで以上に重要になってきている。次善のものがクリックするだけで手に入り、SMSメッセージによる割り込みが例外ではなく普通のことである世界で成功するには、ウェブサ
ネット初心者ユーザに配慮した導線設計 (ユーザビリティ実践メモ)
ウェブサイトは、インターネットの利用にあまり慣れていない 初心者ユーザにも配慮して設計する必要があります。 今回は、インターネット初心者ユーザがサイトの基本的な構造を理解して いないために陥りがちな行動について、ECサイトの利用シーンを例として ご紹介します。 弊社のユーザ行動観察調査では、あるECサイトで以下のようなユーザ行動が 見られました。 ユーザがECサイトで気に入った商品を見つけた際、「カートに入れる」ボタンを クリックして買い物かごページヘ移動しました。 このときユーザは、「続けて他の商品も購入したい」と思っていましたが、なぜか 買い物かごページからブラウザの「戻る」ボタンを押し、商品ページに移動しようとしませんでした。 なぜ買い物かごのページから戻らなかったのかを質問したところ、「買い物かごのページ から前のページに戻ってしまうと、いま買い物かごに入れた商品がキャンセルされて
jQueryを使ったアニメーションと、ユーザビリティの話。それとCSS3。 - 甘味志向＠はてな
JavaScript Advent Calendar 2011 オレ標準コース、2日目のもろへいやです。とても遅れてすいません… 私は技術的な話は得意ではないので、デザイン面からJavaScriptプログラマーに向けてのTipsを書きたいと思います。 今回は、アニメーションの話を書いてみます。 jQueryは標準で、要素の表示・非表示を切り替えるときにフェードやスライドを使うことが出来ますよね。 $("#box").fadeIn("fast"); たった一行で、アニメーション効果を付加することができるので、 プログラマーのみならずデザイナーの方でもjQueryを使っている人は多いんじゃないかと思います。 しかし、簡単なおかげで何をするにアニメーション効果をかけまくってしまったり。 あるいはアニメーション効果なんて無駄！ ということで、全然使っていない人もいると思います。 ですが、アニメーシ
どうせ比較されるのならば、「比較の観点」を与えてしまおう (ユーザビリティ実践メモ)
自社サイト以外の場所で、自社の良さをアピールすることはなかなか難しいものです。 今回は、「比較する」というユーザ行動に着目することで、自社サイト以外でも自社の良さに気づかれやすくするための工夫についてお伝えします。 ところが、こうした比較行動をするユーザが、比較のために必要な観点をきちんと持っていることは少ないものです。その結果、「価格」などの分かりやすい要素だけで比較してしまうことがよくあります。 これでは最適な商品選びができたとは言えず、ユーザにとっても企業にとっても良いことではありません。 そんなときに効果的なのが、「○○を選ぶポイント」といった、製品やサービスを選ぶ観点を提供するコンテンツです。 例えば、引越サービスを例に考えてみましょう。 多くのユーザにとって、引越はそれほど頻繁にするものではないため、引越サービスを選ぶ際にも、何を重視すべきかを明確に把握しているわけではありませ
Webコンテンツとしての写真
ユーザーは内容と関係のある情報を含む写真や画像は注視するが、Webページを「賑やかにする」ために利用された中身のない写真は無視をする。 Photos as Web Content by Jakob Nielsen 2010年11月1日 我々の実施したアイトラッキング調査で、ウェブサイトの画像へのユーザーのアプローチの仕方は大きく2つに分かれることが実証された： ある種の写真は完全に無視される。この典型的な事例が、単なる飾りとして使われる、感じの良い大きな画像である。 その他の写真は重要なコンテンツとして扱われ、注意深く検討される。製品の写真や（モデルを撮影したストック写真ではない）実際の人物の写真がたいていこのカテゴリーに入る。 私はこれまで数え切れないほど多くのコラムの中で、1番目のタイプの画像についてガミガミ文句を言ってきた。要点を示すことより、見た目を良く見せようとすることに、ウェブ
【海外事例に学ぶ】アコーディオン型入力フォームの実力 (ユーザビリティ実践メモ)
今回は少しテーマを変えて、フォーム関連の最新事例について書いてみます。 海外事例紹介としてお馴染みとなってきましたLuke Wroblewski氏の、“Testing Accordion Forms”(A List Apart)をご紹介します。 「入力フォームを複数ページに分割すべきかどうか？」について皆さんも悩まれたことがないでしょうか？分割すると各ページの項目は少なく済みますがステップが多くなってしまい、分割しないと1ページが縦に長くなってしまいます…。 その問いへの新たな解決案として出てきたのが“アコーディオン型”とも言うべき入力フォームです。 Apple.comのオンラインショップの購入フォームです。 では実際のフォームをみて見ましょう。 下記にある画面が、MacBook Airの購入フォーム画面です。なんと、この1ページ中で購入手続きが完結できるのですが、入力項目が多い印象も特に
サイト外でのユーザ心理を利用する3つのポイント【後半】 (ユーザビリティ実践メモ)
（前回の続きで、「企業サイト以外での情報収集によってユーザが陥りがちな3つの心理」の3つ目をご紹介します。 サイト外で情報収集をしていると、ユーザが製品に関連するニュースやブログ記事を発見するケースがあります。 ある健康食品のサイトでは近年話題のサプリメントを主力製品として紹介していました。ユーザ行動観察調査において、そのサプリメントに興味を持ったユーザがサプリメント名で検索を行ったところ、「過剰摂取に注意」というニュース記事が検索上位に表示されたため、ユーザはその記事を読み、サプリメントの摂取に対して少し不安を感じました。 その後、ユーザはサプリメントを紹介していたサイトに戻り、摂取量や過剰摂取に関する情報を探しましたが、結局見つけることができず、不安を抱えたままサイトを立ち去ってしまいました。 このケースでは、ユーザの不安に答える情報を用意するだけで、ユーザの信頼を獲得し、検討を続けて
購買意欲をコントロールするサービス・商品の価格一覧表を作成する7つのテクニック
ウェブサービスの価格一覧表をサンプルにし、ユーザーの購買意欲をコントロールする価格一覧表を作成するテクニックを紹介します。 価格の一覧表を見るユーザーの一番の目的は、価格を知ることです。しかしながら、価格を強調しすぎて、お金を使うということを意識させすぎないでください。苦労して手に入れたお金を使っているように感じると、ユーザーはより使わないように思ってしまいます。 価格のデザインはソフトにし、それ自体の特徴やベネフィットにフォーカスをあてるようにします。 ユーザーがどの商品を選択するか決めている時に、あなたはその決め手として価格にフォーカスを合わせることを望んでいますか？ それとも特徴やベネフィットにフォーカスを合わせてほしいですか？ もし、ユーザーが価格にフォーカスを合わせるのであれば、それは最も安いものに決めるでしょう。しかし、特徴やベネフィットにフォーカスを合わせるのであれば、ユーザ
フォームのラベルと入力欄を縦一列に配置するとより速く書きこめる三つのポイント
フォームのラベルと入力欄を縦一列に配置すると、横一行に比べてユーザーがより速く書きこめる三つのポイントを紹介します。 Why Users Fill Out Forms Faster With Top Aligned Labels 下記は各ポイントを意訳したものです。 visual fixation visual direction vertical space まとめ visual fixation 「visual fixation」は一点（面）をみつめる固視のことで、上記の五つ入力項目があるフォームでは、横一行：10箇所、縦一列：5箇所になります。 縦一列は一つの入力項目に対して、半分の固視ですみます。 visual direction 「visual direction」は視方向です。横一行は水平・垂直方向の二つを必要とし、縦一列は水平方向の一つのみです。 vertical space
入力フォームの操作性、機種による違いにご注意！ | 株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報
入力フォームの操作性、機種による違いにご注意！|株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報| 携帯サイト開発から生まれる技術情報ブログ 入力フォーム内の項目を横並びにしたり、リンクを追加したりすると、携帯でのユーザーインタフェースに思わぬ影響を及ぼしてしまうことがある。具体的に言うと、機種によってはチェックボックスやラジオボタンを十字キーで選択することが難しくなったりするのだ。 今回は携帯の十字キーの操作性にフォーカスしてみる。 このページの操作性は？ チェックボックスやラジオボタンなどを組み合わせたシンプルなページを用意した（サンプルページはこちら）。HTMLソースは以下の通り（一部抜粋）。 テキスト1<br /> <input type="text" name="t1" value="" /><br /> テキスト2<br /> <input type="tex
ユーザビリティテスト・ツール「Usabilla」を徹底レビュー - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ サーチエンジンランドからユーザービリティに関する記事を。オンラインのサービスを使用してユーザービリティテストを行った実例を紹介。具体的で参考になります。 — SEO Japan 現在、様々な企業がユーザビリティテストの新しいツールの開発が活発に行っている。これは、良い傾向と言えるだろう。なぜなら、今後、ウェブエクスペリエンスが向上することを示唆しているためだ。そこで、今回のエントリでは、Usabilla（ユーザビラ）を取り上げようと思う。これは友人のケリー・モーグレットと私が、リモコン式の戦艦を作る製品を販売するケリーのサイト、ストライクモデルズで実際に利用したサービスである。 サービスの概要:
ユーザーのマウス・キーボードの動きを記録するユーザビリティーテストツール – creamu
サイト上でのユーザーの動きを知りたい。 そんなときにおすすめなのが、『userfly』。ユーザーのマウス・キーボードの動きを記録するユーザビリティーテストツールです。 これはすごい感じですね。いろんなサイトでも話題になってるし。 ユーザーのマウスがどこからどう動いて、どこをクリックして、キーボードで何を入力したかを記録して、動画で見せてくれます。すげぇ。 デモが以下から見られるので、ぜひ試してみてください。一連の操作の後、自分の動きを動画で見ることができます。 Try the demo 料金は、無料プランで10の動画記録、30日間保存。1ヶ月25ドルの有料プランでは、1,000の動画記録、60日間保存となっています。1,000もあればかなりのデータになりそうですね。実際に人を使ったユーザビリティーテストのユーザ数はそんなにいかないと思うので、ひとまず無料プランでもよさそうですね。 ぜひ使っ
インタラクションデザインで忘れがちになるユーザ視点 (ユーザビリティ実践メモ)
最近のウェブサイトは動作（インタラクション）を含んだサイトが多く見受けられます。ただし、インタラクションが加わることで逆に使いにくくなってしまうこともあるため、使用する場合は気を付ける必要があります。 本日は、インタラクション設計を行った検討経緯をご紹介する中で、ユーザ視点の重要性を確認したいと思います。 しかし、事前に行なったユーザ調査で、この商材を検討するユーザの中には間髪なくどんどんとチェックを入れていく方が多いことが結果として出ていました。これでは使いやすくするためのローディング表示のせいで絞り込み行動を邪魔してしまいます。 そこで、絞り込みエリアとは別の箇所で目立つ形でローディングを表示するという案を今回は採用することにしました。これであればユーザは絞り込み機能が「使いやすく」、なおかつサイト側が更新されていることに「気づきやすい」仕様となります。（例2参照） ●「フィードバック
「自由にカスタマイズ」の落とし穴 (ユーザビリティ実践メモ)
「一人一人のニーズに合わせてカスタマイズできる」ことを売りにした製品やサービスは、近年よく目にします。 例えば、 ・個々の保障内容を自由に組み合わせられる自動車保険 ・各パーツのスペックやオプションを自由に選んで注文できるパソコン などはその代表的な例といえるでしょう。 そのため、何のヒントもない状態で「何でも自由にカスタマイズできますよ」と言われても、ユーザは却って戸惑ってしまいます。 そのため、以下のような工夫が考えられます。 工夫１：代表的なプラン例を提示するあらかじめ、スタンダードな内容で構成したプラン例を用意した上でカスタマイズ可能であることを伝える、というのは代表的な工夫の１つです。 例えば自動車保険のオンライン見積りを提供している三井ダイレクト損保では、「プラン1-3」まで3つのプランを提示しています。 工夫２：カスタマイズ可能な項目に、判断材料を提供する もう一つの工夫とし
モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ（最終回） | モバイルサイト構築のユーザビリティいろは
2009年1月から連載してきた「モバイルサイト構築のユーザビリティいろは」も今回で最終回です。そこで今回は、今までの連載内容をおさらいしながら、モバイルサイト構築時におさえておきたいモバイルユーザビリティの総まとめをします。 前半では今までのおさらいをし、最後に自分でモバイルサイトのユーザビリティを改善するためのポイントを紹介します。 モバイルサイト構築時の基本チェックポイント公式サイトに関するポイントモバイルメールマガジンに関するポイントモバイルECサイト構築時のポイントモバイルFlashサイトの制作ポイント自分でできる！ モバイルユーザビリティ改善の3ステップモバイルユーザビリティ改善のケーススタディ1. モバイルサイト構築時の基本チェックポイント1-1. モバイル端末ならではの制約や特性を理解するモバイルサイトには、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いな
驚くほど伝わらない、サービスのメリット (ユーザビリティ実践メモ)
ユーザ行動観察調査を実施すると、全力で訴求しているはずのメリットや強みが、驚くほどユーザに伝わらないケースが多く見られます。 伝わらない理由は様々ですが、今回は具体性が足りないために他社サービスとの違いが伝わらない、という例をご紹介します。 一方で、料金などはユーザにとって非常に具体的で他社と比較しやすい情報となります。ユーザ行動観察調査でも「サービス内容は大体同じ」という思いを強めたユーザが、料金だけで比較検討をする行動が多く見られました。 具体性のある情報を提供することが重要 類似サービスが多く存在する中で、自社サービスのメリットをユーザに伝えるためには、情報の具体性が必要です。「講師の質が高いです」という例の場合、下記のような改善が考えられます。 例えば講師の質を訴求したい場合には、質とは何を指しているのか、なぜ質が違うと言えるのかを具体的に書く必要があります。パーセンテージや年数な
ウェブサイトをより単純にして、分かりやすくする -Design Simplicity
ユーザーがより簡単にインフォメーションにアクセスできるように、ウェブサイトをより単純にして分かりやすくする「Design Simplicity」を取り入れる方法をWeb Designer Wallから紹介します。 What to Expect in 2010: UX/UI Design Simplicity 下記は各ポイントを意訳したものです。 はじめに 今年も多くのデザイントレンドがあります。しかしながら、私はデザインの単純さ（Design Simplicity）にフォーカスをあわせることが重要であると感じます。 デザインの単純さとは、より少ないページ、より少ないクリック、より少ない取り散らかし、そして多くのホワイトスペースを意味します。そして、我々のユーザーはそれを求めています。 増加するインフォメーションへのアクセスは、ユーザーの集中力低下の原因となります。デザイナーは今まで以上にユ
The Definitive Guide To Styling Links With CSS — Smashing Magazine
Hyperlinks (or links) connect Web pages. They are what make the Web work, enabling us to travel from one page to the next at the click of a button. As Web Standardistas put it, “without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.” So without links, we’d be lost. We look for them on the page when we want to venture further. Sure, we p
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
http://www.lpo-consulting.com/2010/02/learn-efo-from-google/
lpo-consulting.com The domain is on BIN Sales and available for purchase. 您访问的域名正在一口价出售中！ 一口价出售中！ 域名Domain Name:lpo-consulting.com 售价Listing Price:CNY 888.00 立即购买>> BUY NOW>> 通过金名网(4.cn) 中介交易 金名网(4.cn)是全球领先的域名交易服务机构，同时也是Icann认证的注册商，拥有六年的域名交易经验，年交易额达3亿元以上。我们承诺，提供简单、安全、专业的第三方服务！ 为了保证交易的安全，整个交易过程大概需要5个工作日。 具体交易流程可“点击这里”查看或咨询support@goldenname.com。 我要购买>> Process Overview: 4.cn is a world leading d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
