第9回 今すぐできる！ユーザビリティを向上させるフォーム操作実践（1） | gihyo.jp
今回よりフォーム関連の実践 前回はタブパネルをプラグインとして利用することについての説明をしました。プラグインとして作ることで、様々なサイトで使いたい部分で使えるようにできるという点でも、とても便利です。今後もプラグインとして利用できるような作り方の説明も入れていきますので、みなさんもぜひ挑戦してみてください。 さて、今回より数回にかけて、フォーム（Form）関連の実践例についてご紹介していきます。フォームでは、ユーザーが使いやすいよう（入力しやすいように）に工夫することで様々な点において、利便性を向上させることができます。 今回はフォームの入力部分に入力例などを入れておき、フォーカスしたときにその入力例を消す仕組みを作ってみることにします。 入力例を入れておきフォーカス時に消す フォームの入力部分で、入力例を入れておくことで、その部分にどのような入力をしたらいいのか明示しておくことができ
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
フォームの入力をより分かりやすくするスクリプト -Context highlighting | コリス
Janko at warp speedのエントリーから、フォームの入力時に、ラベルと入力箇所をハイライトして、より分かりやすくするスクリプトを紹介します。 Building a better web forms: Context highlighting using jQuery デモ デモでは残念ながら、labelは使用されておらず、class名「row」のdivで囲まれた範囲にハイライトが適用する仕様になっています。 ハイライトする箇所は、ラベルと入力箇所のほかにも、そのグループ全体をハイライトすることも可能です。 Context highlightingはjQueryのプラグインのため、動作にはjquery.jsが必要です。 また、上記と同じエフェクトを実装するスタイルシートが別サイトで紹介されています。
[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js
路線図の入り組んでいるところって、分かりにくいですよね。 そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 デモページ 上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。 路線図は各要素（駅やルートなど）のテキストファイルを元に、Canvasで描画されています。 各要素のデータ（オレンジのルート）はこんな感じです。 "route": "ORANGE", "from": "12488", "to": "7588", "fromName": "COURTHOUSE METRO STATION", "toName": "METRO CENTER METRO STATION", "routeShortName": "Orange
[JS]ページのツアーガイドをjQuery無しで実装するスクリプト -Shepherd
Shepherdの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="shepherd-theme-arrows.css" /> </head> <body> ... <script src="shepherd.min.js"></script> </body> Step 2: HTML HTMLは普通に実装してOKです。 ガイドを表示する要素には、それが指定できるようclassを付与しておきます。 Step 3: JavaScript ガイドを表示するタイミングや内容はスクリプトで記述します。 基本書式は下記のようになり、classesに表示する場所、scrollToで自動スクロールの有無を指定します。 tour = new Shepherd.Tour defa
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
Webアプリのユーザビリティを改善しまくるAjax ― ＠IT
Ajax うきうき Watchでは、Ajaxを使ったWebアプリケーションやサービス提供者、ベンダの動向から「うきうきするような」面白いもの、確実に押さえておきたいものを厳選してお届けしていきます。 Ajax、それはWebアプリケーションのユーザビリティを改善する切り札である。古い技術を組み合わせ、魔術のごとく生まれ変わった新しいファッションである。 今回より、なるべく密に、Ajaxの動向をウォッチングしていきたいと思う。 基本的には、新しい話題を中心に、厳選した面白い話題を提供していきたいと思うが、今回だけは初回でもあり、これまでのAjaxに関する話題から面白いもの、確実に押さえておきたいものをピックアップしてみたい。 なお、ここでは主に日本語で読める情報について取り上げていく。ただし、特に重要なものについては、英語の情報を扱う場合がある。 Ajax: Web アプリケーション開発の新し
[JS]脚注をデスクトップ・タブレット・スマフォそれぞれで最適に表示するスクリプト -sidenotes
デモページ：幅480pxで表示（左：テキスト、右：脚注） テキストと脚注は相互リンクされているので、行き来できます。 sidenotesの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js"></script> <script src="js/jquery.sidenotes.min.js"></script> Step 2: HTML 脚注をつけたい箇所に「class="footnote"」を加え、脚注へページ内リンクを設定します。 <article> <p>脚注をつけたい箇所<sup id="fnref:notes1"><a href="#fn:notes1" class="footnote">1</a></sup></p> <p>脚注をつけたい箇所<sup id="fnre
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
[JS]かっこいいインタラクションを伴ったスマフォに最適な省スペース用フォームのデモ
先月の終わりにdribbbleで公開された時に、うわっかっこいいな！と思いチェックしていたコンセプトにデモとして動作するスクリプトが開発されたので紹介します。 まずは、dribbbleでのコンセプトから。 [GIF] Mobile Form Interaction フォームの入力欄の各ラベルをプレースホルダーテキストとして表示し、タップして入力する時に、アニメーションでそのテキストがふわりと上に移動し小さく表示されます。 これはスマフォでは特に重要な省スペースとしても優れており、また入力後にそれが何の項目であったかユーザーに伝えることができます。 で、そのコンセプトにインスパイアされて開発されたスクリプトが「JVFloat.js」です。 デモのキャプチャ ※デモはダウンロードファイルに含まれています。 アニメーションのブラッシュアップやコードの最適化など宿題があるそうですが、実装はこんな感
[JS]ページをスクロールし、コンテンツを読み終えたくらいにメッセージやFacebookのパネルを表示するスクリプト -End Page Box
Demo 5 トリガーを複数設定したデモで、パラグラフの奇数番目ごとにパネルが表示されます。 End Page Boxの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.endpage-box.js"></script> <link rel="stylesheet" type="text/css" href="css/endpage-box.css" /> Step 2: HTML コンテンツは通常通りに実装し、パネルは</body>の上あたりに配置しておきます
[JS]普通のタブから便利な機能を備えたタブまで簡単に実装できるスクリプト -Tabslet
Custom event: タブの切替時の前後にイベントを設定します。 Tabsletの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script> Step 2: HTML タブをul要素で、各コンテンツをdivで実装します。 タブのアンカー（#tab-1）とコンテンツのid（tab-1）は対応するように設定します。 ラッパーのclassに「tabs」を指定し、機能を選択
[JS]シンプルなページ内スクロールから、ちょっと面白いスクロールまで簡単に実装できるスクリプト -Scrolld.js
Demo 3 一番目はdiv、二番目はネコの画像、下の方には表示幅に合わせてエフェクトが変わります。 Scrolld.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを</body>の上あたりに外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../demo/js/scrolld.min.js"></script> Step 2: JavaScript スクリプトのトリガーを外部ファイルの下に記述します。 <script type="text/javascript"> $("[id*='Btn']").stop(true).on('click',function(e){e.preventD
複数ページにも対応とは！ページに分かりやすいプロダクトツアーを加えるフレームワーク -Hopscotch
ページに分かりやすく、プロダクトツアーを加えるフレームワークを紹介します。 似たようなスクリプトはたくさんありますが、これはツアー移動のアニメーション、ツアーを戻る、そして複数ページにも対応しています。 1ページ内でのツアーでけではなく、複数ページを横断するツアーも作成できます。 Hopscotch Hopscotch -GitHub Hopscotchの特徴 Hopscotchのデモ Hopscotchの使い方 Hopscotchの特徴 イベントのコールバック ツアー中のさまざまなイベントのコールバックを装備。 マルチページ対応 HTML5のストレージやクッキーを利用して、複数ページにまたがるツアーも可能。 i18n対応 さまざまな言語での実装をサポート。 快適なレスポンス 一つひとつは軽量なインスタンス。 Hopscotchのデモ ページ自体がデモになっています。 中央下の「Tale
ソニーグループ、FlashやめてAjaxでリニューアル
画像がダイナミックに切り替わり、マウスオーバーに合わせてナビゲーションバーが変化する――そんな“動きのあるサイト”を作るのに、あなたなら今、何を使うだろうか？ 4～5年前ならほぼ間違いなく「Flashで決まり！」だったかもしれないが、2005年以降、Ajax/JavaScriptを使うサイトが増えている。最近では手軽に実装できるライブラリの充実とともに、ますますその傾向にあるようだ。 9月9日にリニューアルされたソニーグループのコーポレートサイト（www.sony.co.jp）もその一つ。旧サイトに比べてトップページのレイアウト領域が広くなり、文字も大きく、スッキリとしたナビゲーションバー……と、注目したいところはいろいろあるが、最初に目を奪われるのは中央にある大きなメインビジュアル部分のはずだ。実はここにJavaScriptが使われている。
[JS]スクロールしてもサイドバーなどの要素を貼り付けたように常に表示させるシンプル高性能超軽量スクリプト -Sticky-kit
ユーザーがスクロールした際、指定した要素をぴたっと貼り付けたように指定範囲に常に表示させるスティッキー用のjQueryのプラグインを紹介します。 実装は非常に工夫されており、シンプルかつ高性能、しかも1.8kの超軽量！ 一行の記述で、複数の要素を異なる範囲に表示させることもできます。 複数の要素を異なる範囲にも貼り付けたデモ Sticky-kitの使い方 実装は非常にシンプルで、簡単です。 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="/jquery.sticky-kit.js"></script> <
最も支持されるJavaScriptの表現方法とは？ 【スマホのインタラクションデザイン調査】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
あと1％離脱を減らすフォームのテクニック
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
[JS]パスワード入力時・入力後に一時的にパスワードを可視化するスクリプト -hideShowPassword
demo 3: チェックボックス Hide/Show Passwordsの使い方 Step 1: 外部ファイル 外部ファイルに当スクリプトとjQuery、またはZepto.jsを外部ファイルとして記述します。 ※jQueryとZeptoの兼用プラグインとなっています。 <script> document.write('<script src=vendor/' + ('__proto__' in {} ? 'zepto.custom' : 'jquery') + '.js><\/script>') </script> <script src="hideShowPassword.min.js"></script> Step 2: HTML HTMLは通常通りのフォームの作成です。 <div class="login"> <input type="text" placeholder="Usern
[JS]グリッドで配置したパネルをダイナミックなアニメーションでコントロールするスクリプト -gridSelector
Googleトレンドのようなグリッド状に配置した複数のパネルにダイナミックなアニメーションを与えるスクリプトを紹介します。 Dynamic Grid with Transitions デモはChrome, Firefoxでご覧ください。 ※Safariで見たら、クラッシュしました。 Demo 1: No transitions Demo 2: Transitions without delays Demo 3: Transitions with delays 3種類のデモは、1:アニメーション無し、2:ディレイ無しのアニメーション、3:ディレイ有りのアニメーションとなっています。 Demo 3のディレイ有りが一番かっこいいです！ Demo 3のアニメーションgif 左上からパネルの表示数・レイアウトが変更すると、アニメーションで変更します。 実装 div要素で配置したパネルと外部ファイルと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
