User Heat : どこが読まれているか見える！無料ヒートマップ・ツール
ヒートマップとは ヒートマップとは、温度を色で表すサーモグラフィーと同様に、ユーザーが注目している閲覧場所を赤緑青といった色で可視化する技術です。ユーザーのページ内行動を、マウスの動きから推定しています。 たとえば、 「ページをどこまで読み進めたのか(終了エリア)」「ページのどの位置を長く読んだのか(熟読エリア)」「ページのどの位置をクリックしたのか(クリックエリア)」を見える化します。これを利用すると、「読んでほしいのに読まれなかった箇所」、「意外とクリックされているリンクやボタン」「クリックしてほしいのにされていないリンクやボタン」などを発見でき、従来のページビュー(PV)やユニークユーザー数(UU数)などのアクセス解析だけではわからなかった改善点を、素早く浮き彫りにできます。 終了エリア 熟読エリア クリックエリア ヒートマップのメリットはどんなものですか？ ヒートマップツールを使う
実用的なユーザビリティの10のポイント：ガイドライン編 | コリス
ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか？ 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.
カラーユニバーサルデザイン推奨配色セット
色覚の多様性に配慮した 案内・サイン・図表等用のカラーユニバーサルデザイン 推奨配色セット ■ 東京大学分子細胞生物学研究所 高次構造研究分野 伊藤啓 ■ 社団法人日本塗料工業会（JPMA） ■ DIC 株式会社（旧･大日本インキ化学工業株式会社） DIC カラーデザイン株式会社 ■ 特定非営利活動法人カラーユニバーサルデザイン機構（CUDO） 概略 一般の人にも色の見え方が異なる人にも見分けやすい、カラーユニバーサルデザイン推奨配色セットを作成。 被験者実験を重ね、数千の候補色から20色を絞り込み。 塗料業界の色指定の業界標準であるJPMA塗料用標準色2011年F版に対応色を収録。印刷・デザイン業界の色指定の業界標準であるDICカラーガイドシリーズから対応色を選出。 はじめに いわゆる色弱（色覚異常）の人や、緑内障など網膜の疾患を持つ人、白内障の人は、色によっては違いを
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする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
アクセス解析だけでは分からない、サイト上でのユーザー動向を追う「ヒートマップツール」10選（2017年版） - Real Analytics （リアルアナリティクス）
アクセス解析ツールは非常に多くのデータが取得できて便利なのですが、ユーザーが「どこまでスクロールしたか」「ページのどこをクリックしたのか」「サイトのどこを見ていたか」といった事はわからないツールが大半です。アクセス解析のデータを補完及び補強するという点において、多種多様なヒートマップツールを取り上げてみました。アクセス解析のお供にいかがでしょうか？ ご利用上の注意 ・2017年1月に全面改訂しました。 ・画像が見づらい場合はクリックして拡大してください。 ・アルファベット順です。 1.AppSee[有料][日本語][インストール型] サイト情報 www.appsee.net 特徴 アプリのヒートマップ分析ツールです。アプリ内で画面ごとにどこをタップしたかを見ることが可能です。またヒートマップ以外にも、利用分析・導線分析・コホート分析、そしてクラッシュレポートなどにも対応しています。無料トラ
入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」:phpspot開発日誌
ToggleVal :: jQuery Plugins by Aaron Kuzemchak 入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」。 入力ボックスにデフォルトでヒント値を入れておいてクリックすると消えるあの分かりやすいインタフェース。 実際に実装するとなると、ちょっと面倒ですが、ToggleValを使えば、メソッドを1回呼び出すだけで簡単に実装できます ↓↓↓↓クリックで消える↓↓↓↓ jQueryプラグインなので、以下のように使いやすくなっています。 $("input[name='name']").toggleVal( { option } ); 実装したくなった時、ちょっと面倒でまた今度、とならないようにこれを覚えておけばよさそう。
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS
Google Chrome」の真の実力
現在、Windowsで最もシェアの大きいブラウザ（ネットのページを見たりするアレ）はマイクロソフトのInternet Explorer（略してIE）ですが、Googleからも徹底的にシンプルなブラウザ「Google Chrome（ぐーぐるくろーむ）」が2008年に登場、そのあまりの高速さと圧倒的軽さによってネット中で話題に。そしてついに「正式版」となったことでその高速さが「爆速」の領域に到達、まだIEを使っている人であれば一度、だまされたと思って使ってみても一向に問題ないレベルの完成度へ既に到達しており、自分がいつも見ているページや普段使っているウェブメール、あるいは各種ネットサービスを使ってみると、その洗練された使い勝手とスピードを実感することができるようになっています。 ただ単にシンプルで高速なだけでなく、常に意識せずとも最新版に保つための仕組みや「一瞬固まる」ということをなくすために
一般人はそこまでネットを使わない - （旧姓）タケルンバ卿日記避難所
こうやってブログを書いたり、Twitterやmixiを使ったり、またははてなアンテナやRSSリーダーで情報を集め、気に入った記事があればはてなブックマークに登録するなど、気ままにネットツールを利用していますが、こういうのを当たり前に使っていると、一般的な世界とは認識が離れていくもんです。使っている人にとっては当たり前のツールでも、知らない人・使わない人にとっては「なんじゃそりゃ」です。「自分の常識は、他人の非常識」であることは珍しくありません。 特にそれを痛感したのは学生との会話。5月はゼミのディベートの試合があったので、後輩を指導しておりました。そのため、学生と話す機会がもの凄く多かったわけですが、そこでの会話がまあ自分の認識のズレを気付かされるものでして。自分は普通、一般人と思っておりましたが、気付かないうちに奇妙な人種になっているものなんですね。 ブログは書くものではなくて読むもの
モバイルユーザーインターフェイスの追求〜まずはページング〜 : LINE Corporation ディレクターブログ
こんにちは、モバイルディレクターのカワムです。 自社サービスのコンテンツをいかに盛り上げるか日々試行錯誤を繰り返している我々ディレクター陣にとって、他社の動向はとても気になるものです。 しかし、業務の合間を縫って他社の動向を全て把握することがとても厳しいのも現状です...... そこで弊社のモバイルグループでは様々な分野ごとにチームを編成し、モバイル業界の動向を調査しています。 動向調査の結果を「モバイル研究会(通称：モバ研)」と呼ばれる会議で共有していきます。 会議は週1〜2回のペースでモバイルディレクター、デザイナーを中心に開催されています。 内容によってはプログラマーにも参加してもらいます。 現在、モバイル研究会で市場調査のために編成しているチームは以下の５チームです。 モバイルメディア研究会 モバイル端末情報研究会 モバイルユーザインターフェース研究会 モバイルクリエイティブ研究会
愛知名古屋のデザイン専門学校 | デザイン・アニメ・マンガ・CG・インテリア・建築・雑貨・ファッション・メイクなどデザインの総合校
2024年05月13日 6月ゲストイベント開催！ イラストレーター吉田誠治先生を筆頭に豪華ゲストをお招き NEWS イベント情報 体験入学
EFOの人気記事 9件 - はてなブックマーク
Reactでフォームを作成する際に使いやすいライブラリ「React Hook Form」を使ったフォームを、最近流行りの「Chakra UI」を使って作成したいと思います。 DEMO React Hook Form 使いやすさに重点を置いた、React用の高性能なフォームバリデーションライブラリ。 同様のライブラリ「Formik」や「Redux-Form」に比べ、コンポーネントの再レンダリングが少なく、パフォーマンスに優れた作りとなっています。 Chakra UI 2021/01/05現在、スター数13.9kと、急成長中のReact UIコンポーネントライブラリ。 あらかじめ多くのデザインパーツが揃っているので、すぐにReactアプリに導入が可能です。 WAI-ARIA準拠の設計で、アクセシビリティにも配慮されています。 下記のように必要なコンポーネントを呼び出して使います。 import
【コラム：ユーザビリティ】エントリーフォーム最適化（EFO）〜EFOはコンバージョンをあげる特効薬〜 - Webマーケティングコラム - ユーザビリティ - Webマーケティングガイド┃Webマーケテ
テクノロジー : 日経電子版
電通、三菱UFJ信託銀行など大手企業が相次ぎ参入を表明する「情報銀行」。ここに挑むベンチャー企業がDataSign（東京・渋谷）だ。同社の太田祐一社長は情報銀行という言葉が生まれる…続き 中部電力が「情報銀行」参入へ 電力データを活用 ［有料会員限定］ 「情報銀行」説明会に２００社 データ流通の枠組み始動
フォームのインタフェースデザインを考える（1） - builder by ZDNet Japan
フォームのインターフェースデザイン フォームはユーザーから情報を送ってもらうのに欠かせない要素だ。ユーザーが入力で迷うことのないように、わかりやすくデザインすることが求められる要素でもある。 CSSではユーザーのアクションや入力項目の状態に応じてフォームのデザインを設定するセレクタがさまざまに定義・提案されており、FirefoxやSafariの対応も進んでいる。そこで今回から、フォームのインターフェースデザインに関連したセレクタを紹介する。 ユーザーのアクションに応じてフォームのデザインを変更する :hoverといったセレクタを利用すると、ユーザーのアクションに応じてスタイルシートを適用することができる。一般的にはリンク部分のデザインを変えるのに利用するが、フォーム部分のデザインを変えることも可能だ。利用できるセレクタは次の３種類となっている。 :hover 項目にカーソル（マウスポインタ
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
jsmap - JavaScriptによる都道府県入力補助
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
はてなブログ | 無料ブログを作成しよう
gooランキング - あらゆるものをランキングで紹介！ランキングの総合サイト
