Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES

笑顔を創りたいＷｅｂ屋の日常 Ｗｅｂ業界からひょんなことで専門学校の先生に。そしてまたＷｅｂ現場に戻ったＷｅｄディレクターのブログ。情報デザインやＷｅｂの勉強をしています。 昨日「太田光の私が総理大臣になったら」を観ていました。 マニフェストは「選挙カーや選挙ポスターを禁止します」 正直、大賛成。ま、ポスターぐらいはいいんじゃないのと思いますが。 広告みたいなもんだから。 政治家の大半が反対で、賛成派にいた政治家も結局「もっと自由にすべきだ」という、そもそもそれは超反対派なんじゃないかみたいな意見の人で笑いましたね。 山本一太さん 大村秀章さん 原口一博さん 保坂展人さん うえまつ恵美子さん 下地 幹郎さん いったいこの人たちは何を言ってるのかと思いましたよ。 「選挙の時は、4年に一回ぐらいなので我慢して欲しい」 「伝えたいことがたくさんあるんですよ」 「選挙ってのはお祭りだから」（ガッツ

Chris Heilmanによる“Graceful degradation versus progressive enhancement”という記事について、前回は概要とその意義について紹介しました。今回は後半にあるの例をもとに、どのように実践していくのかを考えてみたいと思います。 「印刷する」というリンク オンラインショッピングの決済画面には、印刷して手元に保管したいというニーズがあるからか「印刷する」といったリンクやボタンが設けられています。クリックしたときに印刷用ページが現れるものもありますが、記事では印刷ダイアログが現れる簡単なものを取り上げています。 このようなリンクは、JavaScriptにより実現されています。 <p id="printthis"> <a href="javascript:windowprint()">Print this page</a> </p> しかしな

久しぶりにユーザビリティねたを続けて。 企業のサイト特有の事情として、「ビジネス制約の関係から（載せたくもないものを）画面に載せないといけない」ことが多くあります。 具体的には 事情を知らない誰か（※詳細はご想像ください）が、「これ入れないといけないだろう」と言う → そういう人に限って、最終決定の権限を持っていたりして、、、 利用規約などの説明を延々行わなければならない サービス紹介の過程で、どうしても自社が弱いスペックも見せざるを得ない といったところでしょうか。 そこを何とかうまくやりくりするのも画面設計のスキル。 見せたいものと見せたくないものを両立させている画面を今日は紹介したいと思います。 1. 右カラムを有効活用する Doda転職サポートお申し込みフォームの例です。 「利用規約などの説明を延々行わなければならない」を綺麗に回避したページ。 通常1カラムで組むフォーム部分の右側

ナビゲーションとは何か、そしてそれは「分離」すべきなのか (agenda)が抽象的すぎるので補足。まずは最初の段落から。 しかしながら、製作者側はユーザーの目的を正確に知ることができない。知っているのはユーザーがそのハイパーテキストノードを閲覧しているという事実だけであり、そこから目的地を推測するしかない。この時推測される目的地は、正にそのハイパーテキストノードと深く関係しているはずだ。そして、そのようなリソースへのリンクを提供することは、ハイパーテキストシステムにおける各ノードの主要な役割である。真のナビゲーションに接近する方法として、製作者側が取れる、あるいは取るべき手段は、そのハイパーテキストノードを中心としたリンクを提供してやることだけである。私はこのようなリンクを論理的なリンクと呼んでおり、殊更にナビゲーションと呼んでコンテンツと区別しない。何故なら、論理的なリンクはハイパーテキ

追記の前に、ブックマークコメントに関して少し。 はてなブックマーク - vantguarde - 2009年1月31日より。 何故なら、論理的なリンクはハイパーテキストノードにとってコンテンツと同義といっても過言ではないからだ。 コンテキストから対象リソースへの関係を明記すること/明記したもの、ってことかしら。 ユーザーという人間に対してreasonableなリンクであるということであって、この文脈ではメタデータが付加されているかどうかが本質でなく、そもそもハイパーテキスト記述言語「HTML」が未熟なので、豊富な関係性をソフトウェアに伝えることはできない。 はてなブックマーク - Metalog（メタログ） - 2009年1月31日より。 WWW全体を俯瞰するような視点に基づいた総合的なナビゲーション WWWブラウザがWWWに自律的にアクセスし、その文書のトピックがWWWでどうあるかリンク

これまで実践メモでは、ウェブライティングの基礎など、ユーザにとって読みやすい文章表現についていくつか考察してきました。 ウェブライティングの記事一覧 今回は、訴求ポイントをFAQ形式で表現することで、ユーザに内容まで読まれやすくする方法をご紹介します。 このサービスでは、ただ子どもを預かるだけでなく、子どもの発達を考えたサービスを行っています。しかし、こうしたこだわりの説明文をコンパクトにすることは難しく、見出しでも曖昧な表現になってしまいがちです。 このページの場合、改善前はユーザは見出し以下の文章まで読まず、独自のサービスを訴求できませんでした。 そこで、特長の説明をQA形式にしたところ、ユーザは文章部分まで読むようになり、他社と違うサービス内容を理解するようになりました。 こういった、QA形式の文章がよく読まれるという行動は、弊社のユーザ行動観察調査の中で多く確認されています。 この

