*Web IAとユーザビリティに関するryootaのブックマーク (36)

  • "Amazon"に学ぶ、4つの観点で考察するUXデザイン | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    皆様こんにちは、シリコンバレーでUXデザイナーをしているライターのYUKIです。今回はあるひとつのサイトについてUXデザイナーとしての立場からレビューをしてみようと思います。 はじめに 私は友人らと作っていたスタートアップ会社を軌道に乗せるために数年前シリコンバレーにやって来て、現在は某米国の大企業でデザイナーとして働いています。公式な肩書きはヴィジュアル・デザイナーなのですが、実質的にはインタアクションやヴィジュアル両方に携わるユーザー・エクスペリエンス・デザイナーというところです。 LIGでは、かなり個人的な見解で、ユーザビリティに優れていると思ったサイトを説明もふまえながらレビューしたいと思います。 ただ、私が現在持っている知識は格的にユーザビリティやデザインを学校で学んで得たものではなく、あくまでも実際の現場で働いて得たものばかりなので、「これが絶対に正しい」と思うのではなく、「

    "Amazon"に学ぶ、4つの観点で考察するUXデザイン | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • ファーストビューは何pxまで? ブラウザの表示領域サイズ5年間の変化を大公開 | 初代編集長ブログ―安田英久

    ファーストビューは何pxまで? ブラウザの表示領域サイズ5年間の変化を大公開 | 初代編集長ブログ―安田英久
  • ユーザビリティの原則と現場で使えるユーザビリティテストの方法

    今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて:目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし

    ユーザビリティの原則と現場で使えるユーザビリティテストの方法
  • ユーザーの視線を誘導する3つのユーザビリティ改善方法

    webサイトにおけるユーザーの視線は、なかなか見る事が出来ない代物ではあります。 実際に企業や、あなたが作成したwebサービスが、ユーザーに訴えたい事を、ユーザーにきちんと届ける為に、どのような方法があるのかを考えて見ましょう。 1)全ての情報を遮断する 手っ取り早い方法としては、あらゆる情報を遮断する方法があります。 つまりその言いたい事意外の情報をあえて隠蔽するわけです。 実にシンプルな方法です。 ただし、シンプルであるがゆえに非常に難易度が高いです。 なぜなら、配置するテキスト選びは慎重にしなければなりませんし、訴えたい事が多い場合、何をまず訴えるべきかをしっかりと考えて、ユーザーが迷う事なく、そして的確な操作が出来るように誘導して上げる必要があるからです。 1)サービスに対して興味を少しだけ持ってもらう情報を書く 2)サービス開始はちょっと・・・という人のためにクリックしやすいリン

    ユーザーの視線を誘導する3つのユーザビリティ改善方法
  • 最適なテキストリンクの色は? | ウェブ力学

    青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoogleと同一でした。また、ユーザビリティといえばビービットさん、ということで調べてみましたが、やや暗めの青を使用していました。ビービットさんのことなので何か意味があるのかもしれません。 クックパッド クックパッドは、日最大級のレシピ検索のサイトです。ユーザービリティには細心の注意を払っていて、ユーザー一人当たりの平均PVが高いことでも知られています。 そんなクックパッドですが、サイトをのぞいてみ

  • ページ表示2秒でユーザーはイライラし始め、3分の1が「もういいや」となる | 初代編集長ブログ―安田英久

    また、ページの描画にかかる時間が3秒を超えると、40%の消費者がそれ以上待つのをあきらめてしまうとのこと(ただし、こちらも実際のデータでは、最も多かったのは「4秒超」の60%)。 では、ページの表示時間を特に気にするのはどんな層の人でしょうか。 調査によると、よくオンラインで購買活動を行う人ほど気にするようです。 そのネットショップへの愛着に影響する要素としてページの表示時間を挙げた人の割合は、オンラインで購買をする全体では52%ですが、年間1500ドル(約14万円)以上をオンラインで使う人では61%でした。つまり、よくネットで買い物をする人ほど、ページ表示の時間を気にするのですね。 次に、売上とページ表示速度の関係を。 ネットショップの表示が遅いからという理由で買うのをあきらめたことがある人は全体の1/3にも上りました。 ネットショップに対して不満を感じている人の23%は、不満の理由とし

    ページ表示2秒でユーザーはイライラし始め、3分の1が「もういいや」となる | 初代編集長ブログ―安田英久
    ryoota
    ryoota 2010/04/27
    サイト最適化
  • 「ユーザーはスクロールしない」はウソ、”Above the fold”より下を見せる3つのサイトデザインTIPS

    「Above the fold(アバブ・ザ・フォールド)」というのは、スクロールしなくても見ることができる画面の領域のことを言います。 Above the foldについては、以前に記事解説したことがあります。 ”above”は「~より上」、”fold”は、「折り目」という意味で、”above the fold”は直訳すると「折り目より上」という意味になります。 新聞の折り目より上半分は、人の気を引くような見出しのニュースを掲載します。 購入意欲をそそるためです。 スポ○チの1面の見出しなんかは、そうですよね。 「イチロー、マリナーズから解雇通告」 えぇーっ! と仰天して、開いて続きを読むと 「を受けた同僚とゴルフに挑戦」、 みたいな。(笑) バカはこのくらいにしておいて、「Above the foldはユーザーに訴えかけるために重要なコンテンツを置くべき」で、反対にスクロールしなければな

    「ユーザーはスクロールしない」はウソ、”Above the fold”より下を見せる3つのサイトデザインTIPS
  • ユーザーにクリックされやすいボタンデザインの5つのポイント

    ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン(Call to Action Button)はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。

  • 全てのIT・Web関係者に見つめなおして欲しい「Don’t Make Me Think」 - Feel Like A Fallinstar

    ”Don't Make Me Think” 訳すと、「いちいち私に考えさせるな!ボケ!」といったところでしょうか。 これは、2001年にSteve Krugが出した書籍の名前なのですが、この「ユーザにいちいち考えさせない」ことを忘れているか、いないかがソフトウェア・Webサイトの勝負を分ける最も大きな分岐点の1つです。 人間は日々の生活の中で、いちいち物を操作したり情報を見るたびにあれこれ考えたくなんてありません。 ユーザをつまらない操作やナビゲーションで考えされればさせるほどストレスは増大し、企業への信用は急激に失われます。 今日は、この”Don't Make Me Think”について、 如何にユーザが考えることを嫌うか 「考えさせない」とはどういうことか を、これまで見てきたユーザ検証の結果なども交えて、少しばかり書いてみようと思います。 あらゆる「無駄な」思考が、ユーザを苛立たせ、

  • 実用的なユーザビリティの10のポイント:ガイドライン編 | コリス

    ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント(ガイドライン編)をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか? 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.

  • Webサイトを“速く”表示させる7つの計測ポイント(1/2) - @IT

    株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/3/24 FirefoxやYSlowを使ってWebサイトの問題点を探るには? ライブドアブログを速くした著者が7つのポイントを伝授します(編集部) Webサイトは“見た目”が重要なのは当たり前だが…… 皆さんはWebサイトを作るときに、どのようなことを意識していますか? デザイナや主にHTMLのコーダー/マークアップエンジニアと呼ばれる職種に就いている人は、やはり“見た目”を強く意識しているのではないでしょうか。 例えば、複数のWebブラウザで同じか近い表示になるようにとか、リリース後の更新業務によって表示崩れが起きないように、などです。もちろんそれは職種の適性として正しいものですが、実はほかにも意識した方がよい重要な要素があるのです。 良い印象を与えるには、“速度”も重要 Webサイトを見たユーザーが、良い印象を受けるのか

  • SFCのサイトリニューアルの件について

    SFCのサイトが昨晩変更されたのですが,余りにひどすぎるので最初絶句してしまいました.コメントはweb2008-keio@sfc.keio.ac.jpに送って下さいとのことなので,文章をとりあえず書いてみました sfc site renewal 追記: Geekなページにもコメントがでているようです. 追記2: 大学からの回答を載せました. 政策・メディア研究科/SFC研究所 W3C の加藤文彦です. 新しい Web サイトを受けて,質問・コメントをしたいと思います.なお,このメールに対するご回答はSFCにいる学生,卒業生,教員などの間で広く共有するべきものだと考えております.そのため,頂いたご回答の内容を整理させていただいた後に公開することをご了承ください. 以下の5点が現時点で思いつく問題点です. アクセシビリティ Flash の使用 速いPCのみ対象 SEO ユーザビリティ まず,こ

    SFCのサイトリニューアルの件について
  • ユーザビリティの大切さに気づいてもらう - inucaraの日記

    こないだの「インターネットってどういう仕組みで動いているの?」に書いた事前研修でユーザビリティの大切さについても話したいと思って簡単なフォームを作ってみたよ。 想定ターゲットはユーザビリティのユの字も知らないような人や、これからウェブサイトの設計、構築の仕事をしようとしている人。これらの人にユーザビリティの大切さに気づいてもらうために、前回と同じように話す内容をとりあえず書いてってみる。 ちなみに前回のインターネットの仕組みからユーザビリティって話が飛んでるけど、そういうことは気にしないで思いつくことをメモ的にどんどん書いてって、流れは最後に考えようかなって感じ。 じゃあ、さっそく始める! ユーザビリティって何? まず始めに、みんなは「ユーザビリティ」って言葉は聞いたことあるかな? 日語で「使いやすさ」って意味なんだけど、利用者がいかにストレスなく、便利で簡単で直感的な操作ができるか、っ

    ユーザビリティの大切さに気づいてもらう - inucaraの日記
  • なぜ、サイトにアクセスした人のほとんどが途中であきらめてしまうのか? | カスタマーエクスペリエンスで道は開ける~フォレスター・リサーチのWebサイト方法論

    [コラム]カスタマーエクスペリエンスで 道は開ける ~フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 明けましておめでとうございます。今年もよろしくお願いいたします。 私はクリスマス前にイギリスに帰り、お正月は両親と妹たちと一緒にフランスのブルターニュ地方に行きました。ブルターニュは子供の頃、毎年夏休みを過ごしていたところですが、今回の訪問は8年ぶりでした。町はずいぶん豊かになり、新しい別荘が立ち並んで、私が知っている昔のフランスの田舎の町からはずいぶん変わったなと思いました。でも、幸いに、私た

    なぜ、サイトにアクセスした人のほとんどが途中であきらめてしまうのか? | カスタマーエクスペリエンスで道は開ける~フォレスター・リサーチのWebサイト方法論
  • フォームをちょこっとだけ使いやすくする小技いろいろ - IDEA*IDEA ~ 百式管理人のライフハックブログ ~

    ドットインストール代表のライフハックブログ

    フォームをちょこっとだけ使いやすくする小技いろいろ - IDEA*IDEA ~ 百式管理人のライフハックブログ ~
  • サクラクレパスの404エラーが素敵なので、404ページを集めてみたくなったのだ|広報・マーケティング向けブログ|ネットPR.JP

    URLを聞いて実際に見てみたら、そのページは既になく「404 File not found.」と寂しく表示されるだけ。そんな経験されたことがあるんじゃないでしょうか。そんなちょっと寂しい思いにさせる404ページが、もしも素敵だったら?それはいいですね。 はてなブックマークで、昔に「トリビアの泉」でやっていた「まつざきしげるいろ」のサクラクレパスによる紹介のページがいままたなぜだか話題ですが、ブックマークのコメントで知ったエラーページ「404 File not found.」が素敵です。 サクラクレパスの「404 File not found.」が素敵|前向きストラテジー 確かに素敵。 じゃあ、他にどんな404ページがあるのか好き勝手に見てみました。 アップル。お勧め記事も教えてくれます。 livedoor。トップページにリダイレクトされます HONDA。可愛らしい車が出てきますよ。 花王。

    サクラクレパスの404エラーが素敵なので、404ページを集めてみたくなったのだ|広報・マーケティング向けブログ|ネットPR.JP
    ryoota
    ryoota 2008/02/15
    404エラーページ
  • ユーザーの動き。|CSS HappyLife

    ボクたちみたいな、ウェブサイトを閲覧するのが当たり前の人間からすると、全く気づかない事に気づかされたりしたので、自分用メモ。 2008年2月14日の22:47頃に追記 ボクのただのメモ書きをもうちょっとちゃんと以下のエントリーで書いてもらってるので、あわせてご覧になって頂くと、良いかと思います。 Webアクセシビリティについての覚書 - ねんがんのWebユーザビリティテストに参加した ロゴクリック=トップページに戻るという認識は殆ど無い。 トップページに戻る場合は、ブラウザの「戻る」ボタン。 サイドバーのバナーは、認知すらされない傾向が強い。 そもそもバナーとして押せるものではなく、デザイン上の飾りとして見られる場合も。 リストのマークとかのマーク部分をクリックしよーとする人が居る。 それにより、クリックできないと諦めるケースも。 プルダウン(ドロップダウン)型メニューは、近くのボタンを押

    ユーザーの動き。|CSS HappyLife
  • ウェブサイトを使いやすくするための43の法則

    R6K.Net Pressにエントリーされている「あなたが避けるべきウェブデザインの43のミス」の意訳です。 43 Web Design Mistakes You Should Avoid 上記エントリーによると、よく見かけるデザインのミスリストは10個くらいが通常ですが、それでは足らなく、増やしていくうちに43個になったそうです。 43の法則は、常識として浸透しているものもあれば、論争になるようなものもあります。 個人的には、いくつかは条件しだいでと思いますが、概ね相違無いです。 The user must know what the site is about in seconds. サイトに来訪したユーザーは、数秒で何のサイトか知らなくてはいけません。 Make the content scannable. コンテンツが一覧できるリストが必要です。 Do not use fancy

    ウェブサイトを使いやすくするための43の法則
  • ウェブ標準、それは状況や環境に左右されない情報伝達を実現するためのもの

    何がウェブ標準で、何がウェブ標準でないか一般にW3C、ISO/IEC、IETF、ECMA、IANA、OASISといった国際的な標準化団体やガイドライン策定機関によって発行された技術や仕様、ガイドラインが、ウェブ標準の「標準」で表される技術や仕様であるとされており、「ウェブ標準技術」あるいは「ウェブ標準仕様」という。また、ウェブ標準的な仕様に基づいて定義されたウェブサイトを「ウェブ標準に準拠している」などという。 そういった団体のなかでも、特にW3C(ワールドワイドウェブコンソーシアム)が策定する各種の仕様が、最も「ウェブ標準的」だといえる。しかし、W3Cの仕様であればすなわちウェブ標準なのかというと、必ずしもそうではないのが困ったところだ。なぜこうも曖昧なのかといえば、ウェブ標準とは、「なんとなく標準的な仕様であろうもの」のこと全般を指すからだ。「ウェブ標準」に厳密な定義はなく、ときにはマ

    ウェブ標準、それは状況や環境に左右されない情報伝達を実現するためのもの
  • Alertbox: 画面解像度とページレイアウト(2006年7月31日)

    ウェブページは 1024 × 768 に最適化するべきだが、800 × 600 から 1280 × 1024 までの幅広い解像度に対応できるリキッド・レイアウトを使おう。 Screen Resolution and Page Layout by Jakob Nielsen on July 31, 2006 ウェブユーザビリティ教室で最も多い質問の内の 1 つは、「どの画面サイズに合わせてデザインすればよいのか」だ。この質問に完全に答えようとすると、少し複雑になるが、基的な考え方は簡単だ: 現在最も使われている画面サイズ 1024 × 768 に最適化する。もちろんこのガイドラインの基的な考えは、ターゲットユーザたちの間で最も一般的な解像度に合わせて最適化することであるため、ときとともに具体的な解像度は変わり続ける。現在でも、例えば全従業員に大きなモニタを使わせている企業のイントラネット

    Alertbox: 画面解像度とページレイアウト(2006年7月31日)