http://e0166nt.com/blog-entry-889.html
タブ使用時の注意点 (ユーザビリティ実践メモ)
タブによる表示切り替えは、様々なサイトで利用されている便利な機能です。さて、皆さんはタブの使い方が大きく2種類あることにお気づきでしょうか？ タブは便利であると同時に、背後のタブが見られない危険性が伴います。今回は、タブの2種類の使い方にそって、タブ利用時の注意点について考えてみたいと思います。なお、どちらの使い方か明確に分けられない場合は、両方の注意点を参考にするのがおすすめです。 ※タブを利用する際の注意点は過去の実践メモでも取り上げています。 （参考） 「困った時のタブ頼み」（ユーザビリティ実践メモ） まず、一つ目の使い方は、「多数の情報をカテゴリごとに整理して提示する」というものです。 例えば、ニュースサイトでは多数のニュース記事を「総合」「経済」「エンタメ」「スポーツ」というタブを使って分かり易く分類しているのをよく見かけます（図1）。あるいは、衣料品を扱うＥＣサイトでは「レディ
ユーザビリティを考えると内部SEOにも強いサイトができる | 無料SEO対策のススメ
ユーザビリティを考えたサイトとは、使いやすさや操作性に優れたサイトの事を指しますが、ユーザビリティに気を配る事で、内部SEOも同時に実現する事ができます。 何年も前から言われている事ですので、既に多くのサイトで取り入れられている事ではありますが、念のためユーザビリティを考えたサイト設計を行うためのポイントをまとめておきます。 サイトの主要コンテンツが明確になっている Flashで長時間待たせない 文字が読みやすい バナーや画像を使いすぎていない 特定のブラウザでデザインが崩れない 問合せ先がすぐにわかる ページの表示速度が速い 準備中のページがない リンク切れやURL間違いがない サイトマップがある パンくずリストがある グローバルナビゲーションがある サイドバーが整理されている ヘッダーロゴがトップページへのリンクになっている 内部リンクの最適化 1～6については、完全にユーザビリティに
ウェブページのどこがクリックされやすいかテストできるオンラインサービス -navflow
ランダムページでテスト 「start test」をクリックし、次ページで「start when ready」をクリックするとテストが始まります。 ランダムにページが表示されるので、クリックしたい箇所をクリックするとテストの終了です。 利用の手順 登録（無料）をおこなった後、下記のフローで利用できます。 Product Tour デザインのアップロード 一つの登録で複数のデザインをアップロードすることができます。 テスターがテストをします テストはコミュニティのメンバーが行うか、あなた自身が行うかを決めることができます。 テストの結果 テストの結果はグラフを使用したビジュアル的な分かりやすいものです。
ユーザーの世代交代とユーザビリティ水準の変化／HCD-Net通信 #20 | HCD-Net通信
最近思うのだが、1980年代にパソコン（当時はマイコンとも言われた）やワープロが登場し、ユーザビリティの先駆け的活動が起きていた頃と最近とでは、何かが変わってきた。もちろん技術的に見れば、パソコンの性能向上や機能向上、インターネットの普及など、たくさんの変化が起きてきているのだが、そういうことではない。いや、それに関係はあるとは思うが、気になっているのは機器の方ではなく、それを使う人間の変化についてだ。 その1つは、時代経過に伴うコーホートの変化、もう1つは、時代経過に伴う一般的なリテラシーの上昇である。 (1) コーホートの変化 「コーホート」とは、同じ時期に生まれた集団のことで、たとえば「団塊の世代」「団塊ジュニア」などもコーホートに関する表現といえる。 1980年代から数えると、すでに30年近い時間が経っている。ということは、当時20代だった人たちは50代になり、当時40代だった人た
ページ内リンクを使用する際の注意点 (ユーザビリティ実践メモ)
しかし、ユーザはリンクをクリックする際、そのリンクが「別ページへの移動」なのか「同一ページ内でのリンク」なのかは事前に把握していません。弊社のユーザ行動観察調査では、ページ内リンクをクリックしたユーザが、クリックした先のコンテンツをスクロールしながら閲覧する途中で、自分がクリックの前と同じページにいる（ページ内リンクだった）ことを知って混乱する行動が多く見られます。 これは、自分がページ内の移動をしていることや、現在自分がいる位置について充分なフィードバックを得ないままユーザが行動することで起こる混乱と考えられます。 ページ内リンクの利点を活かしつつ、ユーザに「現在自分がどういう状態にいるのか」を伝え、混乱を最小限に抑える方法としては以下のようなものがあります。 【クリック前】 リンクのすぐそばに、上下の動きを示すアイコンを置くことによって、そのリンクが同一ページ内での移動であることを伝え
テキストリンク色の変更で、70億円（！）を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar
ユーザビリティの中でも特に狭義の「テキストリンク色」を変えただけで、恐るべきビジネスインパクトが現れたという事例です。 実際に成果の変化が起こったのは、マイクロソフトが鋭意売り出し中の検索エンジン「Bing」です。 テキストリンクを、入念にテストし、8000万ドルの売り上げ増 マイクロソフトは従来、「Live Search」という形でもう少し明るい青（水色に近い）を採用していました。 Bingよりも、明るいというかすこし緑に近い感じの色がベースになっていますね。 ちょっと比べてみました。 （※Live Searchは画像検索からキャプチャを取っています） こう見ると確かに色はかなり変化しています。 CNETの記事によると、マイクロソフトはBingを作る過程でかなりの数の色をテストしたようです。 Microsoftは最終的に「Bing」となるものを設計していたとき、膨大な数の色を検証し、
Ronald Mace のユニバーサルデザイン7原則 | Accessible & Usable
公開日 : 2010年2月11日 (2011年1月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ このところ、Web以外での、リアルワールドにおけるプロダクトのユニバーサルデザイン（UD）関係者とお話をさせていただくことが何度かあり、その中で、久々に「Ronald Mace（ロナルド メイス）のユニバーサルデザイン7原則」に触れる機会がありました。古くからある有名な原則なので、すでにご存知の方も多いと思いますが、今見ても興味深い内容なので、この場でも採り上げてみたいと思います。 当サイトでは度々、WebサイトやWebアプリケーションのアクセシビリティについて扱っていますが、Mace の7原則は、こういったソフトウェアベースのものにとどまらず、ハードウェア的なもの、さらにはもっと大きな施設（たとえば建築物）なども包含した上で、ユニバーサルデザインのありかたについて、簡潔
「サジェスト検索」を気持ちよくさせるAjaxの妙技:企画特集 - CNET Japan
これまで、サジェスト検索について、活用事例をもとに各機能を紹介してきた。 (第1回：サジェスト検索とは、第2回：サジェスト活用事例) 今回から、サジェスト検索の各機能をどのようにして実現しているのか、技術的な話題を取り上げていく。 業務システムの商品検索・顧客検索における活用例 第2回では、業務システムの商品検索・顧客検索における活用例をもとにサジェスト検索を紹介した。サジェスト検索の特徴は、本来データベース検索を必要とする情報が、瞬時に取り出せる事であった。 この実現にあたり、中核となる技術はAjaxとテキストマイニングである。今回は、Ajaxによる画面制御を紹介する。 Ajaxによる画面制御 画面遷移を行わず、次々と候補語表示を行うといった画面制御は、Ajaxによって実現している。第2回でも簡単に紹介したが、サーバへの非同期通信、画面の一部を動的に更新といった事はAjaxの特徴である。
今だからこそ、「軽量なウェブサイト」を作ることが重要、というお話。 - Feel Like A Fallinstar
最近はJavaScriptのライブラリ整備や、大きなモニターが増えたせいもあり、リッチな見た目のサイトが増えてきたなーって思います。 でも、その一方で、それ以上に増えている様相なのが「低速度回線」のユーザ。 今だからこそ、技術をきちんと理解して軽いウェブサイトを作るべきなんじゃないか、というお話を少し。 増えているのは、フレッツよりも「持ち歩きPC」「スマートフォン」のアクセス これは今木が運営する、とあるポータルサイトの利用者の接続速度の変化のデータです。 月間PVが大体150,000位で、割と昔からあるタイプのまじめなコンテンツのサイト。携帯は対応していませんし、IT系とかに偏ったコンテンツもありません。 見ると分かる傾向は ダイヤルアップ、実はあまり減っていない ケーブルはそこまで延びていない Unknownが年々増えている ADSL / 光(T1）も割合としてはむしろ減少傾向 グラ
ウェブサイトの色の構成をチェックする「CheckMyColours」 - ネタフル
DOM（Document Object Model）を分析して、ウェブサイトの色の構成をチェックしてくれる「CheckMyColours」というサービスがありました。 URLを入力すると、サイトのデータをチェックしてくれます。 色のコントラストがチェックできるようになっており、視覚に障害がある人が見た場合にどうか‥‥色の差異があるかどうか、ということが分かるようになっています。 （via swissmiss）
携帯サイトで成果を出すためのアクションボタン配置【ユーザビリティTips】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
ニューヨーク公立図書館によるユーザビリティテストシステム·Infomaki MOONGIFT
NYPL（ニューヨーク公立図書館）ではアンケートや画面をクリックしてもらうことでユーザビリティをテストし、Webサイトをはじめ様々な事項に対する改善を進めている。2008年にはNYPL Labを開設し、デジタルアーカイブの充実化をはかっている。 スクリーンショットを使ったユーザビリティテストの結果。緑色の丸が二つ見えるだろうか そんなNYPLのユーザビリティシステムがオープンソース化された。これはなかなか面白いソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはInfomaki、NYPLによるユーザビリティテストシステムだ。 Infomakiでは大きく分けて二つのユーザビリティテストが可能だ。一つはアンケートで、ユーザが自分で回答項目を追加することもできるものだ。これを使い、ユーザにとって使いやすい仕組みを作ることが出来るようになる。 アンケートフォーム もう一つはスクリーンショッ
「進むボタン」と「戻るボタン」のちょっとした法則【ユーザビリティTips】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開 | 初代編集長ブログ―安田英久
機能と技術からわかる！システム基盤の実力：第6回 ユーザ視点でWebシステムのユーザビリティを探る「応答性能モニタリング技術」①モニタリングの難しさ｜gihyo.jp … 技術評論社
『使いやすさ』を評価する
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