ちょっと今体調悪くして入院中なんですが、有り余る時間のおかげで（σ(^^)にしては）早々と読了することができました。 タイトルの通り、近い未来に情報システムがより自動的でインタラクティブになった際、どういうユーザインターフェイス、エクスペリエンスが重要なるのかを語った本です。かなり車系の話題が多いので、それ系の技術者の方には色々と感じるものがあるのではないでしょうか。 「誰のためのデザイン」のように実用的なキーワードがたくさんゲットできるというよりは、前作「エモーショナルデザイン」のように、すごく大事なキーコンセプトを１つ語るために様々な事例や架空のお話を交えてるって印象です。 そのキーコンセプトとは、どうして高度に自動化されたシステムとヒトは上手くつきあえないのか、ということに関するものです。カーナビが嫌いで使わない人のエピソードが一番わかりやすかった気がします。曰く、カーナビの提示する

公開: 2024年3月9日20時35分頃 「会員登録のメールアドレス入力、確認の2回目は「コピペ」54.5％ (internet.watch.impress.co.jp)」。 パスワードの場合、入力のエコーバックがありませんから正しく入力できているかどうか分かりません。タイプミスしていても確認する術がありませんので、2回入力することでタイプミスによる失敗を防ごうとしているわけです。 しかし、メールアドレスは入力中にふつうに見えているわけでして。しかも、ふつうは確認画面でもう一回表示されたりする訳なのでして。目で見て確認する機会何回あるんだよ……というわけで、2回も入力させられる意味が分からないですね。 ……まあ、メールアドレスの入力間違いをされて困るというのは分かるのですが……。だったら、確認画面で大きめに表示して「メールアドレスの入力間違いが増えています! きちんと確認してください!」と

不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 今日はちょっとショックなことがありました。 昔、僕がペルソナとシナリオを用いて要件を定義したWebサイトがようやくリニューアルされて公開されていたのを見つけたんですけど、こりゃ、ペルソナやシナリオを使ってモデル化したことがほとんど設計に反映されてないなと感じたからです。 ペルソナを用いるゴールダイレクテッドデザインのメリットは、利用者のゴールとコンテキストを理解し、また利用者の脳内モデルを把握することで、利用者の使いやすいデザインを実現することですが、今日見たサイトは、機能要件／コンテンツ要件のレベルはユーザーの要求は満たしているものの（それは僕がやったのでできてないとおかしい）、情報構造化や構造を具現化する視覚表現のレベルではまったくユーザー要求を考慮したものとは思えない

不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 多くの製品は生活や仕事で使われる道具です。 生活や仕事のうえで様々な役割（母親、プロジェクトリーダー、飲み会の幹事、etc.）を担う人びとが、それぞれの役割に応じた作業・仕事を行うために用いるものが道具です。 ある意味、人間は生活の場、仕事の場で、特定の役割を担うことで社会的な生き物として存在を認められます（つまり赤の他人にも理解できるようになる）。それぞれの役割には、役割に応じた作業が義務付けられています。その義務をこなすことができなければ、場合によっては、その役割としては失格の烙印をおされかねません。 失格の烙印をまぬがれるためにも、自分に与えられた役割を全うするためにも、人は自分に割り当てられた作業を完遂できるよう、作業のある部分を道具にたよるのです。 ですから、道具

メールを使ったBtoCコミュニケーションとして、多くのユーザに対して認知・集客を目的とするメールマガジンが一般的に挙げられます。 一方、比較的、対象人数が少ないセミナー・説明会の応募受付や面接など1対1のコミュニケーションの場合、企業側から送付したメールに対してユーザに「メールで返信を求める」形が考えられます。 今回は、弊社のユーザビリティテスト（ユーザ行動観察）から得られた知見から、「より返信しやすいメール」の作り方を考えてみましょう。 ある企業では、自社サイトからエントリーした採用希望者に対し、個別にメールを送り、１次面接のスケジュール調整を行っていました。 そこで、それに近い状況をテストするため、複数のパターンのメールを用意し、就職活動の中でユーザがそれらのメールを受け取ったという想定で行動観察を行いました。 まず、「メールを開封するかどうか」という場面では、本連載でも以前ご紹介した

ウェブページの文章を読むときは「上から下へリニアに」というスタイルが一般的というか、恐らく99.9％がそうだと思う。マルチカラムで読んだ人がその慣性から引き剥がされて不快感を覚えたとしても不思議はない。視線を下への移動だけでなく上にも移動させるという、いつもと違うことをしなければならないというのは、それだけでユーザビリティ的に問題を引き起こす要因となり得るだろう。しかし、必要な「技術」は視線を移動させることだけだ。スクロールは必要ないし、マウス操作も必要ない。マルチカラムに関して生じているウェブ・ユーザビリティ的問題は、結局のところ主観的満足度の低下だけだと私は想像している。私が主観的満足度よりも重視しているのは視線の移動を失敗したりせずに「内容をきちんと読めたか」、そして「どのくらいのスピードで読めたか」。この2点。もともとスクロールが発生しないほどの短い文章ではマルチカラムが敗北するが