タグ

Web制作とUsabilityに関するpmakinoのブックマーク (667)

  • パスワードは隠すべきか? | Accessible & Usable

    公開日 : 2009年7月26日 (2024年3月23日 更新) カテゴリー : ユーザビリティ ウェブユーザビリティの第一人者である Jacob Nielsen (ヤコブ・ニールセン) 氏が、自身のブログ記事「Alertbox」の中で、「Stop Password Masking」という興味深い問題提起をしています。通常、ウェブサイトなどでパスワードを入力すると、画面には入力された文字列が表示されず、代わりに文字の数だけ「黒い点」が表示されます。こうした状況は、「フィードバックをユーザーに提供し、システムの状態を視覚化する」という基的なユーザビリティ原則に反している、というのです。 さらにニールセン氏は、パスワードを隠すユーザーインターフェース (UI) について、以下のように否定的な見解を述べています。 画面上でパスワード表示を隠したところで、当にスキルのある輩は、入力しているユー

    パスワードは隠すべきか? | Accessible & Usable
  • アスコエ - 私の声で明日を変える > TOP

    2014.06.25 オフィス移転・電話番号等変更のお知らせ(2014年6月30日より) 2014.03.25 UM導入事例:佐賀県伊万里市サイトリニューアル 2014.03.25 UM活用事例:「子育てタウンプロジェクト」 2013.07.05 ニュースリリース:G8にて「復旧復興支援ナビ」の取り組みが紹介されました 2013.07.04 ニュースリリース:東日大震災復興支援財団の支援で「復旧復興支援ナビ」拡充 2012.05.28 アスコエのWebサイト評価「UMカバレッジ診断」のご紹介 上記より過去のお知らせ 「被災者が使える行政サービス」のポータルサイト 自治体サイトの利用者・担当者・開発者を結ぶ アスコエのtwitter(@asukoe_voice) ブログ「アスコエのコエ」

  • 日付や時刻の十の位と一の位を別々に選ばせるフォームは劣悪

    日付や時刻の十の位と一の位を別々に選ばせるフォームは劣悪 2009-07-29-3 [Design] カレンダーの日付や時間を選ぶフォームで、 十の位と一の位を別々に選ぶタイプのやつは、 繰り上がるときにものすごく面倒。 例えば、29日になっているやつを30日にしたい場合、 2→3, 9→0 の二回の操作が必要になる。 前述のフォームは某乗り換え案内サービスのやつ。 下記のものはYahoo!の乗り換え案内のフォーム。 時刻は別々なのでダメダメだけど、日付はこっちの方がマシ。 願わくば、日付の後に「次の日」ボタンがあればいいかな(時刻のところには「▼(次)」と「▲(前)」がある)。 乗り換え案内だと次の日のことを調べる場合が多いので。

    日付や時刻の十の位と一の位を別々に選ばせるフォームは劣悪
  • ユーザビリティの専門知識に対する敬意を育てる

    ユーザビリティの敵達は「専門家の意見が一致していない」という理由で主張し、ユーザを擁護する者の専門知識を難なく無視し、彼らが個人的に好きなデザインなら何であれ推進する。 Building Respect for Usability Expertise by Jakob Nielsen on July 6, 2009 よくある問題について、ある読者が私にアドバイスを求め、以下のようなメッセージを送ってきた: 対象分野の専門家と、彼らのコンテンツがウェブの読者のニーズにいかに合ってないかについて、職場で激しい口論をした後、今日、あなたの記事(デザインアドバイスの根拠としての、推測 vs. データ)を読みました。 私は小規模な州政府機関のウェブサイト管理者として、コンテンツの所有者の主観的な意見にいつもフラストレーションを感じています。彼らは私の提案を断固として拒否しつつ、私を非難するのです:

    ユーザビリティの専門知識に対する敬意を育てる
  • Ajax » jQuery plugin » フォーム要素の制御 | PHP & JavaScript Room

    テキスト入力欄に日付、電話番号、郵便番号など指定したフォーマットで入力させるように入力制御を行うjQueryプラグイン。 設置イメージ Maked Input Pluginの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-L

  • 今だからこそ、「軽量なウェブサイト」を作ることが重要、というお話。 - Feel Like A Fallinstar

    最近はJavaScriptのライブラリ整備や、大きなモニターが増えたせいもあり、リッチな見た目のサイトが増えてきたなーって思います。 でも、その一方で、それ以上に増えている様相なのが「低速度回線」のユーザ。 今だからこそ、技術をきちんと理解して軽いウェブサイトを作るべきなんじゃないか、というお話を少し。 増えているのは、フレッツよりも「持ち歩きPC」「スマートフォン」のアクセス これは今木が運営する、とあるポータルサイトの利用者の接続速度の変化のデータです。 月間PVが大体150,000位で、割と昔からあるタイプのまじめなコンテンツのサイト。携帯は対応していませんし、IT系とかに偏ったコンテンツもありません。 見ると分かる傾向は ダイヤルアップ、実はあまり減っていない ケーブルはそこまで延びていない Unknownが年々増えている ADSL / 光(T1)も割合としてはむしろ減少傾向 グラ

  • このブログの記事の印刷用ページを作った

    このブログの記事の印刷用ページを作った 2009-07-15-3 [ThisSite][Programming] このブログの個別記事ページですが、ブラウザによってはきれいに印刷できないことがありました。 そこで、内容部分以外は削除したミニマムHTMLを生成するプログラムを書き、それによりこのブログの記事の印刷用ページを作りました。 記事URL「http://chalow.net/2009-07-15-1.html」に対し「http://chalow.net/p/2009-07-15-1.html」というURLが印刷用ページです。 各記事ページにリンクを貼りました。 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ どうぞご利用ください。 よろしくお願いします。 § 印刷用ページの生成には「Webページを読み込んで何か処理して表示するラッパーCGIのテンプレート」[2008-11-04-2]

    このブログの記事の印刷用ページを作った
  • ネットリサーチを正しく利用するための3つのポイント (ユーザビリティ実践メモ)

    ネットリサーチは従来のアンケートと比較して低コストかつ短期間で定量データを獲得できる有益な手段のひとつです。 しかし、その手軽さが逆に誤った結果を導き出してしまう危険性があることには注意が必要です。 ネットリサーチでは、インタビュー調査のように質問者が同席していないため、回答時の態度が見えず、無責任に回答しやすいという特徴があります。 また、調査会社に登録したモニターを対象にアンケートを行う場合、ユーザ(モニター)はアンケートに回答するだけでポイントや謝礼を獲得できるので、アンケートに「正しく」回答するインセンティブが小さく、適当に回答してしまうことがあるようです。 今回はネットリサーチにおいて回答の正確性を高める方法を3つ紹介します。 対応策1. ダミーの回答項目を用意する 選択肢の中に現実には有り得ない項目を紛れ込ませ、その項目をチェックしたユーザを排除する方法です。下の例をご覧くださ

  • ビジネスマンの職業病!? 腱鞘炎を解消する

    自分でも気がつかないうちになっていることもある腱鞘炎、実は同じように手や指を使っていても、腱鞘炎になりにくい人もいるって知っていましたか?痛みが出る部位への負担のかかり方にもよりますが、筋肉疲労の回復の度合いや姿勢も関わっているので、日頃からストレッチやリラックスできる時間を持てている人は自然と予防ができているのです。 生活習慣などで患ってしまう腱鞘炎 手や指の病気であるので、姿勢は関係ないように思われがちな腱鞘炎ですが、姿勢の悪さも影響しているのです。最近多いのは机に向かう時の姿勢。仕事やネットに集中すると気づけば何時間も座ったままだったり、どんどん姿勢が崩れていることってありませんか?足を組んでいたり、背になっていたり、また机とイスの高さのバランスが悪いなど、長時間の机に向かった作業で体を酷使していることは結構あるのです。その負担が無意識のうちにマウスやキーボードを触る時の手首や指に

  • デザインアドバイスの根拠としての、推測 vs. データ

    ごくごく小規模な経験的な事実(例えば、観察対象のユーザが2人)からでも、そこから得られる事実はUIデザインに対して、正しい判断ができる確率を大きく高めてくれる。 Guesses vs. Data as Basis for Design Recommendations by Jakob Nielsen on June 8, 2009 ユーザがフォントサイズを調節するのを支援すべきか、それとも、ビルトインされているブラウザのコマンドにそのまま頼るか。これはインタラクションデザイナーのディスカッショングループに、最近、投稿されていた質問である。(この後で発言内容を分析している個人の匿名性を保護するため、グループ名は記さないこととする。) この質問に対して12人が返答していたが、ほとんどの人は単に自分自身の好みから意見を言っていた。それが別に悪いという訳ではない。人間というのは誰もが自分自身の好み

    デザインアドバイスの根拠としての、推測 vs. データ
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • リアルタイム入力チェックのJavaScriptライブラリ·yav MOONGIFT

    時々、Webサイトで入力している内容をその場で判定するものがある。入力必須の項目やメールアドレス、パスワードの一致などでエラーがあればすぐに表示してくれるので、送信してから修正すると言った二度手間がなくて便利だ。 Webブラウザ上で入力チェックを実行する サーバ側でも入力チェックは行うが、ユーザビリティを考えるとオンラインでも検証したい。そんな検証システムを簡単に作れるのがyavだ。 今回紹介するオープンソース・ソフトウェアはyav、JavaScriptの入力チェックライブラリだ。 yavは入力必須はもちろん、数字のみや文字のみといったチェックもできる。メールや日付、文字の長さなどといったフォーマットによるチェックや、「and」と「or」による他の項目の値によって入力チェック内容を変更する機能もある。多言語にも対応している。 設定はこのようになる 入力フォーマットを規定することも可能で、予

    リアルタイム入力チェックのJavaScriptライブラリ·yav MOONGIFT
  • MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介

    入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。 jQueryを使ってWebブラウザ上で入力チェック 動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。 今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。 jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非

    MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介
  • http://moto-mono.net/2009/06/02/tangohokanjs.html

  • アイトラッキングから検証した、使いやすいフォームの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) ラベルは左寄せにすると、よ

  • Webページの情報を共有してもらうための3つのポイント (ユーザビリティ実践メモ)

    複数の人が関わるシナリオを意識しよう Webサイトを訪れたユーザが、商品・サービスの購入など何らかの意志決定を行う際、自分ひとりだけの判断で決めず、他の人と相談してから決めるという場合は、実はかなり多いものです。 弊社のユーザ行動観察調査では、以下のような例が見られました。 幹事役の数名が、各自で会場候補を検索各自が自分の選んだいくつかの候補を持ち寄り、どの会場にするか相談決定 【例2.企業におけるIT製品の導入】 部門の担当者が、おおまかな要求仕様を決め、メーカーサイトや販売店サイトを検索性能や価格などを一覧できる比較表を作り、IT管理者などに相談IT管理者がWebサイトを閲覧する場合もあります)絞り込んだ候補について決裁文書を作り、上司相談決定 【例3.住宅ローンの借り換え】 が金融機関サイトや比較サイトで情報収集夫に相談して候補を絞り込む絞り込んだ金融機関の店舗を夫婦で訪れ、担

  • デザイナー・コーダー必見!使えるform関連jQueryプラグインの数々 | バシャログ。

    こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに!かつ操作性を向上!できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック(バリデーション)が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日語用は別途作成し、使用することが可能です。 jQuery

    デザイナー・コーダー必見!使えるform関連jQueryプラグインの数々 | バシャログ。
  • 情報アーキテクチャの間違い・トップ10

    ウェブサイトは、その構造とナビゲーションシステムとが互いに支え合っていなければならない。検索システムとも結びついていなければならない。サブサイトに至るまで一体化していなければならない。複雑で、一貫性が無く、選択肢が隠れていて、UIが扱いにくければ、ユーザーは必要なものを見つけられない。 Top-10 Information Architecture (IA) Mistakes by Jakob Nielsen on May 11, 2009 ウェブサイトで思いどおりの操作がまったくできない原因の大半は、情報アーキテクチャの出来の悪さにある。これは、ウェブユーザビリティにからむ他の問題点に比べてなかなか改善しにくい。その理由を解き明かすため、腫れた親指のようにずっと前から目についていた間違いを10個洗い出してみた。これを全部合わせれば、ウェブサイトは毎年何十億ドルも無駄にしていることになる。

    情報アーキテクチャの間違い・トップ10
  • アイトラッキングを使ってみた(1/2)- @IT

    Zenコンサルティングユニット 柳沼 孝行 2009/5/25 ユーザーはどのようにWebページを閲覧しているのか?@ITのページを対象にアイトラッキングで調査してみました 「ユーザー視点」とは何か? Webサイト構築や、デザインに当たって重要視されるのが「ユーザーの視点」です。 Webに関わる多くの方にとって、「ユーザー視点」に立ったWebサイトの改善策を求められる機会が増えているのではないでしょうか。特定Webページにたどり着いた数はPVという指標で捉えられますが、ユーザーがWebサイトをどのように閲覧し、クリックに至ったのか、目の動線からもWebの改善ポイントが導けます。この記事では、アイトラックという技術を使って、ユーザーの閲覧動向を調査していきます。 「ユーザー」は、バナー広告を見ない? そこでまず、2006年に英etreが行った、Virgin Megastoresオンラインサイ

  • HITACHI : ニュースリリース : Webユーザビリティを評価するツールを開発

    日立製作所(執行役社長:庄山 悦彦)は、このたび、低コストで容易にWebのユーザビリティ(使いやすさ)上の問題点を把握できる評価ツールを開発しました。 今回開発したツールは、バーチャルキャラクターが、Webページの使いやすさに関するユーザの声を集める役割を担い、ユーザの発言の促進を図ったり、ユーザの行動に即した質問をタイミングよく提示することによって、より有効なユーザの反応やコメントを収集することが可能になります。また、アクセスログのデータを同時に収集しており、定量的な分析も行えます。 ツールは、プロキシサーバ内に組み込むことを想定しており、評価対象サイトの改変は不要です。また、ユーザビリティの専門テスターが不要であることから、従来に比べ、低コストで、容易にユーザビリティ評価を行うことができます。 当社では、ツールを適用することによって、Webサイト構築時にユーザビリティ評価改善プロセ