![ユーザーに考えさせちゃダメ! クルーグのWebユーザビリティ第一法則 | 超明快 Webユーザビリティ[Web担特別公開版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ec6e8e2474b621e38fa0ec89fcd29926af15f4a8/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Farticle2016%2Fbook_dont_make_me_think%2Fdmmt_01-02-zoom.png%3Fitok%3Di9ChM_OX)
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー(ディレクター、Web担当者、エンジニアなど)向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1:ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
「ユーザビリティを意識することが大切!」って言われても、何となく意味は分かるけど具体的にどうすれば良いの……と悩んでいる方も多いのではないでしょうか? ユーザビリティとは、「単なる使いやすさ」のことではありません。特にWebにおいては売上や成果などビジネスを左右する重要な概念です。しかし、多くの人がユーザビリティについて間違った認識を持っているために、みすみす売上や成果を逃しているケースをよく目にします。 ユーザビリティを正しく理解するポイントは、特定のユーザの行動、心理、目的に焦点を当てることです。 本日は、よくある「間違い・落とし穴」を例に出しながら、売上改善に直結する「正しい」ユーザビリティの考え方をご紹介します。ぜひ皆さんもユーザビリティの理解を深め、Webサイトの改良に役立ててください! 【事例】1つのボタンを変えただけで、年間300億の売上増!売上に直結するユーザビリティとは、
■ 使いやすさの満足度に関して 目的を正しく達成できたか評価した完了性の値や、効率よく目的を達成できたか評価した効率性の値は高い傾向がみられるが、迷いなく目的を達成できたか評価した有効性の値は、全体的にあまり高くない結果となっている。サイトの構造的な問題で迷うのではなく、目的の商品がトップページでどのカテゴリに当てはまるのかわからず迷ってしまうケースがよく見受けられた。その中でも「Amazon」、「フェリシモ」はあまり迷う事なく利用されていようだ。 心地よく目的を達成できたかを評価した”快適性の値”はほぼ横並びとなっている。もちろん目的の商品へ効率よく到達させることは重要であるが、上位サイトではこの目標は、ほぼクリアされているため他社と差別化を図るための施策としては、多少効率性を犠牲にしても、快適に楽しくサイトを利用してもらえる仕組み作りが今後のカギとなってくる。 ■ コンテンツの満足
以下、読みやすさ向上のためのルールの一部をご紹介します。 文字サイズは大きめに設定 横幅は40文字以内 3-4行の固まりで、改行(余白)を入れる 背景色と文字色とのコントラストを高める(白い背景で薄いグレーの文字はNG) 要点を箇条書きにする 至極当然のルールではありますが、意外に忘れられがちなものでもあります。
Design vs Art Blogのエントリー「8 Tips For Better Link Design」から、リンクのデザインに役立つ8つのTipsを紹介します。 8 Tips For Better Link Design リンクのテキストには、「ここをクリック」のようにあいまいな言葉ではなく、「サンフランシスコのホテルについての情報」などのように、クリック先が何か具体的に分かるような言葉を使用する。 リンクの前には、そのリンクの内容をユーザーが理解できるようなテキスト情報を与える。 リンクが画像の場合、その画像で伝えたい情報をテキストでも提供する。 altに記述するだけでなく、画像のそばにテキストで配置するともっと良い。 サイトの重要なリンク(ナビゲーションや機能など)には、accesskeyを設定してキーボードでの操作を有効にするとユーザーへの手助けになります。 Tabキーを押し
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
ユーザーが一般に好むのは、すぐに使える使いやすいデザインである。しかし、満足度と客観的ユーザビリティ指標の相関は100%ではない。 User Satisfaction vs. Performance Metrics by Jakob Nielsen on October 8, 2012 日本語版2012年10月22日公開 ユーザーが好きなのはユーザビリティに優れたシステムか? ばかげたことを聞くと思うだろう。しかし、調査結果からわかるのは、詳細に見ていくとこの話は少しややこしい、ということである。 答えをばらすと、そう、ユーザーは70%の確率でユーザビリティ指標が最高のデザインを選んでいる。しかし、100%ではない。 嗜好の評価 その質問に客観的に答えるには、細かいところまでみていく必要がある。私の行ったユーザーの嗜好の評価は次のようなシンプルな質問を基にしている: このウェブサイト(ある
ウェブサイトでユーザに情報提供することも大切ですが、商材によってはユーザと店舗などで対面し、直接的にコミュニケーションする機会を持った方が自社の商品をより魅力的に伝えられる場合があります。 特に銀行や保険業界などでは、ウェブサイトを用いて自社の商品を検討しているユーザを実際の店舗での相談会・説明会に誘導したい、と考えている方は多いのではないでしょうか。 ただし、「店舗での相談会・説明会に来てもらう」ためには、ユーザにとって心理的に高いハードルを越えてもらう必要があります。そのため、「思うように来訪者数を伸ばせず、困っている」というご相談を多く頂きます。 今回は、弊社で行った生命保険のウェブサイトにおける行動観察調査を事例に、「ユーザに クリックしてもらいやすいコンバージョンボタンのあり方」をご紹介します。 あるユーザは、生命保険のウェブサイトを「そろそろ本格的に乗換えを検討しようかな」 と
ビジネスにおけるユーザーインターフェイス(UI) や、ユーザーエクスペリエンス(UX)の重要性が頻繁に語られる事が多い。 Webサイトやアプリから始まり、自動販売機、券売機、車のダッシュボート、テレビ、トイレ、エレベーターのボタン配置に至るまで、”ユーザビリティー”と表現される ”使いやすさ” の大切さが注目を浴びている。 そして、その使い易さを生み出す最初の入り口がインターフェイスである。 インターフェイスとは、ヒトとデバイスとの円滑なコミニュケーションを達成するための媒介役であり、操作性や使い易さを印象づける点ではソフトやデバイスの成功を最も左右する、唯一無二の存在である。 今さら聞けないUI(ユーザーインターフェース) の基本 最終的なインターフェイスの仕事は “ユーザーゴール + ビジネスゴールの達成”であり、どんなに良いプロダクトを作っても正しい方向にユーザーを導き、ビジネスとし
2017年6月29日 Webサイト制作, ユーザビリティ サービス系・企業系Webサイトでよく見かけるサポート関連のコンテンツ。問い合わせをせず、自己解決を望むユーザーが増加し、よりよいサポートページの作成が必要となってきています。ユーザーが抱える疑問を積極的に解消するWebサイトを作成し、問い合わせ数を減らせば、ユーザー・企業側ともに手間を省くことができます。また、Webサイト内だけで解決できなかった疑問も素早く対処する事でユーザーのストレスを軽減することができます。そこに注目し、どのようにWebサイトを設計していくのかを考えてみました。 ↑私が10年以上利用している会計ソフト! 問い合わせを未然に防ぐ サービス関連のWebサイトでは、同じような質問を何度も受ける事が多いです。そのような質問にひとつずつ回答していくのは非常に非効率。どのような問い合わせを受けやすいのかを的確に理解し、ユー
ウェブサイトの質を上げればSERPのランクも上がる。しかし、検索エンジン最適化についてのトリックを使いすぎると、ユーザーエクスペリエンス(UX)を台無しにしてしまう可能性もある。 SEO and Usability by Jakob Nielsen on August 13, 2012 日本語版2012年8月24日公開 一見したところ、検索エンジン最適化(SEO)とユーザビリティはまったく異なったテーマのように見える: SEOとは、検索問い合わせで確実に目立たせることによって、最初の段階であなた方のサイトに人々を引き付けることである。 ユーザビリティとは、あなた方のサイトに人々が到着した後の行動のことで、その主な目的はコンバージョンレートを上げることである。 基本的に、SEOは最初のクリックの前に生じ、ユーザビリティがその後を引き継ぐ。ウェブサイトが成功するには2つともに優れていることが必
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
10 Tips for Optimizing Web Form Submission Usability [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 必須入力欄は強調する 2. エラーメッセージは分かりやすく 3. クライアントサイドのバリデーション 4. 入力している欄を明示 5. 進捗を明示 6. データの保存やキャッシュ 7. 送信ボタンの文言 8. キャンセルボタン 9. 入力例の記載 10. 垂直に配置 1. 必須入力欄は強調する ユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。 2. エラーメッセージは分かりやすく フォームのエラーメッセージは、「あなたが下に必要とさせるフィー
トライベック株式会社は、スマートフォンで主要サービスを展開している企業のうち、ポータルサイト、ECサイト、企業サイト、特定ジャンルの専門サイト(不動産、金融など特定ジャンルや用途に特化したサイト)の4分類30サイトを抽出し、対象となるスマートフォンサイトに対してユーザビリティ診断を実施しました。 ※ A軸:アクセス性、B軸:サイト全体の明快性、C軸:ナビゲーションの使いやすさ、D軸:コンテンツの適切性、E軸:ヘルプ・安全性 ※ 総合スコアは、5軸に傾斜配分をかけて割り出したものであり、5軸の単純平均ではありません。(満点=100点) 順位 サイト名 総合スコア
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> SEOとユーザビリティをどう両立させるかという話は昔からある話ですが、共にテクニカルな話に落とし込まれがちで、ともすれば本質を見失ってしまうケースも意外にあるのではないでしょうか。今回は、SEO、ユーザビリティ、その両立、共にもう一歩上のレベルで実践していくための情報アーキテクチャについて勉強できる記事をサーチエンジンランドからお届けします。 — SEO Japan 1995年以来、私が遭遇した最もコストが高くついたSEOの過ちは、劣悪な情報アーキテクチャを採用してしまったことだ。ファインダビリティ(見つてもらえる能力)における重要な課題は、ウェブサイトの情報アーキテクチャだとクライアントに指摘
今回のテーマは「目線の操作」です。ユーザの視線を集める要素と遠ざける要素をうまく使い分けることで、意図通りにユーザにメッセージを伝達するためのコツをご紹介します。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 ←今回のテーマ 他サイトでの慣習 「目線の操作」を構成する3つの要素 視線の開始位置 視線を集める要素 視線を遠ざける要素 1. 視線の開始位置 例えば、以下は弊社のHPですが、このサイトを見るときどこから見ますか?「徹底した顧客心理分析により・・・」というブランドパネルか、その下の「コンサルティング事例・実績」ではないでしょうか? 弊社HPの例 ビービットのサイトには、「ビービットは何をやっているんだろう?どのような会社なんだろう?」ということを漠然と思いながら来訪する方が多いため、その疑問に直接答えられるようメインメッセージや実績エリアに目
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く