SEO関連の話題を扱っているseomoz.orgにて興味深い記事がありました。「17 New Rules for Successful E-Commerce Websites」です。 ショッピングサイトを作るときにはどういった点に気をつければいいか、かなり参考になるのではないでしょうか。 以下に詳しくご紹介(あまり好きではないですが、説明の都合上、元記事からそのまま画像を拝借しています)。 ユーザーがどこにいるのか教えてあげよう ユーザーがトップページ以外にいる場合、どのセクションにいるのかわかるようにしましょう。パンくず型のナビゲーションも有効です。 選択条件を解除できるようにしよう ユーザーは一般的に選択条件を追加しながらサイトを見ていきます。そうした選択条件はすぐにはずして元に戻れるようにしておきましょう。 一般的な並び替え方法はきちんと用意しよう ユーザーが選択しやすいように「価格
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
目次 はじめに 絶対に役に立つこと 多種類のブラウザへの配慮 テキスト版ブラウザへの配慮 遅い回線への配慮 ハンディキャップを持つ人への配慮 リンクの張り方 心構え 他のWebページ管理者とのやりとり Yahoo! JAPANへの登録について その他の配慮 Web日記を書く心がけ みなさんからのフィードバック ぜひ、感想をお送りください リンク集 更新履歴 はじめに このページでは、結城浩がWebページを作成するときに心がけていること、 心がけたいと思っていることを書きます Webページによって発信する情報はさまざまなので、 私の「心がけ」が万人にあてはまるわけではありません。 けれど、これを読んでいるあなたの参考になるなら、とてもうれしいです。 絶対に役に立つこと <img>タグにはwidthとheight属性をつける。ページ表示にかかる体感時間が圧倒的に短くなるから。 <title>タ
[追記 2007-04-12] Lightbox 2 が v2.03 にバージョンアップして、キーボードショートカットの機能が改善されました。右カーソル、左カーソルでの移動が可能になり、Escキーで閉じることができるようになっています。ということで、このスクリプトは無用の長物と相成りました・・・ Lightbox JS v2.0 という画像をかっこよく表示させる有名なスクリプトがあります。複数の画像を「Image Set」として用意するとスライドショーが作成され、キーボードで前後に移動することができるのですが、nキーとpキーでしか移動できないので、あまり感覚的ではありません。そこで、カーソルキーでも移動できるようにしてユーザビリティを向上させるスクリプトを作成してみました。 Lightbox JS v2.0 shortcut keys add-on »sample 使い方はカンタン。Lig
sashaです。 naoya君が前回のエントリーで振ってくれたように、ジョエルテストの話から、ユーザビリティ・テストをどこまで行うかという話になりました。 私が今まで見たユーザビリティ系の記事の中には、追求したら悟りが開けそうな、限りなく奥深いものもありましたが、適度に深く、満遍なくカバーしているユーザビリティ・ガイドライン(原文)を見つけ、以降これを参考にしています。少し前に翻訳しましたので、今日はそれをご紹介いたします。 一般ユーザー向けのWebサービスでは、全部のチェック項目が該当するわけではありません。個人的には、各項目のスコアより、「スコアの説明」という欄を重視しています。現状では何が問題であり、どう解決するべきなのか、そういった思考のプロセスが、「ユーザーのことを思うこと」だと思うのです。 いま、ウノウではフォト蔵のデザイン見直しを行っております。私たちのデザインを省み、
ユーザテストは、ビジネス対ビジネス用Webサイトのユーザビリティが、一般的な消費者向けサイトよりも、かなり低いことを示している。もっと顧客転換率を上げたければ、ガイドラインに従って、商材を見込み客たちが楽にリサーチできるよう手助けするべきだ。 B2B Usability by Jakob Nielsen on June 1, 2006 多くのビジネス対ビジネス( B2B )サイトは、ユーザ体験の観念が 1990 年代で止まってしまっている。顧客たちのよくある疑問や関心に応えることに失敗し、彼らが取引先候補を探す作業の障碍となってしまっているのだ。 これらのサイトは、ウェブが企業と顧客の関係を逆転させたことに気づいていない。オンライン上でのインタラクションのほとんどは、要求主導型だ。訪問者の要求を満たすことができなければ、彼らが貴方のサイトを見捨てて競合サイトへ流れていくのを、眺めているしか
「ウェブアクセシビリティの情報提供コーナー:みんなのウェブ」及び関連ページは移転しました。移転先は以下のとおりです。 1. ウェブアクセシビリティの情報提供コーナー:みんなのウェブ 「ウェブアクセシビリティの情報提供コーナー:みんなのウェブ」は下記に移転しました。お手数ですが、ブラウザのURLの設定を変更してください。 ウェブアクセシビリティの情報提供コーナー:みんなのウェブ ページの先頭に戻る 2. みんなが使えるホームページの作り方 「みんなが使えるホームページの作り方」は下記に移転しました。お手数ですが、ブラウザのURLの設定を変更してください。 みんなが使えるホームページの作り方 ページの先頭に戻る 3. 情報バリアフリーのための情報提供サイト(トップページ) 「情報バリアフリーのための情報提供サイト(トップページ)」は下記に移転しました。お手数ですが、ブラウザのURLの設定を変更
ユーザビリティやアクセシビリティをチェックするためのシートや考え方を記したドキュメントはいくつか公開されていますが、それらに対応するための具体的なマークアップ、Tips についての情報はあまり見かけません。 関連ドキュメントに関しては、以下ページが参考になると思います。 高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ (JIS規格)A.A.O. - ウェブコンテンツJIS (解説) ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0 (W3Cの原文を個人が翻訳したもの) ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書 (W3Cの原文を個人が翻訳したもの) ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 CSS技術書 (W3Cの原文を個人が翻訳したもの) Web Content Accessib
ファイルをアップロードする途中経過をプログレスバーで順次表示するわけです。アップロード後も画面遷移することなくAJAXで結果を表示するわけで。そういうことをするのに役立つのがオープンソースで開発されている「Uber Uploader」というわけ。 実際のデモを体験すればどういうことができるかよく分かります。 CakeTimer - Demo Page | An Ajax file uploads progress bar http://thinkingphp.org/demos/cake-timer/ UBER UPLOADER DEMO - A free upload script with progress bar http://www.webdice.org/uber_uploader/ ダウンロードはこちらから。 SourceForge.net: Uber Uploader htt
ディレクターの安藤です。 Web構築手法の情報収集のためにArticleDashboardを巡っていて、いくつか有用な情報を見つけましたのでご紹介したいと思います。 まず第一弾は「これは使える! 無料SEOツール ベスト12 (12 Free SEO Tools You Must Use.)」。 現在、ファインダビリティ(情報の発見のしやすさ・識別しやすさ)といった観点からも、サーチエンジンでいかに情報を見つけてもらうのかといった点を考慮したサイトの情報設計の見直などが、重要になってきています。その点でもSEOは常に重要なテーマで、これらのツールは、Webサイトを見直す際に有用でしょう。 1. Alexa Ranking 複数のサイトの、Alexaにおけるランキングを同時に表示できる。また、トラフィック状況を簡易に把握することができる。 2. XML Sitemaps.com サーチエンジ
Webサイトを設計する際,「色」は様々な問題を起こします。開発者それぞれの想いが込められやすいのかもしれません。開発末期になってから,色の変更指示で不眠開発になるという話は,いまだ昔話にはなっていません。 色の問題を解決するためには,色についての知識があったほうが助かります。ただし,色自体の講釈をここではしません。色を決めていく過程の参考になりそうなことを記します。 刷り込まれている色/固定イメージのある色 私たちは様々な色に囲まれて生活しています。その中で,色と行動が一番密接にかかわりを持つのは「信号」です。我々の取るべき行動を色が指示します。それはあまりに一般的になりすぎて,我々は無意識のうちにそれらの色に対して同様の行動パターンを取りやすくなっています。 例えば,赤色を見ると何か危険なことがそばにあるのかもしれないと警戒したり,黄色の標識を目にすると周囲に対して少し注意力をはらったり
第1回 サイト訪問者の目線で考える 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか? 今木 智隆(株式会社ビービット) ユーザーの目線を考えることの重要性ウェブサイトがビジネスとして成功するための要素は、コンセプト・デザインから細かな言葉遣いに至るまでさまざまであるが、その中でも「ユーザーにしっかりと(見てもらうべき)情報を見てもらう」ことは常に重要な要素の1つに挙げられるだろう。 いくらデザイン(見た目)がよく、コンテンツが充実しているサイトであっても、ユーザーは驚くほどすぐにサイトから離
アイトラッキングシステムを利用したユーザビリティ調査から、パソコンスキルによってページ内の視線の動きが異なることが判明しています。 今回は、パソコン利用歴2年未満で、1日のインターネット利用時間が1〜3時間程度の初心者ユーザへの調査結果をご紹介します。 初心者がページ上部を中心に閲覧していく理由として、以下の初心者ユーザの心理・行動特性が挙げられます。 ページ上部ほど自分にとって必要な情報があると考えている サイト上の情報把握力・選別力が高くないため、どこまで見たかわからなくなってしまうことを避けようと、全体よりも一部を把握しようとする パソコン画面を閲覧することに疲れを覚えやすいため、1ページに費やす時間が短く、ページ下部まで目を通さない(スクロールをしようとしない) このような行動特性から、初心者ユーザの場合、ページ上部に必要な情報がないとサイトからの離脱に繋がる可能性があり
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く