タグ

webとuiに関するko-ya-maのブックマーク (47)

  • ページの端っこに常に表示させるボタン実装用jQueryプラグイン「EdgeButton」:phpspot開発日誌

    Plugins | jQuery Plugins ページの端っこに常に表示させるボタン実装用jQueryプラグイン「EdgeButton」。 サイト巡回しているとたまに見かける、ブラウザの端っこについている次のようなボタンを簡単に実装できるjQueryプラグインです。 押下時に「ページの上にスクロールさせる」機能を実装できユーザビリティ的には上げられそうな場面がありそうです。 利用法としては、次のような感じです。 $(element).edgeButton({ buttonText: "ボタンのテキスト", buttonPrefix: "ボタンのプレフィックス", buttonDirection: "ボタンの配置位置 right, left で指定", buttonFunction: "ボタン押下時の動作指定" }); 自前でやるとなると、ボタンを配置して固定してクリック時にスクロールして

  • 【実験】ページは本当にスクロールされない?アイトラッキングで異性一覧のページを見てみた。 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)

    異性の写真一覧を見た時、どういう風に視線が動くのか、一体どこを見られているのか、気になりませんか? 突然、私は気になりました。 気になったら行動に移したい。なんせ、私はアイトラッカー(視線を追跡する機械)という最高なおもちゃを持っておる!(私のじゃなくて、会社のですが) →アイトラッキングについてはこちらから 思い立ったら吉日。ということで、twitterを通じて、写真提供を依頼し、男性・女性の写真を収集!(結局女性は大学ミスコンを利用させて頂きました。) そして、一覧ウェブページを作成し、男女4名に「好みの異性を探して下さい」と依頼し、実験開始!微妙に男性一覧に力が入っているのは私の力の入れ具合の差です。(ちなみに、男性は大学生ですが、女性はアラサー(30歳前後)の被験者です。全員右利き。利き目までは調べず) さて、視線はどう動くのか、その視線に何か特徴はあるのか? その結果(といっても

    【実験】ページは本当にスクロールされない?アイトラッキングで異性一覧のページを見てみた。 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
    ko-ya-ma
    ko-ya-ma 2010/04/28
    男性は途中で飽き、女性は一通り目を通して直感的に好みを選ぶ。期待できるコンテンツならばスクロールする。
  • jQuery Quicksand plugin

    Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 87276499 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Now, choose your fighter:

    ko-ya-ma
    ko-ya-ma 2010/02/24
    分類された大型アイコンをかっこよく切り替える
  • [JS]フォームのエラー判定を行い、アドバイスを表示するスクリプト -Ketchup

    カスタマイズ性に優れた、フォームのエラー箇所にツールチップをふわりとアニメーションで表示するスクリプトを紹介します。 Ketchup Ketchupは既存のフォームにも簡単に導入が可能で、マークアップの変更やツールチップのデザイン変更も簡単に行えます。 また、エラー判定も多彩な項目で設定が可能です。 入力の有無 最大・最小文字数 最大・最小数値 メールアドレスのチェック urlのチェック 日付のチェック ユーザーネーム(a-z0-9_-)のチェック など これらの判定は組み合わせて使用することも可能です。 設置方法は、スクリプトとスタイルシートを外部ファイルとして記述し、各フィールドに下記のように追加します。 HTML(変更前)

    ko-ya-ma
    ko-ya-ma 2010/02/19
    判定項目設定も含めたマークアップが簡単
  • [JS]集中して、フォームのテキストを入力できるスクリプト -fullTextArea

    テキストエリアにテキストを入力する際、集中してできるようにするスクリプトをwheresrhysから紹介します。

    ko-ya-ma
    ko-ya-ma 2010/02/19
    テキストエリアが巨大化して、文字入力がやりやすい!
  • Google Wave風インタフェースも作れるJavaScriptのUIキット·UKI MOONGIFT

    UKIはJavaScript製のオープンソース・ソフトウェア。Webアプリケーションを作る上ではそのインタフェースが重要な要素になる。ローカルアプリケーションの代わりに使えるレベルとなると、通常のWebサイトとは異なるインタフェースが求められるだろう。 リスト作成&操作も簡単 使いやすいWebアプリケーションを容易に構築し、さらに開発者にとっても使いやすいUIキットがUKIだ。ボタンやリスト、スライダー、3ペイン構成と言ったオブジェクトを容易に実装し、Webアプリケーションを手軽に開発できるソフトウェアだ。 インタフェースの組み立てだけでなく、アクションの実装についても考慮されているのが特徴だ。プラグインで拡張することもできる。実装は4000行程度で、とても高速に動作する。対応ブラウザはIE6、Opera9、Firefox2、Safari3、Google Chromeからとなっている。 G

    Google Wave風インタフェースも作れるJavaScriptのUIキット·UKI MOONGIFT
    ko-ya-ma
    ko-ya-ma 2010/01/12
    ボタンやリスト、スライダー、3ペイン構成と言ったオブジェクトを容易に実装し、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のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手