入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ
メール送信フォームやらアンケートの回答フォームやら、とにかくネット上には様々なフォームが存在しています。入力する値が間違っていると「エラー」表示を出すタイプのモノが多いですが、出される側から見れば「そんな値を入力できるようにするなよ！」「8文字までしか受け付けないんだったら、最初から入力可能な文字数を8文字に制限しておけよ！」「エラーが出たらどこを再入力すればいいのかわかりやすく表示してくれ！」などと思うこともしばしば。 というわけで、この「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかくいろいろ便利な入力チェック機能を簡単に組み込むことができるオープンソースで開発されているJavaScriptファイルです。入力チェック後のエラー表示もポップアップウインドウやページ内
第17回 フォームのユーザビリティの重要性 - MdN Design Interactive
Webサイトの通常の閲覧部分は、クリックなどの簡単な操作が中心ですが、登録や注文のフォームになると、入力、選択などの面倒な操作が多くなり、ミスも起こりがちです。このため、Webサイトを訪れて商品 やサービスに興味を持ったユーザーが、いざ購入という段階で断念してしまうケースが多くみられます。フォームはユーザーの最終目的達成のための重要な部分ですから、きめ細かな配慮を心がけるようにしましょう。 ［プロフィール］ いしだ・ゆうこ●クロッシングフィンガーズ代表。ユーザーエンパワーメントという手法により、ユーザー視点に立ったサイト構築、コミュニティ運営のコンサルティングなどを行っている。近著に『Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。』がある。 （イラスト：MIKAさん） クロッシングフィンガーズ：http://www.crossingfingers.org
第23回 URIの動的生成と使いやすさを考える -- ブログやWikiにおける生成ルールや日本語の扱い，リンクされやすいURIとは？
第23回 URIの動的生成と使いやすさを考える -- ブログやWikiにおける生成ルールや日本語の扱い，リンクされやすいURIとは？ 本連載でURIの話を取り上げ始めて，もう4回目になってしまいました。URIに関しては，いろいろ面白い話題もあり，興味は尽きないのですが，ほかに考えてみたい題材もありますし，あまりこの話ばかりを続けるのもなんですから，ひとまず今回で最後にしたいと思います。 今回は，動的生成されるURIの使いやすさ，という視点から考えてみます。ここでいう「動的生成されるURI」というのは，ブログのエントリ・ページやWikiのページのように，機械的に生成されるページのことです。また，商品情報を元に商品ページを自動生成するオンラインショップなども動的生成ですね。 新たにページやデータを追加できるようなツールやサービスでは，新しくデータが追加された際に，新たに生成されるページにURI
ドラッグ＆ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」:phpspot開発日誌
Toggler Toggler is currently just a proof of concept to mimic the functionality found in desktop programs like Adobe Photoshop ドラッグ＆ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」。 Togglerを使えばマウスをクリックして上からドラッグするだけでチェックボックスの一括チェックが可能になります。 使い方も次のように簡単です。 var toggle = new Toggler('elementId'); toggle.start(); // start the toggler (enabled by default) toggle.stop(); // stop the toggler これは便利ですね。
超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」:phpspot開発日誌
超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」 2007年05月31日- TableKit TableKit is a collection of HTML table enhancements using the Prototype framework. 超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」。 次のようなExcel風テーブルが簡単に作れます。 どれぐらい簡単か、というと、必要なJavaScriptを読み込んだあと、table の class に次のように値を指定するだけ。 <table class="sortable resizable editable"> 最低幅の指定など、動作に関するカスタマイズも豊富なオプションによって指定可能です。 こ
JavaScript で幅に合わせて文字列を切りつめる - Psychs's blog
デスクトップアプリを開発してると、ListView のカラム幅が足りなくなったときに「My Docume...」のように自動的に末尾を「...」で埋めて切りつめてくれる機能がある。ウェブでも同じことをやりたかったので、作ってみた。 まず、文字列の幅を測定するには、 <span id="ruler" style="visibility:hidden;position:absolute;"> </span> みたいな隠しエレメントを用意しておいて、 String.prototype.getExtent = function(ruler) { var e = $(ruler); var c; while (c = e.lastChild) e.removeChild(c); var text = e.appendChild(document.createTextNode(this)); var
コマンドリンク
アプリケーションで用いるコマンド（命令）は、ボタンでもリンクでも表現できるようになってきたので、どちらが適しているかを決めるには、昔よりも多くの説明が必要とされる。しかしながら、重要なコマンドにはやはりボタンを用いるのが一番だ。 Command Links by Jakob Nielsen 2007年5月14日 今よりも物事がシンプルだった時代には、ウェブサイト向けガイドラインの数々が存在し、その一方でアプリケーション向けガイドラインの数々が存在していた。そして両者は明らかに別物だった。たとえば、ユーザーの選択肢を表現するためには、以下のような別々のルールが示されていたのだ： ウェブサイトでは、リンク（アンダーラインを引いた色つきテキスト）を用いてナビゲーションを提供すること。 アプリケーションでは、メニューやボタンを用いて機能を提供すること。 ウェブサイト向けとアプリケーション向けのガイ
よくある話「別ウインドウでひらいちゃえば？」はよくない : やむにやまれず
2007年05月22日14:14 by 山崎泰宏 よくある話「別ウインドウでひらいちゃえば？」はよくない カテゴリ雑談デザイン Tweet sparklegate Comment(0)Trackback(0) 別ウィンドウを開くことの是非 気づかない・戻るボタンが使えない視覚に頼れない方が音声読み上げ式のブラウザを使っているケースで問題になるPCの一般的なディフォルトブラウザを利用している人でも、気づきにくい。ウインドウ閉じる手間も考えて とのこと。 確かにタブブラウザ使い始めて最初のうちは、新規に開いたウインドウがタブ化され、バックグラウンドで読み込まれていたりして、「アレ？」と思った体験があります。 今後システムを開発する際には特に気をつけたいと思う。 開発の現場ではよくある話過去に業務システムの開発現場にいて経験したことがあります。 「そこ、別ウインドウで開くことにしよう」という話。
63歳の世界的デザイナーが挑む、新しきウェブデザインの世界 - CNET Japan
日本航空の鶴を使ったマーク、ティファニーの広告デザイン、楽器メーカーであるナカミチのコンセプト設計――これらのすべてに携わった日本人のデザイナーを知っているだろうか。米国ニューヨークに本拠を置くKatsuji Asada氏がその人だ。世界的なブランドのデザインやアートディレクションを数多く手がけるAsada氏が、新たな活躍の場としてウェブの世界に飛び出した。 インデックス・ホールディングスとサイボウズの共同出資会社であるZINGAが開発したビジネスパーソン向けのコミュニケーター「Zinga」。PCと携帯電話の両方に対応し、メールや電話などビジネスパーソンが業務に必要な連絡をすべて一カ所で取れるようにしたサービスだ。Asada氏はこのサービスのアートディレクターを務めている。 ZINGA代表取締役社長の大森洋三氏と旧知の仲であったことから実現した今回の企画は、インターネットサービスのデザイン
最先端でないサイトに学ぶ
今日のシロクマ日報で"myTimeHero"というSNSについて触れたのですが、これがなかなか面白いです。と言っても機能的に先進的な面があるのではなく、むしろその逆。このSNS自体が中高年層向けのサービスということで、慣れている人にとっては当然だろと思うようなことも、一から丁寧に説明してくれています。こういうサービスを参考にすると、初心者がどんなところでつまづきやすいか・分からなくなってしまうかを確認できるかも。 例えばこの"Smart Photo Upload"機能： 普通のサイトのように、「参照」ボタンでブラウザを呼び出すという形式もあるのですが、デフォルトなのはこっち。ページが開かれると、エクスプローラー似の画面が表示され、自動的に画像ファイルを検出・サムネイルとして表示してくれます。あとはアップロードしたい画像にチェックして（チェックされた画像は下半分に表示）、Upload ボタン
第11回 読み込み時間が短いページを作るには ～ パレートの法則
皆さん，こんにちは。本連載は本年に入って今回で2回目ですが，実際には年が明けてから書いている原稿は今回が初めてです。いまさらという感じですが，改めまして，明けましておめでとうございます。 さて，今回はページの応答時間について考えてみることにします。ページの応答時間とは，利用者がリンクをクリックしたり，URLをブラウザのアドレス欄に入力してから，実際にページのコンテンツがすべて表示されるまでにどれくらいかかるか，ということです。 8秒ルールをご存じですか まずは昔話からはじめます。皆さんは「8秒ルール」という，かつてよく使われていた言葉をご存じでしょうか。これは1999年にZona Research社というアメリカの調査会社がまとめた報告書の中に，「ECサイトのページの応答に8秒以上かかると，訪問者の1/3は利用するのをやめてしまう」と書かれていたことに基づいたもので，これ以上利用者を待たせ
アドビの“Apollo”に先行？――マイクロソフト、リッチなWeb/Windowsアプリをデザインする開発ツール“Microsoft Expression Studio”を発表
マイクロソフト(株)は17日、ウェブクリエイターやアプリケーションデザイナー向けのデザインツールスイート製品“Microsoft Expression Studio”と、Expression Studioを構成するアプリケーション4種類を発表した。第1弾となるウェブサイト構築ツール『Microsoft Expression Web』は、2月16日に発売予定。早期評価版等の無償ダウンロードは本日から開始している。 Expression Studioは、Windows Vistaで実装された新しいグラフィックスサブシステムである“Windows Presentation Foundation”(WPF)の技術をベースとした、ウェブアプリケーションやクライアントアプリケーションのデザインツール群である。WPFは従来のGDI(Graphics Device Interface)ベースのWindow
「3年後にデザイン・ツール市場でトップを獲る」マイクロソフトが「プロフェッショナル向け」Web制作ツールを発表
2007年1月17日，マイクロソフトはWebページ制作ソフトの新製品「Microsoft Expression Web」を2月16日から出荷開始すると発表した。価格は通常版が3万7800円（参考価格：以下同様）。Office FrontPageやVisual Studioのライセンスを持っているユーザー向けにアップグレード版を1万1800円で用意する。学生向けのアカデミック版も用意する。価格は9800円。さらに，競合他社の製品（Dreamweaver，Contribute，GoLive，ホームページ・ビルダー）を所有しているユーザー向けに「特別優待アップグレード版」を限定で1万本用意する。価格は1万1800円。 競合他社の製品と同様に，Webページ上にGUI部品をドラッグ＆ドロップすることで，Webページをデザインするツール。標準で，XHTMLとCSSに分離したコードを出力するので，Web
嫌いな入力フォーム
例えば「名前」の入力フォーム。 例のように「名前」全部を入れるところもあれば、姓と名を分けて入力させるところがあります。 これは当選商品を発送したり、DMを送ったりなど“送付”する場合に、姓と名の間に空白を入れたいために利用される場合が多いです。 あるいは、ログイン後のページで「○○（姓）さんようこそ」みたいに表示させるだけの目的だったりします。 でも入力する方にしてみれば、例1のように1個のテキストボックスであった方が楽なんですよね。 郵送目的がないサイト（例えばフリーメールのアドレス取るだけ、とか）でこんな名前入力のフォームを見ると、システム的に無駄なので、なんかハラたちます（いちおーシステム屋さんとして）。 これにあわせてフリガナを入力させるフォームがありますが、これは顧客管理を五十音順にしたいためだけ。 よって、フリガナに関しては性と名が分かれている必要は一切ないはずです
入力フォームのユーザビリティ&アクセシビリティ！
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
人力検索はてな - 入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構で
入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構です。
シニア層と入力フォームの物語 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
いろいろな方が「シニア層とウェブ操作」について書かれているので触発されて、現場に出て観察をする。 （今、まとめておりますので、まとめ終わったらトラックバックさせていただきます♪） まず、「なぜ入力間違いが多いのか」「なぜ半角、全角で引っかかるのか」という疑問を解明するために後ろからじーっと見る。「いやん、照れちゃう」なんていうかわいい言葉に胸キュンしながら、じーっとみる。 すると、多くの人は、画面を見ていないという、当たり前のことに気づく。 だから、全角だろうと半角だろうと、文字を打っている時はなんにも考えていない。ただ、目の前にあるキーボードを追っている。だから、だから、ふと顔を上げるとめちゃくちゃなものを（たとえば、フォトショップをポトショップと打っていたり、タヒチをヒタチと打っていたり（実話。なんでやねん！）、読みながらキーボードを打っているので、「し」と「ひ」の違いがわからなかった
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webで使えるUIインターフェースJavaScript （dhtmlxTabbar） - youmos
デザイン・ポリシーに関して参考にしている名言いくつか | IDEA*IDEA
スムーズなスライドショーを実現するスクリプト: Recently Ajax
