IDEA * IDEAドットインストール代表のライフハックブログ
ログインフォームに大切な7つの要素と重要な1つの機能
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
pukiwiki、はてなトップページの妙な恐怖感
尾野（しっぽ） @tail_y 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:49:50 нσυѕαι тσяυ／縫采 徹 @firty_housai 何があった…RT @tail_y: 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:50:38
Google、ページの表示範囲シミュレートツール「Browser Size」発表
「何％の人がページのどこまで表示できるか」を視覚的に見せてくれるWebデザイナー向けのツールがGoogle Labsに登場した。 米Googleは12月16日、Webページがユーザーからどのように見えているかをシミュレーションするWebデザイナー向けツール「Browser Size」をGoogle Labsの機能として公開したと発表した。 Webページでは、重要なコンテンツやダウンロードボタンなどはスクロールしなくても見える位置に置くことが重要だ。例えばGoogle Earthのダウンロードボタンの位置を100ピクセル上に移動しただけで、インストール率が10％増加したという。 だが、PCの解像度やWebブラウザの表示サイズなどの要因で、ユーザーによって表示している範囲は異なる。Browser Sizeでは、サイトの入力枠にシミュレートしたいページのURLを入力すると、表示できる範囲を示す半
【携帯サイト】もう1ページ先に進んでもらうための６つのテクニック (ユーザビリティ実践メモ)
せっかくコンテンツを作っても、リンクがユーザにクリックされず、内容を見てもらえない、という悩みをお持ちのWEBマスターの方は多いのではないでしょうか。 今回は、携帯サイトでユーザを次ページに導くためのテクニックをご紹介します。 筆者がユーザビリティテスト（ユーザ行動観察調査）を通して得た実感として、携帯サイトの方がパソコンサイトよりも次ページへの誘導が難しいという印象があります。ある携帯の有料会員制サイトでは、「ユーザはいつも利用しているリンク以外はほとんどクリックしない」というユーザ行動が見られました。 理由として、携帯サイトは 読み込みが遅い隙間時間に利用される場合が多く、利用時間が短いパケット代がかかる などが考えられます。 そのため、携帯サイトでユーザを次ページに誘導するためには、パソコンサイト以上に誘導方法を意識する必要があります。以下、ユーザビリティテスト（ユーザ行動観察調査）
フォームでのちょっとした配慮の例 (ユーザビリティ実践メモ)
フォーム設計のポイントについては、実践メモでも何度もご紹介してきました。 フォーム設計についての記事一覧 今回は、ECサイトの「配送日時」を例にとって、フォームの改善ポイントをご紹介します。 一見普通のフォームですが、実際にユーザ行動観察調査を行ってみると、何人ものユーザが混乱する様子が観察されました。どのような問題が起こったのでしょうか？ 調査では、次のようなことが起こりました。 「配送日時は1週間以内をご指定ください」という注記の存在に気付かず、1週間以降の月日を入力してしまった。 「2月8日」と入力したが、実際に指定できるのは2月7日までだった。 翌週の水曜日で指定したかったが何日か分からずに、手元の手帳でカレンダーを確認しようとした。 開発側の視点では、「1週間以内とちゃんと明記しているのに・・・」「曜日なんて考えるまでもない」と思ってしまいがちです。 もちろん何の問題もなく使いこ
モバイルサイト構築前に知っておきたいユーザビリティ10のポイント（第1回） | モバイルサイト構築のユーザビリティいろは
端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で本格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト（以降“モバイルサイト”）の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
星野リゾート、旅館サイト改良で予約数8割増：日経ビジネスオンライン
気になる記事をスクラップできます。保存した記事は、マイページでスマホ、タブレットからでもご確認頂けます。※会員限定 無料会員登録 詳細 ｜ ログイン
【海外事例に学ぶ】「会員登録はこちら」を用いない会員化シナリオ (ユーザビリティ実践メモ)
今回は、A List Apart.掲載のLuke Wroblewski氏による記事、"Sign Up Forms Must Die"をご紹介します。 ユーザにウェブサービスを提供する上で、まずは「会員登録」を求めることはよくあることだと思いますが、今回は、「まずは会員登録」から始めずユーザの会員化を実現する方法についての記事です。 旧来の「まずは会員登録」の事例： 動画共有サイトの一つ、 Google Video( http://video.google.com/)を例にとります。ユーザはGoogle Videoに訪問し、色々な動画を見ていく中で、自分もウェブ上に動画を公開してみたいと思います。そこで、「ビデオをアップロードする(Upload Video)」を押すと、その機能を利用するためのアカウント作成を初めに求められ、以下の会員登録ページにたどり着いてフォームへの情報入力を求められます
フォームにデータを正確に入力してもらうためのポイント - builder by ZDNet Japan
3回にわたってフォームの基本的なデザインについてまとめてきたが、今回はユーザーの入力を補助するフォームのデザインを紹介したい。 入力に必要な情報をわかりやすく伝える データを必ず入力してほしい場合や、全角で入力してほしい場合には、そのことをユーザーに伝えなければならない。そこで、ユーザーの目に留まるようにフォームに注意書きを表示する。 必須項目であることを示す 必ず入力してほしい項目には「必須」と表示するのが一般的だ。項目名の部分に表示するパターンと、テキストボックスの部分に表示するパターンがあるが、ユーザーが認識できればどちらに表示しても問題はない。 また、必須項目にマークを付けて、欄外に必須であることを記すパターンも利用することができる。 たとえば、次のサンプルは「名前」と「メールアドレス」の項目名の横に「必須」と表示したパターンだ。
40分でできるホームページ診断 ～最低限クリアしたい40項目のチェックシート | Web担当者Forum
40分でできるホームページ診断 最低限クリアしたい40項目のチェックシート［訪問者目線編 2008年版］ SEO？ ユーザビリティの向上？ それ以前にしなきゃいけない「サイト作りの基本のキ」を、あなたのサイトではちゃんとできているだろうか？ 高度な施策に目を向ける前に、最低限クリアしておきたいチェックポイントをまとめてみた。あなたのサイトは何点とれるだろうか？ TEXT：編集部 協力：株式会社 環 ウェブサイト作りの基本のキSEOやユーザビリティに限らず、キーワード広告、アクセス解析、LPO、リッチインターフェイスなど、サイトの効果をアップさせる手法はさまざまあり、Web担でも詳しく解説してきている。 しかし、そういった施策にコストを割く前に、現状の自社サイトが、訪問者が「あれれ？」とマウスをうろうろさせてしまうような状態になっていないか確認したことがあるだろうか。 そんなあなたのために、
恐れるべき「慣れ」とユーザー目線について : LINE Corporation ディレクターブログ
こんにちは、豪です。 今回は、「ユーザー目線」について、私なりの考え方をお話いたします。 これはディレクターに限らないことかもしれませんが、一日で最も頻繁に見るWebサイトは自分が担当するサービスではないかと思います。 設定された KPI の達成を目指すことは勿論ですが、利用するユーザーが幸福な体験をするにはどうすればよいかを、それこそ四六時中考えながらサイトとにらめっこしているわけです。 ただ、そのにらめっこの結果、笑顔になるのが他ならぬユーザーでなければ、改善といえないのは当然のこと。 【01】「慣れ」に気をつけよう 例えば、ナビゲーションの並びを見直した方がいいと考えたとします。 その見直しは項目の削除かもしれませんし、順番の入れ替えかもしれません。しかし、果たしてそれがユーザーが望んでいることなのかどうかは、クリック数などをしっかり分析する必要があります。 ほとんどのユーザーは、自
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
<script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&pid=877160106″></script><noscript><a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&pid=877160106″ target=”_blank” ><img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&pid
すぐ、その場で修正できる確認画面 (ユーザビリティ実践メモ)
ECサイトの購入フォームや、会員サービスの入会申し込みフォームでは、ユーザが名前や住所など多くの項目を入力しなければなりません。
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 前回のコラムでは、ウェブサイトを使っているお客様がなぜ途中であきらめるのかというテーマで話しました。「ウェブサイトの欠陥」を大きくくくると、次の4つのどれかに当てはまります。 サイトのコンテンツ自体が足りない（価値の欠陥）価値のあるコンテンツが探しにくい（ナビゲーションが悪い）価値のあるコンテンツは見つかったがよくわからなかった（プレゼンテーションが悪い）サイトに信頼がなかったために使うのをやめ
ユーザビリティの高い、使いやすいフォームを制作するための12のポイント
Li'l Engineのエントリー「ユーザビリティフォームのためのチェックリスト」の意訳で、ユーザビリティの高いフォームを制作するための12のポイントの紹介です。 Checklist for Usability Forms 不明な箇所は英文のまま記載してましたが、皆様の協力により3,5を和文にしました。 フォームは正しく入力できるように、可能な限り簡潔に。 フォームには、必要なインフォーメーションを含める。 タイトル：なんのためのフォームか フォームのヘルプ キャンセル(中止)の選択肢 入力すべき項目は、多くしない。 重複する入力項目は設置しない。 フォームの公開後しばらくしたら、収集したデータが実際に使用されているかチェックする。利用されていないものがあれば、収集しないようにする。 長いフォームは紛らわしいので、分ける。 タスクごとに分ける それぞれのページごとにチェックをし修正すること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルサイトを見やすくする絵文字活用&テキストレイアウトのポイント（第3回） | モバイルサイト構築のユーザビリティいろは