タグ

入力フォームに関するir_taktのブックマーク (15)

  • メールアドレスの確認フィールドをなくすべき理由

    UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの1つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける

    メールアドレスの確認フィールドをなくすべき理由
    ir_takt
    ir_takt 2018/03/28
    若者向けのサイトでは過ちそのもの。60-70代も使うサービスでは、ITに弱くて声のでかいおっさんからヘルプデスクを守る一手段としてガチガチに固めざるを得ないときがある
  • レスポンシブデザインのフォームを設計するときに気をつけたい7つのステップ | UI改善ブログ by f-tra

    単一のウェブページの装飾やレイアウトを、画面の横幅サイズにあわせて変化させる「レスポンシブ・ウェブデザイン」。 管理するファイルがひとつで済む、どんなデバイスにも対応できる等大きなメリットがありますが、同じコンテンツをどんなデバイスサイズでも快適に閲覧できるようにデザインするのは至難の業です。 とくにユーザビリティが重要な役割を担う入力フォームにおいては、どのような工夫をしたら良いのでしょうか。 日の記事では、レスポンシブ・ウェブデザインのフォームを設計するときに気をつけるべきポイントについて考えてみたいと思います。 ※今回は新たにフォームを設計する前提で書いていきますが、もちろん、すでにお持ちのフォームを改善する場合でも活用していただければ幸いです。 ステップ1: 独自レイアウトを用意する EFOのテクニックのひとつに、フォーム専用のレイアウトを用意するというものがあります。 これはフ

    レスポンシブデザインのフォームを設計するときに気をつけたい7つのステップ | UI改善ブログ by f-tra
  • 日付入力フォームのUXデザインガイドライン

    日付入力欄は、適切なデザインパターンを利用して、あいまいさのない、タスク達成に役立つものにしなければならない。小さなデザイン変更で、大きなユーザーエラーが防げる可能性もあるのだ。 Date-Input Form Fields: UX Design Guidelines by Angie Li on January 22, 2017 日語版2017年4月24日公開 日付入力欄の書式設定など、ささいなことだと思うかもしれない。しかし、書式の実装が不適切だと、ちょっとしたインタラクションによって、入力のプロセスが立ち往生してしまうこともある。日付入力に関するデザインが良くないと、ユーザーが悩んだり、イライラすることになり、その入力フォームを全面的に断念してしまうというリスクがあるからだ。それどころか、ユーザーが間違った日付を指定してしまって、取引自体が悲惨なことになってしまう可能性もある。たと

    日付入力フォームのUXデザインガイドライン
  • 徹底図解 入力フォームのデザイン・UXを高める15の方法 - ポップインサイト

    サインアップ画面やデータ入力画面の「フォーム」は、サイトやアプリ設計において最も重要な要素の1つです。記事では、入力フォームデザインのUXを高める15のルールをご紹介します。 ポップインサイトでは、ユーザーリサーチのファクトにもとづいたWEBサイト改善を支援しています。WEBサイトのUX改善に課題がある方はお気軽にご相談ください。⇒UXデザイン/UXリサーチについて相談する ※紹介資料の無料ダウンロードはこちら ※関連記事:【EFOとは?】入力フォーム最適化施策8選:CVR(コンバージョン率)改善のコツ ※この記事はuxdesign.ccの記事を許可のもと翻訳・編集したものです。 翻訳元記事:Design Better Forms (2016/7/5) 著者:Andrew Coyle

    徹底図解 入力フォームのデザイン・UXを高める15の方法 - ポップインサイト
  • コンバージョン率を改善する入力フォームにおける10のルール

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの2者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ

    コンバージョン率を改善する入力フォームにおける10のルール
  • formatter.js by firstopinion

    new Formatter(document.getElementById('credit-input'), { 'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}' }); $('#credit-input').formatter({ 'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}' }); Phone Number Ex: (802) 415-3411 new Formatter(document.getElementById('phone-input'), { 'pattern': '({{999}}) {{999}}.{{9999}}', 'persistent': true }); $('#phone-input').formatter({ 'pattern': '({{999}}) {{

    ir_takt
    ir_takt 2016/12/15
    Phone Numberのデモの挙動がアカン。市外局番を2-5桁で自由入力させるフォーマットはある?
  • Super Simple Timesheet

  • 優れたフォームをデザインする

    サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。

    優れたフォームをデザインする
  • Apple、Google、Amazonの「失敗」に学ぶ、フォーム改善3つのヒント

    WebデザインUXデザインの話題では、アップルやグーグル、アマゾンが大人気。でも、ビジネスが成功しているからといって、常にデザインが正しいとは限りません。フォームにおける問題点と改善案を具体的に示します。 これまでに「アップルのように美しく」「グーグルのようにシンプルに」「アマゾンのように分かりやすく」デザインしてほしい、と言われた経験があるでしょうか? 優れた技術で有名な企業はクライアントから「ゴール」とみなされ、多くの場合そこから学べます。 とはいえフォームのこととなると「デジタルの巨人たち」にさえ改善が必要な点があります。 アップルとアクセシビリティ クライアントはしばしば最初にアップルを引き合いに出すので、ここでもそうします。アップルはフォームを含め、モダンミニマリスト(フラット)デザインのインターフェイスを提供しています。図1に例を示します。 問題はフォームがときどき「ミニマリ

    Apple、Google、Amazonの「失敗」に学ぶ、フォーム改善3つのヒント
  • 効果的なフォームをデザインする:構造、入力、ラベルおよびアクション | POSTD

    画像の出典:form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測(アイトラッキング)、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け

    効果的なフォームをデザインする:構造、入力、ラベルおよびアクション | POSTD
  • 無料で試せるフォーム作成ツールならformrun(フォームラン)

    フォームの作りやすさはもちろんのこと、ステータスの管理画面が使いやすいのがformrunにした決め手です。

    無料で試せるフォーム作成ツールならformrun(フォームラン)
  • 今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

    みなさん、入力フォームを制作する際、どのような施策をおこなっていますか? 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chromeデスクトッ

    今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
  • 住所入力ナビ機能 | EFO

  • お申し込みを1割増やしたフォーム改善の話

    http://pepabo.connpass.com/event/14124/ お申し込みを1割増やしたフォーム改善の話Read less

    お申し込みを1割増やしたフォーム改善の話
    ir_takt
    ir_takt 2015/11/20
    離脱を減らすフォーム
  • 郵便番号検索API

    お知らせ 都合上zip.cgis.bizのIPアドレスを変更しました。 変更したのは2016年7月12日AM10:00頃~PM17:00頃です。 これに伴い工事期間、あるいは名前解決の浸透期間、通信でませんでした。 概要 当サイトではGET送信されてきた郵便番号についてデータベースを検索し、住所情報を含む XML / CSV ファイルを出力します。 携帯電話サイトなど、簡便な入力フォームのための入力補助にご利用いただけると思います。もちろん、単なる郵便番号検索フォームにも利用できます。 データベースは「郵便ホームページのCSVファイル」をMySQLに格納して利用しています。 毎月10日のAM3:00頃に上記ファイルを元にデータベースを更新しています。 データベース更新時、数秒程度サービスが利用できない場合があります。 無料ですが、リンクウェアです。詳細はご利用規約をご覧ください。 システム

    ir_takt
    ir_takt 2015/10/27
    郵便番号を渡すと住所を返してくれるWeb API。個人運営。
  • 1