タグ

webdesignとUIに関するlordkfのブックマーク (63)

  • Site Under Maintenance

    We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

    Site Under Maintenance
  • http://aext.net/jquery-menu-plugin-bubbleup/

    lordkf
    lordkf 2010/02/27
    MacのDockみたいなエフェクトを実装。
  • 人間中心設計のためのインタビューで得たデータの分析法 - GTAとSCAT/HCD-Net通信 #18 | HCD-Net通信

    ②フィールドデータの処理 - 情報分析さて、今回はフィールドワークのやり方ではなく、そこで得たデータのハンドリングについて触れておきたい。多数の、といっても10~20件くらいのインタビューデータを得た場合、どうやってそれをまとめるか、ということだ。僕自身はここで紹介するような技法を参考にしつつ、自己流でやっているが、まずフィールドワークデータの分析に最初に取り組んでみようという方は、このあとで紹介するGTAやSCATなどの手法を利用されるといいだろう。 ところで、いずれの手法を使うにしても、まず観察やインタビューという手法で得たデータの前処理が必要になる。 観察については、最近ではデジカメが一般化したので、それを利用して静止画や動画を撮ることが多いだろう。しかしそれで安心してはいけない。たしかに画像データは豊富な情報を含んでいるが、そこからどういう意味を読み取るかが肝心である。その場で、も

    人間中心設計のためのインタビューで得たデータの分析法 - GTAとSCAT/HCD-Net通信 #18 | HCD-Net通信
  • ユーザビリティ実践メモ

    スマートフォンとともにタブレット端末の普及率はますます上昇し、最近では街中や電車などでタブレット端末を利用している人を多く見かけるようになりました。 この記事の続きを読む

    lordkf
    lordkf 2009/11/17
    これは、隅から隅まで読みたいブログだ。。
  • JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]

    代表中山陽平 ブログ「苦手意識を無くせばWeb活用はうまくいく」弊社では「がんばる中小企業」のWeb活用をサポートしています。今の時代、第3者である、制作会社や代理店におまかせでは勝てません。同じような商品・サービスが溢れる中、選んでもらうためのコンセプトを立て、それを実現するためにネットもリアルも総動員しながら戦う必要があります。 みなさんが世の中に・自社の従業員に実現したい幸せや提供価値を、しっかりと実現していくためには、みなさん自身が主役になり、私達のような専門会社が側面支援するのがベストです。 このブログでは御社が中心となってウェブ活用できるヒントを配信しています。お悩みの方はお気軽に問い合わせフォームからご相談ください。 最新の記事一覧

    JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]
    lordkf
    lordkf 2009/11/09
    「まず、デザインがほしい」とのたまう輩に読んでほしい。
  • 「ユーザーはスクロールしない」はウソ、”Above the fold”より下を見せる3つのサイトデザインTIPS

    「Above the fold(アバブ・ザ・フォールド)」というのは、スクロールしなくても見ることができる画面の領域のことを言います。 Above the foldについては、以前に記事解説したことがあります。 ”above”は「~より上」、”fold”は、「折り目」という意味で、”above the fold”は直訳すると「折り目より上」という意味になります。 新聞の折り目より上半分は、人の気を引くような見出しのニュースを掲載します。 購入意欲をそそるためです。 スポ○チの1面の見出しなんかは、そうですよね。 「イチロー、マリナーズから解雇通告」 えぇーっ! と仰天して、開いて続きを読むと 「を受けた同僚とゴルフに挑戦」、 みたいな。(笑) バカはこのくらいにしておいて、「Above the foldはユーザーに訴えかけるために重要なコンテンツを置くべき」で、反対にスクロールしなければな

    「ユーザーはスクロールしない」はウソ、”Above the fold”より下を見せる3つのサイトデザインTIPS
  • 強引な伝え方は効果的か? (ユーザビリティ実践メモ)

    サイトを運営していてもっとユーザに知らせたいけれどなかなか認知が取れないサービスがあり、もどかしく思った経験はありませんか?今回は、「ユーザに強制的に情報を見せる」例についてご紹介したいと思います。 このサイトでは、ほとんどのユーザがログインするとまず最新情報ページを閲覧し、すぐにログアウトするか他の個別のサービスページに遷移してしまうため、最新情報ページでいかに新しいサービスを訴求するかが課題となっていました。 このような場合、よく使われる手法として以下のようなものがあります。 ポップアップウインドウ ウェルカムページでのFlashムービー 動画の自動再生 ライトボックス(同一画面上にレイヤーを重ね、背景を暗くすることで上レイヤーに注目させる手法) このサイトでは、ライトボックスによる情報訴求が注目度が高く有効であるという仮説を立て、ログインしたユーザが最新情報ページへ移動すると同時に自

    lordkf
    lordkf 2009/08/03
    最近よくある「ページを開いた途端にLightbox」は、実は内容を認識する前に反射的に閉じられてしまっている。
  • fallinstar.org

    This domain may be for sale!

  • Site Under Maintenance

    We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

    Site Under Maintenance
  • もっともダウンロード数が多いのは"緑色" - Firefox分析 | エンタープライズ | マイコミジャーナル

    Firefox web browser - Faster, more secure & customizable 定期的に何度もFirefoxをダウンロードしているユーザはもう気がついているかもしれないが、最近、Firefoxをダウンロードするときに表示されるボタンが緑色基調に統一されている。これは偶然こうなったのではなく、調査の結果、この色の場合がもっともダウンロード数が多かったことが理由になっているとFirefox is Green - Blog of Metricsで報告されている。 記事によれば、Mozillaプロダクトに関する情報収集や計測、分析を担当しているMozilla Metricsはwww.mozilla.comにおいて1週間ごとにFirefoxダウンロードボタンの色を変更して、ダウンロードにどういった違いがでるかを調査したという。訪問者の数から実際にダウンロードを実施し

  • The Gift of Giving Advent Calendar - Market Blog

    Envato is the leading marketplace for creative assets and creative peopleAbout Envato

    The Gift of Giving Advent Calendar - Market Blog
    lordkf
    lordkf 2009/06/16
    ライブラリ「jQuery Tools」を使った、色々な例。
  • ユーザビリティーを学ぶための20サイト – creamu

    Inspired Magazineというサイトで、ユーザビリティーを学ぶための20サイトが紹介されています。 ざっといくつかご紹介。 » UX Booth デザイナー、デベロッパのためになるユーザビリティーレビュー » UX Magazine 記事ごとにいろいろな角度からユーザビリティーに関して考察しているサイト » Usability post いいデザインをするためのTipsや考察 » 456 Berea Street Web標準、アクセシビリティー、ユーザビリティーをテーマに書いているサイト » Boxes & Arrows グラフィックデザイン、インタラクションデザイン、IAなどについて書かれたサイト その他のリストは以下からどうぞ。 » UX Madness – 20 Fantastic Resources For User Experience Know How ぐおー遅くなっ

  • Alertbox: 軌跡は“F”を描く(2006年4月17日)

    アイトラッキング調査の結果から、多くの場合、ユーザーは“F”の文字 -- 横に二、縦に一の軌跡 -- を描くようにWebページを読むことが分かった。 F-Shaped Pattern For Reading Web Content by Jakob Nielsen on April 17, 2006 fast のF。あなたが用意した貴重なコンテンツは、こうして読まれている。瞬く間に、ユーザーの視線はウェブサイト上の文章を駆け抜ける。それは、学校で習った文章の読み方とはまったく違うものだ。 232名のユーザーに協力いただいて、数千に及ぶウェブページのアイトラッキング調査を実施した。ウェブページの読み方には、サイトの内容やタスクには関係なく、かなり一貫性があることが分かった。その顕著な読み方とは、アルファベットの“F”を描くようなもので、以下に挙げる3つの要素で構成される。 ユーザーの視線

    Alertbox: 軌跡は“F”を描く(2006年4月17日)
    lordkf
    lordkf 2009/05/31
    GIGAZINEの名記事の元ネタ。
  • 優れたユーザインタフェースを設計する際に考慮する8つのポイント

    ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consistent Attractive Efficient Forgiving To conclude… 1. Clear 明快 明快であるというのは、最も重量な要素です。 ユーザインターフェイスデザインの目的は、ユーザーに意味と機能を伝え、利用するアプリケーションと相互につきあえるようにすることです。そのアプリケーションがどのように機能するのか、どこに進むべきか理解することができない時は、ユーザーは困惑しが

  • http://www.designwalker.com/2009/04/wireframe-2.html

    http://www.designwalker.com/2009/04/wireframe-2.html
  • GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」:phpspot開発日誌

    GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」 2009年03月03日- BeautyTips Demo Page GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」が公開されました。 Google Map 風がなかなか面白いです。Google Mapじゃないけどページ内にGooglemap風の吹き出しを表示できます。 次のような角丸&枠付&半透明という高度なツールチップを作ることも可能です。 以下のようなFacebookスタイルも実現できます。 エレメントの上下左右に表示することが出来るみたい。 関連エントリ JavaScriptを使わずCSSのみでシンプルなツールチップ実装 ツールチップを作るのならこれかもという多機能jQueryプラグイン「Simpletip」 カスタマイズ

  • ウェブサイトでやってしまいがちなユーザビリティのミス

    ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー

  • Yahoo Developer Network

    New Sign In With Yahoo An easy and convenient way for your users to create an account and sign into your web or mobile app View guide

    Yahoo Developer Network
    lordkf
    lordkf 2009/01/27
    よくあるUIのまとめ。
  • bookreader.js

    bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ

  • ユーザーが2~3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript*ホームページを作る人のネタ帳

    これは面白すごい。 なかなかさわり心地の良い動き。 しかも無料でダウンロードまでできるし、使えるし、なんともありがたい一品に、思わず勢いで記事にしてしまいました。 まずは以下のサンプルを触ってみると感動しますよ!(たぶん) サンプルデモは以下に 動的なhtmlショーケース 対応しているブラウザの幅も広いです。 # nternet Explorer 6, 7 # Firefox 1.5 + # Opera 9.1 + # Netscape 8.1 + # Safari 3 変更できる内容として # 右、左のサイドメニューの有り無し # 横幅800px、1000px、100% # フォントサイズ 等が変更できます。 もしもダウンロードするなら、以下のサイトに説明(英語)とダウンロードボタンがありますので是非。 Liquid Javascript Grid Layout

    ユーザーが2~3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript*ホームページを作る人のネタ帳