ユーザのマウスの動きを保存して再生できるPHP+Ajaxな仕組み「smt」:phpspot開発日誌
(smt) simple mouse tracking // home ユーザのマウスの動きを保存して再生できるPHP+Ajaxな仕組み「smt」がなかなか興味深いです。 次のように、マウスを移動した軌跡を描画してくれ、利用者のマウスの動きを元にユーザビリティ向上に貢献できそう。 smtを使ったデモムービー集ページ mousemove イベントを使って座標をトラッキングさせてデータをサーバに保存、あとはデータを元にタイマーを使って描画するという仕組みのようで、なかなか面白いですね。 アクセスが多いとデータ量も結構なものになってきそうなので、自前でやるしかこうしたデータをちゃんと見ることは難しいのかもしれません。 このsmt は、ダウンロードしてサーバ設置型なので、遠慮なく使えますね。 関連エントリ Yahoo!のアクセス解析ツール「Yahoo! Web Analytics」 ケータイ用高機
Webブラウザの動作を速いと「感じさせる」ための工夫 - Mozilla Flux
MozillaWikiにFirefoxのUIチームが『Perceived Performance』というページを作っている。Firefox.nextの体感速度を引き上げるためのアイデアをまとめたもので、検討中の項目にすぎないとはいえ、どれも採用される可能性のあるものばかりだ。そこで、現在挙がっているアイデアを紹介しておきたい。 読み込まれないページのタイムアウトを早める。 再起動時のデフォルトとして、現在セッションの復元で使用しているメニューを表示させる（メッセージなどは変更して）。 メモリ使用量を監視し、たくさんのタブを開きすぎているときは警告する。 システムトレイに常駐させる機能（Mozilla Suiteにあったものを復活）。 スロバーの動きを速くする。 Mac OS X版のスクロールモデルをWindows版とLinux版にも実装する（Bug 462809）。 リアルタイム戦略ゲーム
Yahoo!ラボ - Rerank
検索結果中のキーワードを選択し または をクリックすることにより、検索結果を並び変えることができます。 操作方法 検索を実行すると、通常の検索結果に加えて、右側の枠内に検索結果内から抽出されたキーワード群が表示されます。 検索結果のタイトルや要約文、URLの中から好きなキーワードを選択（反転）するか、 右枠内に表示されているキーワードをクリックするととというボタンが現れます。 をクリックすると、そのキーワードを含む検索結果を上位に再ランキングします。 をクリックすると、そのキーワードを含む検索結果を下位に再ランキングします。 以上の操作で、手軽に検索結果を並び変えて閲覧することができます。 検索ワードの例：豚肉 ピーマン Rerankは、京都大学により研究開発されたソフトウェア・サービス機能であり、 Yahoo!ラボ掲載にあたり、京都大学と弊社で共同開発を行いました。 Copyrigh
Yahoo!検索の「ユーザーインターフェース設計」
分業による効果 一般的なデザイン作業において、下記のようなデザイン作業の上流部分をごく限られた人数で行い、そこから先の展開部分を大人数で行う方法を取る場合が多いと思われます。 インタラクションの設計 ビジュアルの設計 主要要素のHTMLマークアップ・CSSコーディング設計 しかし、モジュールの概念を取り入れることにより、デザイン作業の上流部分から分業を行うことが可能になります。 作業者のスキルやサービスへのコミット具合によって、多少ぶれる場合もありますが、そこはサービスの全体的なルールや作業時の補助ツールによってコントロールを行うことが可能です。 そのため、モジュールの命名規則や運用ルールについては、あらかじめドキュメントを作成した上で、ある程度厳密に運用を行う必要があります。 コミュニケーションの効率化による効果 最初にインタラクションの設計時に命名したモジュール名や要素名を、ビジュアル
Google が行う様々な実験
前回のブログでは、ユーザーの皆さんに最高の検索体験を提供するための、Google の理念をお話しました。もし間違って入力しても自動修正してくれる「もしかして」や、各検索結果を説明するスニペットなどの単純な機能の背景には、複雑なアルゴリズムが存在しています。Google は、どのアルゴリズムが優れたものなのか検証するために、ごく一部のユーザーの皆さんに新しい機能を試験的に提供する「実験」を行っています。（注：今回のブログ記事では英語での実験の画像を使っていますが、日本でも同様の実験を日々行っています。） 私たちは「実験」をとても大切だと考えていて、検索結果に加えた変更の良し悪しをテストするために幅広く活用しています。 Google では常時 50 ～ 200 にわたる実験を行っています。実験の中には、ページをじっくり見てもほとんど違いが分からないような細かい変更もあれば、一目瞭然のものもあり
アイトラッキングから検証した、使いやすいフォームの10のポイント
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) ラベルは左寄せにすると、よ
リアルタイム入力チェックのJavaScriptライブラリ·yav MOONGIFT
時々、Webサイトで入力している内容をその場で判定するものがある。入力必須の項目やメールアドレス、パスワードの一致などでエラーがあればすぐに表示してくれるので、送信してから修正すると言った二度手間がなくて便利だ。 Webブラウザ上で入力チェックを実行する サーバ側でも入力チェックは行うが、ユーザビリティを考えるとオンラインでも検証したい。そんな検証システムを簡単に作れるのがyavだ。 今回紹介するオープンソース・ソフトウェアはyav、JavaScriptの入力チェックライブラリだ。 yavは入力必須はもちろん、数字のみや文字のみといったチェックもできる。メールや日付、文字の長さなどといったフォーマットによるチェックや、「and」と「or」による他の項目の値によって入力チェック内容を変更する機能もある。多言語にも対応している。 設定はこのようになる 入力フォーマットを規定することも可能で、予
Web上でWebアプリケーションを開発する·UIzard MOONGIFT
ローカルでWebシステムを開発し、それをアップロードして検証する。そんな手間をかけるのは面倒だ。オンラインで開発してそのままオンラインで実行できればとてもスムーズになりそうだ。問題は良い開発環境がないことだろう。 プロジェクトテンプレートが用意された本格的IDE まるでIDE（統合開発環境）のように画面を設計し、コーディングしてWebアプリケーションを開発できるのがUIzardだ。 今回紹介するオープンソース・ソフトウェアはUIzard、韓国製のWebアプリケーション構築プラットフォームだ。 UIzardは韓国のマッシュアップコンテスト、MashupKoreaで準優勝した作品のようだ。それだけに完成度は高く、まるでGUIアプリケーション並みのインタフェースでWebアプリケーションを構築できる。 インタフェースをドラッグアンドドロップで構築する UIのデザインはドラッグアンドドロップででき、
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。 10 Tips to Create a More Usable Web 以下、各ポイントのピックアップです。 1. Creating active navigation アクティブ機能をもったナビゲーションの設置 サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。 2. Clickable labels & buttons ラベルやボタンをクリック可能に フォームのラベル（label）やボタン（button）に、クリック可能であることが分かるようにスタイルシートで設定します。 例： <textarea name="code" class="css" cols="60" rows="5"> label, butto
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
凄い！jQueryでリボンメニューを実現する·jQuery Ribbon MOONGIFT
MS Office 2007から採用されたリボンメニュー。今は（といっても2年前からあるが）まだ違和感があるかも知れないが、徐々にリボンメニューを採用したソフトウェアも増えており、慣れると使いやすさは向上していることに気づくはずだ。 jQueryで実現するリボンメニュー！ そんなリボンメニューをブラウザで使える、そんなライブラリがjQuery Ribbonだ。 今回紹介するオープンソース・ソフトウェアはjQuery Ribbon、jQueryでリボンメニューインタフェースを提供するソフトウェアだ。 jQuery RibbonはjQueryを使ってあのリボンメニュー風インタフェースを実現する。凄いのは全てのインタフェースがリスト（ulタグ）だけで実現されていることだろう。そのためJavaScriptがオフであっても機能はするはずだ。 メニュー リボンインタフェースはもちろん、左上にはツリーメ
利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌
Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ
HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript:phpspot開発日誌
jQuery Dropdown Check List HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript。 複数選択式の選択リストは普通に作成することが出来ますが、チェックボックスを使ったわかりやすいＵＩの実現は難しいですね。 「jQuery Dropdown Check List」ならjQueryプラグインなので、非常に簡単に実現できます。 $("#s6").dropdownchecklist(); のように、１行で初期化できるところも素晴らしいですね。 一昔前にやっていれば、どうやってやってるんだろうと検討もつかなかったと思いますが、進化したものです。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
パスワード強度を表示するインタフェースやスクリプト色々:phpspot開発日誌
10 Password Strength Meter Scripts For A Better Registration Interface パスワード強度を表示するインタフェースやスクリプト色々が紹介されていました。 パスワード作成時や、ログインフォーム作成時に使えそうです。 PasswordMeter 入力したパスワードの強度を色々な視点からチェックできる 色々な項目を集計してScoreという形で点数が出ます。 Yet Another Password Meter 上記と同様のパスワード強度チェッカー Ultimate Password Strength Meter script.aculo.us で強度をグラフ表示するようにしたスクリプト Password Strength Field (A jQuery Plugin) パスワード強度表示用のjQueryプラグイン How to M
複数のクエリ入力に適した補完機能付ボックス実装「jquery.tokeninput.js」:phpspot開発日誌
James Smith ? loopj.com Blog Archive jQuery Plugin: Tokenizing Autocomplete Text Entry 複数のクエリ入力に適した補完機能付ボックス実装「jquery.tokeninput.js」。 利用者に入力してもらいたい項目が多数ある場合、たとえば検索用のＵＩで、複数の検索文字列を投げたいような場合に使えそう 入力ボックスに文字列を入れると、サジェストが現れます。 Enterキーで、候補を１つのクエリにできます。で、続けて入力するとまた、サジェスト。 という感じでアイテムをどんどん追加していけるＵＩになっています。 デモページ 使いどころが難しいものかもしれませんが、使い方を考えれば、色々と使えそうですね。 jQueryプラグインなので実装も簡単です。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQuery
PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」:phpspot開発日誌
Web-kreation - LightForm ::: Free Ajax/PHP Contact Form PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」。 クールなフォームのＵＩに加えて、入力値がおかしい場合のリアルタイムエラー表示を行ってくれるPHPとAjaxのプログラムが入手できます。 UIがクールなフォームになってます 入力チェックの機能。 たとえば、名前を１文字入力して次にいくと、最低で３文字必要だというエラーが次のように表示されます。 メールアドレスが間違っている場合もちゃんとチェックしてくれます メンテナンスされていない点には注意ですが、なかなか使えるプログラムなので改変してサイト構築に活用すれば手間を大幅に削減できそうです。 関連エントリ JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Excel風の入力・表示が可能なデータグリッド実装が可能な「MyTableGrid」:phpspot開発日誌
http://gerenuk.crazyphoto.org/2009/06/25/873/
http://e0166nt.com/blog-entry-677.html
IDEA * IDEA
