第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ
Wiiリモコンでなんでもホワイトボードに変える魔法のような動画 : Gizmodo Japan（ギズモード・ジャパン）
｢Wiiリモコンで作る、安価なマルチポイントのインタラクティブなホワイトボード｣という解説ビデオです。 見るからにつまらなそうなタイトルですけど、でもでも我慢して最後まで見てくださいよ？ 絶対｢おおおおおおおおおおおおお｣の｢お｣が止まらなくなります！ こんなWiiリモコンの使い方、見たことないですねー。カーネギーメロン大のジョニー・リー（Johnny Lee）さん（動画の人）が考案しました。 Wiiリモコン内蔵の赤外線カメラを活用してます。ボールペンの芯を取り出して赤外線入力の｢ライトペン｣なるものDIYしてますね。あとは遠くない45度の感知圏内からWiiリモコンで画面狙いながらライトペンで4点繋ぐとアラ不思議。MS-Surfaceっぽいホワイトボードになってますよ？ ペン2本使うとその姿はまるで、ジェフ・ハン氏のよう…。絶対意識してますよね。 コントローラはパソコンにフックすると、Wi
検索ユーザーの目線はどう動く Yahoo！とGoogleで違い
アイレップとジャパンマーケットインテリジェンスは6月11日、Yahoo！JAPANとGoogleの検索結果画面を見ている際のユーザーの目線の動きを調べた結果を発表した。Yahoo！は「関連検索ワード」や「Yahoo！カテゴリ」が注目されており、Googleはサイトのタイトルを最初から最後までよく読まれているという傾向が見えた。 測定は昨年9月から10月にかけ、目の網膜に照射した赤外線の反射を利用する専用機器を使い、無作為に選んだ76人（男女半々）を対象に実施した。 それぞれ、画面上部に検索連動広告が表示されている場合と、表示されていない場合に分けて調べた。 Yahoo！検索で広告が表示されていない場合、目線は「逆L字型」に動く。検索結果の上に表示される「関連検索ワード」や「Yahoo！カテゴリ」を見るために目線が右に動き、その後目線が左に戻り、検索結果サイトのタイトル先頭部分を下まで流して
404 Blog Not Found:惰訳 - あなたのサイトの第一印象を決める21の要素
2007年11月29日07:20 カテゴリ翻訳/紹介iTech 惰訳 - あなたのサイトの第一印象を決める21の要素 21は多いけど、良い記事なので。 21 Factors that Influence the First Impression of Your Website’s Visitors << Vandelay Website Design あなたのサイトを初めて訪問した人が第一印象を決めるのはあっという間です。第一印象がよければ、その人が再びあなたのサイトを訪れてくれる確率は飛躍的に高まりますし、その一方で第一印象を覆すのは並大抵のことではありません。 以下のリストでは、その第一印象を決める21の要素を取り上げます。これらは要素の一部であってリストは完璧とは言えません。他にもあれば是非コメントして下さい。それでは、以下順不同に。 ロード時間(Load Time) - 我々のほと
携帯小説サイト構築 ４つのポイント - livedoor ディレクター Blog
こんにちは。『ケータイlivedoor』で小説を担当している川村です。 外出先や家でちょっとした時間ができたとき、何か暇つぶしになるものはないかな、とケータイをいじることはありませんか？ ゲームやSNSなどケータイで楽しむコンテンツが日に日に増えているなか、今若い世代を中心に人気を博しているのが「ケータイ小説」と呼ばれるものです。 『livedoor小説』とは、そのケータイ小説を無料で毎日配信しているコンテンツです。 私はディレクターとして作品の配信設定やサイトの更新、次回作の選定などを行っております。 「読書」といえば書籍が少し前までは当たり前でしたが、最近ではケータイで読書をすることが女子高生を中心に定着してきました。 今では、サラリーマンや主婦の間でも暇つぶしのコンテンツとして注目されています。 しかし、同じ小説だからといって書籍や文庫と同じ文章を載せると、ケータイではとても読みにく
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
iPhoneよりマリオ、Googleより茶道――チームラボが考える「和製UI」 (1/2) - ITmedia +D モバイル
「iPhoneのユーザーインタフェース（UI）は確かにかっこいいが、進化の仕方があまりに西洋的。もっと日本的なアプローチがあるんじゃないか」 11月15日、「Web2.0 Expo」の講演でこう話したのは、チームラボの猪子寿之社長だ。同社は、検索エンジン「SAGOOL」など独自サービスを展開する一方、「iza！」（産経デジタル）、「ワッチミー！TV」（フジテレビラボLLC）、サントリー公式サイトのサイト内検索機能、日立「Wooo」のトップページFlashなどを構築。UIとデザイン、検索・マッチング技術に強みを持つベンチャーだ。 「UIは、しょうがない奴だと思ってる」と猪子社長は言う。例えば携帯電話のボタン。電話をかけたり、携帯サイトを見るには何度もボタンを押さなくてはならないが、ユーザーはボタンを押したい訳ではなく、電話で話したりサイトを見たいだけ。つまり「ボタン」というUIは「仕方ないか
音声付きコンテンツの落とし穴 (ユーザビリティ実践メモ)
しかし「再生する」というユーザの明確な意思表示なしに、音声付コンテンツを再生することには注意が必要です。 弊社のユーザビリティテスト（ユーザ行動観察調査）では、たまたま開いたウェブサイトから突然音声が流れることに強い拒否反応を示すケースがありました。 ユーザはウェブサイトを必ずしも一人で閲覧するとは限りません。 職場のように周りに人がいる状況でサイトを開くこともあります。「意図せずに周りの迷惑になってしまうのが怖い」というのは多くのユーザに共通の意識ではないでしょうか。 ユーザにそのような不快な思いをさせないためには、ユーザ自身に音声の「ON」 「OFF」を選択してもらうことが考えられます。 【 具体的対応策 】 ■1. 「音声OFF」をデフォルト設定とし、音声の「ON」はユーザが選択 ■2. コンテンツを再生時にユーザが音声の「ON」「OFF」を選択 音声付コンテンツはそれ自体の魅力が大
ペルソナを使ってWebデザインの評価を行う: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 あまりアクセス数が多くないサイトに関して、コンテキスチュアル・インクワイアリーなどの手法を使ってユーザー調査を行いたい場合、どうしてもネックになってくるのがそのサイトを普段使っている人を調査にリクルートすることがむずかしいという点です。 いや、Webサイトのデザイン評価を行おうとする際には、よほど知名度があり、アクセス数も多く、かつリピート利用がされるサイトでなければ、普段の利用状況の把握するためのコンテキスチュアル・インクワイアリーによる調査を行うための対象者はまず集めることができないといってよいでしょう。 もちろん、その場合でも類似のサイトを含めて、ユーザーがどのようにサイトを利用するのかを調べることはできます。しかし、そうしたユーザーによる特定のサイトのデザイン評価＝
字数制限がある場所でのライティング法 - livedoor ディレクター Blog
こんにちは。ポータルサイト livedoor のトップページ運用を担当している中村です。さて、私が担当している運用か所のひとつに、「おすすめ情報」があります。 このエリアには、livedoor の各サービスの新着情報やキャンペーンなどを伝える“livedoor の最新スポット”というものがあるのですが、文章を形成していく際にいくつかのポイントがあります。 「短い文字数のなかで、いかに効果的にPRできるか？」これは私にとって日々の研究テーマなのですが、実践していることのひとつに“カッコを上手に使う”といったものがあります。 ■何を強調するかによって変わる、カッコの使い分け カッコにはさまざまな種類があり、使用目的によってどれを選ぶかが変わってきます。どれも基本的なことですが、意識をせず間違ったカッコの使い方をしてしまうケースもあるので、覚えておくと便利でしょう。 「 」カギカッコ …… 会話
画像一つ使う際にもユーザーが何を感じ取るかを考えよう（powered by beBit） | SiMPLE*SiMPLE
※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。 beBit社から「画像一つでもコンバージョン率がこんなに違う」という事例を紹介してもらいました。今回事例としてご紹介いただいたのはある住宅ローンサイトの画像について。 ↑ 説明してもらった同社コンサルタントの土井さん。 あなたは住宅ローンサイトで「お問合せはこちらから」というページをつくるとしたら、そこにどんな画像を使いますか？ やわらかい印象のイラスト、ヘッドセットをした女性が電話に出ている写真、などが候補にあがると思いますが、ユーザビリティテストの結果、一番効果的だったのは・・・（考えてみてください）・・・「男性社員の写真」でした。 よく「お問合せ」というと「女性のオペレータ」を連想してしまいますが、大事なのはこれは住宅ローンのページだということです。 実際にテストをしてみると「支店にいるようなロ
ユーザーに尋ねても必ずしも正しい答えは返ってこない
今日はたまたま「ユーザーからのフィードバックを集めることの難しさ」が話題になったので、それに関連するエントリー。 もの作りにおいて、「ユーザーが何を必要としているか」を知ることは大切だが、だからと言ってユーザーに尋ねれば正しい答えが返ってくる訳ではないところが難しいところ。具体的な例としては、こんなものがある。 1. サイレント・マジョリティの声は聞こえてこない これはMicrosoftで実際にあったことだが、Outlookのチームではユーザーから寄せられる機能追加のリクエストに従って色々な機能を足していた時期があったが、その結果不必要な機能ばかり増えて、単純な作業が逆にやりにくくなってしまった（たとえばカスタム・フォームが良い例）。このケースでは、ごく一部のヘビー・ユーザーばかりが声がでかく、「今の機能で十分、これ以上複雑にしないで欲しい」というユーザーは何も言ってこない（こういう人たち
ウノウラボ Unoh Labs: 「視線を導く」方法あれこれ
yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。 今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で役に立つかもしれない情報を簡単にまとめてみます。 １．視線をつかまえる Web上にも街にも広告だの何だのと情報が氾濫しています。その中で「見てもらう」ためには何かしらの工夫が必要になることがあります。というわけでまずは「人の視線をつかまえる」ための方法論を少し。 「人の顔」を使う まずはこの画像を見てみてください。 01 posted by (C)フォト蔵 最初に、どれを「見てしまいました」か？
ウェブに激しく使えるインタラクティブなインターフェース集『Welie』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
インタラクティブなデザインがどうあるべきか、そのデザインパターンを集めまくっているのがデザイナーのWelieさんだ。 彼のサイトではカテゴリーごとにどういったインターフェースデザインが有効かをまとめてくれている。 検索サイト、ショッピングサイト、サイトナビゲーションなどなど、ウェブを作る仕事をしている人にとっては必見だろう。 またそれぞれのパターンにはスクリーンショットの例や、いつ使うべきか、使うときにはどういった点に気をつければ良いかも教えてくれる。 こうした資料は知っておいて損はないですね。
未経験者がユーザーテストを行う際の10のポイント - livedoor ディレクター Blog
こんにちは、ディレクターのほうの谷口です（余談ですが、ライブドアには3名の谷口がいて、私はプログラマーじゃないほうの谷口です）。今回は、ユーザーテストについてお話したいと思います。 ユーザーテストは、ウェブサイトの新規立ち上げやリニューアルの際、ユーザーがウェブサイトやプロトタイプを実際に操作してもらう様子を目の当たりにすることで、問題点を発見する方法です。 ライブドアのサービスは、作る側とユーザー像が近いことが多かったので、頻繁にはユーザーテストをしてきませんでした。しかし、今後は自分たちと違うユーザー像も対象としていきたいことから、ユーザーテストの数を増やしていきたいと思っています。 ユーザーテストの専門会社に頼むという手もあり、そうすることで厳密に調査をしてくれます。しかし、ポイントをしぼって外注せずにすむ方法もあるので、ここに紹介します。 1. 被験者は友人か知り合いでいい 専門会
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場合、チェックボックス（ラジオボタン）の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ
第6回 サイト価値を最大化するためのトップページ設計術?4パターンの訪問者を想定して作る|Web担当者Forum
第6回 サイト価値を最大化するためのトップページ設計術 ～4パターンの訪問者を想定して作るトップページデザイン 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題がおきないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） トップページ設計において考慮すべき 4つのユーザー利用シーントップページの設計やデザインは、ウェブサイトの構築を行ううえで、最も難しいポイントの1つだろう。構成するコンテンツの多さに加え、さまざまな制約やこだわりなどによって、四苦八苦したことのある方も多いのではないだろうか。 そんなときに重要なのは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーインターフェイスデザインの参考になるサイト集
『10のJavaScript、Axaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳
サイト解析を使ったユーザビリティを収益に変える為のまとめ*ホームページを作る人のネタ帳
