Mega Menus Work Well for Site Navigation
Summary: Large, rectangular menus group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices. Mega menus (sometimes spelled “megamenus”) are a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. They are an excellent design choice for accommodating a large number of options or for revealing lower-l
Writing Efficient CSS for use in the Mozilla UI - MDC
The following document outlines rules for optimizing CSS files for use in the Mozilla UI. The first section is a general discussion of how the Mozilla style system categorizes rules. With an understanding of this system, the following sections contain guidelines for writing rules that take advantage of Mozilla's style system implementation. How the style system breaks up rules The style system bre
ユーザーの体感速度をGoogle Analyticsで可視化する – cyano
ユーザーがページをロード開始してから閲覧できるようになるまでのロード時間はユーザーが自分のページを快適に閲覧できているかどうかを示す重要なファクターです。Google Analyticsのイベントという機能を使用することで、ユーザーの実際の体感速度を可視化することができます。 たとえば、このブログのある期間における体感速度のグラフはGoogle Analytics上で以下のように出ています。 44.84%のユーザーは100〜499msでロードできており、1秒未満でロード完了しているユーザーは合わせて73.49%であるとわかります。また、3秒以上かかっているユーザーも7.42%居ることも分かります。3秒以上ロードにかかるようだと離脱率も高くなるので、7.42%のユーザーに対して何かの施策が必要であるということも分かります。 このように、ユーザーが実際感じている体感速度を可視化することで、この
Progress in Mobile User Experience
Summary: Our newest research on mobile usability shows an improvement in mobile UX. The responsive-design trend has inspired sites and apps to prioritize content over UI elements and include essential content and features on mobile. Our 3rd edition of the report with mobile UX guidelines made me reflect on how this field has changed in the past 7 years. Back in 2009, Jakob Nielsen deemed mobile us
強引な伝え方は効果的か？ (ユーザビリティ実践メモ)
サイトを運営していてもっとユーザに知らせたいけれどなかなか認知が取れないサービスがあり、もどかしく思った経験はありませんか？今回は、「ユーザに強制的に情報を見せる」例についてご紹介したいと思います。 このサイトでは、ほとんどのユーザがログインするとまず最新情報ページを閲覧し、すぐにログアウトするか他の個別のサービスページに遷移してしまうため、最新情報ページでいかに新しいサービスを訴求するかが課題となっていました。 このような場合、よく使われる手法として以下のようなものがあります。 ポップアップウインドウ ウェルカムページでのFlashムービー 動画の自動再生 ライトボックス（同一画面上にレイヤーを重ね、背景を暗くすることで上レイヤーに注目させる手法） このサイトでは、ライトボックスによる情報訴求が注目度が高く有効であるという仮説を立て、ログインしたユーザが最新情報ページへ移動すると同時に自
サイト内検索エンジン考 | Accessible & Usable
公開日 : 2009年1月17日 (2018年4月2日 更新) カテゴリー : ユーザビリティ あるサイト（ホームページ）のユーザビリティ検証プロジェクトで、「改善前」と「改善後」のページを使ったユーザビリティテスト（比較実験）を実施しました。 「改善前」では、サイト内検索が多く使われ（そのサイトでは残念なことに、結果、ユーザーの満足いく検索結果が得られなかったり、検索結果が「0件」となってユーザーにフラストレーションを与えてしまいました）、「改善後」では、サイト内検索がほとんど使われないという結果が見られました。 改善した内容は、サイトコンテンツのメニュー（リンク）のラベリング（言葉遣い）と、その階層概念の見直しです。ある情報を探すとき、ユーザーは「キーワードを心に思い描いて斜め読みする」ものですが、そのユーザーが思い描くキーワードをうまくメニューに提示してあげることで、サイト内検索の利
Infoperience - ナビゲーションの落とし穴
ナビゲーションの落とし穴 前回の「ウェブに関する基本的なメンタルモデル」でも書いたとおり、ウェブブラウザの「戻る」「進む」のボタンは、ウェブの閲覧という行動に地理的な移動概念を強く持ち込んでしまった。そのためユーザは、膨大な情報の中をページからページへ渡り歩いているような感覚でウェブサイトを利用している。ウェブサイトを作る側も、ユーザが最初に目にする画面を「ホーム」あるいは「トップページ」などと呼んで、そこから如何にしてユーザの求める情報まで導くのかということを第一義にインターフェイスをデザインすることになる。ユーザをうまく導くためには、そのウェブサイト全体の情報構造を目に見えるような形であらわしたり、その構造の中で今ユーザがどの部分を見ているのか（どこにいるのか）が分かるようなサインをどこかに埋め込んだりしなければならない。 ウェブページ上でこういった役割を持つインターフェイス要素を一般
Usability testing: Card Sorting, Prioritization Matrix & SUS.
World-class online tools for Usability Testing & Information Architecture Try our usability testing tools today. Our Card Sorting tool supports Closed, Open and Hybrid testing, and our Prioritization Matrix is the only such tool, currently online. Improve information architecture (IA) of your project. Get instant results with built-in data analytics. Our Card Sorting tool supports open, closed or
Usability Guidelines for Accessible Web Design: a Report by NN/g
Learn techniques for designing websites for people with visual and motor impairments who use assistive technology, including: Screen readers Braille readers Screen magnifiers The information in this report is based on empirical observation of people who are blind, have low vision, and have motor impairments use websites and intranets. Optimize the user experience by applying the guidelines discuss
Untitled Document
Breadcrumb Navigation: Further Investigation of Usage By Bonnie Lida Rogers and Barbara Chaparro In our last issue of Usability News, we reported on the general usage of breadcrumb trails as a method of navigation on web sites (Lida, Hull & Pilcher, 2003). The term “breadcrumb” derives its name from the Grimm’s fairy tale, Hansel and Gretel. Hansel left a trail of breadcrumbs through the woods a
Tabs, Used Right
Summary: Follow these 12 design guidelines for tab controls to distinguish tabs from site navigation and address click uncertainty. Simplest GUI widgets are the building blocks for most functionality on the web, but it's rare to find sites that use all the dialog controls correctly. Even something as simple as radio buttons and checkboxes are incorrectly used half the time. And let's not even get
ラジオボタンをスライダーバーのUIに変更:SuperSlider - ウェブユーザビリティ.JP
SuperSliderは複数並んだラジオボタンを見た目だけスライダーバー風に変更する、PrototypeとScript.aculo.usをベースにしたスクリプトです。 ウェブ上のFAQの末尾などに「この情報は役にたちましたか？」のような形でフィードバック用のアンケートが用意されていることがあります。一般的にこのようなアンケートはラジオボタンによる段階評価で行うことが多いのですが、段階評価であれば、スライダーバーのような全体の高低の関係が視覚的に分かるUIのほうが理解しやすく、回答の間違いも減ると思います。 スライダーバーはJavaScriptなどを使えば実現できるのですが、既存の仕組みがラジオボタンだったり、JavaScriptを利用できない環境でも使える必要がある場合などもあります。 そのような場合には、実際の仕組み自体はラジオボタンで実装しておき、見た目だけSuperSliderを使っ
Snyder Consulting :: Home
Carolyn Snyder is a user experience consultant who specializes in qualitative user research and usability testing. In the past 20 years, she has conducted upwards of 1000 usability tests on a wide variety of web sites/applications, mobile phone applications, paper forms, and consumer products. Her clients are diverse, spanning the financial, healthcare, education, and technology sectors. Carolyn i
'About Us' Information on Corporate Websites - User Research Findings
Summary: Users expect About Us sections to be clear, authentic, and transparent. They compare corporate content with third-party reviews to form a holistic opinion of a company before initiating business or applying for jobs. Whether users seek company information in a B2B (business–to–business) or B2C (business–to–consumer) context, effectively explaining a company’s purpose and what it stands fo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
First 2 Words: A Signal for the Scanning Eye
Non-Profit Organization Websites: Increasing Donations & Volunteering
Write for Reuse
Interaction Elasticity
Bloomberg - Are you a robot?
The iPhone User Experience: A First Touch