ユーザー登録の面倒くさいフォーム入力の苦痛を激減させる画期的アイデア「ダイアログフォーム」
登録フォームと言えば通常は必要事項を一方的に入力していくものですが、キャラクターとの会話形式にして、まるでチャットを行っているように情報を入力できるのが「ダイアログフォーム」です。人とチャットしているときはタイピングが苦じゃない、というアイデアを元に作られた登録フォームで、コードのダウンロードも無料で行えます。 ダイアログフォーム - jsdo.it - Share JavaScript, HTML5 and CSS http://jsdo.it/watilde/form 実際にどんな感じでフォームが表示されるのか試してみます。まずはページ右側にある再生ボタンをクリック。 すると、「会員登録ふぉーむ」という文字の下で自動的にWindows Azure 公認キャラクタークラウディア・窓辺が会話を始めます。 「ユーザーIDを入力してください」とクラウディアに言われるので、フォームに自分のIDを
Who Needs Web Accessibility? How to Make Accessible Websites?
2013年3月25日 アクセシビリティ 昨年少しの間ですが入院しました。その間は大人しくしていればいいものを、脊髄麻酔や鎮痛剤が効いて苦痛のない時は退屈なもんで、Webサイト閲覧・メールチェックなどはしていました（私の行きつけの病院はインターネット利用可）。しかし体が思うように動かないので、今までどおりWebサイトを閲覧するのは困難。その時初めてアクセシビリティの大切さを身を持って感じ、それから少しずつお勉強している次第です。今回はWebサイト閲覧におけるアクセシビリティについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ Webアクセシビリティとは 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシ
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 本稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書
iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」:phpspot開発日誌
iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」 2010年06月23日- slideLock Demo iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」。 UIとしては次のような感じで、スライダーを右にドラッグ＆ドロップするとsubmitボタンがactiveになってフォームの送信が可能になります。 フォームの送信を厳重にしたい場合と、隠しパラメータを受け取って照合することでスパムの防止に使えるっぽいです。 ロック解除しないと送信できないので、送信前に確認の意味を込めたUIとして使うと実用的に利用できそうですね。 初期化は次のように行います。 $("#contact").slideLock({ labelText: "Slide to Unlock:", // ラベル
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
【海外事例に学ぶ】 リッチ化するフッター (ユーザビリティ実践メモ)
これまで当サイトでも、いくつかの記事でフッターについて扱ってきました。最近、海外のサイトを見ていると、フッターについて新しい取り組みが見られます。 今回は、海外サイトの動向をサンプルとし、フッターにおける新たな取り組みのメリットをご紹介します。 Geek Trends: 15 Footers with great usability ( pop upon magazine ) 6 Things To Include for a User Friendly Footer ( UXBooth ) Modern Sitemap and Footer ( WebDesignerWall ) Footers (76 examples) ( Smiley Cat Elements of Design ) 例えばTIGERS （http://www.tigers.org.au）のフッター(下図)では、革
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
&lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;pid=877160106″&gt;&lt;/script&gt;&lt;noscript&gt;&lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;pid=877160106″ target=”_blank” &gt;&lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;pid
jsmap - JavaScriptによる都道府県入力補助
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
日付入力を便利にするカレンダー/日付ピッカー集:phpspot開発日誌
Fantastic, Free Calendar and Datepicker Scripts - Six Revisions Web applications often require a calendar or datepicker functionality. 日付入力を便利にするカレンダー/日付ピッカー集。 日付だけのものから、Googleカレンダーみたいなカレンダーウィジェットまで、いろいろとあるようです。 Calendar: a Javascript class for Mootools MooMonth Monket Calendar Datejs Vista-like Ajax Calendar 全部見る これだけあれば、日付入力には困らなさそうですね。
標準のINPUTを拡張してフォーム入力を便利にする「inputEx」:phpspot開発日誌
inputEx Documentation - Examples 標準のINPUTを拡張してフォーム入力を便利にする「inputEx」。 input 入力の際に、数値Onlyや、Validate機能、色入力機能、オートコンプリートを提供して、フォーム入力をより便利にするものです。 色入力 メールアドレスバリデーション。ＵＲＬやパスワードなんかもあり 階層型のツリーデータを入力 うまく導入してフォームのユーザビリティに役立てたいですね。 関連エントリ JavaScript製のフォームバリデータライブラリいろいろ 超クールなカレンダー型日付入力補助用JSライブラリ
ブラウザ上で動く12のリッチテキストエディター:phpspot開発日誌
9 of the best Rich Text editors reviewed ブラウザ上で動く12のリッチテキストエディター。 ブラウザ上でリッチテキストを編集する、というのは当たり前になりましたね。 というわけでライブラリも一杯でてます。 NiceEdit Kupu TinyMCE Kevin Roth RTE FCKEditor YUI Editor WebWiz RichTextEditor CodePlex Rich Text Editor - ASP.net XStandard prototype.jsでクロスブラウザなWYSIWIGエディタ jWYSIWYG NicEdit 沢山あるものですね。
超クールなカレンダー型日付入力補助用JSライブラリ:phpspot開発日誌
Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. 超クールなカレンダー型日付入力補助用JSライブラリ。 次のような個性的なカレンダーで入力補助が可能です。 オシャレでかわいいカレンダー スタイルされたクールなカレンダー 写真入りのカレンダー mootoolsを使っていて次のように初期化するだけで簡単に使えるみたい myCal1 = new Calendar({ date1: 'd/m/Y' }, { direc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
画面遷移なしのAjaxでファイルアップロードするjQueryプラグイン10:phpspot開発日誌
IDEA * IDEA
IDEA * IDEA
ナビゲーション・メニューまとめ - DesignWalker
