入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
ユーザーのコンピュータスキルの分布： ユーザーのスキルはあなたが思う以上に低い
先進33か国において、コンピュータ関連の高い能力を持つ人は人口の5％にすぎない。また、中程度の複雑度のタスクを完了することができる人は全体の3分の1しかいない。 The Distribution of Users’ Computer Skills: Worse Than You Think by Jakob Nielsen on November 13, 2016 日本語版2017年3月16日公開 身につけるのがもっとも困難なユーザビリティの教訓に、（訳注：デザインプロジェクトに携わっている）「あなた方はユーザーとは違う」というのがある。これこそがユーザーのニーズについての推測が大失敗に終わる理由だ。デザイナーは大半のターゲットオーディンエンスとあまりに異なっているため、いいと思っているものや利用しやすいと思っているものが見当違いになるだけでなく、そうした自分たちの個人的好みによって判断す
Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce — Smashing Magazine
Pagination is still the most popular way to load new items on a website. However, the usability test sessions found “Load more” buttons combined with lazy-loading to be a superior implementation, resulting in a more seamless user experience. In this article, Christian Holst will present Baymard Institute’s usability research findings for both “Load more” buttons, infinite scrolling and pagination,
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
ブラウザ標準スクロールバーを意図的に隠すことについて | Accessible & Usable
公開日 : 2014年1月28日 (2014年1月29日 更新) カテゴリー : ユーザビリティ 数ある Web ページの中でごく一部ではありますが、ブラウザ標準のスクロールバーを意図的に非表示にしているものがあります。メジャーな例としては、Apple の各製品ページが挙げられます。 ブラウザ標準のスクロールバーを非表示にしている Apple 製品ページ。上から順に「iPhone 5S」「iPhone 5C」「iPad Air」「Mac Pro」。 上の例ではいずれも、いわゆる「ファーストビュー (または "above the fold" とも言います)」の下にもコンテンツが続いていて、ユーザーは下にスクロールしないと、すべてのコンテンツを閲覧することができません。ところが、ブラウザ標準のスクロールバーが無いために、どうやってスクロールしたらよいか (あるいはそもそもスクロールする必要があ
「fat finger」の度合いを可視化する | Accessible & Usable
公開日 : 2014年2月4日 (2018年12月29日 更新) カテゴリー : ユーザビリティ ウェブサイトやアプリケーションを、スマートフォンやタブレットといったタッチインターフェース搭載デバイスで使えるようにするためには、何はともあれ、タップできる箇所 (リンク、フォーム要素、ボタン、など) を、それなりの大きさにする必要があります。英語圏のユーザビリティ専門家の間では「fat finger」と呼ばれていますが、指先は「太っちょ」で、マウスポインターほど精緻なポインティングができず、誤操作につながりやすいからです。 ところで、指先のポインティング精度が、実際のところ、どの程度「粗い」のかを、調べてみたことはありますでしょうか？今回の記事では、「fat finger」の度合いを可視化してみることについて、考えたいと思います。 背景画像を読み込める「お絵描き」アプリを使う 「fat fi
ユーザーを「人間」扱いしていますか？ | Accessible & Usable
公開日 : 2012年7月22日 カテゴリー : ユーザビリティ すぐれたユーザーエクスペリエンス (UX) を提供するためは、ユーザーを「人間」として尊重することが欠かせません。 ほとんどの方が、そんなこと「当たり前」だとお思いでしょうが、実際は、きちんと「人間」扱いできていないことが多いのではないでしょうか。皆さん自身がひとりのユーザーとして Web サイトを利用したときのことを思い返してみると、失礼な扱いを受けたと憤慨した経験は、少なからずあると思います。 Web は上手に活用することで、運営者 (企業) とユーザー (顧客) が直接コミュニケーションできるメディアですが、運営者側から見た場合、アクセスして利用してくれるユーザーの実際の様子が見えるわけではありません (アクセス解析でユーザー行動のデータを得ることはできますが、リアルタイムなビデオチャットでもない限り、利用中のユーザー
プログレッシブエンハンスメント（Progressive Enhancement）という考えかた｜ウェブユーザビリティ向上を支援するWebsite Usability Info
公開日 : 2010年6月6日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障害、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。 基本的な考えかた あらゆるユーザーに対して、基本的な体験ができるようにします（たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できる
「ヘルプ」における動画活用のポイント (ユーザビリティ実践メモ)
最近は、動画の活用をお考えのウェブマスターの方も多いのではないでしょうか？ 動画は表現が豊かでイメージがつかみやすいので様々なところで役に立ってくれます。 今回は特に「FAQ・ヘルプ」において動画を活用する場合のポイントについて解説します。 ヘルプは基本的にユーザが抱いている疑問や不安を解消するという役割があります。 顕在化している疑問や不安をヘルプで探しているユーザは、急いで自分の課題を解決したいと思っているため、ぱっと見で理解できる「文章＋画像」による説明を好みやすく、じっと動画を見てもらうことは難しいのが一般的です。 そのため、いつでも動画を使えばいいというわけではなく、適切なケースを選んで、動画を利用することが重要です。 ヘルプで動画を活用するべきなのは、 動画でなければ伝えられない「動き」が大事な場合 複雑なステップの操作 など、文章や静止画だけでは伝わりにくい情報を伝える場合で
スマートフォンサイト運用と今後のスマートフォン市場の展望 : LINE Corporation ディレクターブログ
スマートフォングループの藤村です。2か月前まで、モバイルで、livedoorトップ・デコメサイトの運用を担当していました。 10月から新しい部署のスマートフォングループに所属し、すでに、スマートフォン版のlivedoorトップ＆ニュース他の運用を開始しています。実際に運用してみると、モバイルとの共通性が多く、モバイルサイトの運用経験が生きる領域だと実感しました。 まだまだ運用の初期フェーズの段階ですが、今回は、実際にスマートフォンサイトを運用してみて気づいた点及び、今後のスマートフォン市場の展開予想について書いてみようと思います。 ファーストビューの重要性 スマートフォンのサイトを運用してみて、まず一番最初に改修を入れたのが、ファーストビューです。ファーストビューとはユーザーがモバイル端末でアクセスして、一番最初に表示される画面のことを言います。 モバイルサイト運用経験者の方には常識かと思
DevGrow - Helping developers grow with turorials -
The Best Fluffy Pancakes recipe you will fall in love with. Full of tips and tricks to help you make the best pancakes.
ZURB - Clue
Clue is Retired! It’s all good though, we’ve got bigger and better things in store for you! Check Out Helio Welcome to Clue Clue is a tool that creates super fast memory tests on screenshots of webpages, then lets you see the results. It's perfect for capturing that all important first-impression of a website. Why get a Clue? What if your website isn't working like you think it is? Does it seem li
iPadならではの特徴的なユーザ行動について (ユーザビリティ実践メモ)
iPadのようなタブレット型のタッチＵＩ端末では、PCでは見られなかった特徴的なユーザ行動が見受けられます。今回は、弊社の調査で見られたiPadにおける特徴的なユーザ行動と、デザイン上のポイントについてご紹介します。 【ポイント１】 ユーザはスクロールが苦ではない 弊社のユーザ調査にて、iPadで画面が切り替わる度にスクロールしてみようと画面をドラッグするユーザがよく見受けられました。ユーザは画面をスクロールしたがる傾向があるようです。 確かにiPad上で画面をスクロールすると、指に吸い付くようにスムーズに画面が動くため、直感的で心地よい感じがします。iPad上での快適なインタラクションは、ユーザにとってポジティブなフィードバックを与え、スクロールも苦になりにくいと考えられます。 情報は極力たくさん並べよう 調査で用いたショッピング用のアプリでは、iPadの縦１画面内におさまるだけの商品し
カンタン！効果的なユーザビリティテストについて : LINE Corporation ディレクターブログ
こんにちは！コンシューマメディア部ディレクター浪越です。 制作ディレクターとして、サイトの改修に着手することがありますが、その際どうやって改善点を見つけるかがいつも問題になります。 色々なサイトを見て便利な機能を探して、改修に取り入れることができないかを考えることはとても重要です。 しかし、もっと問題解決に効果的な方法はないのか…。グループインタビューやユーザビリティテストなど、簡単にできればいいのに…。と思うディレクターさんもいらっしゃるのではないでしょうか。 実はユーザビリティテストであれば、テストするユーザーも含め、3人いれば実施が可能なのです。 今回は、簡単にできるユーザビリティテストの方法をご紹介いたします！ グループインタビューとユーザビリティテストの違い まずは、混同されがちなグループインタビューとユーザビリティテストの違いをまとめます。 グループインタビュー 【目的】 人間
テキストリンク色の変更で、70億円（！）を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar
ユーザビリティの中でも特に狭義の「テキストリンク色」を変えただけで、恐るべきビジネスインパクトが現れたという事例です。 実際に成果の変化が起こったのは、マイクロソフトが鋭意売り出し中の検索エンジン「Bing」です。 テキストリンクを、入念にテストし、8000万ドルの売り上げ増 マイクロソフトは従来、「Live Search」という形でもう少し明るい青（水色に近い）を採用していました。 Bingよりも、明るいというかすこし緑に近い感じの色がベースになっていますね。 ちょっと比べてみました。 （※Live Searchは画像検索からキャプチャを取っています） こう見ると確かに色はかなり変化しています。 CNETの記事によると、マイクロソフトはBingを作る過程でかなりの数の色をテストしたようです。 Microsoftは最終的に「Bing」となるものを設計していたとき、膨大な数の色を検証し、
驚くほど伝わらない、サービスのメリット (ユーザビリティ実践メモ)
ユーザ行動観察調査を実施すると、全力で訴求しているはずのメリットや強みが、驚くほどユーザに伝わらないケースが多く見られます。 伝わらない理由は様々ですが、今回は具体性が足りないために他社サービスとの違いが伝わらない、という例をご紹介します。 一方で、料金などはユーザにとって非常に具体的で他社と比較しやすい情報となります。ユーザ行動観察調査でも「サービス内容は大体同じ」という思いを強めたユーザが、料金だけで比較検討をする行動が多く見られました。 具体性のある情報を提供することが重要 類似サービスが多く存在する中で、自社サービスのメリットをユーザに伝えるためには、情報の具体性が必要です。「講師の質が高いです」という例の場合、下記のような改善が考えられます。 例えば講師の質を訴求したい場合には、質とは何を指しているのか、なぜ質が違うと言えるのかを具体的に書く必要があります。パーセンテージや年数な
デバイスに依存するFlashコンテンツは新デバイスに対応できない | 水無月ばけらのえび日記
「iPadにFlashは来ない？ タッチスクリーンとFlashの根本的問題 (slashdot.jp)」。アクセシビリティやユーザビリティを専門としない人には、ちょっと分かりにくそうな話ですね。 既存のFlashサイトをそのまま設計通りに動作させるのは難しく、また表示することだけを実現してもユーザーにとっては満足度の高い実装とはならないとのことだ。 要するに、iPadでは既存のFlashコンテンツがロクに動かない可能性がある、という話です。……と、こう言われても、ぴんと来ない人が多いかもしれません。Flash Playerやオーサリング環境をどうにかすれば解決するのではないか、と疑問に思われる方もいそうですね。 たとえば、こんな感じのFlashコンテンツを見たことがないでしょうか。 Flashコンテンツの中に、商品写真が横一列に並んでいる。商品をクリックするとリンク先に飛ぶ。商品写真のリス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Should "Yes, delete it" be red, or green?
IDEA * IDEA
モバイルサイト構築のユーザビリティいろは コーナーの記事一覧 | Web担当者Forum
