ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる！とか、売上が上がる！といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんあり...
『 http://coliss.com/articles/build-websites/operation/javascript/1359.html 』
prettyCheckboxesは、チェックボックスやラジオボタンの外観を変更するスクリプトです。 prettyCheckboxes, a solution to checkboxes 外観はデフォルトでキャプチャ画 [...]
『 Webフォームを便利にするTips集。補助メッセージの表示、入力候補の表示、リアルタイムバリデーションなど。サンプルコード付き。 』
自分へのメモも兼ねてエントリー。フォームのユーザビリティを向上させる小技いろいろです。こういう小技を積極的に実装して自分のものにしていきたいですな。 どういうことができるかだけ紹介していきますので実際のコードは元記事を参照してくださいね。 入力する際のメモを表示 ↑ 入力フィールドにフォーカスがあたるとメッセージを表示。 入力候補を表示 ↑ タイプ...
企業のホームページや、ショップのホームページ等を作る際、必ずあるのが、「お問い合わせフォーム」。 しかし、よくあるのが、入力項目が大量にあるフォーム。 これでは問い合わせをしようとした方も、面倒になり、途中で入力をやめてしまう可能性があります。 フォームをできるだけ簡潔にしたほうが、コンバージョン率は高くなります。 そこで、入力を少しでも簡潔に...
サイトのトップページに配置する、訴求効果が最も高い「打ち出しエリア」のレイアウトのパターン集の紹介です。 Carousels Design Showcase 「Carousels Design Showcase」は、 [...]
ネットショップや会員制サイトを利用する際にいつも面倒だなと感じていることがある。会員登録や配送先を指定するフォーム画面にある、都道府県名の入力欄だ。 よくあるのが、プルダウンで都道府県名を選ぶ形式だが、これはなかなかのストレスだ。5～6項目ならともかく、47もの選択項目、それも似たような漢字3文字の中から、注意深く狙いを定めなければならない。...
コミュニティサイトをつくるときに必要になるログイン画面。どういったデザインにしようかなー、と悩んでしまう人も多いのでは。そこでログインフォームのデザインを集めたFlickrのグループをご紹介。 ↑ それぞれのサイトで細かい工夫がされているので参考になりますね。 現時点で180近いデザインが集められているようです。せっかくなのでスライドショーで貼り付けちゃ...
woorkのエントリーから、フォームの各項目をリスト要素で並べたスタイルシートのチュートリアルの紹介です。 FORM elements design using CSS and list (ul and dl) チュ [...]
以前、紹介した「検索フォームや見出しなどエレメントのデザインを集めたサイト -Elements of Design」のコンテンツに、フォームのログインのデザインが追加されました。 Login Forms Design [...]
『 シンプルなWebフォームのCSSデザインサンプル。（英語） 』
woork: Clean and pure CSS FORM designクリーンなデザインでピュアＣＳＳなフォームを作...
わかりにくいフォームはユーザーを戸惑わせ、離脱させてしまう。フォームのインタフェースデザインで利用できるセレクタと、各ブラウザの対応状況をまとめた。 フォームのインターフェースデザイン フォームはユーザーから情報を送ってもらうのに欠かせない要素だ。ユーザーが入力で迷うことのないように、わかりやすくデザインすることが求められる要素でもある。 ...
『 ★★★サイト全体の画面全体の設計に便利なツールの紹介 プレゼンテーションにもよい 』
現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいな...
以前「ウェブサービスのアラートメッセージなんかに使える小粋なCSSスタイルまとめ」を紹介しましたが、それに絡めて続編メモということで。 「CSS Message Boxes for different message types」なる記事です。ウェブサービスで必要そうな次の4つのメッセージボックスに関するCSSのマークアップを紹介しています。 情報メッセージ 成功メッセージ 警告メッセージ エラーメッセージ 実際の...
これはなかなかいいですね。 textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました 続きを読む
Six Revisionsのエントリー「30の卓越したCSSテクニック」から、CSSとHTMLだけで実装するエクセレントなテクニックをいくつか紹介します。 30 Exceptional CSS Techniques and Examples Hoverbox Image Gallery Sliding Photograph Galleries Supercharge your image borders Cross Browser Multi-Page Photograph Gallery CSS Photo Zoom The CSS-Only Accordion Effect Scrollable Table with Fixed Header Content Overlay with CSS A CSS styled table version 2 Showing Hyperlink Cues wit...
Smashing Magazineのエントリーから、シンプルでクリーンなものからアイデアに溢れたクリエイティブなものまでフォームのデザイン集をいくつか紹介します。 Web Form Design: Modern Solutions and Creative Ideas swfIR SoftMail
