サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
website-usability.info
Talking about web usability, accessibility, IA, UCD, UX,... 公開日 : 2015年4月11日 (2015年6月11日 更新) カテゴリー : ウェブユーザビリティ, ウェブアクセシビリティ, ユーザーインターフェース (UI), 情報アーキテクチャ (IA), ユーザーエクスペリエンス (UX) ウェブサイトのデザイン (特に画面構成の検討) をしていて、ソーシャルメディアの各サービスが提供しているシェアボタンをページに埋め込むかどうか、議論になることはありませんか? コンテンツがユーザーにとって役立つものだったり、備忘録的に残しておきたいものだったり、他人にも見てもらいたいものだったりすると「シェアする」という行為につながるわけですが、そのための機能はウェブサイト側に (コンテンツのひとつとして) 用意すべきなのでしょうか。 シ
Talking about web usability, accessibility, IA, UCD, UX,... 装飾的なテキスト 公開日 : 2014年2月7日 カテゴリー : アクセシビリティ Web ページに配置されるテキストコンテンツは、単なる装飾ではなく、基本的には意味を持った情報であるはずです。したがって、ブラウザ上で見ることができるだけでなく、たとえば、視覚障碍を持ったユーザーのために、スクリーンリーダーで音声読み上げができる必要があります。 ただ、現実には、装飾的なテキストというものも存在しています。 たとえば、サイト名やサービス名の下に外国語でサブキャッチっぽいテキストを入れたり、ナビゲーションメニューの項目や Call To Action (行動喚起) ボタンでメインの日本語ラベルの下に小さく英語表記を入れたり、といった例が挙げられると思います。最近は Web フ
accessible-usable.net
公開日 : 2014年1月28日 (2014年1月29日 更新) カテゴリー : ユーザビリティ 数ある Web ページの中でごく一部ではありますが、ブラウザ標準のスクロールバーを意図的に非表示にしているものがあります。メジャーな例としては、Apple の各製品ページが挙げられます。 ブラウザ標準のスクロールバーを非表示にしている Apple 製品ページ。上から順に「iPhone 5S」「iPhone 5C」「iPad Air」「Mac Pro」。 上の例ではいずれも、いわゆる「ファーストビュー (または "above the fold" とも言います)」の下にもコンテンツが続いていて、ユーザーは下にスクロールしないと、すべてのコンテンツを閲覧することができません。ところが、ブラウザ標準のスクロールバーが無いために、どうやってスクロールしたらよいか (あるいはそもそもスクロールする必要があ
Talking about web usability, accessibility, IA, UCD, UX,... スクリーンリーダーを併用しなくても見出しやランドマークへの移動 (キーボード操作) を可能にする「Skip To」 公開日 : 2013年7月9日 カテゴリー : アクセシビリティ , ユーザーインターフェース (UI) 以前、「一般ブラウザにおけるセクション間の移動 (キーボード操作)」という記事を書きましたが、一般ブラウザ (Internet Explorer、Firefox、Google Chrome、Safari など) でスクリーンリーダーを併用しない場合、キーボード操作によって見出しや WAI-ARIA ランドマーク (Landmark Roles) にジャンプ移動することができない、というお話をしました。 これに対して、決裁サービスを展開している「PayPa
Talking about web usability, accessibility, IA, UCD, UX,... JIS X8341-3:2010 実装チェックリスト 以下は、JIS X8341-3:2010 に基づく試験結果表示 (ウェブページ一式) のベース資料となる、当サイトの JIS X8341-3:2010 実装チェックリストです (このリストを基に、達成基準チェックリストを作成しています)。 チェックリストの「実装方法」欄の内容が実行されている場合、「適用」欄および「適合」欄の両方に「○」印を付しています。 「実装方法」欄の内容で実行されていないものについては、「適用」欄に「-」印を付しています。 「適用」欄が「-」印のうち、当サイトで実装要件に含まれる可能性があり、実行可能な場合は、「適合」欄に「○」印を付しています。 「適用」欄が「-」印のうち、実行不可能な場合は、「
以下は、JIS X8341-3:2010 に基づいて当サイトのアクセシビリティ状況をまとめた、実装チェックリストです。この実装チェックリストをベースに、達成基準チェックリストを作成しています。 なお、当サイトにおける JIS X8341-3:2010 への対応方針については、アクセシビリティ指針の「JIS X8341-3:2010 および WCAG 2.0 への準拠について」をご参照ください。 チェックリストの「実装方法」欄の内容が実行されている場合、「適用」欄および「適合」欄の両方に「○」印を付しています。 「実装方法」欄の内容で実行されていないものについては、「適用」欄に「-」印を付しています。 「適用」欄が「-」印のうち、当サイトで実装要件に含まれる可能性があり、実行可能な場合は、「適合」欄に「○」印を付しています。 「適用」欄が「-」印のうち、実行不可能な場合は、「適合」欄に「×」
Webページの途中に、リンクの目的地があるような場合がありますね。いわゆる、「ページ内アンカー」と呼ばれているものです。図示すると、下記のようなイメージです。 ページの中に複数のコンテンツが含まれている場合、当該コンテンツに直接アクセスできるという意味で「ページ内アンカー」は便利なものですが、気をつけて使わないと、ユーザーが現在位置を見失ってしまう恐れがあります。クリックした結果、ブラウザウィンドウ内に表示されるコンテンツの中にヘッダー表示(グローバルナビゲーションやサイトロゴなど)が一切ない状態だと、ページのアバウトネス(何について書いてあるかを端的に表すもの)を示す情報をユーザーが得にくくなるので、「自分は正しい場所に来たのだろうか」と不安になったりするのです。これは恐らく、ユーザーの多くが無意識のうちに、「クリックするとすなわち、別のページに移動する」というメンタルモデルを持ってい
先に公開したコラム記事「Ajaxによる画像の拡大」で、画像拡大のAjaxポップアップの例として、Highslide JSというライブラリーを使用しました。今回は、このHighslide JSを用いて、動画のポップアップ表示について触れたいと思います。 Highslide JSは個人的にオススメのライブラリーですが、数あるポップアップ用ライブラリー(いわゆる「Lightbox系」と呼ばれているもの)の中では、以下の点で秀逸だからです。 開いたポップアップをドラッグで自由に移動できる。 複数のポップアップを同時に開くことができる。 ポップアップを開いた状態で、背景にあるコンテンツ本文側を操作できる。 キーボード操作によって基本操作(ポップアップを開く/閉じる、など)ができる。 そこで今回はAjaxポップアップの応用例として、このHighslide JSを使って、YouTube上にある動画を扱っ
上記のようなスタイルで、Webページの上のほうに表示されるのが一般的です(この例でいうと、「ホーム」と「犬」にはリンクが貼られているケースが多く、上位階層に簡単に移動できます)。童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたという故事が由来のようです。 ところでこのパンくずリスト、階層関係の表示において、不等号を使うのが一般的ですが、スクリーンリーダーや音声ブラウザといっ支援技術を使って読み上げると、「ホーム、だいなり、いぬ、だいなり、ミニチュアダックスフンド」のようになってしまい、視覚からのインプットが無い場合、意味がスムーズに伝わらない恐れがあります。もっとも、大半のパンくずリストがテキストによる不等号表記(あるいはHTMLエンティティによる記述「>」)で表現されている現状を考えると、恐らく視覚障碍を持つスクリーンリーダーユーザーの多くは理解
コラム記事「Webページにおける文字の拡大/縮小機能」で述べたように、当サイトでは、グローバルナビゲーションエリアに[文字拡大]、[縮小]、[標準]というリンクを設けて、文字(テキスト)のサイズを任意に設定できるようにしていました。 ブラウザの文字拡大機能が一般ユーザーに意外と知られていなかった(ブラウザのメニューの中に隠れていて認知度が低かった)ことへの対策として、それなりに意義があったと思いますし、「文字拡大/縮小機能を使うときは代替手段も明示する」で述べたような、JavaScriptが使えない環境のユーザーへの配慮もしていたので、アクセシビリティ対策としては、悪くないソリューションだったと考えています。 しかしながら当サイトでは、熟考を重ねた結果、このたび、この文字拡大/縮小機能の実装を外すことにしました。理由は、以下の通りです。 「Webページにおける文字の拡大/縮小機能」で述べ
今回は、直接的にはユーザビリティに影響しないかもしれませんが、ユーザーが安心してWebサイトを利用するための手がかりのひとつであるURL(ブラウザのアドレスバーに表示される、いわばサイトの「住所」)についてのお話です。WebサイトのURLには、ドメイン名の手前に「www」という文字列がある場合とない場合がありますね。以下のような感じです。 http://www.lorem_ipsum.com/ http://lorem_ipsum.com/ 「www」があるのとないのとでは、どちらが良いのでしょう?という相談を受けることが時々あるのですが、一概にどちらが良い、ということはなく: サブドメインが存在するサイトなので、ホーム(トップページ)には「www」を付けたい できるだけURLは短くしたいから「www」は付けたくない ...など、色々な考え方(もちろん上記以外にも)があり、どちらのURL表
スキップナビゲーションとは、Webページの冒頭(ナビゲーションメニューの手前)に設置されたページ内リンクのことで、そのリンク箇所で[Enter]キーを押す(あるいはクリックする)と、ナビゲーションメニューを通り越して、本文が始まる位置にジャンプすることができる機能です。「JIS X 8341-3:2009」の改正原案では、「ブロック・スキップ」と呼ばれています(項目番号7.2.4.1)。 特に音声ブラウザやスクリーンリーダーなどの支援技術を使ってWebページ上の情報を「上からひとつずつ順番に」見ている(聞いている)ユーザーにとっては、同一サイト内のページや何度か訪れているページを開くたびに生じる問題、つまり「いちいちナビゲーションメニューをすべて見て(聞いて)からでないとページのメインコンテンツに辿り着けない」といった煩わしさを解消することができる、便利な機能と言えるでしょう。 海外、少な
ファビコン(Favicon)とは、Webサイト(ホームページ)をブラウザで開いたときにアドレスバーに表示される、アイコンのことです。当サイトでも、オリジナルのファビコンを実装してみました。 このファビコン、もともとはInternet Explorer(IE)の独自機能で、「お気に入り」(ブックマーク)に登録しないと表示されませんでした(Faviconという呼称は、favourite icon、つまり「お気に入り」のアイコン、という意味の略語なのです)。その意味では、IEにおける「お気に入り」登録状況の計測に使われることはあったものの、ユーザー側から見れば、ちょっとした飾りにすぎなかったのです。 ところが近年では、IEだけでなく他のブラウザでも、「お気に入り」(ブックマーク)登録の如何を問わずファビコンはアドレスバーに表示されます。またWebサイト閲覧の様々なシチュエーションで、このファビ
Webサイト(ホームページ)がWeb標準に準拠して適切に制作されていれば、表示されるWebページの「見た目のデザイン」は、スタイルシートというファイルで制御することができます。これを応用して、今日の一般的なブラウザでは、ユーザースタイルシートを用いてWebページの表示を「自分好みに」カスタマイズできるようになっています。つまり、ユーザー(サイトの閲覧者)が、自分用にオリジナルのスタイルシートを作ることによって、Webページを「自分が見やすいように」変更することができるのです。これは、アクセシビリティの観点で、特にロービジョン(弱視)のユーザーにとっては非常に有益な機能と言えます。 しかし、ユーザースタイルシートを作るには、CSS(Cascading Style Sheets)の記述法に関する知識が多少なりとも必要になります。Web制作に関わる人でもない限り、CSSに馴染みがないのが普通だと
以前より当サイトを訪問してくださっている読者の方はお気づきかもしれませんが、当サイトでは、幅固定のレイアウトから、リキッドレイアウト(ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト)に変更しました。 上記の理由に加えて、そもそもWeb(インターネット)はユーザー主導型のメディアなので、Webコンテンツの表示サイズについても「基本的にはユーザーが任意にコントロールできるようにすべき」という想いがあります。たとえば弱視のユーザーが文字サイズを極力大きくしたい場合なども含めて考えると、その人なりの心地よい一覧性を実現する意味で、表示されるWebページの幅や高さを自由にコントロールしたいというニーズは高いのでは、と思うのです。 ただ誤解していただきたくないのですが、私は「固定幅レイアウトよりもリキッドレイアウトのほうが絶対的に優れている」と主張しているわけではありません。リキ
主観的な印象ではありますが、近頃、無駄に動作が重い(ページの読み込みに時間がかかる)Webサイトが多いような気がします。一見なんてことなさそうな(リッチなアプリケーションが実装されていたり、高解像度画像や動画が貼り付けられていたり、といった様子がない)ページであっても、ブラウザに読み込まれるのに時間がかかってしまい、コンテンツ内容を閲覧したり機能を操作したりできる状態にならないケースがたびたび見受けられるのです。 Webの世界では、以前より8秒ルールという言葉があります。ナローバンドの時代から言われているものですが、「8秒以内にフィードバックがないと(ページがブラウザに表示されて閲覧や操作が可能な状態にならないと)、来訪者はフラストレーションを感じ、サイトから離脱してしまう」というものです。昨今では、ブロードバンド時代(...という表現も古いかもしれませんが)を反映してか、6秒ルール、3秒
斬新なUI(ユーザーインターフェース)で話題となったアップルのiPhone。日本における普及度は、多いとは言えないかもしれませんが、一度手にした知人(複数人)は異口同音に「もう手放せない」「iPhoneでWebブラウズするのが当たり前になり、PCをあまり使わなくなった」と言います。普及台数ベースではなく、インターネット利用時間ベースで考えると、もしかしたら自分たちが予想している以上に、皆さんのWebサイト(ホームページ)はiPhoneからアクセスされている(あるいは今後益々アクセスされるようになる)と言えるかもしれません。 というわけで、自分が運営しているWebサイト(ホームページ)がiPhoneでも問題なく使えるかを、そろそろきちんと意識しても良いのでは、という気がしています。 とは言え、Web制作者やウェブマスターの方が皆、iPhone(あるいはiPod Touch)を持っているとは限
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション(ビューワー)、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Closr.it」です。 Closr.itは、ズームイン/ズームアウト機能付きの高解像度画像をWebページに埋め込むことができるアプリケーションです。正確に言うとClosr.itは画像共有サイトで、自分の持っている画像をClosr.itにアップロードすると、自動的にFlashベースのズームイン/ズームアウト機能が付加されたUI(ユーザーインターフェース)が生成され、そのUIを自分のサイトに埋め込むことができる、というものです(しかも無料で)。下記にサンプルを用意してみました。 UIの機能は、最
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション(ビューワー)、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Google Maps Image Cutter」です。 Google Maps Image Cutterは、GoogleマップのUI(ユーザーインターフェース)を使って、オリジナルの画像をズームイン/ズームアウト表示することができるツールです。開発元であるUCL(University College London)のサイトから、作成ツールをダウンロードできます。 実際に作成ツールを使って、オリジナル画像をGoogleマップUIで表示できるようにトライしてみました(下記は、その画面キャプチャー
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション(ビューワー)、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Lightbox Plus」です。 Lightbox Plusは、Ajaxを使用したビューワーです。下記にサンプルを用意してみました(Lightbox Plusは残念ながら、「Ajaxによる画像の拡大」で指摘したモーダル表示になっているので、まずは下記サンプルの囲みの中にある説明をひととおり読んでから、操作してください)。 サンプル 画像をクリックすると、ブラウザのウィンドウサイズにフィットする大きさで拡大画像が開きます。 開いた拡大画像にマウスオーバーすると、左上にアイコンが表示されます(四
皆さんのWebサイト(ホームページ)において、高解像度画像を見たいというユーザーニーズ/ユースケースがあるかどうか、検討されたことはありますでしょうか?高解像度画像とは、簡単に言うと「きめ細かな質で、大きな面積の画像」ですが、以下のようなシチュエーションで、ユーザーは高解像度画像を見たいと思うのではないでしょうか。 サイトで採り上げている商品(モノ)の質感を見たいとき(素材、仕上げ、細部のデザインのこだわり、など)。 サイトで採り上げている商品(モノ)の具体的な機能や使い勝手、仕様などを見たいとき(操作パネルのレイアウトデザイン、操作子の形状、接続端子、など)。 高解像度画像を用意することができて、それがターゲットユーザーの興味/関心に合致する可能性があるのであれば、積極的にWebサイト(ホームページ)上に公開すべきでしょう。私自身の、ユーザーテストを実施したときの経験を振り返ってみても、
Webページ上にある小さな画像(サムネイルなど)をクリックすると、画像が拡大表示される — Ajaxを使った、そんなUI(ユーザーインターフェース)をご覧になったことがある人は多いと思います。たとえば、以下のような感じです(eコマースサイトの例)。 【ページ1】商品一覧の中から、興味のある商品を選びます。 【ページ2】上記で選んだ商品について、拡大してみたい画像を選びます。 【ページ2'】拡大画像が表示されます。 なお、このページを【ページ3】ではなく【ページ2'】と記しているのは、上記【ページ2】からページが切り替わっていないから(URLが同じだから)です。 潜んでいる問題点 Ajaxを使うと、上記のようにクールに(かっこよく)画像を拡大することができるので、自分のWebサイト(ホームページ)でも採り入れようと考えているウェブマスターの方も多いことでしょう。ただしこのAjaxによる
先のコラム記事「個人情報は本当に必要な情報だけを取得する」で、クレジットカード情報はセンシティブな(情報の持ち主にとって神経質な、慎重に扱うべき)個人情報であると述べました。 もちろん、センシティブなものか否かにかかわらずユーザー(消費者)の個人情報は細心の注意を払って扱わなければなりませんが、「個人情報にはどんな種類があって」「そのうち(特に取り扱いに注意を要する)センシティブな情報は何か」について、体系的なまとめがありますので、この機会に、参考までにご紹介したいと思います。 TRUSTe(トラスト イー)という、Webサイトにおける個人情報保護/適正利用を審査する米国の機関がまとめた「TRUSTe Security Guidelines」という指針があります。その末尾に「Data Categories」というページがあり、そこに一覧としてまとまっています。下記に、その内容を引用します。
Webコンテンツの中には、PDF形式のものがあります。「クリックしたらPDFファイルだったので、Adobe Readerが起動するまで待たされる」ことに嫌悪感を持つユーザーも少なくありませんが、情報レイアウトやフォントなどを忠実に表現した文書を配布したい場合や、印刷を前提としている場合など、PDFを使うことが適しているケースもあります。 ところでこのPDF、最近では、ユーザーが情報を入力して送信できる「フォーム」も扱えること、ご存知でしょうか? 図は、PDF形式のフォームの例です。テキスト入力エリアやドロップダウンリストが見えますね。 Adobe社のPDF作成ソフト「Acrobat」などを使うことで、今や手軽にPDF形式のフォームを作成することができます。ユーザーは、最新のAdobe Reader(無料)を使ってそのPDFフォームを開き、情報を入力して、送信することができるわけです。 皆さ
Talking about web usability, accessibility, IA, UCD, UX,... 公開日 : 2008年7月31日 (2011年3月22日 更新) カテゴリー : ウェブアクセシビリティ 色の認識のしかたが、いわゆる健常者のそれと異なることを、色盲、色弱、色覚異常、色覚障害などと呼びますよね。Webアクセシビリティを扱っていると、どうしてもこの呼称と向き合わなければならない場面があるのですが、いずれの呼称も、なんだか必要以上にネガティブイメージを植えつける表現のような気がして、どうもしっくり来ない感じがするのです。 ちなみに、色の認識のしかたが健常者と異なる人の割合は、黄色人種では男性の20人に1人(5パーセント)、女性の500人に1人(0.2パーセント)と言われています(ちなみに海外ではもう少し割合が高く、白人では男性の8パーセント、黒人では男性の4
「Webページにおける文字の拡大/縮小機能」でご紹介したように、当サイトでは、JavaScriptを使った文字拡大/縮小機能を実装しています。本来はブラウザ側で持つべき機能であって、Webページ(コンテンツ)側に実装するのはどうかと思いますが、多くのブラウザで文字拡大/縮小機能がメニューに隠れてしまっている現状(そのため多くのユーザーは文字サイズを任意に変更できることを知らない)、少しでもユーザーの助けになればという観点で考えると、現時点ではそれなりに意義があると思っています。 そんな中、同様のソリューションを提供しているWebサイト(ホームページ)も少なくありませんが、問題はその大半が、JavaScriptが無効なブラウザでも文字拡大/縮小機能が表示されっ放しで、クリックしてもリアクション(フィードバック)が無いことです。 たとえば以下のサイトを、JavaScriptを無効にした状態でご
以前、このサイトで「動画共有サービスでお手軽にユーザーエクスペリエンス向上」という記事を掲載しました。静止画像(やテキスト)で伝わりにくい魅力が「動画でなら伝わる」ことは色々ある(たとえばハウツーであったり、音や空気感を含んだ雰囲気であったり、(スタッフや職人の)仕事にかける姿勢や情熱であったり)と申し上げましたが、その好例として、今回はハウツーに特化した動画共有サイト、Howcastを参考までにご紹介したいと思います。 英語のサイトなので理解しにくい部分もあるかもしれませんが(逆に、英語の勉強としても使えるかもしれませんね)、たとえば、本当にごく一例として: お味噌汁の作り方 赤ちゃんの抱き方/あやし方 ヨガの基本的なルーチン ...などなど、様々なノウハウがアップロードされていて、まさに「百聞は一見に如かず」という感じですね。 ちなみに以下は、折り鶴の作り方の紹介です。(このように、個
「Webサイト(ホームページ)をビジュアル的に美しく魅力的に見せたい」という思いは、多くのWebマスターさんがお持ちだと思います。効果的なビジュアル表現は、テキスト(文字)だらけの無味乾燥なページよりもユーザーを惹き付ける(サイトを閲覧しようとユーザーに思ってもらえる)効果が期待できるからです。ただし、過剰なビジュアル表現は、かえってユーザーの行動を遮ってしまうケースがあることを、ご存知でしょうか? 図示のページは、ビジュアル表現を重視したページの一例です。楽器(ドラム)に関する情報を扱っていますが、ページ上部にメインとなる大きなビジュアルが配置され、真ん中より下の部分には「おすすめページ」として、様々なメニュー(サイト内リンク)が並んでいます。 以前、このページに対して、アイトラッキングを利用したユーザーテストを実施したのですが、面白いことに、テスター(ユーザー)さんの目線は、真ん中の赤
Webサイト(ホームページ)のユーザビリティを軸に、ユーザーエクスペリエンス、アクセシビリティ、ユーザー中心設計、情報デザインといった話題を扱うサイトです。お仕事にWebサイトを活用したい方、必見です!「マジックナンバー7(±2)」という言葉を聞いたことはありますか?何かを記憶するときに、その数が7つ(プラスマイナス2、つまり5個から9個)までであれば、記憶にとどめやすいという説です。心理学者G.A.ミラー氏が1956年に発表した論文の中で使われた造語ですが、人間が一度に記憶できる要素の限界数を示す基準として、広く知られています。最近では、「7±2」ではなく「4±1」という説もあるようですが...(私自身の記憶力は、この程度かもしれません)。
次のページ
このページを最初にブックマークしてみませんか?
『ウェブユーザビリティ向上を支援するWebsite Usability Info』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く