タグ

ユーザビリティとUIに関するteroma2のブックマーク (7)

  • ユーザーの視線が丸裸になるアイトラッキングテストで分かる驚愕の事実

    以前からシニアのIT操作に関する鋭い洞察のブログで注目していたマミオン有限会社にお邪魔してアイトラッキングテストとユーザビリティについてお話をうかがってきました。 日アフィリエイト協議会主催のセミナーは高田馬場のマミオン有限会社オフィスのセミナー室にて行われました。 前半は景品表示法と薬事法のワンポイント講座が行われました。 後半はマミオンの佐藤純さんによるアイトラッキングテストのセミナーです。 内容は資料など詳細は非公開とのことなので、私が感じたことをお伝えしたいと思います。 詳しく知りたい方はマミオン公式ブログの記事が参考になります。 人気の記事です: ★アイトラッキングなら一目瞭然!新「はてなブックマーク」が何となく見づらい理由 ★実例で納得!シニアが使えないサイトの例 ★シニアを引きつける!購買意欲を高めるキャンペーンサイトの黄金パターン ユーザビリティって何? ある目的を達せさ

    ユーザーの視線が丸裸になるアイトラッキングテストで分かる驚愕の事実
  • » スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder

    モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお

  • MdN Design|総合情報サイト

    PC、ケータイ、スマートフォンなどでアクセスできる会員制オークションサイト。会員数は100万人以上を誇り、いつでもどこでも楽しめる利便性から日々活発に取引が行われている。 急速に求められ始めたWebサイトのスマートフォン対応。狭い画面とタッチ操作という独特なデバイスに必要なUI 設計とはどのようなものだろうか? スマートフォン向けサービスを数多く展開するDeNAでディレクターを務める鈴木哲之さんに、オークションサイト「モバオク」での取り組みをうかがった。 取材・文/久保靖資 取材協力/鈴木哲之(株式会社ディー・エヌ・エー) テスト等を通じたUIUX設計への取り組み 一般的なコーポレートサイトでもスマートフォンでの閲覧を期待して最適化が要件に含まれるようになるなど、Web制作の現場でスマートフォンへの対応を求められるケースが急速に増えている。限られた画面内でコンテンツをどのように見せるのか

    teroma2
    teroma2 2013/03/18
    ユーザーフレンドリーなフォーム画面の実装
  • Windows 8 — 初心者にもパワーユーザーにも期待はずれのユーザビリティ

    見えない機能、低下した発見しやすさ、二重の環境による認知的な負荷、シングルウィンドウのUIからくる能力の低下、低い情報密度。ひどいものだ。 Windows 8 — Disappointing Usability for Both Novice and Power Users by Jakob Nielsen on November 19, 2012 日語版2012年12月6日公開 先日発売されたWindows 8とSurfaceタブレットでMicrosoftはユーザーインタフェース戦略を転換した。フィーチャークリープ訳注と言えるくらい、強力なコマンドを重視するGatesが主導した伝統的GUIスタイルからMicrosoftは軟化したが、今度は必要な機能を隠しながら、大きな色とりどりのタイルで画面を覆いつくし、ユーザビリティを妨げている(訳注: フィーチャークリープとは、電子機器やソフトウェ

    Windows 8 — 初心者にもパワーユーザーにも期待はずれのユーザビリティ
  • ショッピングカートでは、クレジットカード情報の入力エリアをハイライトするとかご落ちを防げる

    [対象: 全員] コンバージョン率を上げるために簡単にできる改善策を今日は紹介します。 クレジットカードの入力エリアを“視覚的に補強”する方法です。 Baymard InstituteのE-Commerce Checkout Usabilityで説明されていたやり方になります。 A(左)とB(右)を比べてみてください。※クリックで拡大 違いに気付きますか? 2つ違ってますね。 背景色 セキュアバッヂ クレジットカードを入力するエリアだけがほかのエリアとは背景色が変えられていています。 またGeoTrust(ジオトラスト)のセキュアバッヂが置かれています(Aではページ右上に置かれているがBでは近くに移動してある)。 たったこれだけのことでセキュリティに対するユーザーの安心感が増すんだそうです。 SSLを使っていれば技術的にはクレジットカード情報を含むすべての情報は暗号化されたうえで送信されま

    ショッピングカートでは、クレジットカード情報の入力エリアをハイライトするとかご落ちを防げる
  • mixiのiPhoneアプリはここを改善すべきだ

    mixi, Twitter, Facebook, Google+, Linkedin 2011年12月最新ニールセン調査 日ではまだまだページビューや滞在時間においてはmixiが他のSNSを引き離しているようですが、上記リンク先でも言及されているように、それはあくまでもPCブラウザ経由でのサイトアクセスに限定した場合のようです。モバイル端末からのアクセスを含めるとどういう結果になるのか気になるところです。 …という流れで、最近mixiが公式でリリースしているiPhoneアプリを触ってみたのですが、これは現状では課題だらけだと思います。AppStoreでもサードパーティー製のmixiビューアーより評価が低い状況で、同社のスマートフォン展開に対する意識の低さが浮き彫りになっているように感じます。少なくともデザインやUIのクオリティに関しては、海外の競合SNSに大きく引き離されてしまっているの

  • ユーザビリティやリピータの為に結構大切な訪問済みリンク(a:visited)の色 | 無料SEO対策のススメ

    ユーザビリティやリピータの為に結構大切なa:visitedの色 皆様、訪問済みリンク「a:visited」の色はどうしていますでしょうか? 検索サイトの検索結果やポータルサイトでは紫色になっている事が多いですが、企業サイトやブログなどではa:linkと同じになっているケースも多いと思います。 以前から感じていた事ですが、ユーザビリティやリピータのことを考えるとa:visitedの色は、a:linkとは異なる色を指定した方が良いのではないでしょうか。 そうしている方にとっては今更感満載な内容ですが、このたび管理している全てのブログでa:visitedの色を変更してみました。 a:link、a:visited、a:hover、a:activeの意味 Web制作をしている人にとっては当たり前の知識ですが、無料ブログなどでCSSを修正したいという方の為に一応意味を載せておきます。 a:link ・

  • 1