タグ

ブックマーク / www.bebit.co.jp (5)

  • 検索条件の入力画面で配慮したいインターフェース例 (ユーザビリティ実践メモ)

    ユーザに2つの選択方法を提示することが、かえってユーザを適切でない行動に導いてしまうこともあります。今回は検索条件の入力画面を用いて、その一例をご紹介します。 図1のような画面構成で、 チェックボックスを選んでから選択ボタンをクリックすると、チェックボックスがOnとなっている駅名で検索を実行(=複数選択が可能)青字下線をクリックすると、その駅名のみで検索を実行という機能になっていたとします。 この際に行ったユーザビリティ調査では、渋谷か新宿か池袋であればどこでも構わない、といったような複数の選択肢を持つニーズが多く見られたにも関わらず、青字下線のリンクを最初にクリックするケースが度々観察されました。� この画面構成の場合、チェックボックスよりも青字下線リンクの方がアフォーダンスが高いため、多くのユーザは頭に思い浮かんだ駅名をページ内で見つけると、次のアクションとして青字下線リンクをクリック

  • 携帯サイトでは誤クリックにご用心 (ユーザビリティ実践メモ)

    携帯サイトを使っているとき、操作キーを連打しすぎてリンクを押し間違えた経験はありませんか。携帯サイトを設計する際は、このような「誤クリック」に配慮する必要があります。 このような画面では「戻る」や「キャンセル」ボタンがセットで配置されていることが一般的であり、画面を作る際は「戻る」ボタンが間違ってクリックされないよう配慮する必要があります。しかし、携帯サイトではリンクの一つ一つにフォーカスが当たってしまうため、リンクが隣接して配置されている場合は特に「勢い余っての誤クリック」が発生する恐れが高くなるのです。 操作キーで操作をする限り、この問題の抜的な解決は難しいのですが、以下のような次善の策をとることはできます(※効果は機種に依存します)。 「戻る」や「キャンセル」はボタンではなくリンクにする ボタンよりもリンクの方が、フォーカスが当たっていることを認識しやすいためです。 「申し込

  • 視線の流れをブロックしていませんか? (ユーザビリティ実践メモ)

    ユーザにクリックしてもらいたいリンクがなかなかクリックされない。そんな悩みを抱えているWebマスターの方も多いのではないでしょうか。 今回は、視線の流れに配慮したコンテンツ配置の一例をご紹介します。 上は、ある企業サイトのサービスを紹介するページです。次のような構成です。 上部は、サービスの概要 その下に、サービスに関する注意書きの説明(認可を取っているか、など) さらに下に、詳細ページへの振分けのリンク このページでは、ユーザにさらに関心を持ってもらえるよう、詳細ページへと誘導したかったのですが、ユーザはそもそも下までスクロールしてくれませんでした。 注意書きの説明を枠付きで横幅いっぱいに配置したために、多くのユーザは、もうここから下は関係無いだろう、と思ったのです。 何気なく置いたコンテンツが、ユーザの視線の流れをブロックし、目的の情報までたどり着くことを阻害してしまっていたので

  • ユーザビリティ 実践メモ : 開封されるメールマガジン 〜2つの工夫 アーカイブ

    新製品・サービスの案内やキャンペーン告知、有用な情報の発信など、お客様(以下ユーザと呼称)との長期的な関係性を構築する目的でメールマガジンを利用する企業は多いでしょう。 いかにユーザの興味を喚起し、アクションに結びつけるメールの内容にするかを日々試行錯誤し、改善を重ねていると思います。 しかし、内容が優れていたとしても、メールがユーザに見られなければ意味がありません。そこで今回は、メールをユーザに開封されやすくするための工夫を2つ紹介します。 多様なメールがあふれた受信ボックスの中から自社のメールマガジンが選ばれ、クリックされる(開封される)ためには、「送信者名」と「件名」の表現に注意を払う必要があります。 まず、送信者名は、すぐにメールの送信元がわかるように工夫をすると良いでしょう。以下に改善が必要な例をいくつか挙げました。 「mail@bebitstore.co.jp」のように送信者名

  • リキッドデザインの注意点 (ユーザビリティ実践メモ)

    ブラウザの横幅サイズに合わせてコンテンツの表示を変更するリキッドデザインは、ユーザの使い方や好みに合せて画面レイアウトを変更できることから、ユーザの立場に立ったデザインであるといえます。 有効度の高いリキッドデザインですが、画面構成によっては、一文が横に長くなりすぎてしまい、かえって読みづらくなることがある点に注意しましょう。 あるウェブサイトの一覧ページでは、情報が左右に広がりすぎてしまったために、ユーザに、このサイトは見づらいサイトだと判断されてしまいました。 この一覧ページは、商品名、写真、価格などから一つの要素が構成されていたのですが、ユーザはかなり広い範囲で視線を移動しながら見なければならず、かえって情報検索の効率性を落としていたのです。 もちろん、ユーザがブラウザを最大化せず、自分にとって見やすいサイズに調整すれば、この問題は解決するのですが、ブラウザの表示サイズを自ら変える

  • 1