<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:xhtml="http://www.w3.org/1999/xhtml" ><channel><title>gaspanik weblog &#187; ui</title> <atom:link href="http://blog.gaspanik.com/tag/ui/feed" rel="self" type="application/rss+xml" /><link>http://blog.gaspanik.com</link> <description>beat one&#039;s brain</description> <lastBuildDate>Thu, 15 Dec 2011 23:53:18 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=</generator> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/tag/ui/feed" /> <atom:link rel='hub' href='http://blog.gaspanik.com/?pushpress=hub'/> <cloud domain='blog.gaspanik.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' /> <item><title>2009年に買った書籍とか</title><link>http://blog.gaspanik.com/purchased-books-in-2009</link> <comments>http://blog.gaspanik.com/purchased-books-in-2009#comments</comments> <pubDate>Tue, 22 Dec 2009 01:48:17 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[works]]></category> <category><![CDATA[books]]></category> <category><![CDATA[design]]></category> <category><![CDATA[ui]]></category> <category><![CDATA[ux]]></category> <category><![CDATA[webdesign]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=1721</guid> <description><![CDATA[ &#8220;purchased 2009&#8243; on Flickr Originally uploaded by [cipher]. 2009年もそろそろ終わりということで、今年Amazon.comで購入した [...]]]></description> <content:encoded><![CDATA[<p><a title="purchased 2009, by h4ck" href="http://farm3.static.flickr.com/2532/4202513554_1d91545ea2.jpg" rel="lightbox[purchased]"><img src="http://farm3.static.flickr.com/2532/4202513554_1d91545ea2_m.jpg" width="240" height="159" alt="purchased books" /></a><br /> <a href="http://www.flickr.com/photos/h4ck/4202513554/">&#8220;purchased 2009&#8243; on Flickr</a><br /> Originally uploaded by <a href="http://www.flickr.com/people/h4ck/">[cipher]</a>.</p><p>2009年もそろそろ終わりということで、今年Amazon.comで購入した書籍の中からWebとか仕事に関係するものをピックアップして紹介したいと思います。Kindleも買ったのでKindle版で読んでるもの、そろそろ買おうかなと思ってウィッシュリストに入ってるものも最後の方に入れてます。</p><p>残念ながらそのすべてが洋書です（すみません、日本語の技術書はほとんど読まないので）。タイトルに入れたリンクはオフィシャルサイト的なものです。Amazon.comのURLは.co.jpに変えれば、取り扱ってるものは出てきます。何か書いておいた方がいいかな？って思うものは一言入れておきますね。</p><p><span id="more-1721"></span></p><h3>Paperback &amp; Hard Cover</h3><p>中には既にKindle Editionで発売されているものもあります。</p><dl><dt><a href="http://www.rosenfeldmedia.com/books/mental-models/">Mental Models: Aligning Design Strategy with Human Behavior</a></dt><dd>http://www.amazon.com/gp/product/1933820063/<br />Web情報アーキテクチャ（シロクマ本）のLouis Rosenfeldさんの出版社の書籍です。Twitterなんかでも気軽にフォロー返してくれたり情報提供してらっしゃいます</dd><dt><a href="http://oreilly.com/catalog/9780596516253">Designing Web Interfaces: Principles and Patterns for Rich Interactions</a></dt><dd>http://www.amazon.com/gp/product/0596516258/<br />これはもうじき日本語版が出ます</dd><dt><a href="http://projectuxd.com/">A Project Guide to UX Design: For user experience designers in the field or in the making</a></dt><dd>http://www.amazon.com/gp/product/0321607376/</dd><dt><a href="http://www.cooper.com/insights/books/#designdigitalage">Designing for the Digital Age: How to Create Human-Centered Products and Services</a></dt><dd>http://www.amazon.com/gp/product/0470229101/<br />この本はコンセントの長谷川さんも最近ちょこちょこ紹介されてるようですね</dd><dt>The Persona Lifecycle: Keeping People in Mind Throughout Product Design</dt><dd>http://www.amazon.com/gp/product/0125662513/</dd><dt>Information Architecture: Blueprints for the Web</dt><dd>http://www.amazon.com/gp/product/0321600800/</dd><dt>Beginning iPhone Development: Exploring the iPhone SDK</dt><dd>http://www.amazon.com/gp/product/1430216263/</dd><dt><a href="http://oreilly.com/catalog/9780596155148">Complete Web Monitoring: Watching Your Visitors, Performance, Communities, and Competitors</a></dt><dd>http://www.amazon.com/gp/product/0596155131/</dd><dt><a href="http://oreilly.com/catalog/9780596522315">Even Faster Web Sites: Performance Best Practices for Web Developers</a></dt><dd>http://www.amazon.com/gp/product/0596522304/<br />そのうち日本語版が出るでしょう。「ハイパフォーマンスWebサイト」の続編みたいなもんです</dd><dt>When Search Meets Web Usability</dt><dd>http://www.amazon.com/gp/product/0321605896/</dd><dt><a href="http://www.contentstrategy.com/">Content Strategy for the Web</a></dt><dd>http://www.amazon.com/gp/product/0321620062/</dd><dt><a href="http://www.smashingmagazine.com/2009/12/03/smashing-book-its-out-now/">The Smashing Book</a></dt><dd>見ている人も多いかも知れない「Smashing Magazine」のこれまでの蓄積とも言える一冊。Amazonとかでは買えませんので直接買ってください（すぐ届きます）。あんなことからこんなことまで載ってますよ</dd></dl><hr /><h3>Stanza（iPhone.app）</h3><p>移動中にiPhoneでながめるために買ったStanzaで読めるオライリーのeBook</p><dl><dt><a href="http://oreilly.com/catalog/9780596522537/">Search Engine Optimization for Flash</a></dt><dd>http://www.amazon.com/dp/0596522525<br />読んだ方がいいんじゃないかい？（誰）</dd><dt><a href="http://oreilly.com/catalog/9780596154585/">Hacking: The Next Generation</a></dt><dd>http://www.amazon.com/dp/0596154577/</dd></dl><hr /><h3>Kindle</h3><p>さすがに書籍ばっかりはかさばるので後半はKindleで。</p><dl><dt><a href="http://www.whatmakesthemclick.net/the-book/">Neuro Web Design: What Makes Them Click?</a></dt><dd>http://www.amazon.com/dp/0321603605/</dd><dt><a href="http://www.thesocialmediabible.com/">The Social Media Bible: Tactics, Tools, and Strategies for Business Success</a></dt><dd>http://www.amazon.com/dp/0470411554/</dd><dt><a href="http://thechaosscenario.net/blog/">The Chaos Scenario</a></dt><dd>http://www.amazon.com/dp/0984065105/</dd><dt><a href="http://unclutterer.com/">Unclutter Your Life in One Week</a></dt><dd>http://www.amazon.com/dp/143915046X/</dd></dl><hr /><h3>Wishlist</h3><p>これから買おうかな、とウィッシュリストに入ってるもの。</p><dl><dt><a href="http://www.webanalytics20.com/">Web Analytics 2.0: The Art of Online Accountability and Science of Customer Centricity</a></dt><dd>http://www.amazon.com/dp/0470529393/<br />こないだ日本で出てる「Webアナリストなんちゃら（原題: Web Analytics an hour day）」の続編にあたるものです</dd><dt><a href="http://www.sensible.com/rocketsurgery/index.html">Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems</a></dt><dd>http://www.amazon.com/dp/0321657292/<br />「Don&#8217;t Make Me Think」で有名なSteve Klugさんの新刊</dd><dt>Web Anatomy: Interaction Design Frameworks that Work</dt><dd>http://www.amazon.com/dp/0321635027/</dd></dl><hr /><p>と、こんな感じです（なんか寄ってますけどね 笑）。<br /> 中には来年か再来年あたりに日本語版が出そうなものもありますね。ただ、半年ぐらい前にも書きましたが、英語版の書籍が日本語版で出るまでには早くて半年、大体1〜2年の期間があります。</p><p>もちろん内容を間違えて理解するぐらいなら日本語版で読んだ方がいいかもしれませんが、情報を他の誰より早く仕入れて仕事に活用したいなぁ、それを強みにしたいなぁと考えるのであれば、辞書を片手に読んだ方がはるかに速いです。技術書であれば普段仕事で目にするようなアルファベットが中心ですし、そんな難しい言葉はありません。ただ、くだらないアメリカンジョークは多々あります（残念）。</p><p>これはWebサイトやTwitterで伝搬していく情報でも同じで、そこまで大きな差はないですが日本語になって出てくるまで時差があります。Webの世界がリアルタイム化してるんだから、自分もリアルタイム化した方がいいでしょう（嘘。無理無理）。</p><p>先日の<a href="http://blog.gaspanik.com/web-designing-102-and-websites-performance">Web Designing誌の特集</a>に取り上げたWebサイトの最適化などについて書かれているだろう「オプティマイジングWebサイト（原題: Website Optimization）」と「デザイニング・ウェブインターフェース（原題: Designing Web Interfaces）」はそろそろ日本のオライリーさんから発売されるようですよ。</p><p>&rarr; <a href="http://www.amazon.co.jp/gp/product/4873114349?ie=UTF8&#038;tag=gaspanik-22&#038;linkCode=as2&#038;camp=247&#038;creative=7399&#038;creativeASIN=4873114349" title="Amazon.co.jp: デザイニング・ウェブインターフェース">デザイニング・ウェブインターフェース</a><img src="http://www.assoc-amazon.jp/e/ir?t=gaspanik-22&#038;l=as2&#038;o=9&#038;a=4873114349" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />（Amazon.co.jp）<br /> &rarr; <a href="http://www.amazon.co.jp/gp/product/4873114314?ie=UTF8&#038;tag=gaspanik-22&#038;linkCode=as2&#038;camp=247&#038;creative=7399&#038;creativeASIN=4873114314" title="Amazon.co.jp: オプティマイジングWebサイト">オプティマイジングWebサイト</a><img src="http://www.assoc-amazon.jp/e/ir?t=gaspanik-22&#038;l=as2&#038;o=9&#038;a=4873114314" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />（Amazon.co.jp）</p><p>何かのご参考までに。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/purchased-books-in-2009/feed</wfw:commentRss> <slash:comments>1</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/purchased-books-in-2009" /> </item> <item><title>ブラウザの表示エリアの割合を可視化するBrowser Size</title><link>http://blog.gaspanik.com/google-labs-browser-size</link> <comments>http://blog.gaspanik.com/google-labs-browser-size#comments</comments> <pubDate>Thu, 17 Dec 2009 05:21:43 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[google]]></category> <category><![CDATA[ui]]></category> <category><![CDATA[ux]]></category> <category><![CDATA[webdesign]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=1611</guid> <description><![CDATA[GoogleさんがLabsのサービスとして、「Browser Size」というGoogleの訪問者のブラウザウィンドウサイズから「何割の人がこれぐらいまで見えてるよ」的なものをリリースされてるようです（via UX MA [...]]]></description> <content:encoded><![CDATA[<p>GoogleさんがLabsのサービスとして、「<a href="http://browsersize.googlelabs.com/">Browser Size</a>」というGoogleの訪問者のブラウザウィンドウサイズから「何割の人がこれぐらいまで見えてるよ」的なものをリリースされてるようです（via <a href="http://uxmag.com/short-news/new-google-app-shows-how-much-of-a-websites-content-is-above-the-fold">UX MAG.</a>）。</p><p><a href="http://content.gaspanik.com/wp-content/uploads/2009/12/googlelabs-browsersize-001.jpg" rel="lightbox[googlelabs-browser-size]"><img src="http://content.gaspanik.com/wp-content/uploads/2009/12/googlelabs-browsersize-001-240x162.jpg" alt="googlelabs-browsersize-001" title="googlelabs-browsersize-001" width="240" height="162" class="alignnone size-medium wp-image-1613" /></a></p><p><span id="more-1611"></span><br /> 一部のアクセス解析ソフトには、モニタ解像度だけじゃなくてブラウザウィンドウの大きさを取得してこのような割合を数値として出してくれるものがありますが（例えばMintとか）、こうやってオーバーレイされて視覚化されるとわかりやすいですね。</p><p><a href="http://content.gaspanik.com/wp-content/uploads/2009/12/googlelabs-browsersize-002.jpg" rel="lightbox[googlelabs-browser-size]"><img src="http://content.gaspanik.com/wp-content/uploads/2009/12/googlelabs-browsersize-002-240x162.jpg" alt="googlelabs-browsersize-002" title="googlelabs-browsersize-002" width="240" height="162" class="alignnone size-medium wp-image-1614" /></a></p><p>この%の数値は、何割方の人がここまで見えてる的な意味に捉えることができるので、まぁ9割方の人を拾い上げたかったら、横960px以内×縦500px以内ぐらいにおさめといた方が無難ということになりますね。これはうちのMintで計測してるものも大体同じ感じです。</p><p>ファーストビューがどうこうというより、このエリアしかモニタに出てこないんですから、溢れてるものは横スクロールなり縦スクロールなりが出て閲覧に支障をきたすこともあるってことですね。コンテンツの設計には気をつけたいものです。</p><p>&rarr; <a href="http://browsersize.googlelabs.com/">http://browsersize.googlelabs.com/</a></p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/google-labs-browser-size/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/google-labs-browser-size" /> </item> <item><title>OS Xでユーザビリティチェック、Silverback</title><link>http://blog.gaspanik.com/usability-check-with-silverback</link> <comments>http://blog.gaspanik.com/usability-check-with-silverback#comments</comments> <pubDate>Mon, 28 Jul 2008 05:32:17 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[works]]></category> <category><![CDATA[applications]]></category> <category><![CDATA[interface]]></category> <category><![CDATA[os x]]></category> <category><![CDATA[softwares]]></category> <category><![CDATA[ui]]></category> <category><![CDATA[usability]]></category> <category><![CDATA[webdesign]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=73</guid> <description><![CDATA[時には仕事的なことでこんにちは、こもりです。 昼ご飯を食べながらehubを見ていたら、ちょっと興味深いアプリケーションが紹介されていました。アプリケーションの名前は「Silverback」、マウンテンゴリラのリーダーの呼 [...]]]></description> <content:encoded><![CDATA[<p>時には仕事的なことでこんにちは、こもりです。<br /> 昼ご飯を食べながらehubを見ていたら、ちょっと興味深いアプリケーションが紹介されていました。アプリケーションの名前は「<a href="http://silverbackapp.com/">Silverback</a>」、マウンテンゴリラのリーダーの呼び名というかその色合いが冠されてます。早速フリートライアルでダウンロードして使ってみましたのでそのレポートです。</p><p>このSilverback、OS Xのマシンにインストールしておいて内蔵のiSightでユーザーの視線などをキャプチャしつつ、画面内に表示されたWebページなどをブラウジングしてもらいその様子もムービーとしてキャプチャすることができます。そして最終的にその「視線の動き＋クリックした箇所（動作の一部始終）」を一つのQuickTime Movieにミックスして落とすことができるという代物です。<br /> つまりユーザビリティのチェックができるってことですね。</p><p>Silverbackのオフィシャルサイトにはクイックツアー的なムービーが用意されてますがまぁ英語ですので、簡単に使い方などを動画ではなく静止画で解説してみましょうか。<br /> 長くなるので、続きは下のリンクをクリックしてください。</p><p><span id="more-73"></span><br /> <a href='http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-001.jpg' rel="lightbox[silverback]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-001-240x150.jpg" alt="silverback-001" title="silverback-001" width="240" height="150" class="alignnone size-medium wp-image-81" /></a></p><p>まずは、ダウンロードして解凍し適当なとこにコピーしてから起動します。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-002.jpg' rel="lightbox[silverback]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-002-240x180.jpg" alt="silverback-002" title="silverback-002" width="240" height="180" class="alignnone size-medium wp-image-74" /></a></p><p>シルバーバックなゴリラがお出迎えしてくれるので、左上の「New Project」で新規のプロジェクトを作ります。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-003.jpg' rel="lightbox[silverback]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-003-240x180.jpg" alt="silverback-003" title="silverback-003" width="240" height="180" class="alignnone size-medium wp-image-76" /></a></p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-0041.jpg' rel="lightbox[silverback]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-0041-240x180.jpg" alt="silverback-004-" title="silverback-004-" width="240" height="180" class="alignnone size-medium wp-image-82" /></a></p><p>プロジェクトを作ったら、被験者を追加するために「New Session」をクリックして必要な情報を入力します。Notesのとこには日本語も使えます。右下の方には、iSightから出力される被験者の顔が表示されます。寝癖頭でこれをやっていたので、もちろん見苦しい私の顔はモザイク付きでお届けします（笑）。</p><p>で、右下のそのウィンドウのところに「Start Session」って赤い丸の付いたボタンがあるので、それをクリックすると録画の準備が始まり、画面が暗転したらスペースキーを押すと録画がスタートします。クリックする前にブラウザを出しておくなど準備しておきましょう。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-004.jpg' rel="lightbox[silverback]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-004-240x150.jpg" alt="silverback-004" title="silverback-004" width="240" height="150" class="alignnone size-medium wp-image-78" /></a></p><p>で、録画が終わったらメニューバーの上にあるゴリラのメニューから「STOP」を選ぶか、最近のMacについてるあのリモコンみたいなのでも一時停止や停止ができるようですね。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-005.jpg' rel="lightbox[silverback]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-005-240x180.jpg" alt="silverback-005" title="silverback-005" width="240" height="180" class="alignnone size-medium wp-image-79" /></a></p><p>録画が終わったら画面が切り替わるので、右下にある「Export」をクリックします。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-006.jpg' rel="lightbox[silverback]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-006-240x180.jpg" alt="silverback-006" title="silverback-006" width="240" height="180" class="alignnone size-medium wp-image-77" /></a></p><p>iSightのキャプチャのサイズとか表示位置などは調整可能です。書き出すサイズや品質などを決めたら任意の場所に保存すれば終了です。<br /> あとはQuickTimeで再生しましょう。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-007.jpg' rel="lightbox[silverback]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-007-240x150.jpg" alt="silverback-007" title="silverback-007" width="240" height="150" class="alignnone size-medium wp-image-80" /></a></p><p>再生するとこんな感じでクリックした箇所が次々とポワーンポワーンと連続で色付き表示されます。被験者の方も視線の動きとかが再生されますので何を見てるとかわかるんじゃないかと。もちろん音声も撮れます。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-008.jpg' rel="lightbox[silverback]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/07/silverback-008-240x190.jpg" alt="silverback-008" title="silverback-008" width="240" height="190" class="alignnone size-medium wp-image-75" /></a></p><p>とまぁ、こんな感じでQuickTimeの中で再生されるというわけです。</p><p>さて、このSilverbackの気になるお値段ですがなんと約$50です。5、6千円でこれなら一個ぐらい買ってMacBookに入れておいてその場にいる人に使ってもらうなんてこともできますね。早速買っちゃおうっと。</p><p>＃ちなみにこの売り上げの10%はゴリラの救済にあてられるようです。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/usability-check-with-silverback/feed</wfw:commentRss> <slash:comments>1</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/usability-check-with-silverback" /> </item> </channel> </rss>
<!-- Served from: blog.gaspanik.com @ 2012-02-04 15:25:40 by W3 Total Cache -->
