新卒採用ページ、本当に学生視点ですか？ (ユーザビリティ実践メモ)
2011年の新卒採用活動に向けて、採用ページをリニューアルしたり、コンテンツを拡充したりする企業サイトが多くなっています。今回は、新卒採用ページを「学生視点」で作るためのポイントについて考えたいと思います。 ただその場合でも、掲載コンテンツを本当に有効なものとするには、学生の目線に立っているかどうかをチェックしてみる必要があります。 例えば、職種の紹介として、以下のような例があった場合、どちらがイメージしやすいでしょうか？ 例Aに関しては、その職種に関する業務知識がないと、内容をイメージすることは難しいですが、例Bについては、1日の流れをイメージできたのではないでしょうか。 学生は業務経験がなく、社会人にとっては常識的な業務知識もないことがほとんどです。そのため、業務知識がないユーザも理解できるような配慮が求められます。（上記では「タイムスケジュールにする」、「解説をつける」、「画像で補足
顧客を逃してしまう、Eコマースサイトの15のポイント
Eコマースサイトの設計・制作時の間違いで、顧客を逃してしまう15のポイントと解決方法をSmashing Magazineから紹介します。 15 Common Mistakes in E-Commerce Design 下記は、そのポイントと解決方法を簡潔にしたものです。 原文ではキャプチャ入りで詳細に解説されています。 商品の詳細な紹介ページが無い。 商品の外観・材質・重量・寸法など詳細な情報を提供します。 連絡する手段が分かりにくい（提供されていない）。 ウェブサイトの全ページの見つけやすい場所に連絡に関する情報を掲載します。 購入のフローが長すぎる（分かりにくい）。 シンプルなレイアウトにし、入力→確認→完了のようにフローを簡潔にします。 購入時にサイトへの登録を必須にしている。 登録無しでも購入できるようにします。登録を入れる際は最後にオプションでいれます。 サイトの検索機能が役に立
フォームにデータを正確に入力してもらうためのポイント - builder by ZDNet Japan
3回にわたってフォームの基本的なデザインについてまとめてきたが、今回はユーザーの入力を補助するフォームのデザインを紹介したい。 入力に必要な情報をわかりやすく伝える データを必ず入力してほしい場合や、全角で入力してほしい場合には、そのことをユーザーに伝えなければならない。そこで、ユーザーの目に留まるようにフォームに注意書きを表示する。 必須項目であることを示す 必ず入力してほしい項目には「必須」と表示するのが一般的だ。項目名の部分に表示するパターンと、テキストボックスの部分に表示するパターンがあるが、ユーザーが認識できればどちらに表示しても問題はない。 また、必須項目にマークを付けて、欄外に必須であることを記すパターンも利用することができる。 たとえば、次のサンプルは「名前」と「メールアドレス」の項目名の横に「必須」と表示したパターンだ。
携帯サイトで会員登録を阻害する4つのハードル (ユーザビリティ実践メモ)
携帯向けサイトを運営する中で、アクセス数はそれなりにあるのになかなか会員登録に結びつかずに歯がゆい思いをされた経験のある方も多いのではないでしょうか？ 安易に広告投下費用を増やす前に、もう一度原因を考えてみましょう。 不要なメールマガジンが届くのが嫌だ 個人情報を登録することに抵抗がある 情報を入力するのが面倒 あえて登録する必要性が感じられない これらのハードルを乗り越えるためのポイントを整理しました。 1.メールマガジンは配信頻度を明記する これまでに何らかの無料サイトに登録した結果、大量のメールが届くようになったという苦い経験をしているユーザは意外と多いものです。 メールマガジンの受信が必須のサイトの場合でも、あらかじめどの程度の頻度でメールを送付するのかを明示しておくことで、一定程度ハードルを下げる効果が期待できます。 2. 個人情報を登録させる場合には理由を明記する ショッピング
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。 10 Tips to Create a More Usable Web 以下、各ポイントのピックアップです。 1. Creating active navigation アクティブ機能をもったナビゲーションの設置 サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。 2. Clickable labels & buttons ラベルやボタンをクリック可能に フォームのラベル（label）やボタン（button）に、クリック可能であることが分かるようにスタイルシートで設定します。 例： <textarea name="code" class="css" cols="60" rows="5"> label, butto
Webツールに最適な、ちょこっとだけ体験させるインターフェイス : ロケスタ社長日記
シフターというツールがあり、僕も使ってたりしてたんですが、そのプロモーションサイトがリニューアルしたらしいです。 これがなかなかどうして、ぐっとくるインターフェイスだったので紹介します。これはツール系のサイトをやっている人には参考になるのでは。 シフターとは？ そのまえに「シフター」って何よ、という話です。 シフターについては以下で紹介したことがあります。 アルバイトのシフトをWeb上で管理する「シフター」が相当イケてる : ロケスタ社長日記 簡単に言うと、アルバイトのシフト管理を効率よくできる、Web上のツールですね。いまだにＥｘｃｅｌとかでやっている人が多い中、Web上で管理できる数少ないツールの一つです。 シフターとは？ で、このインターフェイスの何がいいかというと、トップページ上で、シフターのツールのさわり心地を実際に試すことができるのですね。 こんな感じ。 今
携帯サイトで成果を出すためのアクションボタン配置 (ユーザビリティ実践メモ)
携帯オンリーユーザであろうと、PCと携帯を使い分けている両用ユーザであろうと、携帯サイトを利用している状況下では多くのユーザは急いでサイトを利用していると言えます。 例えば携帯オンリーユーザは、早いスクロール・手入力が習慣化しているため、駆け抜けるようにサイトを利用します。 また、両用ユーザがわざわざ携帯サイトを利用している状況は、家に帰ってPCサイトを開くまで待てないほど急がなければならない事情や心情があることを物語っています。 以上のことから、どれだけ急いでいても確実にアクションを起こせるサイトこそ成果の出せる携帯サイトであると言えるでしょう。 よって今回は、急いでいるユーザにアクションを起こしてもらうためにはどこにアクションボタンを配置すべきかについてご説明します。 あなたがとても急いでいる状況でこのページを開いたら、どこにアクションボタンが配置されていて欲しいでしょうか。 例1は問
使い勝手の良いフッタにするために、配置すべき6つの要素
6 Things To Include for a User Friendly Footer 以下、その意訳です。 ウェブサイトのフッタは、ユーザーが情報を得るための有用かつ大切なコンテンツとなり得ます。 フッタに情報を配置するということは、ウェブサイトに関する重要な情報を見つけるきっかけを与え、素晴らしいナビゲーションにもなり、ユーザーに与える第一印象にも影響します。 下記に挙げる6つの要素をあなたのサイトのフッタに配置すべきか検討してください。 1. About Us Link 「About Us」のリンク あなたやあなたの会社についての基本的なインフォメーションへのリンクを設置します。 ユーザーがあなたのサイトを確かめる手段の一つになります。 2. Contact US Link 「問い合わせ」のリンク サイトの所有者あるいは担当者に連絡を取る手段を提示します。 サイト上のタイプミス
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
サイトマップをフッタに配置する際のポイントとその効果
サイトマップを独立したページとしてではなく、フッタに配置する際のポイントとその効果をWeb Designer Wallから紹介します。 Modern Sitemap and Footer 下記は、その意訳です。 昔はほとんどすべてのウェブサイトで、コンテンツをリストアップしたサイトマップを独立したページとして設置していました。 サイトマップの重要な目的は、ユーザーや検索エンジン（スパイダー）がサイト内の情報を探し出すのに役立つことです。 現在は、多くのモダンなウェブサイトでサイトマップページを設置していません。代わりに、サイトマップをフッタに配置しています。 サイトマップをフッタに設置する効果 クリック数やページビューの増加 ユーザーはページを隅々までじっくり見るわけでなく、スクロールしながらざっと見ることがほとんどです。 そして、多くのユーザーがスクロールして最後に見る場所は、フッタです
404 Not Foundページをユーザーにとって、より有用にする5つのチップス
2. Keep it familiar 見慣れたデザインで 404ページのデザインは、そのサイトの他のページと同様にするのが望ましいです。異なったデザインにしてしまうと、ユーザーはサイトから離脱したと思うかもしれません。 404ページには、最低限、あなたのサイトのロゴと404のエラーメッセージを配置してください。 3. Keep it Basic ベーシックに 404ページでユーザーにエラーということを突きつけて圧倒させないでください。404ページのゴールは、可能な限りユーザーが探していたページに導くことです。 その１つの方法として、404ページにアクセスが多いページのリンクを掲載する方法があります。 また、検索機能を設置することも効果的な方法です。 4. Offer some direction 道案内を提示 404ページには、ユーザーにいくつかの道案内を提示するべきです。 最も重要な道
アイコンの効果的な使い方を実例から学ぶチュートリアル | コリス
アイコンの効果的な使い方を実例から学ぶチュートリアルをSmashing Magazineから紹介します。 How To Use Icons To Support Content In Web Design 下記は、その意訳です。 How To Use Icons To Support Content In Web Design アイコンは、ユーザーをあなたのウェブサイトの内容に惹きこませるシンプルで、効果的な方法です。 アイコンを使用して、ウェブサイトのコンテンツをサポートする素晴らしいサンプルとベストプラクティスを紹介します。 1. How To Use Icons アイコンを効果的に使用する方法 アイコンを使用する際のゴールの一つは、ユーザーに情報を素早く、そして効率的に伝えることです。 アイコンを効果的に使用すると、説明を必要とせずに、有効なコミュニケーションを可能にし、少ないコンテ
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
モバイルサイト構築前に知っておきたいユーザビリティ10のポイント（第1回） | モバイルサイト構築のユーザビリティいろは
端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で本格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト（以降“モバイルサイト”）の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
ケータイ公式サイト&ダウンロードサイトのユーザビリティ6つのポイント（第4回） | モバイルサイト構築のユーザビリティいろは
IDEA * IDEA
モバイルサイトを見やすくする絵文字活用&テキストレイアウトのポイント（第3回） | モバイルサイト構築のユーザビリティいろは
アクセシブルで、美しいフォームを実装するためのチュートリアル集 | コリス