Good night, PosterousPosterous Spaces is no longer available Thanks to all of my @posterous peeps. Y'all made this a crazy ride and it was an honor and pleasure working with all of y'all. Thanks to all of the users. Thanks to the academy. Nobody will read this.
Googleが教えるサイトのデザインやユーザビリティをテストするときのコツ
[レベル：中〜上級] ウェブサイトのデザインやユーザビリティなどを改善するためのユーザーテストが欠かせません。 ユーザーテストを行うときのコツやアドバイスを米国版Googleウェブマスター向け公式ブログが公開しました。 彼らの専門チームのこれまでの経験に基づくものです。 とても役に立つ内容なので、日本版公式ブログで翻訳記事が近いうちに公開されることを期待しつつ知っておきたいポイントを僕のブログで紹介します。 テストはシンプルに 試験者の人数: レイアウトやナビゲーションの一般的な問題を調べるのであれば、テストに参加してもらう人の人数は5人で間に合う(ヤコブ・ニールセンの記事を参照）。 試験者の選び方: 技術的なスキルの異なった人を集める。ただし個々が出くわした問題よりも全体的な流れに焦点を当てる。たとえば、50%以上の試験者が経験したユーザビリティの問題は本当に問題になっている可能性が高い
ワイドディスプレイの普及でWebの文字が大きくなる？ | 初代編集長ブログ―安田英久
今日は、ワイドディスプレイの普及とディスプレイの高精細化が進んでいることを考慮して、改めてWebサイトに適切な文字サイズを考えてみましょう。 あなたのサイトでは、本文の基本文字サイズを何ピクセルにしていますか？ その文字サイズは、訪問者にとって見やすいサイズですか？ 二昔前は、小さな文字のオシャレなページが流行っていましたが、ここ数年は「見やすい文字サイズ」を選ぶようになっていますね。ヤフーやアサヒコムなどの代表的なサイトでは、本文16ピクセルを基本としているようです。 実はこの「ピクセル」というサイズ指定は、絶対サイズではありません。というのも、どんなディスプレイでどう表示されるかによって、実際の表示サイズが変わるからです。 ちなみに、16ピクセルの文字は、XGA（1024×768ピクセル）の15インチ液晶では4.8mmの大きさになります。手元にあった新聞の本文文字サイズを測ってみると1
紙媒体との連携は大丈夫？ (ユーザビリティ実践メモ)
サイトへの集客のためにパンフレットを使っている、あるいはカタログ通販とECサイトを平行して運営し、注文をハガキ・電話よりもECサイト側で受けたいとお考えの方も多いかと思います。 そこで、今回は、どのようにすれば紙媒体からウェブへの誘導がうまくいくのかを考えてみたいと思います。 ある通販会社のカタログでは、カタログ内の「ご注文の仕方」のページや表紙からしかウェブへの誘導がなされていませんでした。 しかし、ユーザはそのようなページを見ることはあまりありませんし、わざわざカタログの表紙を調べてサイトを使うという行動も、ウェブを使おうという意思がある人でなければ行いません。 実際に、ユーザ行動観察調査であるカタログを見せたときに、「そのカタログのPC向けのウェブサイトはあるだろうと思っていたが、携帯サイトがあることは知らなかった」というようなユーザもいました。 サイトにユーザを引き込みたい、あるい
その情報、後から見られますか？ (ユーザビリティ実践メモ)
「保険料シミュレーション」や「住宅ローンシミュレーション」など、近年ではウェブ上でシミュレーションや見積りができるサイトも多く見られます。 自分で気軽にシミュレーションができるため、ユーザに好まれるケースが多いようです。 今回は、そうしたシミュレーションや見積りの結果を表示するページについて考えます。 結果ページでのユーザ行動としては、すぐに申込・契約へ進むのではなく、他社の結果と比較して検討するために一旦サイトを離れるケースが多く見られます。 その場合、ユーザは「後から見るために、とりあえずこの情報を手元に置いておきたい」というニーズを持っているため、結果ページでそうしたニーズに応える手段を提供することが、申込・契約へつながる重要なポイントとなります。 その手段として、今回は1.印刷 2お気に入り/ブックマーク 3.メールで送る、という3つについて考えてみます。 1.印刷 じっくりと情報
ユーザビリティテストツール『Silverback』
ユーザビリティテストツール『Silverback』 先日、SwapSkills+Plus × WDE-expressで行われた「ユーザーテスト：ワークショップ」に参加してきました。 ユーザビリティテストツール『Silverback』を利用してのワークショップだったのですが、このSilverbackなかなか面白いソフトです。 基本的にはユーザーの操作を記録する画面キャプチャのソフトなのですが、MacのiShightを利用してユーザーの表情と音声も同時に記録します。 ユーザーにはつまずいている操作や悩んでいるところを発言してもらうことにより、後で見返した際に客観的にサイトの問題点を見返すことが出来ます。 ワークショップでは「モデレーター」「スクリプター」「被験者」に分かれて行われました。 モデレーターが進行係で、被験者に対してタスクの説明をし、被験者がつまづいているようだったら何につまづいてい
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
404 Not Foundページをユーザーにとって、より有用にする5つのチップス
2. Keep it familiar 見慣れたデザインで 404ページのデザインは、そのサイトの他のページと同様にするのが望ましいです。異なったデザインにしてしまうと、ユーザーはサイトから離脱したと思うかもしれません。 404ページには、最低限、あなたのサイトのロゴと404のエラーメッセージを配置してください。 3. Keep it Basic ベーシックに 404ページでユーザーにエラーということを突きつけて圧倒させないでください。404ページのゴールは、可能な限りユーザーが探していたページに導くことです。 その１つの方法として、404ページにアクセスが多いページのリンクを掲載する方法があります。 また、検索機能を設置することも効果的な方法です。 4. Offer some direction 道案内を提示 404ページには、ユーザーにいくつかの道案内を提示するべきです。 最も重要な道
ユーザーエクスペリエンスデザインの成果物リスト | Web担当者Forum
ユーザーエクスペリエンス（UX）デザインの世界に身を置くわれわれにとっては、いまや心浮き立つような時代となった。UXの価値はますます広く認められるようになり、次々に生まれる新たなテクノロジーやメディアを超えたトレンドは、UXデザインの実践面で飛躍的な進化を生み出す土壌を整えつつある。 私自身、新たなチャレンジの数々に見舞われてあやうく安全圏から押し流されそうになりながらも、インフォメーションアーキテクトとしてはそれらを大いに楽しんでいる。これまでに、ソーシャルソフトウェアやリッチユーザーインターフェースをデザインしたり、モバイル検索の未来についてのシナリオを描いてみたり、いろいろなチャネルやアプリケーションにまたがるようなUXを設計してきた。するとそのうち、VIPルームの“エラい人たち”に自分のアイデアをご理解いただこうと苦心する場面が次第に増えつつあることに気づいた。 そんなわけで、私は
モバイルサイト構築前に知っておきたいユーザビリティ10のポイント（第1回） | モバイルサイト構築のユーザビリティいろは
端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で本格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト（以降“モバイルサイト”）の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で
コンバージョンを意識したページクリエィティブの当たり前10項
はじめまして。昨年末ライブドアに入社しました阿部です。 入社してまだ日が浅いということで、今回は前職でのナレッジを一部ご紹介したいと思います。 前職ではアフィリエイト広告を主軸としたWeb専業の広告代理店で、Webプロモーションのディレクションを担当していました。 アフィリエイト広告の特性上、例えばランディングページ（以下LP）であればコンバージョン（成約）を意識したクリエィティブであることが重要です。なぜならクリエイティブの視点からもコンバージョンを意識する事で、目に見えて広告効果が改善されるからです。 そしてコンバージョンを意識したクリエィティブは、アフィリエイト広告のLPに関わらず、多少なりともコンバージョンアップに気を配るページであれば、流用可能なものばかりです。そのため、知っていて損の無い10項だと思われます。 当たり前の事柄ばかりを集めましたので、現在のLPに漏れが無いか、宜し
Webサービスにおけるショートカットキーの原則 - Trans
Webサービスにおいてもデスクトップアプリケーションと変わらない使用用途のものが増えています。そこで使用頻度が上がるにつれてほしいなと思うのがショートカットキーです。 ショートカットキーのユーザビリティ よく使うソフトウェアにショートカットキーが実装されていると嬉しいものです。何度も繰り返す作業を簡単に行うことができるようになります。 今までは使用頻度が高いソフトウェアはその多くがデスクトップアプリケーションでしたが、Gmailを始めとしてデスクトップアプリケーションと遜色ないWebサービスが多数現れるようになってきました。 ただ、デスクトップアプリケーションと違い、Webサービスにおいてはそのショートカットキーの実装方法が共通化されているわけではありません。そこで、一度現状のWebサービスを比較し、ショートカットキーの原則を作ってみようというのがこのエントリーの趣旨です。 そのために、当
要件、要素、分類と構造化、そして、視覚化・振る舞いの検討へ: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 昨日の「人間中心設計プロセスでの具体的なデザインへの落とし込みの技術に関する理解不足について」の続きとして。 結局、インタラクティブな製品のデザインというのは、きわめてシステム設計的なものだと考えたほうがいいと思っています。製品、利用者を中心に、それが用いられる利用環境も含めた大きなシステムを想定した設計が必要だと捉えたほうがやるべきことが明確になってくるのではないかと思います。 各段階でのアウトプットから見たUIデザインのプロセスきわめて概念的にモデル化してしまえば、作業のステップは各段階で以下のようなアウトプットを作成しながら進むと考えればいいと思います。 コンテキストシナリオペルソナが製品を利用する際のコンテキスト、行動を物語として示したもの要件の定義コンテキストシナ
返信しやすいメールのフォーマットを考える (ユーザビリティ実践メモ)
メールを使ったBtoCコミュニケーションとして、多くのユーザに対して認知・集客を目的とするメールマガジンが一般的に挙げられます。 一方、比較的、対象人数が少ないセミナー・説明会の応募受付や面接など1対1のコミュニケーションの場合、企業側から送付したメールに対してユーザに「メールで返信を求める」形が考えられます。 今回は、弊社のユーザビリティテスト（ユーザ行動観察）から得られた知見から、「より返信しやすいメール」の作り方を考えてみましょう。 ある企業では、自社サイトからエントリーした採用希望者に対し、個別にメールを送り、１次面接のスケジュール調整を行っていました。 そこで、それに近い状況をテストするため、複数のパターンのメールを用意し、就職活動の中でユーザがそれらのメールを受け取ったという想定で行動観察を行いました。 まず、「メールを開封するかどうか」という場面では、本連載でも以前ご紹介した
効果的なウェブサイトに対する意識のギャップ
「効果的なウェブサイトって？」というのは単純な質問ではあるものの、視点や役割によって意見が違いそうです。この抽象的な質問に関してレポートにまとめている文書を見つけました。オンラインラーニングやウェブ上のクリエイティビティの推進のために様々な活動をしている NPO 団体 IDEA が Factors that improve online experience というレポートをまとめています。NPO, ウェブサイト制作会社, 利用者の３つのブループに分けて「効果的なウェブサイトの要素は何か」という質問に応えてもらったそうです。詳しい調査結果と解説が書かれた PDF も同ページでダウンロードすることが出来ます。 作る側と利用者とのギャップというのは未だにあるみたいですね。今回の調査で大きく分けて 8 つの特徴が見つかったみたいなので以下にまとめておきます。自分も改めて意識しなければならないなと
フォームのmaxlength属性 | Web標準Blog | ミツエーリンクス
input要素には、maxlengthという属性が定義されています。先日社内でこの属性について質問をうけたので、すこし調べてみることにしました。 最大文字数を指定する属性 HTML4仕様書では、maxlength属性は次のように定義されています。 maxlength = number [CN] When the type attribute has the value "text" or "password", this attribute specifies the maximum number of characters the user may enter. This number may exceed the specified size, in which case the user agent should offer a scrolling mechanism. The de
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-889.html
IDEA * IDEA
https://www.openvista.jp/archives/note/2009/flexible-web/?2009/flexible-web/
被験者の操作、表情、音声をまとめて録画できるユーザビリティテストツール『Silverback』 | 100SHIKI.COM
