*Web IAに関するryootaのブックマーク (143)

  • ファーストビューは何pxまで? ブラウザの表示領域サイズ5年間の変化を大公開 | 初代編集長ブログ―安田英久

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

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

    ユーザビリティの原則と現場で使えるユーザビリティテストの方法
  • 「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる - Publickey

    このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単! スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1)HTMLを書くだけでモバイルアプリケーションができてしまう 2)モバイルのユーザーインターフェイス対応の部品が多く揃っている 3)iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な

    「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる - Publickey
  • ユーザーの視線を誘導する3つのユーザビリティ改善方法

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

    ユーザーの視線を誘導する3つのユーザビリティ改善方法
  • 8億円の売上アップをもたらした、ECサイトでコンテンツを増やす9+1個の方法 at PubCon

    Googleのスパム対策強化やブランドリンク重視そしてその他もろもろを先日参加したPubCon Las Vegas 2010のレポートとして、お伝えしてきました。 今日はレポートをもう1つ追加します。 ECサイトを運営するサイト管理者、特に「ECサイトではオリジナルのコンテンツを作るのは無理」と“あきらめモード”に逃げているネットショップの運営者(そう、あなたのことです!)の参考になるはずです。 (たった数秒といえど)言い訳を探すのに費やすムダな時間と思考回路をこれからリストアップするコンテンツ増強のアイディアを探すことに向けてください。w モデルとなるのは、“狩猟犬アイテム”をオンラインで販売するGUN DOG SUPPLYというECサイトです。 このサイトが、当初の売上見込額の3倍の1,000万ドル(日円で8億数千万円)を6年間で増やすことに成功した施策の1つがサイトのコンテンツを増

    8億円の売上アップをもたらした、ECサイトでコンテンツを増やす9+1個の方法 at PubCon
  • 日本のWebサイトの404ページデザインいろいろ+α - かちびと.net

    気になって探したのですが、ググッても 9割は海外のデザインだったので、日 の素敵な404ページを探してみました。 時間の関係でさほど数を揃える事が出来 ませんでしたが、少しでも参考になれば 幸いです。 404は、誰でも訪れる可能性のあるページです。ある意味、用意したコンテンツよりも見られる可能性がありますのでほんの少しでも手を入れておくといいかも知れませんね。 どこかで「404は古い。無条件でトップページリダイレクトが最適」なんて意見も見かけましたが、個人的にはユーザーを混乱させる要因になるのでリダイレクトは避けたほうがいいと思います。 では、個人的に気になった404ページをご紹介していきます。順不同で、ややサイトの属性がWeb関係に偏っていますがご了承ください。尚、リンクは404ページではなく、TOPページにしてあります。 株式会社サクラクレパス デザインも好評のサクラパレスの404ペ

    ryoota
    ryoota 2010/11/25
    404エラーページ
  • インターフェイスとしてテキストをみたときに考慮すること

    サービス、製品の解説するためにマニュアルやスクリーンキャストを作ることがあります。しかし、利用者はのんびり説明に耳を傾ける余裕がないときもあるわけですから、使っているうちに覚えてもらえるようなユーザーインターフェイスを必要とします。Webサイトをはじめ様々なシーンでいえることですが、すべてのアクションはテキストから始まっています。それゆえ、見た目を考える前にテキストでどのように簡潔に説明できるかを模索する必要があります。 例えば Twitter をみてみましょう。機能が少ないシンプルなサイトですが、UI 要素をすべて省いてしまうと状況が大きく変貌します。タイムラインを読むことは可能ですが、返信がしたい、設定を変えたいといったアクションを起こすことが出来なくなります。テキストは私たちが何かしたいときの道案内をしているということがテキストを省いてみることで改めて気付かされます。アイコンで補助で

    インターフェイスとしてテキストをみたときに考慮すること
  • コーディング前に確認しておきたいこと。 - CSS HappyLife

    CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう?ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は?って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容(だと良いな)! じゃあまずは最初に確認しておきたい基的なことか

    コーディング前に確認しておきたいこと。 - CSS HappyLife
  • 最適なテキストリンクの色は? | ウェブ力学

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

  • Wireframe Showcase

    Greenlight App Design Creative Navy Greenlight App Design Project Information: The mobile application enables people to submit incidents in the workplace.…

  • http://www.designwalker.com/2010/05/grid-design.html

    http://www.designwalker.com/2010/05/grid-design.html
  • ページ表示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
  • 新聞社が「無断リンク」を禁止する3つの理由

    「日経済新聞 電子版」のリンクポリシーで「リンクをお断りする」場合が列挙され、その中に「個別記事へのリンク」があり、「以上の項目に違反した場合は、損害賠償を請求することがあります」と記載されていることが話題になっている。日経済新聞社に限らず、他のマスコミ、企業一般の中にも、無断リンクを禁止する旨の「リンクポリシー」があり、20世紀の頃から、Webや技術に詳しいユーザーにとっては格好の話題だ。 アスキー・メディアワークスのリンクポリシーには、「サイトのトップページ、ならびにサイト内の各コンテンツへのリンクは、ご自由にご利用ください。弊社の許諾等は必要ありません。」とあり、「あえてはっきり言いたい。馬鹿じゃないの?」とか「完全に時代遅れ」と言われる心配はなさそうだ。とはいえ、「すべての新聞社はリンク自由のリンクポリシーを策定すべし」とも思わない。 今回のコラムはその理由を書こう。日経新

    新聞社が「無断リンク」を禁止する3つの理由
  • テーブルを見やすく、使いやすくするためのアルティメットガイド

    ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「(エクセルでいうところの)行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単

  • 第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum

    第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか? 今木 智隆(株式会社ビービット) 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ

    第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
    ryoota
    ryoota 2010/02/19
    ファーストビュー
  • ファーストビュー都市伝説 - ページ上部に詰め込むのはダメデザイン? | 初代編集長ブログ―安田英久

    ファーストビュー都市伝説 - ページ上部に詰め込むのはダメデザイン? | 初代編集長ブログ―安田英久
    ryoota
    ryoota 2010/02/19
    ファーストビューにあるか無いかより、それより下にコンテンツがあるか無いかのアフォーダンスが重要
  • ユーザーにクリックされやすいボタンデザインの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”について、 如何にユーザが考えることを嫌うか 「考えさせない」とはどういうことか を、これまで見てきたユーザ検証の結果なども交えて、少しばかり書いてみようと思います。 あらゆる「無駄な」思考が、ユーザを苛立たせ、

  • 「普通の人」に向けたサービスのこと - レジデント初期研修用資料

    恐らくは「便利であること」それ自体には、お客さんは魅力を感じないのではないかと思う。 「便利さ」に価値を見出すのは、新しいものに飛びつくのが好きな、ごく一部の人であって、 お客さんの多くは、便利であることよりも、「自分が真ん中にいる」感覚を共有することを好む気がする。 2つの入り口を持つ料理屋さん うちの近所にあるショッピングモールに「ドリア専門店」と「石焼き鍋専門店」とが入っていて、2つのお店は、中で厨房を共有している。 お店はモールの角地にあって、図面上はたぶん、「角地にある大きな店舗」なんだけれど、中を仕切ってあって、「三角形に分かれた2つのお店」に改造してある。お客さんは、ドリアをべたければドリアの門に、石焼きビビンバをべたければ石焼きの門にそれぞれ入って、お互いの行き来はできないようになっているんだけれど、バックグラウンドでは、同じ厨房で、いろんな料理が作られている。 そこは