タグ

JavaScriptとusabilityに関するraimon49のブックマーク (26)

  • マウスのホイールによる入力エラーの可能性 (ユーザビリティ実践メモ)

    しかし、プルダウンでの項目選択を行う入力フォームにおいては、この便利さが逆効果になる場合があります。弊社のユーザビリティテスト(ユーザ行動観察調査)で観察された例をご紹介しましょう。 1ページの入力項目が多く、何度かスクロールしなければ「次へ」のボタンまでたどり着けない入力フォームを使うという作業で、ほとんどのユーザはホイールを使いながら入力を進めて行きました。 その中で、あるユーザがプルダウンの項目を選択し終え、ページをスクロールして次の項目へ入力を進めようとホイールを操作したところ、直前に入力したプルダウンにまだフォーカス(ハイライト)が当たった状態であったため、選択項目が別のものに変わりました。つまり、ホイール操作がページのスクロールではなく、プルダウン内の選択項目の移動に使われたということです。 ユーザはページがスクロールしないことにすぐ気づき、ページ内の空白部分をクリックしてプル

    raimon49
    raimon49 2008/03/20
    ひたすら入力項目が多くて長ったらしいフォームという時点で駄目だと思う。
  • CAPTCHAは愚策:江島健太郎 / Kenn's Clairvoyance - CNET Japan

    最近ようやく初級プログラマーを卒業できた手応えのようなものを感じており、いよいよコードを読み書きするのが楽しくてしょうがない段階になってまいりました。 こういうとき、Rubyは初心者にもやさしいけど、上達すればどこまでも上のステージが用意されているような、まるで自然言語のようななめらかさ・しなやかさがあって、ほれぼれとします。デザインの美しいものに触れているときには人間はこんなにも幸せになれるのか、という感じですね。ときに、今回のブログネタは、デザインの悪いものに出会うとこんなにも気分が悪くなるのか、という話なのですが。 なお、新プロジェクトではデザイナーのクリスの勧めでHamlを使うことにしたり、アーキテクトのダニーの設計でJavascriptにPublish-Subscribe型の(つまり一対多の)コールバックのフレームワークを作ってみたり、ReallySimpleHistoryを使い

    CAPTCHAは愚策:江島健太郎 / Kenn's Clairvoyance - CNET Japan
    raimon49
    raimon49 2008/02/29
    >これは100%サービス提供側の都合であって、ユーザにとってはどうでもいいことなのです。
  • ウノウラボ Unoh Labs: 画像の遅延読み込み

    GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

    ウノウラボ Unoh Labs: 画像の遅延読み込み
  • 第30回 JavaScriptの動作を軽くするための工夫:ITpro

    この記事は会員登録で続きをご覧いただけます申込は簡単3分! 今すぐ会員登録(無料) 会員の方はこちら 【この画面が表示された方限定】 会員登録(無料)で14日間有料記事が読み放題 ※14日間試読付き登録会員のお申し込みはお1人様1回限り

    第30回 JavaScriptの動作を軽くするための工夫:ITpro
    raimon49
    raimon49 2008/01/15
    最初に視界に入らない部分を遅延実行
  • 複数カテゴリ検索のインターフェース (ユーザビリティ実践メモ)

    Webサイトの検索機能で、「テキスト」と「画像」、「ニュース」と「製品情報」など、複数のカテゴリを切り替えて検索できる機能を提供しているものがあります。今回はその切替の方法について考えます。 ある金融情報サイトで、企業名でサイト内検索を行ったところ、「記事」カテゴリでの検索結果が0件と表示されました。 このとき、結果が0件だったことを認識したユーザは、ページ上部のタブをクリックして「株価」に切り替えました。このとき 自分がクリックしたタブが切り替わる(アクティブなタブが濃い色になる) という変化で、ユーザには自分が別のカテゴリに移動したことが伝わりました。 しかし、検索結果部分の見た目に変化がなかったため、ユーザは「どちらのカテゴリにも自分の求める情報がない」と判断して、このサイトを立ち去りました。 このページではタブ切り替えだけでは再検索されず、新しい画面で改めて「検索」ボタンをクリック

    raimon49
    raimon49 2007/12/25
    動的なヘルプテキストの見せ方。あまり動くのも鬱陶しがられそう。
  • フォームに吹き出しでヒントを出すjavascript「Hints.js」

    twitter facebook hatena google pocket フォームでは作成者と入力者の意図が一致しないときがあります。 またユーザビリティの観点からもわかりやすいフォーム制作が求められます。 Hints.jsを挿入するとフォームに吹き出しでヒントを出すことができます。 sponsors 使用方法 Hints.jsからHints.jsとjavascriptライブラリのmootools完全版?というcomplete.jsをダウンロードします。 これら2つをheadに埋め込みます。 <script type="text/javascript" src="http://yourdomain/complete.js"></script> >script type="text/javascript" src="http://yourdomain/Hints.js"></script>