タグ

usabilityに関するhashimoyaのブックマーク (59)

  • ネットブックやスマートフォン利用者に配慮したサイト作り (ユーザビリティ実践メモ)

    最近ネットブックとスマートフォンの利用者が増えているように感じます。 電子情報技術産業協会の調査結果によると、第一四半期国内PC出荷数の2割弱はネットブックとなっています。 スマートフォンの国内出荷台数を正確に知ることは難しいですが、docomoのGoogle携帯HT-03Aが流通し始めた点や、7月の日の携帯売上でソフトバンクのiPhone3GSが1位になった点から考えるに、今後ますます利用者が増えると予想されます。 私たちとしては、このような状況下でPC向けサイトを制作する際に、ユーザビリティの観点から注意すべき点が大きく3点あると考えます。 近年、家庭用PCのスペックや回線環境が整い、Flashなどを用いたリッチなコンテンツも快適に利用してもらえる可能性が高くなっていますが、一方でネットブックやスマートフォンの多くはそれほど快適なスペック、回線環境が整っているとはいえません。 たとえ

    hashimoya
    hashimoya 2009/09/07
    「毎日3問ずつWebサイト制作 ・ユーザビリティに関する○×問題をつぶやきます。」twitterのそういう活用もアリだな!
  • ジェトロ - 日本貿易振興機構

    キーボードでメニューを操作する場合はこちらを実行してください。スムーズに閲覧できるようにマウスの動きを抑制します。

    ジェトロ - 日本貿易振興機構
    hashimoya
    hashimoya 2009/09/02
    ユーザビリティ調査トップ。あとで見る。
  • 第7回 KDDI株式会社――Designing The Future、mayumi torio、ユニクロトップ - UNIQLO ユニクロ | gihyo.jp

    いま、見ておきたいウェブサイト 第7回KDDI株式会社――Designing The Future、mayumi torio、ユニクロトップ - UNIQLO ユニクロ お花見シーズンもいよいよ終わり、次なる飲み会の口実を考え始めた今日このごろ、いかがお過ごしでしょうか。今回も個人的に感じた素晴らしいサイトの特徴を、いくつかお話したいと思います。 可能性を広げるための挑戦 KDDI株式会社――Designing The Future 図1 リニューアルされたトップページ credit:ネットイヤーグループ株式会社, e*peher KDDI株式会社のコーポレートサイトのトップページがリニューアルされました。Flash版とHTML版を合わせ、3つのトップページが用意されています。 図2 全面がプロモーションエリアとなるFlash版 Flash版では、画面全体がプロモーションのエリアとなり、マ

    第7回 KDDI株式会社――Designing The Future、mayumi torio、ユニクロトップ - UNIQLO ユニクロ | gihyo.jp
    hashimoya
    hashimoya 2009/04/15
    共通しているのは、直感的なUI、かなぁ。でもそれだけじゃないよな。その先を行ってる気がするのは、それぞれのサイトにそれぞれあるユーザーの目的を最短で達成できる工夫がされているからか。
  • ホームページのタネ | サイト制作からSEO、マーケティングまで

    サイト制作からSEO、マーケティングまで

    hashimoya
    hashimoya 2009/04/15
    KDDIトップページリニューアルに関して。ユーザーテストを行った結果、flashも使えてた、と。確かに机上の論だけで話を進めると大事なところを見落としたりするのよね
  • 「ちら見せ」は逆効果? (ユーザビリティ実践メモ)

    コンテンツへの興味を喚起するためにその内容を一部露出させる、いわゆる「ちら見せ」施策を実施しているサイトも多いかと思います。今回は、その「ちら見せ」施策が逆効果となるケースについて考えます。 ところが、弊社でそのサイトのユーザ行動観察調査を行うと、ユーザはクチコミの最初の数行を数件読んだだけで満足し、会員登録することなくサイトを離脱する、という行動が頻発しました。 これでは逆効果です。 一般的に、クチコミや体験談を調べているユーザは、対象物・対象分野についての知識が少なく(時には不安も感じており)、「概要を把握したい」と思っています。そのため、クチコミを数件見渡して雰囲気を掴むとそれで満足してしまうのです。 このように「ちら見せ」が機能しづらい場合、どのようにすれば良いでしょうか。 有効な方法の一つは、ユーザに会員登録のメリットを体験してもらうことです。例えば、仮登録のような中間ステップを

    hashimoya
    hashimoya 2009/04/14
    うーむ。
  • 左ナビと右ナビはどっちが良い? (ユーザビリティ実践メモ)

    ウェブサイトを設計する際に、ナビゲーションメニューを左右のどちらに設置するかで悩んだ経験はありませんか? 弊社でウェブサイトを設計する際には、「コンテンツ」と「ナビゲーションによる誘導」のいずれが大事かによって設置位置を判断しています。 ■ナビゲーションによる誘導が重要な場合はナビゲーションを左に 例えばアマゾンなどの巨大ECサイトではナビゲーションによる誘導が重要であるため、ナビゲーションが画面から切れてしまうことのないよう、左側にナビゲーション設置しています。 上記のほかの考え方として、ユーザがそのサイトと同時に利用する競合サイトと同じ位置にナビゲーションを設置する、という考え方もあります(ユーザの慣れや先入観に配慮する)。 ナビゲーション設置時には「コンテンツ」と「誘導」のいずれが大事なのかによって設置位置を調整するようにしましょう。

    hashimoya
    hashimoya 2009/03/31
    重要度によって決める。あとは慣れなど/目線の自然な流れとか・・・は、デザインで調整できるか。
  • 日記 | ヨモツネット

    blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTMLSVG 混在でき

    hashimoya
    hashimoya 2009/03/23
    ビービット遠藤さんの回、行けばよかった。。
  • flower2.jp

    flower2.jp 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

    hashimoya
    hashimoya 2009/03/23
    ユーザーセグメントにあわせた導線の作りかたは参考になる。画面設計時に見る。
  • フォームにおける「進む」ボタンと「戻る」ボタン。どのように配置する? (ユーザビリティ実践メモ)

    これまで実践メモではフォームを設計する際に注意すべき点をいくつかご紹介してきました。 フォーム設計についての記事一覧 今回はフォームによく出現する「進む(次へ)ボタン」と「戻るボタン」を配置する際に気をつける点を纏めました。 ウェブサイトにおいては「進む(次へ)」ボタンなど前進するものを右側に、「戻る」ボタンなど後退するものを左側に置くことが一般的になっています。 ユーザは多くのサイトを利用している中でこの配置に慣れていますので、配置が逆になっていると次へ進むつもりがうっかり「戻るボタン」を押してしまうことになりかねません。最悪の場合、これまで入力したものがクリアされてしまい、入力を一からやり直すはめになります。 そういう訳ですから、フォームのボタンを配置する際は「進む(次へ)」ボタンを右側に、 「戻る」ボタンを左側へと一般的な慣習に従う方がユーザに対して親切と言えるでしょう。 2.「

    hashimoya
    hashimoya 2009/03/17
    時々tab遷移まで考える必要が出てきたりする。
  • サイト公開前に役立つ25のユーザビリティチェックリスト:phpspot開発日誌

    25-point Website Usability Checklist | User Effect サイト公開前に役立つ25のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか?(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか?行間、文字間は適切か? 4. Flashやアドオンは控えめか? 5. 画像に適切なALTタグが指定されているか? 6. カスタマイズした404ページがあるか?デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか? 8. キャッチフレーズが適切に設定されているか? 9. 5秒で大体どんな内容が分かるものになっているか?ユーザは

    hashimoya
    hashimoya 2009/03/12
    サイト公開前だと間に合わないレベルのもの多し。設計段階でチェックしておくことリスト・あるいは制作の最低限気をつけることリスト的な。
  • アクセシブルで、美しいフォームを実装するためのチュートリアル集 | コリス

    アクセシブルで、美しいフォームを実装するためのチュートリアル集をnoupeから紹介します。 Beautiful Forms - Design, Style, & make it work with PHP &a [...]

  • 入力フォームを考える | ARCHIVE | RHYTHMTYPE INC.

    企業サイトなら少なからず何らかの入力フォームが搭載されていますが、サイト運用者側の欲しい情報をユーザーがいかにストレスなく入力させるか?という問題は、常に話題に上りつつ「これ!」というデファクトスタンダードはないように思います。 というのも、各サイトのターゲットとなるユーザーが異なること、それによりキーボードやマウスのPC操作レベルがことなること、さらに、取得する情報の内容によりベストな方法を入力フォームごとに考慮する必要があるためです。 ただ、入力フォームを実装する場合の基的な覚書はあってしかるべきではないでしょうか。今回は、私たちがフォームを構築する場合の基的なルールを改めてピックアップしたいと思います。 1. 必要のない情報は取得しない あらためて言うまでもなく当然の話です。 さらに表題を噛み砕くのであれば、取得する情報をむやみに細分化しないということです。 たとえば、郵便

    hashimoya
    hashimoya 2009/03/06
    基本だけどめんどくさくて後回しになりがちなフォームの大事なところ。
  • ウェブユーザビリティについて考え始めたい人にオススメの5冊 - Liner Note

    ウェブユーザビリティについて考え始めたい人にオススメの5冊 書いた人: hash 投稿日: 2008年03月01日(最終更新:5年7ヶ月と15日前) 読者の皆さんの反応 2 被ブックマーク数: 12 要約:ユーザビリティについて興味はあるけど、学ぶためにはどんながいいんでしょという方向けに5冊のをお薦めします ここ3ヶ月ほど就活がらみでウェブユーザビリティに関するを読んだので、とりあえずその中でオススメできる5冊を挙げておきます。ユーザビリティやUIの話に関しては、海外の方が情報があるのだけど、まだ読めてないので和書だけで。 周りが落ち着いたら、この辺で書いてあることをまとめて書いておこうと思います1 。 ちなみに、私も内容を完璧に理解できているわけではありませんので誤解しているところがあるかもしれません。フィードバックは歓迎しますので、間違いがあればレスポンス頂けるとうれしいです。

    ウェブユーザビリティについて考え始めたい人にオススメの5冊 - Liner Note
    hashimoya
    hashimoya 2009/02/28
    5冊。ちょっと悩んでいるので本屋で手に取ってみる。東京ならジュンク堂でほぼ揃う。
  • ウェブサイトでやってしまいがちなユーザビリティのミス

    ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー

    hashimoya
    hashimoya 2009/02/20
    「Less Thinking」かあ…
  • フォームのユーザビリティを再考してコンバージョンを向上

    twitter facebook hatena google pocket お問い合わせフォーム、エントリーフォームなどは、ユーザーが能動・積極的に行動する数少ない場です。 このような潜在一隅の機会を逃していませんか? フォームについて以下のようなデータがあります。 「申し込みフォームに入力し始めた人の54%が入力を途中でやめている」 (引用:申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】) ターゲット層のITリテラシーなども考慮して、サイトのフォームについて考える必要があるのではないでしょうか。 今回はそんな感じでフォームについて考えてみたいと思います。 sponsors フォームの長さ フォームが長いのを見るだけで、ページから離脱する人もいます。 項目を減らしたり、必須項目をなくすなど配慮が求められます。 極端な話で言えば、E-mailアドレスのみ入力

    hashimoya
    hashimoya 2009/02/19
    フォームの項目ごとに記事をまとめてあるよ。
  • 強引な伝え方は効果的か? (ユーザビリティ実践メモ)

    サイトを運営していてもっとユーザに知らせたいけれどなかなか認知が取れないサービスがあり、もどかしく思った経験はありませんか?今回は、「ユーザに強制的に情報を見せる」例についてご紹介したいと思います。 このサイトでは、ほとんどのユーザがログインするとまず最新情報ページを閲覧し、すぐにログアウトするか他の個別のサービスページに遷移してしまうため、最新情報ページでいかに新しいサービスを訴求するかが課題となっていました。 このような場合、よく使われる手法として以下のようなものがあります。 ポップアップウインドウ ウェルカムページでのFlashムービー 動画の自動再生 ライトボックス(同一画面上にレイヤーを重ね、背景を暗くすることで上レイヤーに注目させる手法) このサイトでは、ライトボックスによる情報訴求が注目度が高く有効であるという仮説を立て、ログインしたユーザが最新情報ページへ移動すると同時に自

    hashimoya
    hashimoya 2009/02/19
    やっぱり強制的にポプアプは逆効果だと。むしろユーザがよく見る情報に沿ったほうがいいっぽい
  • ユーザの視線に配慮したページ作り:「表」編 (ユーザビリティ実践メモ)

    弊社のユーザ行動観察調査では、アイトラッキング(ユーザの視線分析)を利用していますが、ある程度ユーザ理解があれば、「認知的ウォークスルー」(ユーザになりきってそのサイトを検証する)という手法でも、視線の流れを意識したサイト評価・設計ができるようになります。 今回はWebページ内の表のつくり方を例に、「視線を意識したサイト設計」のヒントをご紹介しましょう。 このニュース一覧は、ぱっと見はきれいなのですが、実際にはユーザの情報収集を妨げています。その理由がわかるでしょうか? この例の場合、ユーザはまず文頭を見て自分に必要な情報を探すのに対し、文章が中央ぞろえになっているため、視線を左右に動かす必要があり、情報収集の効率を下げています。 そこで、文頭を左寄せにすることで視線がスムーズに流れ、表が読みやすくなります。 ただし、左寄せが万能なわけではありません。次の例をご覧ください。 いかがでしょう

    hashimoya
    hashimoya 2009/02/10
    ユーザの視線誘導。シチュエーションによって左・右(・あるいは中央も)寄せを使い分ける
  • モバイルサイト構築前に知っておきたいユーザビリティ10のポイント(第1回) | モバイルサイト構築のユーザビリティいろは

    端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト(以降“モバイルサイト”)の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で

    モバイルサイト構築前に知っておきたいユーザビリティ10のポイント(第1回) | モバイルサイト構築のユーザビリティいろは
    hashimoya
    hashimoya 2009/01/30
    具体的かつ図を使った説明で、この画面自体がユーザビリティ高い(笑。モバイルサイト制作時に読み返す。
  • [Think IT] 【見やすさと使いやすさ】指標化するユーザビリティ

    ディレクション事業部 マネージャー 2005年、クリエイティブホープにコーダーとして入社。1年半の経験後、ディレクターとして、各サイトの設計、構築、調査を行っている。 http://www.creativehope.co.jp/

    hashimoya
    hashimoya 2008/12/04
    とかく捉えにくいユーザビリティの指標化は、この先必須かと。ヒューリスティック分析に使えそう。
  • 振り分け画面でユーザを逃していませんか? (ユーザビリティ実践メモ)

    会員・非会員など、ユーザの状況によってウェブサイトに複数の入り口がある場合、振り分けが必要となります。今回は、そのような振り分け画面での要素の配置についてのコツを紹介します。 この画面を訪れたユーザは、すでにサービスに入会している方でしたが、少し迷った末、一番上の「○○プランお申し込み」(新規入会者用のリンク)をクリックしてしまい、かなり先に進むまで自分が間違えていることに気づきませんでした。 そこで、上の画面を、次のように変えてみたところ、ユーザはスムーズに自分の状況に適したリンクを選択することができるようになりました。 この画面で問題が解消された最大のポイントは、振り分けの要素を左右に並べたことです。 人は左右に並んでいる要素に対しては「対等な要素」、あるいは「対比されている要素」だと認識する傾向があります。したがって、左右に要素を並べられると、無意識的に「2者を比較しよう」というモー

    hashimoya
    hashimoya 2008/10/21
    上下と左右に並べるのとじゃ、見ている人にとっては意味あいが違ってくるという話。かも。