プロトタイプ：AJAXで改良するフォーム入力
ここのところ、Google App Engine上でアプリを作っている私だが、iPhoneアプリとかを作り慣れている私としては、単純なHTMLページの組み合わせでUIを作るというのでは面白くない。そこで、サーバーがModel、クライアントがViewとControllerというアーキテクチャととことん追求してサービスを作っているのだが、そのためにはさまざまなUI部品を作らなければならず、そこにやたらと時間がかかっている。 始めた当初は、「今はオープンソースの時代だからUI部品もオープンなものを集めてくれば済む」と軽く思っていたのだが、実際に使おうとすると不必要に複雑だったり、汎用化されすぎていたりしてそのままでは使えないものが大半。結局のところ、そのまま使える品質のJavaScriptライブラリはjQueryのみで、それ以外は、（１）オープンなものを元にシンプルなものを作り直す、（２）スクラ
にせリンク - 小池啓仁 ヒロヒト応援ブログ By はてな
アンカー（A要素）で引数を記述すると、ブラウザのアドレス欄に引数が丸見えになりますね。 そんな時は、以下のようにフォームとJavaScriptを使い、にせリンクで対応すれば、hiddenで渡せるので、少しセキュリティが上がります。 ポイントは、HTTPメソッド（form要素のmethod属性）を『POST』にします。ここを『GET』にするとA要素と同じになってしまいます。 <html> <head> <title>サンプル</title> <script type="text/javascript"> function LinkLike(fm, target) { if (target != '') { document.forms[fm].target = target; } document.forms[fm].submit(); } </script> </head> <body>
新人に読ませたい、Flash制作で必要になってくる大事な考え方(1) | _level0 - KAYAC Front Engineer Blog
除夜の鐘のごとく連投しています、kijimaです。そろそろきつくなってきましたが止まりません。 さて、今回は新人Flasherがまずぶち当たるであろうポイントについて、「機能を実装するための考え方」という視点でまとめてみました。 新人Flasherを育成するにあたって、なにか参考になる部分があれば幸いです。 Flashコンテンツ作成にあたり、習得しなければならない考え方、汎用的ロジックが存在することについて Flashコンテンツの特性として、デザインや演出などの見た目は違えども、多くのFlashコンテンツに共通している機能がたくさんあります。代表的なものでは、以下に挙げた機能などですね。 ・プリローダーの実装 ・ポップアップウィンドウの表示、非表示 ・スクロールバーの操作 ・フォーム送信とそのエラー処理 ・ボタン操作を一時的に全無効にさせる処理 ・ページャー機能 そして、上で挙げたような機
新鮮さ vs. 慣れ： デザインの見直しはどのくらい積極的に行うべきか
ユーザーは変化を嫌う。したがって、彼らが慣れ親しんでいるデザインを継続して、それを徐々に進化させていく方が良い場合が多い。しかしながら、長い目で見れば、漸進主義を取ることによって一貫性は徐々に失われ、その結果、新たなUIアーキテクチャが必要になってくる。 Fresh vs. Familiar: How Aggressively to Redesign by Jakob Nielsen on September 21, 2009 デザインチームのメンバー（あるいは彼らの上司）がこう言うのを耳にすることは多い。「新鮮なデザインが必要なんだ」。こうしたきっかけによって始められたデザイン変更プロジェクトは、そもそもの基本の部分が間違っている場合が多く、ゴールや戦略の設定も誤りがちである。 よくあるのは、新しいデザインが前よりも悪いデザインになってしまうことである。というのも、単純に言って、それは新
「一般の人」が迷わないウェブサイトの4つの守るべきポイント - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
アイトラッキングを導入し、遊び始めて早半年。 色々なECサイトさんにお越しいただき、実験（遊び）を重ねて参りました。 弊社のお得意なシニア層だけではなく、大学生から50歳代くらいまでの比較的若い方を調査対象にしていたのですが、ネットで遊び倒していない大学生などは「あいや、シニアか」と思うような行動も多く、実は、シニア層と学生の遊び倒していない層は学習能力の差はあるものの、行動には大きな差はないのではと、思う日々。 大学生もケータイがメインになってきているので、PCで「遊ぶ」ということをしない。 確かに、外で友達がたくさんいればパソコンってあまり使わなくてもいい。（レポートと、簡単な調べものくらい）ということで、学生さんを見ていても、意外とビックリなことが多かったです。 その内容については不定期にサイトに挙げているのですが、今日は全てのサイトに共通して言いたい「サイト運営なら以下の事は最低限
ユーザーインターフェースの検証データを公開している「ABtests.com」は、ウェブマスター必見事例の宝庫 - Feel Like A Fallinstar
Home > UI（インターフェース） > ユーザーインターフェースの検証データを公開している「ABtests.com」は、ウェブマスター必見事例の宝庫 Older ウェブの位置づけが上がるにつれ、数値的な検証がどんどん進んでいます。 ただ、その割りにどんな方法で数字が上がった、という具体的な事例がまだまだ世の中に出回っていないのも事実。 そんな中、A/Bテストの特化してインターフェースの検証事例を公開しているサイトがABtests.com」です。 インターフェースの比較検証結果が数値でわかる http://www.abtests.com/ ABtests.comの中身は、はまさに読んでそのまんまの内容。 トップページから事例が豊富に掲載されています。 例えば・・・ このフォーム、左と右でどちらが通過率が良いと思いますか？ 答えはこちらのページにて。 なかなかここまで数字で結果を出してくれ
自治体Webサイトはなぜ使いにくいのか? 電子政府にも利用者視点の標準化を - Manaboo 電子政府・電子申請コラム
自治体Webサイトはなぜ使いにくいのか?―“ユニバーサルメニュー”による電子自治体・電子政府の新しい情報発信 安井 秀行 時事通信出版局 このアイテムの詳細を見る NPO団体「アスコエ - 私の声で明日を変える」代表の安井氏による本書は、「情報コンテンツの標準化」という試みである「ユニバーサル・メニュー」を提案しています。 標準化と言うと、業務やデータといった行政の視点によるものが多いのですが、住民や利用者の視点から標準化を進めることは、電子政府だけでなく行政改革全般において有効です。例えば、「窓口」や「サービス」の標準化など。。 利用者視点の標準化を進めることで、それを支える内部の事務処理等も標準化せざるを得なくなるので、結果として業務全体の標準化が進むというものです。 利用者視点の標準化は、最低限のサービス基準として機能します。 楽天などのオンラインショッピングモールでは、こうした利用
第10回 今すぐできる！ユーザビリティを向上させるフォーム操作実践（2）：プラグインを使わずにバリデーションを実装 | gihyo.jp
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） 第10回今すぐできる！ユーザビリティを向上させるフォーム操作実践（2）：プラグインを使わずにバリデーションを実装 バリデーションをプラグインを使わずに実装する フォームは主にコンバージョンに直結する場合が多いと思いますので、ユーザビリティを向上させる、つまりユーザーに最後まで入力してもらえるようなフォーム作りはとても重要です。 どのような機能を持って使いやすくするのか、にはそのサイト自体のターゲットユーザー層を認識した上で盛り込む必要がありますが、どんな方法で使いやすくできるのかは知っておいて損はありません。 前回は、ラベル要素を利用して、直感的に分かりやすくする方法を紹介しましたが、今回・次回にかけては少し突っ込んでJavaScriptで行うバリデーション（※1）を実装してみたいと思います。 入力された文字列をチェックす
入力フォームでの「郵便番号」の意外な盲点 (ユーザビリティ実践メモ)
登録や申し込みページの入力フォームにおいて、郵便番号を入力すると住所欄が自動入力される機能は、ユーザの入力負荷を軽減する便利な機能です。実はこの機能、正しく郵便番号を入力してもある条件下ではエラーとなってしまうことがあることをご存知でしょうか。今回は入力フォームでの「郵便番号」の意外な盲点についてご紹介します。 ただ、「会社」で用いられている郵便番号は一般的な郵便番号と異なる場合があります。 郵便番号は、特定の企業（１日の配達量が一定量を超えるような事業所）に対して「大口事業所個別番号」という事業者向けの郵便番号を割り当てており、該当する企業はこの割り当てられた郵便番号を使用しています。 しかし、郵便番号から「住所を自動入力する機能」が参照している郵便番号は必ずしもこの「大口事業所個別番号」に対応しているわけではありません。入力された郵便番号が対応していない「大口事業所個別番号」であった場
ユーザビリティ向上に。デフォルト値を薄い文字で表示する·jQuery Watermark MOONGIFT
jQuery WatermarkはjQuery用のオープンソース・ソフトウェア。最近のWebサイトでは登録フォームにどういった文字を入力すべきかを提示するケースが多くなっている。例えばユーザIDと書かれていれば何を入力すれば良いか分かりやすい。他にも検索ボックスにSearch...と書かれているのもよく見かける。 予め文字を入力してユーザビリティを向上する そんなテキスト入力を補助する効果を実現するのがjQuery Watermarkだ。名前の通りjQueryプラグインなので、jQueryを使った開発の際にはぜひ使ってみたいライブラリだ。テキストボックスの他、テキストエリアに対しても適用できる。 テキストボックスに対して利用する他、パスワードボックスでも通常のテキストを表示しつつマウスがフォーカスしたら内容を消すこともできる。さらにSafari用の検索ボックスへのデフォルト表示にも対応して
jQueryでバリデーション付きメールフォームを作ろう (1/3)
今回はjQueryを使って、「問い合わせフォーム」にバリデーション（検証）機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか？」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス（確認）」に入力されたテキストが同じか――をチェックします。
やってしまいがちなユーザビリティのミスとその解決方法
ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」:phpspot開発日誌
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの１行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法１ --> <script> $(document).ready(functio
経済産業省オープンガバメント推進ブログ
なかなか書く時間がなくて、ちょっと遅くなりましたが取り組みの報告です。 アイディアボックスで「行政業務プロセス改革とペーパーレス化」としてご提案いただいたペーパーレス会議のアイデアを、7/20のCIO補佐官等連絡会議で提案しました。 （CIO補佐官等連絡会議とは） ここで提案した趣旨は、以下の通りです。 ・府省横断の会議は、ほとんど紙で行われている ・アイディアボックスで指摘されたように、会議室に大量の紙が持ち込まれている ・会議準備のコピーや配布が大変 ・CIO補佐官等連絡会議は、民間からの外部専門家が中心であり、しかもIT分野が専門であるので導入が最も容易 ・毎回会議前にCIO補佐官専用サイトで査読用に資料のダウンロードが可能になる ・資料の容量は大量ではない ・会議終了後しばらくして公開される資料であり、セキュリティレベルが著しく高いものではない（ペーパーレスにしなくても紙で持ち歩い
インターネットにおける動画プロモーションで抑えておきたい要点 - WEB人
インターネットにおける動画プロモーションで抑えておきたい要点 公開：2009年11月24日 00:46, 更新：2009年11月24日 12:20 トラックバック(0) コメント(0) 動画サイトの隆盛や手軽に撮影できるカメラの普及によって、動画による表現やPRが個人・企業を問わず広まっています。ただ漠然と撮影してアップロードして大した反応を得られないどころか不評を買って失敗してしまう、なんてことにならないために、インターネット上で動画プロモーションをするための要点を前もって理解しておきましょう。 ウェブにおける動画の注意すべき特性 あらためて強調するまでもなく、時間は有限であり、特に先進国における時間の価値は「時間管理術」というだけで本が書かれて売れちゃうくらい大きな要素です。そして時間という視点から言うと、動画というメディアはユーザーを一方的に一定時間拘束します。 ウェブ上で閲覧する
ユーザ体験向上に役立つフォームのバリデーションスクリプトいろいろ - Feel Like A Fallinstar
エラーを減らし、より快適にフォームの入力を行ってもらうのは、コンバージョンを持つウェブサイトにとっての必須課題。 根本的にはインターフェース設計やエラー画面の設計、あるいはフォーム前の意欲醸成が大事なのですが、最近ではバリデーション絡みのJavaScriptのライブラリがかなり整理されてきました。 あんまりこのブログでスクリプト紹介とかはやらないのですが、たまたま丁度dzineblogで紹介があったので、備忘録的に。 JQueryを使ったスクリプト ■ A jQuery inline form validation 画像無しで利用できるスクリプトです。 ※CSS3を使っているので、ブラウザによっては角丸などのイフェクトの見え方が違ってしまうのがもったいないです。 ■ Valid8 - An input field validation plugin for Jquery デモページをち
「お待たせしない」Webサイトでの接客 (ユーザビリティ実践メモ)
1990年代、電話回線やISDNを使ったダイヤルアップ接続（低速・時間課金）でインターネットに接続することが一般的だった頃は、Webサイトの利用は「時間との勝負」という側面がありました。そのためWebサイトを制作する際も、htmlファイルや画像などを含めたページ当たりのサイズを小さくしてページの表示速度を高め、ユーザを待たせないことが重要視されていました。 ■人間の思考とシステムの反応速度 人間の操作に対するシステムの反応速度については、一般的に次のような関係が見られると言われています。 （参考：「Response Times: The Three Important Limits」 Useit.com（英語）、「10の累乗： ユーザーエクスペリエンスにおける時間スケール」 Jakob NielsenのAlertbox（日本語）） 0.1秒：ユーザは、自分がシステムを「直接」操作していると
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.userside.jp/tool/index.html
https://jp.techcrunch.com/2009/12/17/20091216google-browser-size/
http://browsersize.googlelabs.com/