タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

ユーザビリティとフォームに関するmagpepenのブックマーク (7)

  • こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修

    シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される

    magpepen
    magpepen 2014/12/17
    「このページから移動しますか?」のアラートは単なる離脱防止じゃなくて間違って移動してまたイチから入力…て事故を防ぐための意味もあるのか。
  • 入力フォーム改善でCV率1.6倍!成果を上げる18のテクニック | LISKUL

    たかが入力フォーム、されど、入力フォーム。 ユーザーが入力フォームに入力しているとき、もう気持ちは「購入します!」「申し込みます!」と決まっているはずです。 しかし、入力フォームが使いにくいために、せっかくの顧客をのがしてしまう可能性があるのです。 サイトへの流入はあるのに成果が上がらない・・・。 フォームPV数とコンバージョン数に差がある・・・。 そんな時には入力フォームを見直すべきかもしれません! 入力フォームについて書かれている16の記事、サイトを参考に、結局、なにが重要なのか、基と応用合わせて18のテクニックを厳選し、事例を交えてお伝えします。 入力フォーム改善の威力、条件を知ることで、成果を上げる入力フォームを作ることができるはずです。 失敗しない入力フォームを選ぶ!【LISKUL特集(2019年版)】CVR改善ツール一覧>> ※記事は2014年7月29日に公開された記事をL

    入力フォーム改善でCV率1.6倍!成果を上げる18のテクニック | LISKUL
  • サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ

    デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー(ディレクター、Web担当者、エンジニアなど)向けに、ユーザビリティの向上に繋がる基的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1:ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの

    サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
  • そこそこユーザビリティの高いフォームを作った

    そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習&業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです(サーバ側スクリプト

  • お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久

    今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO(入力フォーム最適化)をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル(項目名)」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を

    お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
    magpepen
    magpepen 2013/10/15
    確かに label に cursor:pointer 指定しとかないと気づかれないまま終わりそう
  • 嫌いな入力フォーム

    例えば「名前」の入力フォーム。 例のように「名前」全部を入れるところもあれば、姓と名を分けて入力させるところがあります。 これは当選商品を発送したり、DMを送ったりなど“送付”する場合に、姓と名の間に空白を入れたいために利用される場合が多いです。 あるいは、ログイン後のページで「○○(姓)さんようこそ」みたいに表示させるだけの目的だったりします。 でも入力する方にしてみれば、例1のように1個のテキストボックスであった方が楽なんですよね。 郵送目的がないサイト(例えばフリーメールのアドレス取るだけ、とか)でこんな名前入力のフォームを見ると、システム的に無駄なので、なんかハラたちます(いちおーシステム屋さんとして)。 これにあわせてフリガナを入力させるフォームがありますが、これは顧客管理を五十音順にしたいためだけ。 よって、フリガナに関しては性と名が分かれている必要は一切ないはずです

  • ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips

    miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト(ラベル)が付けられますが、input要素だけでマークアップした場合、チェックボックス(ラジオボタン)の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ

  • 1