タグ

UIとユーザビリティに関するinthesoupのブックマーク (8)

  • ウェブマスター・制作者は必読!ユーザーがサイトから離脱してしまう8つの要因

    ナビゲーションが分かりにくい ナビゲートすることが難しいサイトは、ユーザーを失望させます。複雑だったり、一貫してなかったり、そういったナビゲーションはユーザーを困惑させ、苛立ちを感じさせるものです。

  • もうユーザーを迷わせない!ナビゲーションメニュー設置のコツ

    2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト! ナビゲーションメニューの設置ポイント すべてのページに 基中の基ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン

    もうユーザーを迷わせない!ナビゲーションメニュー設置のコツ
  • フォームのラベルと入力欄を縦一列に配置するとより速く書きこめる三つのポイント

    フォームのラベルと入力欄を縦一列に配置すると、横一行に比べてユーザーがより速く書きこめる三つのポイントを紹介します。 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

  • キャズムを超えろ! - 団塊~シニア層向けのWeb設計 やっちゃいけない10のUI

    一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービスPCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID,ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結

    キャズムを超えろ! - 団塊~シニア層向けのWeb設計 やっちゃいけない10のUI
    inthesoup
    inthesoup 2010/06/12
    ID,ニックネームを考えさせてはいけない_パスワードに英数混在や5文字以上_チェックボックスで項目選び_アイコンは理解されない
  • 充実したFAQで、ユーザの問題解決+態度変容を促す (ユーザビリティ実践メモ)

    FAQに関する過去の実践メモ「FAQの隠れた役割」では、FAQの2つの目的を述べました。 1. ユーザの疑問に答えることで、問い合わせ数を削減する 2. ユーザをサイトのゴールへと導く攻めのコンテンツとして活用する 今回は、特に「攻めのコンテンツ」としての具体的な実践方法をご紹介します。 FAQの中でユーザが関心を持つ項目は、サービスや製品の選定ポイントとなっている可能性もあり、競合他社に勝るための訴求チャンスとしても捉えられます。ユーザにとって問題解決となる情報提供はもちろんですが、その中でうまくサービス・製品の訴求も行うことで、ユーザの態度変容を促すことができます。 とある教材サイトのユーザ行動観察調査では、「仕事と両立できるの?」という誰しもが抱く不安・疑問をFAQの中に出し、その回答として具体的な強みを訴求することで、ユーザの態度変容を強く促すことに成功していました。 方法2 体験

  • [JS]ユーザビリティに配慮したアコーディオンを実装するチュートリアル

    ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。 Simple Accordion w/ CSS and jQuery デモページ アコーディオンのロジックは下記の通りです。 最初にデフォルトの設定します。 一番目のアコーディオンを開いて、アクティブな状態にします。 クリックをすると。 クリックされたアコーディオンのアイテムは開くのか閉じるのか判定します。 「hidden」(閉じた状態)のアイテムをクリックすると、 全てのアイテムから「active」を取り去り、閉じます。 クリックされたアイテムは「active」になり、すぐにスライドダウンして開きます。 ロジックのイメージは、下記のようになります。 <textarea name="code" class="html" cols="60" row

  • コンバージョン直前のユーザがつまずきやすいポイント (ユーザビリティ実践メモ)

    コンバージョン率向上を考えた場合、エントリーフォーム最適化(EFO)など、フォーム内の改善に意識が向きがちですが、実はフォームに入る前の段階にも改善すべき点が残されている場合があります。 今回はフォームに入る前のページでよくみられる、ユーザのつまずきやすいポイントをご説明します。 ウェブサイトを訪問しているユーザにとって、個人情報の入力などの手続き行為は主目的ではありません。商品を購入したり、申し込み後にサービスを利用することが当の目的です。その目的に早く到達するため、手続き行為にはできるだけ手間をかけず、手早く終わらせようとする傾向が見られます。 ここで、注意が必要なのが手続きの途中に会員登録のステップがあるケースです。 ECサイトでは「購入」の手続きの途中で「既存/新規ユーザ」の振り分けが行われる場合がありますが、ユーザは手続きのステップとして「会員登録」が必要あることを必ずしも事前

    inthesoup
    inthesoup 2010/02/16
    「新規会員登録」→「購入(新規〜)」に変更_お問い合わせの選択肢を横に並べてわかりやすく
  • WEBページに必須なシンプルなユーザービリティ「Five Simple but Essential Web Usability Tips」

    TOP  >  WebDesign  >  WEBページに必須なシンプルなユーザービリティ「Five Simple but Essential Web Usability Tips」 WEBを制作する上で、いくつかポイントがあるかと思いますが、WEBは使われるものなので、ユーザービリティは最も考えなくては行けないものの一つです。今日紹介するのはWEBページを制作する上で、必須なシンプルなユーザービリティ「Five Simple but Essential Web Usability Tips」です。 WEBページを制作していく上で、知っておいた方が良い要素が簡単にまとめられていました。今回は意訳して紹介したいと思います。 詳しくは以下 1.検索機能 ユーザーが求めている情報を含むページをみつけられる検索機能。鮮やかな色や、虫眼鏡アイコン等、ユーザーが分かりやすい仕組みも必要。 2.Fの法則

    WEBページに必須なシンプルなユーザービリティ「Five Simple but Essential Web Usability Tips」
    inthesoup
    inthesoup 2010/01/06
    検索機能・Fの法則を意識したデザイン/レイアウト・一貫したユーザーインターフェイス・フォームの構造はユーザーを意識・よくある質問、Q&A、ヘルプ
  • 1