ユーザインタフェースにまつわるフリーのアイコンセット集:phpspot開発日誌
Ultimate Roundup of Free User Interface Icons | Graphic and Web Design Blog -Resources And Tutorials ユーザインタフェースにまつわるフリーのアイコンセット集。 本サイトでも既に紹介したものも多いかもしれませんが、ユーザインタフェース用という切り口でまとまったエントリは参考に出来るかもと思ったのでご紹介。 新しいWEBサービスを作る際なんかに一目でわかるのはなかなか便利かも。 最近は、色々なクオリティの高いアイコンが出てきて、沢山あるのはいいのですが、迷ってしまったりという悩みもありますね。 関連エントリ 2009年に発見した秀作アイコンのまとめ iPhoneアプリのツールバー部分に使えそうなアイコン色々 アイコンデザイナーのためのツール集
iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」:phpspot開発日誌
Plugins | jQuery Plugins iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」。 iCheckboxを使えば次のようなiPhoneのON/OFFを簡単に実装できるみたいです。 次のようなコードで実装することが出来ます。オプションを各種指定でカスタマイズも出来るみたい。 var options = { switch_container_src: 'images/bpm-frame.gif', class_container: 'iCheckbox_two_container', class_switch: 'iCheckbox_two_switch', class_checkbox: 'iCheckbox_two_checkbox', switch_speed: 450, switch_swing: -18, checkbox_hide:
Amazon.com、そのショッピングカート進化の変遷 - Feel Like A Fallinstar
7600万人が利用するAmazon.com。 世界最高峰のUIを誇るこの類まれなるECサイトは、カート1つをとっても大きな変更を何度も繰り返しており、EC関係者にとっては、おおいに参考になります。 Amazon's Add-to-Cart Evolution 1 初期バージョンのボタン。 ネット初期のEC慣れしていない人でも気持ちよくボタンを押せる訴求を以下の2点で実現 カートに入れても、商品をあとから消せることを記載（you can always remove it later） セキュリティ（shopping with us is safe） 2 1クリック注文が追加される カートボタンの位置はそのままに、1クリック機能をリリース。 3 "You can always remove it"を取り除いて、ボタンをシンプルに 4 Amazon2.0へ 3D装飾の入った形になり、A9サーチエ
【海外事例に学ぶ】フォーム入力におけるリアルタイムエラー表示のポイント (ユーザビリティ実践メモ)
今回は、A List Apart掲載のルーク・ウロブレウスキ氏(※)による記事、“Inline Validation in Web Forms”をご紹介します。当記事のテーマは、フォーム入力中のリアルタイムエラー表示（インライン・バリデーション）方法の最適化についてです。 まずはフォーム入力におけるリアルタイムエラー表示がどのようなものか、以下のデモをご覧ください。 【動画】�：フォーム入力におけるリアルタイムエラー判定デモ 上記のようなリアルタイムエラー判定のできるフォームについて、ウロブレウスキ氏は21歳から49歳の22人の被験者でユーザ調査を実施しました。 すると、通常の入力フォームと比べ、入力の成功率が22%向上し、エラー率が22%減少、入力時間も42%減少したとのことです。さらに、調査結果からは次のような2つの知見が得られています。
Web閲覧者の「視野」は狭いのだ - ただのにっき(2010-02-28)
■ Web閲覧者の「視野」は狭いのだ 楽天ブックスにある「ペンギン夫婦がつくった石垣島ラー油」のレビューが面白いと、TwitterでRTされていたので読んでみた(最初に盛り上がったのは半年近く前のことらしい。知らなんだ)。これは本なのに、ラー油そのものだと勘違いして買ってしまった人たちが、レビューでそのことを訴えているのだ。おかげで評価は最低で、著者には気の毒なことになっている。 ブクマコメントなんかをみると、やれ「情弱」だの「なんで間違えるんだ」だの、こっちもひどい評価のオンパレードだが、これは間違えちゃった人を責めるのは酷だよなぁ。あらかじめ「解答」を知った状態でこの商品ページを見れば、たしかに店名は「楽天ブックス」だし、「本」というアイコンが商品名のすぐ上に出ているのだから、間違えようがないように見える。 でも、普通に何も予備知識がない状態で楽天市場から検索して、本物のラー油に混じっ
アイコンがふわっと拡大するjQuery – creamu
マウスオーバー時に気持ちのいい効果をつけたい。 そんなときにおすすめなのが、『BubbleUP』。アイコンがふわっと拡大するjQueryです。 アイコンにマウスオーバーすると、ふわっとサイズが大きくなりますね。動きが滑らかで気持ちいいです。 デモは以下から。 jQuery Menu Plugin: BubbleUP 実装方法も詳しく解説されているので、ぜひ見てみてください。 Learning jQuery: Your First jQuery Plugin, “BubbleUP” ブログ遅くなりました。。昨日は書けなかった。すんまへんm(_ _)m 急いで作業しているところでOSが起動しなくなり、ここ数年で一番大変な日を過ごしました。。。 セキュリティーについて深く考えさせられたので、心機一転してがんばります。
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
[JS]フォームのエラー判定を行い、アドバイスを表示するスクリプト -Ketchup
カスタマイズ性に優れた、フォームのエラー箇所にツールチップをふわりとアニメーションで表示するスクリプトを紹介します。 Ketchup Ketchupは既存のフォームにも簡単に導入が可能で、マークアップの変更やツールチップのデザイン変更も簡単に行えます。 また、エラー判定も多彩な項目で設定が可能です。 入力の有無 最大・最小文字数 最大・最小数値 メールアドレスのチェック urlのチェック 日付のチェック ユーザーネーム（a-z0-9_-）のチェック など これらの判定は組み合わせて使用することも可能です。 設置方法は、スクリプトとスタイルシートを外部ファイルとして記述し、各フィールドに下記のように追加します。 HTML（変更前）
ラベル入りのフォーム要素を実装する方法2つ – creamu
最近のフォーム要素にはラベル（透かしテキスト）を入れているものが多いですが、通常の実装方法は以下のソースで可能ですね。JavaScriptのonfocus、onblurイベントハンドラでvalueを切り替えています。 XHTML, JavaScript <input type="text" value="メールアドレス" id="email" onfocus="if (this.value == 'メールアドレス') {this.value = '';}" onblur="if (this.value == '') {this.value = 'メールアドレス';}" /> これは使いやすいんですが、ソースが綺麗じゃないのと、これからはよりリッチなインターフェースが求められるので、もう少し自然な動きだといいですよね。 そこで、jQuery In-Field Label Pluginを使えば
今だかつてない使いやすさでUIもクールなマルチアップローダー実装ライブラリ「Plupload」:phpspot開発日誌
Plupload - A tool for uploading files using Flash, Silverlight, Google Gears, HTML5 or Browserplus 今だかつてない使いやすさでUIもクールなマルチアップローダー実装ライブラリ「Plupload」。 Flash, Silverlight, Google gears, HTML5, Yahoo Browserplus などの技術を駆使することで多くのブラウザに対応し、ユーザビリティの優れたものになっているようです。 作者は有名なWYSIWYGエディタのTinyMCEのデベロッパーという点も気になります。 アップローダー画面。CMSなどに組み込む場合にも違和感なく使えそうなデザインとUIです。 ↑Add Files で選択したファイルを選ぶとすぐにファイル名が表示され、どんどんファイルを追加していっ
「常識的なweb UI」で気になっているもの | おごちゃんの雑文
これは本当にわからないんで、識者に教えて戴きたいところなんだけど、とりあえず自分の主張と共に疑問を書いてみる。 疑問は大きく2つあって、 パスワードは伏せ字でなければならないか 「確認画面」は必要か ってこと。このどちらもが「常識」として使われているのだけど、どうもうっとおしい気がしてならない。 パスワードをtype=”password”にしたり、そういったラベルをつけたりすると、パスワード覚えてくれていたり、日本語入力システムが一時的にOFFになったりと便利なのはわかる。また、パスワードを「後ろから見る」攻撃から避けるには、伏せ字にしておくのが有効だというのもわかる。 とは言え、パスワード覚えてくれたりとか、日本語入力システムを一時的にOFFにするとかってのは、言うなれば「オマケ」であって、本質は「伏せ字」ってことだろう。この伏せ字、「後ろから見る攻撃」には有効なのだけど、 打ち間違いに
自由な位置にalert表示できるjQueryプラグイン「Feedback UI Plugin」:phpspot開発日誌
Feedback UI Plugin 自由な位置にalert表示できるjQueryプラグイン「Feedback UI Plugin」のご紹介。 Feedback UI Plugin を使うと、$(element).feedback('メッセージ'); のようにするだけで、対象のエレメントの側に次のようなalertメッセージを表示することができます。 左、右のどちらかに表示するかという点も決めれる他、cssのクラス名を指定してカスタマイズすることもできます。 フォームのバリデーションに特化しているわけでなく、特定のエレメントに対して行えるので、ユーザビリティの向上に色々な部分に柔軟に使うことができそうです。
Twitter風に残り文字数を表示してくれるテキストエリア実装jQueryプラグイン:phpspot開発日誌
jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields | Css Globe via IDEAxIDEAさん Twitter風に残り文字数を表示してくれるテキストエリア実装jQueryプラグインがあるようです。 次のような、Twitter風の残り文字数を表示させながら入力できるテキストボックス実装の際に便利ですね。 Twitter同様 140 文字制限から、自由に好きな文字数に変えることができるそうです。 日本語でも、マルチバイト１文字を１文字と扱ってくれるみたいです。 実装方法は、まず次のようにtextareaを定義しておきます。 <textarea id="message1" name="message1"></textarea> その後次のように初期化する
画面内に付箋を貼るようなUIの掲示板を作れるPHP＆jQueryなサンプルプログラム:phpspot開発日誌
AJAX-enabled Sticky Notes With PHP & jQuery ? Tutorialzine 画面内に付箋を貼るようなUIの掲示板を作れるPHP＆jQueryなサンプルプログラムが公開されています。 動くサンプルは次のようになっていて、画面にぺたぺたはったような面白いものになっています。サンプルプログラムだけではなく、チュートリアルも公開されています。 デモページ z-indexを調整して、クリックしたものが最前面にくるようになってます。 ノートの追加をする場合のUIもいい感じで、LightBox風の画面があらわれて、色を選べるようになってます。 ちょっとした連絡用に設置したりすると面白いかもしれませんね。
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」:phpspot開発日誌
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」 2010年01月20日- jQuery Plugin: LiveFilter 1.0.1 | Mike Merritt | Digital Inferno 大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」。 １ページ内にリストが多く表示されていると探すのが大変ですが、LiveFilterを使えば瞬時に対象を探すことができます。 インプットボックスに検索したい文字列を入れると、一気に対象が絞り込まれ、好みのものがすぐに見つかるでしょう。 そんなの、グーグルツールバーやページ内検索を使えばいいじゃないか、という方もいると思いますが、それらの存在が知らない初心者の方に向けたページの場合は威力を発揮しそうです。 パソコン中級者や上級者の方に向けても、
最後に入力した文字がわかるより優れたiPhone風パスワードフィールド実装ライブラリ「PassShark」:phpspot開発日誌
最後に入力した文字がわかるより優れたiPhone風パスワードフィールド実装ライブラリ「PassShark」 2010年01月15日- QUERIDODESIGN - Blog 最後に入力した文字がわかるより優れたiPhone風パスワードフィールド実装ライブラリ「PassShark」 通常のパスワードボックスは入力した時点で●とか*に置き換えられてしまい、入力時点で間違っていても気づくことができません。 そこでiPhoneでは最後に入力中の文字はそのまま表示するというUIになっているわけですが、次のようにPCでも同じような入力フィールドを簡単に実装できます。 Mootoolベースのライブラリです。 過去にも同様のものを紹介しましたね。 関連エントリ 最後の文字だけ読めるiPhoneのパスワードフィールドそっくりな入力フィールド作成用jQueryプラグイン 何を入力したかが分かるiPhoneス
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「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"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://release.center.jp/2010/03/0901.html
HugeDomains.com
[JS]ブラウザのサイズに合わせてレイアウトがアニメーションで変更されるスクリプト -Sliding Resizable Grid