こんにちは、前回、前々回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。 基本のスライダー スライダーは簡単にいえば動きの制限されたドラッグです。 今回も、最初はなるべくシンプルに実装してみます。まず、基本となるHTMLは次の通りです。 スライダーの基本HTML <form class="js-slider-form" onsubmit="return false;"> <input type="text" name="slider" id="slider1o" value="0"> <div id="slider1" class="js-slider"> <div></div> <input type="button" value=""> </div> </form> 今回は少々手抜きで、input ty
使いやすいフォームをデザインする6つのポイント みなさんは、どのようにフォームをデザインしているでしょうか？ CSSでスタイリングされていない素のHTMLフォームは、当然ですがデザイン性にとぼしいものです。また、入力エリアが狭いため、ユーザビリティも高いとは言えません。 フォームにはお問い合わせフォーム、申し込みフォーム、予約フォームなどいろいろありますが、共通するのは「ユーザーにアクションを起こしてもらう重要な要素である」ということです。しかし、フォームへの入力は、ユーザーにとって面倒な作業です。そのため、極力簡単に入力できるようにして、ユーザーの負荷を軽減する必要があります。 それでは、どうすればユーザーの負荷を軽減させることができるでしょうか？ そのためのポイントが以下の6つです。 要素を整列させる 適度な余白をつくる ディテールを作り込む デザインされたボタンを使う 住所を自動入力
こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"
「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その場編集」と呼ばれる、テキストをクリックすると、その場で編集できるようにする仕組みを実装してみます。 今回の仕組みを考える この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。 最初はただのテキスト クリックをすると、テキストがinput要素に置き換わり編集可能に。 input要素からフォーカスが外れたら、input要素が編集後の文字に置き換わる。 フォーカス外れた時、valueの値が空なら最初の値に戻す。 本来であれば、上記の仕組みの４の後に、PHPなどでデータベースに編集後の情報を送信し、保存するという仕組みになるのですが、今回はその前のところまでの実装方法のご紹介とします。 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード jQu
[対象: 全員] Google Research Blogがユーザーテストに基づいてまとめたレポートから、入力フォームの完了にもっとも大きな影響を与えた設定をこの記事では紹介します。 次の4つの設定になります。 入力条件を事前に指示する エラーメッセージをフィールドの横に配置する 必須の項目と任意の項目を区別しやすくする ラベルをフィールドの上に配置する 順に説明します。 入力条件を事前に指示する 入力条件（たとえば、パスワードの最低文字数）は、フォームを送信する前にフォームのなかで指示します。 このガイドラインの適用は、フォームの完了と被験者の評価に大きなプラスの影響を与えました。また、被験者のコメントにも（前もって指示してもらった方がいいと）頻繁に現れました。 エラーメッセージをフィールドの横に配置する ユーザーがすぐに訂正できるように、エラーメッセージは入力フィールドの隣に配置します
![[Google調べ] 入力フォームの最適化のために必須な4つの設定](https://cdn-ak-scissors.b.st-hatena.com/image/square/f00f4804fe59acd36d8e9d02e50d10db7dc9a119/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fwww.suzukikenichi.com%2Fblog%2Fwp-content%2Fuploads%2Fsplash_1200_675.png)
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
UXとか難しいことはよくわかんないですが こんにちわ！@ampersand_xyzです。UXとかUIデザインとか、かしこさが低いので小難しいことはわからないですが、個人的にかつ主観バリバリで「イヤだな」って思うことはわかる！ 飛行機やホテルの予約などで、ちょいちょいお問い合わせフォームや予約フォームを使うのだけど、その時に思わずイラッとしちゃうようなフォームの要素を思い出してまとめてみました。 （1）要件的に適切でなさそうな必須項目が多い 名前や返信先などの情報が必須になるのはそれはもちろん構わないけれども、 所属部署名、とか、業種、とかそういうのが必須の場合。 もちろん、問い合わせる先やその内容によって、 例えば、保険等に関する問い合わせだと業種によって契約の内容が違ってきたりするので必須になるのは頷けるけれども、これが食べ物の通販の問い合わせフォームとかで必須だったら「？」って感じる。
2017年6月29日 Webデザイン, ユーザビリティ ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに！またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します！ ↑私が10年以上利用している会計ソフト！ 検索ボックスをもっと使いやすくする 1. 誰が見てもすぐ見つかる場所に ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。 2. テキストボックスの背景色 デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
テーマファイル「train」 Odometerの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 スタイルシートはさまざまなテーマが用意されています。 <link rel="stylesheet" href="odometer-theme-car.css" /> <script src="odometer.js"></script> 要素を指定する時にjQueryのセレクタを使用する時は、jquery.jsを加えます。 Step 2: HTML オドメーターを表示する要素を配置します。 「123」は初期表示の数字です。 <div id="odometer" class="odometer">123</div> Step 3: JavaScript innerHTMLで最終的に表示する数字を指定します。 テキストの場合は、innerTextで
フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベルを利用してシンプルに解決する方法を紹介します。 入力時はラベルがツールチップで 実装 実装のポイント label要素内のテキストをラベルとして利用する。 初期状態でラベルのテキストを表示する。 入力時にもラベルがユーザーの目に見えるようにする。 ラベルの配置はフォームとページのレイアウトで行われるようにする。 スクリプトが利用可能でない時でも、ラベルを利用できるようにする。 これらのポイントを踏
入力フォームって、基本的に忌み嫌われるもの。項目がたくさんあると、そっとタブを閉じたくなる。 旅行に行くときに、いろいろな旅行会社の入力フォームを見たけど、あまり使いやすくなかった。というか、見た瞬間に入力する気が失せてしまうような入力フォームが多かった。 入力フォームの多いページに関わることがあるので、入力フォームに関する資料をいろいろ読んだ。タブを閉じられないように、使いやすい入力フォームを考えたい。 入力フォームについて読んだもの 参考になったのはこれらの資料。どの資料も新しいものではないけど、参考になることはたくさんあった。 僕は英語が苦手で、そんな僕が読んだ感想を書くので間違いがあるかも。間違っていたら教えてください。詳細は原文を読んでください。 RIAC：RIAコンソーシアムユーザビリティガイドライン LukeW | Web Form Design Best Practices
検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform1″ method=”get” action=”" > <input class=”isearch1″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton1″ type=”submit” value=”" /> </form> </textarea>
noupeにエントリーされている、AJAXを使った素晴らしいCSSのフォームの47のサンプルの紹介です。
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
第0回 その気になった客を逃さないフォーム設計術 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） ウェブサイトの「ユーザビリティー」という言葉は、当たり前のように耳にする機会が増えてきた。しかし、その知名度の広まりとは裏腹に、「何をどうすれば成果に結びつくのか」「実践に落とし込むにはどうしたらよいのか」について具体的に取り上げられることは少ないようだ。 この連載では、主に「会員登録による顧客獲得を行う企業サイト」をモデルとして、想定される次のようなユーザー
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 前回のコラムでは、サイトの目的にかかわらず必要になることが多い、企業サイトの申し込みフォームについて、フォレスターが調査した「なぜ途中で申し込みをあきらめてしまうのか」の概要と、申し込みフォームが使いづらい具体的な原因の1つ「フォームのラベルやボタンの位置やデザイン」とその解決方法を解説しました。 今回は、その続編として、申し込みフォームをより使いやすくするために注意するべき具体的なチェック点や
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
