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.
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
ページ内リンクを使用する際の注意点 (ユーザビリティ実践メモ)
しかし、ユーザはリンクをクリックする際、そのリンクが「別ページへの移動」なのか「同一ページ内でのリンク」なのかは事前に把握していません。弊社のユーザ行動観察調査では、ページ内リンクをクリックしたユーザが、クリックした先のコンテンツをスクロールしながら閲覧する途中で、自分がクリックの前と同じページにいる（ページ内リンクだった）ことを知って混乱する行動が多く見られます。 これは、自分がページ内の移動をしていることや、現在自分がいる位置について充分なフィードバックを得ないままユーザが行動することで起こる混乱と考えられます。 ページ内リンクの利点を活かしつつ、ユーザに「現在自分がどういう状態にいるのか」を伝え、混乱を最小限に抑える方法としては以下のようなものがあります。 【クリック前】 リンクのすぐそばに、上下の動きを示すアイコンを置くことによって、そのリンクが同一ページ内での移動であることを伝え
美味しいカステラなのに楽天メソッドが極まりすぎてて残念な場合
長崎心泉堂の「幸せの黄色いカステラ」というのを楽天で取り寄せてみました。 とても卵の味が濃くて、甘さはその分抑えてあり、非常に美味しいカステラでした。 よくあるカステラとは明らかにひと味もふた味も違います。届いた１本を数日で食べきって、またすぐに注文しちゃったくらいです。 また、アフターケアも充実していて、買った後、こんなメールまで届いたのです。 題名：【長崎 心泉堂】カステラは無事お届けできていますか？ お世話になります。 カステラ専門店【長崎心泉堂】 受注担当 待鳥智美です。 ＜中略＞ さて、ご注文の品は無事お届けできておりますでしょうか ご贈答の場合は、お届け先様にお気に召していただけましたでしょうか？ カステラのお味はいかがでしたでしょうか? ぜひ、私どもに、お客様の声をお聞かせくださいませ。 お願いします。 というのも、お客様の声によりよい商品作りがあると考えるからです。 当社の
コンバージョン直前のユーザがつまずきやすいポイント (ユーザビリティ実践メモ)
コンバージョン率向上を考えた場合、エントリーフォーム最適化（EFO）など、フォーム内の改善に意識が向きがちですが、実はフォームに入る前の段階にも改善すべき点が残されている場合があります。 今回はフォームに入る前のページでよくみられる、ユーザのつまずきやすいポイントをご説明します。 ウェブサイトを訪問しているユーザにとって、個人情報の入力などの手続き行為は主目的ではありません。商品を購入したり、申し込み後にサービスを利用することが本当の目的です。その目的に早く到達するため、手続き行為にはできるだけ手間をかけず、手早く終わらせようとする傾向が見られます。 ここで、注意が必要なのが手続きの途中に会員登録のステップがあるケースです。 ECサイトでは「購入」の手続きの途中で「既存/新規ユーザ」の振り分けが行われる場合がありますが、ユーザは手続きのステップとして「会員登録」が必要あることを必ずしも事前
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
Webページの情報を共有してもらうための３つのポイント (ユーザビリティ実践メモ)
複数の人が関わるシナリオを意識しよう Webサイトを訪れたユーザが、商品・サービスの購入など何らかの意志決定を行う際、自分ひとりだけの判断で決めず、他の人と相談してから決めるという場合は、実はかなり多いものです。 弊社のユーザ行動観察調査では、以下のような例が見られました。 幹事役の数名が、各自で会場候補を検索各自が自分の選んだいくつかの候補を持ち寄り、どの会場にするか相談決定 【例2．企業におけるIT製品の導入】 部門の担当者が、おおまかな要求仕様を決め、メーカーサイトや販売店サイトを検索性能や価格などを一覧できる比較表を作り、IT管理者などに相談（IT管理者がWebサイトを閲覧する場合もあります）絞り込んだ候補について決裁文書を作り、上司に相談決定 【例3．住宅ローンの借り換え】 妻が金融機関サイトや比較サイトで情報収集夫に相談して候補を絞り込む絞り込んだ金融機関の店舗を夫婦で訪れ、担
【海外事例に学ぶ】 リッチ化するフッター (ユーザビリティ実践メモ)
これまで当サイトでも、いくつかの記事でフッターについて扱ってきました。最近、海外のサイトを見ていると、フッターについて新しい取り組みが見られます。 今回は、海外サイトの動向をサンプルとし、フッターにおける新たな取り組みのメリットをご紹介します。 Geek Trends: 15 Footers with great usability ( pop upon magazine ) 6 Things To Include for a User Friendly Footer ( UXBooth ) Modern Sitemap and Footer ( WebDesignerWall ) Footers (76 examples) ( Smiley Cat Elements of Design ) 例えばTIGERS （http://www.tigers.org.au）のフッター(下図)では、革
あなたのサイトは大丈夫？--ECサイト3つのチェックポイント
夏のボーナスシーズンがやってきました。こんな景気ではありますが、ボーナス、エコポイント、定額給付金と、ECサイトでは様々な商戦が繰り広げられています。 ユーザーの購買意欲がかき立てられるこの時期にちなんで、今月はECサイトを検証しました。特に今回はECサイトの検索機能に焦点を当てます。被験者は男女混合5名、「Amazon.comとYahoo!ショッピングにて、食器洗い洗浄機を買う」というタスクを課しました。はたして被験者たちは満足のいく買い物ができるのでしょうか？ ストレス1：「商品が見つからない！！」 被験者D（20代男性）は、Yahoo!ショッピングにて「食洗機」と検索窓に打ち込みました。その結果が下記の図です。 図1：ユーザーが検索結果を見た際の視線の様子。赤い線は視線の動きを、丸は視線の滞留時間の長さを示す。検索結果が見られていないことがわかる（※画像をクリックすると拡大表示します
はてなブックマークエントリーページの「参考になった」ボタンは何故利用されなかったか - uilab
「参考になった」ボタンとは エントリーが参考になったかどうかを「はい」「いいえ」で選択して可視化することにより、該当エントリーの参考度を計る機能です。 はてなブックマーク新バージョンの公開ベータテスト開始について - はてなブックマーク日記 - 機能変更、お知らせなど 去年の11月7日に、はてなブックマークの新しいバージョンが公開されるとともに、上記の機能がリリースされました。 ところが、それから約半年後の14日に、はてなから以下のような発表がありました。 昨年11月のはてなブックマークリニューアルから、試験的にエントリーページ(コメント一覧が表示されるページ) にて「参考になった」ボタン機能を提供してきました。 半年間運用してみましたところ、想定していたよりも利用されていないことが分かりましたので、本日本機能を停止いたしました。ご了承ください。 「参考になった」ボタンの廃止について -
確認画面で与える安心感 (ユーザビリティ実践メモ)
「○円値引き」や「今なら○％オフ」などのキャンペーンや特典を用意して商品の購買を促すECサイトは多いですが、その場合は商品掲載ページだけではなく、買い物かごに入れた後の確認画面にも気を使う必要があります。 その確認画面は以下のようになっていました。 この画面では、商品価格が「10％オフ」されているかどうかがわからないため、ユーザが「本当に値引かれているのか？」と疑問に思ってしまう点が問題でした。 実際には正しく値引かれていたとしても、確認画面でその情報が提示されていなければ、ユーザに無駄な不安を抱かせてしまい、スムーズな購入の妨げになってしまいます。 商品名や注文数、価格だけではなく、購買の後押しとなるようなキャンペーン・特典情報についてもきちんと確認できるようにしましょう。 ECサイトは商品を購入してもらうことが最終目的ですので、商品画面単体ではなく、続く買い物かごの確認画面・住所入力画
意外に効果的なフッターリンク ｜ 誤解を避けるコンテンツ配置のコツ (ユーザビリティ実践メモ)
ウェブサイトを訪れたユーザにできるだけ多くのページを閲覧してもらうために、どんな対応が考えられるでしょうか。 他に見たいと思うコンテンツにスムーズに移動できるようにすることが重要となります。 今回は、後者を実現するための手段の一つとして、フッターリンクの有効性についてご紹介します。 ナビゲーションリンクには、一般的には「グローバルナビゲーション」や「左ナビゲーション」「右ナビゲーション」などがありますが、中でもユーザに頻繁に利用されているのはページ下部に配置されたフッターリンクであることが弊社のユーザビリティテスト（ユーザ行動観察調査）でわかっています。 フッターリンクはページの下部に配置されるナビゲーションリンクであるため、設計時には軽視されがちです。しかし、ユーザにとってはページの上から一通りコンテンツを閲覧した後に出現する関連ページへの最も近い導線であるため、有効な手段となっているわ
サイトマップをフッタに配置する際のポイントとその効果
サイトマップを独立したページとしてではなく、フッタに配置する際のポイントとその効果をWeb Designer Wallから紹介します。 Modern Sitemap and Footer 下記は、その意訳です。 昔はほとんどすべてのウェブサイトで、コンテンツをリストアップしたサイトマップを独立したページとして設置していました。 サイトマップの重要な目的は、ユーザーや検索エンジン（スパイダー）がサイト内の情報を探し出すのに役立つことです。 現在は、多くのモダンなウェブサイトでサイトマップページを設置していません。代わりに、サイトマップをフッタに配置しています。 サイトマップをフッタに設置する効果 クリック数やページビューの増加 ユーザーはページを隅々までじっくり見るわけでなく、スクロールしながらざっと見ることがほとんどです。 そして、多くのユーザーがスクロールして最後に見る場所は、フッタです
心理的なコントラスト効果 (ユーザビリティ実践メモ)
非常に高価なA商品を見た後に、それよりは安価なB商品を見ると、普段なら手が出ないB商品が安く感じられることがあります。 ウェブ上でもこのコントラスト効果を上手く利用することで、ユーザをビジネスゴールへと効果的に誘導できる場合があります。 例えば、「お問い合わせ」と「資料請求」という2つのボタンを並列に並べると、「資料請求」ボタン単体の場合に比べて「資料請求」ボタンがクリックされやすくなることが弊社のユーザビリティテストでも観察されています。 この場合、「お問い合わせはちょっと面倒だけど、資料請求だけならまあいいか」といった考えがユーザの心の中で働くようです。つまり、「お問い合わせ」との対比で「資料請求」が簡単に感じられるのです。 ユーザをビジネスゴールへと誘導していくための一手段としてコントラスト効果も考慮にいれると良いでしょう。 ただ、このコントラスト効果をユーザを欺くような形で利用する
印刷対応は大丈夫？ (ユーザビリティ実践メモ)
せっかく印刷をしたのに、うまく印刷されなかった場合のユーザの落胆は想像に難くありません。 以下いくつかの対応方法をご紹介いたします。 （1）印刷に収まる横幅で設計する IE6のデフォルト設定の場合は、横幅650ピクセル以内であれば、右端が切れずに印刷がされます。ただ、横幅650ピクセルというのはかなり狭いといえます。 そこで、印刷がされなくても特に問題が生じないコンテンツを右側に配置して（メニューなど）、重要なコンテンツ部分は650ピクセル以内に収まるようにする方法もあります。 （2）印刷用のページを別途設ける 印刷用のHTMLやPDFを提供するという方法もあります。 しかし、印刷用ページへのリンクにユーザが気付かないことが多いため、リンクの見せ方には工夫が必要となります。 （3）印刷用CSSの活用 CSSを活用することで、印刷の対象領域を制御することができます。印刷領域を定義してお
ECサイトで好まれる納期表現 (ユーザビリティ実践メモ)
オンラインで商品を販売するサイトでは、商品のお届け日がユーザのサイト利用に大きな影響を与えることがあります。 特に実際には素早く届けられる商品にも関わらず、お届け日の表現の仕方によっては、ユーザに正しく納期が伝わらず、ユーザが購入を断念するケースがよく見受けられます。 そこでどのような納期表現がユーザに好まれるのかを20人のユーザビリティテストを通じて検証しました。同じ納期を複数の表現で提示した場合、ユーザに好まれた順は以下のような結果となりました。 上記結果を踏まえ、納期表現のガイドラインは以下のようになります。 【納期表現の要件】 ・発送日ではなく、到着日の目処がつくこと(ベストは到着日が明記してあること) ・ユーザの慣れ親しんだ言葉を使うこと（「○営業日」よりも、「○日後」「今週中」など） ・極力納期が短く感じられるよう、ぱっと見の数字が小さい方を使う(「7日後」よりも「1週間
誘導リンクはコンテンツエリアに配置する (ユーザビリティ実践メモ)
ウェブサイトを設計する際には、ページを「ヘッダー」「フッター」「ナビゲーション」「コンテンツ」の4つのエリアに分けて定義することができます。 一方、ユーザがウェブサイトを閲覧するときには、左・右ナビゲーションはほとんど見ておらず、コンテンツエリアばかりを見ていることがユーザビリティテストの結果からわかっています。 そこで、私たちが設計する際には、コンテンツエリア内にも次にユーザが見たいと考えられるページへの誘導リンクを配置するようにしています。 誘導リンクは、他のカテゴリなどへのリンクであったり、同カテゴリ内の並列する他のページへのリンクであったりと、状況によって異なりますが、こうした次にユーザが進むべきページへの導線をコンテンツエリアに配置することによって、ユーザはサイトをスムーズに回遊できるようになります。 ユーザは、ページ全体をまんべんなく閲覧することは少なく、関心のある箇所のみを閲
安心感を与えるフォームページ (ユーザビリティ実践メモ)
個人情報の取り扱いに厳しい目が向けられる昨今、入力フォームはセキュアなサーバに置くなどの配慮をしているウェブサイトも多いかと思います。 安心感を与えるフォームページを実現するために弊社が考えるのは、「ユーザが不安に思うタイミングに、明示的に安心要素を配置する」ということです。 ユーザは、個人情報などを入力するページにアクセスした途端にセキュリティに関して気にする傾向があります。そこで、ページ上部にセキュアであることを証明するマークを配置することが検討できます。 また、一通り入力をし終えたユーザは、次に画面に移動する際に「次へ」ボタンなどのリンクをクリックする際にも、「本当にこのウェブサイトはセキュリティがしっかりしているのだろうか」という不安に駆られます。 次のページに遷移するアクションボタンの近くにも「セキュリティ保護のためSSL（暗号化通信）を使用しています」などの文言や、セキュリティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ビービットが提供するプロのユーザビリティ改善プロセスを体験―勝手にユーザビリティ診断 | Web担当者Forum
「Yahoo!ニュース」の表示速度が3～5倍に、そのからくりは……：記事の芽
