テーブルのユーザビリティを飛躍的に向上させる「Chromatable」:phpspot開発日誌
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの１行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法１ --> <script> $(document).ready(functio
目次：ITpro - 技術者視点のユーザビリティ考
使いやすいサイトを作るのは，デザイナーだけの問題ではありません。エンジニアとしてサイト構築にかかわっている筆者が，日ごろぶつかった問題をネタにじっくり考えていきます。 ・第33回 リピーター増加を阻む「面倒くささ」の壁 あるウェブサービスを初めて使った人が「しばらく使ってみよう」と思ってくれても，「面倒くささ」の壁に阻まれて次第にサービスの利用から遠ざかっていくことはよくあります。ブラウザを利用しないものを含む，さまざまなインタフェースを提供することで，その面倒くささを乗り越えられるのではないか，という仮説のもと，いくつかの例を紹介します。 ・第32回 リダイレクトの正しい使い方とは あるページ（URL）にアクセスすると，自動的にほかのページにジャンプするリダイレクトは，ウェブサイトを構築するうえで非常に重要な仕組みです。しかし，ユーザーの知らないうちにページの移動を行うため，ユーザーを戸
フォームのユーザビリティを再考してコンバージョンを向上
twitter facebook hatena google pocket お問い合わせフォーム、エントリーフォームなどは、ユーザーが能動・積極的に行動する数少ない場です。 このような潜在一隅の機会を逃していませんか？ フォームについて以下のようなデータがあります。 「申し込みフォームに入力し始めた人の54％が入力を途中でやめている」 （引用：申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】） ターゲット層のITリテラシーなども考慮して、サイトのフォームについて考える必要があるのではないでしょうか。 今回はそんな感じでフォームについて考えてみたいと思います。 sponsors フォームの長さ フォームが長いのを見るだけで、ページから離脱する人もいます。 項目を減らしたり、必須項目をなくすなど配慮が求められます。 極端な話で言えば、E-mailアドレスのみ入力
ユーザビリティ実践メモ: 検索結果
ユーザビリティ実践メモは、顧客視点によるインターネット コンサルティングを提供するビービットが運営しています。
あと１％離脱を減らすフォームのテクニック (ユーザビリティ実践メモ)
資料請求や申し込みフォームにおけるユーザの離脱を防ぐ方法はこれまでにもご紹介してきましたが、今回は「さらに一歩」改善するためのテクニックをご紹介いたします。 例えばECサイトのフォームでは支払い方法や配送方法など、ユーザに様々なオプションを選ばせることがよくあります。選択肢が多いことは利便性にも繋がりますが、一方でそれが離脱の原因になっている可能性もあります。 ユーザはフォームが縦に長かったり入力欄が多く見えると、「入力が面倒そう」と思い離脱の可能性が増えます。 以下は改善例です。支払い方法を選択するラジオボタンをクリックしてみてください。 選択したオプションに関連した情報だけを出す、言い換えると「要らないものは隠してしまう」のです。 クレジット決済をしたいと思っているユーザには、銀行振り込みや代金引換の注意書きは不要ですから、余計な情報を隠すことでフォームが簡単に見え、離脱を減らすことが
マウスのホイールによる入力エラーの可能性 (ユーザビリティ実践メモ)
しかし、プルダウンでの項目選択を行う入力フォームにおいては、この便利さが逆効果になる場合があります。弊社のユーザビリティテスト（ユーザ行動観察調査）で観察された例をご紹介しましょう。 1ページの入力項目が多く、何度かスクロールしなければ「次へ」のボタンまでたどり着けない入力フォームを使うという作業で、ほとんどのユーザはホイールを使いながら入力を進めて行きました。 その中で、あるユーザがプルダウンの項目を選択し終え、ページをスクロールして次の項目へ入力を進めようとホイールを操作したところ、直前に入力したプルダウンにまだフォーカス（ハイライト）が当たった状態であったため、選択項目が別のものに変わりました。つまり、ホイール操作がページのスクロールではなく、プルダウン内の選択項目の移動に使われたということです。 ユーザはページがスクロールしないことにすぐ気づき、ページ内の空白部分をクリックしてプル
ラベリングが及ぼす影響 - 「予約」か「検索」か (ユーザビリティ実践メモ)
リンク名やボタン名は、その先にどういった情報や機能が存在するのかをユーザに伝える重要な役割を果たします。 今回は、旅行サイトのケースを例に、ラベリング（名づけ）が与える影響を取り上げます。 旅行サイトに訪れたユーザAは、宿泊先を探すという目的でサイトを訪れたにも関わらず、トップページにある、『宿泊予約』というリンクを見て、本当は正解であるこのリンクを意図的に避けてしまいました。 同様の目的をもったユーザBは、別の旅行サイトのトップページの『ホテル・旅館検索』というリンク名を目にすると、即座にクリックしました。 いずれも同種のページにリンクされており、ユーザが目的を達成するための正しい入口でした。 ユーザの行動を分けた要因は何でしょうか。主に次のような要因ではないかと考えられます。 宿泊先を探すユーザの行動フェーズは、 宿泊施設、宿泊プランの検討 宿泊施設、宿泊プランの選定 予約手続き とい
完了ページやログアウト画面の効果的な使い方 (ユーザビリティ実践メモ)
サイトを訪問したユーザに対して「キャンペーンの告知」や「新製品の訴求」、「おすすめサービスの宣伝」のように、サイト訪問目的と違う何かを伝えたいということはよくあるのではないでしょうか。 そういった場合に利用できるのが、完了画面やログアウト画面で訴求したいものを表示するという方法です。 目的遂行後に表示される完了ページやログアウト画面では、ユーザに「次は■■■■をする」といった明確な意思がないことが多く、サイトが訴求したいものを受け入れてくれることがあります。 以下は弊社が行ったユーザー行動観察調査で見られたユーザの行動例です。 あるECサイトでは新しく販売した製品をユーザに認知して欲しいという希望があり、トップページなど多くの画面で新製品を訴求していました。ただし、ユーザは自分が欲しいものの買い物に一生懸命なため、新製品の訴求に一向に気付きません。 そこで試してみたのが購入完了ページでの新
フォームの離脱を防ぐ心遣い (ユーザビリティ実践メモ)
資料請求や申込みフォームにおけるユーザの離脱を防ぐ方法はこれまでもご紹介しましたが、今日は「入力フォームに遷移する手前」で行う離脱を防ぐ心がけを私の実体験からご紹介したいと思います。 郵便番号、住所、名前と入れ画面をスクロールすると、次の項目に、「お客さま番号」という項目があることを見つけました。 始め、このお客さま番号が何の番号か思い当たらなかったのですが、入力欄の脇にある「お客さま番号とは」というリンクから、毎月届く領収証（「電気ご使用量のお知らせ」）に記載されている番号であることがすぐにわかりました。（このサイトでは、実際の領収証のイメージで説明しており、とてもわかりやすくなっていました） しかし、領収証の保管場所をすぐに思い出せなかった私は、また後日手続きを行おうと思いここで画面を閉じてしまいました。 皆さんはこのような経験をされたことはないでしょうか？ このような状況にユーザが置
フォームでのちょっとした配慮の例 (ユーザビリティ実践メモ)
フォーム設計のポイントについては、実践メモでも何度もご紹介してきました。 フォーム設計についての記事一覧 今回は、ECサイトの「配送日時」を例にとって、フォームの改善ポイントをご紹介します。 一見普通のフォームですが、実際にユーザ行動観察調査を行ってみると、何人ものユーザが混乱する様子が観察されました。どのような問題が起こったのでしょうか？ 調査では、次のようなことが起こりました。 「配送日時は1週間以内をご指定ください」という注記の存在に気付かず、1週間以降の月日を入力してしまった。 「2月8日」と入力したが、実際に指定できるのは2月7日までだった。 翌週の水曜日で指定したかったが何日か分からずに、手元の手帳でカレンダーを確認しようとした。 開発側の視点では、「1週間以内とちゃんと明記しているのに・・・」「曜日なんて考えるまでもない」と思ってしまいがちです。 もちろん何の問題もなく使いこ
ウノウラボ Unoh Labs: ECサイトのユーザビリティ・ガイドライン
こんばんわ、Sashaです。 最近、ECサイトのリニューアルを計画するお手伝いをする、という仕事がありました。特にユーザビリティ的な観点から、どんなことを網羅したらこのリニューアルを成功させることができるだろうか、ということを考えながら、様々なブログを参考にしたり実際のECサイトを検証したりしていたら、以前私が紹介したユーザビリティ・ガイドラインのようなチェックリスト的なものが出来上がったので、もしかしてどこかのだれかのお役に立つこともあるかもしれない、と思い、ここに紹介させていただきます。 まず、ECサイトで実現したい基本的な目標をあげ、その目標に沿って細かく、網羅していきたい事を列挙していきました。 基本的な目標とは、次の5項目です。 見つけたい商品・情報を見つけやすくする ユーザーの労力を極力削減する 買いたい気にさせる 購入までのプロセスを簡単にする オンラインショッピング
U-site
日記調査：長期間のユーザー行動と体験の理解 ニールセン博士のAlertbox 8月9日 読了までに約15分 参加者は日々の活動をその都度記録し、リアルタイムのユーザーの行動やニーズについてコンテキストに基づいた知見を提供する。 このサイトについて UXリサーチや市場調査の手法やコツ、結果や知見を紹介しています。 詳細 新記事公開は、Twitter・Facebook・RSSで随時、メルマガで月1回通知します。 Twitter Facebook RSS メルマガ YouTube、始めました 黒須教授のユーザ工学講義 7月25日 読了までに約5分 2024年5月にYouTubeチャンネルを開設し、そこで「黒須のユーザ工学入門」を連載することにした。講演や講義とは違ってもっとオープンにして、広い範囲の人たちに話を届けたいという気持ちがあったのだ。
ECサイトで6割が迷子経験:マーケティング - CNET Japan
すっかり生活に浸透したオンラインショッピング。ECサイトを利用していて分からないことがあったとき、問い合わせは簡単にできるようになっているのだろうか？20代から40代を中心とするネットユーザー男女374名の回答を集計した。 ECサイトなどで「問い合わせをしたことがある」のは27.8％。「問い合わせをしたことはないが、しようと思ったことはある」のが4.8％で、問い合わせ経験者は32.6％。 問い合わせ内容を複数回答形式で聞くと、「注文から発送までの内容の問い合わせ」がトップで43.3％、「質問・要望など」が 29.8％、「返品・交換」が28.8％、「商品破損や未着など」が21.2％といった順になった。 問い合わせ経験者に、「問い合わせは簡単に出来たか？」と聞いたところ、「どちらかといえば簡単だった」が38.5％、「非常に簡単だった」が 37.5％。“簡単”と回答した人が多数派ではあったが、「
ECサイトの画面設計--男と女、買い物の行動パターンはどう違う？:マーケティング - CNET Japan
便利さ、手軽さから、オンラインショッピングは今や私たちの生活の中に深く浸透しています。そして「売れるオンラインショップ」を目指して、各Eコマース（EC）サイトが凌ぎを削っています。ECサイトの構築にあたって、まずはそのショップのターゲットを設定し、それぞれの攻略方法を考えることが大切です。攻略方法を考えるには、ターゲットユーザーのサイト内行動を知る必要があります。 ここで1つの疑問が浮かびます。はたして、男性と女性で、ECサイト内の行動に違いはあるものなのでしょうか。 「楽天市場でギフトを買ってください」 今回のアイトラッキング分析では、「ECサイトにおいて男女の行動に違いはあるのか」を検証すべく、以下のテストを行いました。対象サイトは、日本最大のECサイト、楽天市場としました。 対象サイト：楽天市場 被験者：オンラインショッピング経験のある20代〜30代男女、各3名 タスク：バレンタイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソシオメディア | UIデザインパターン
ビービット