画像とテキストのジグザグ型レイアウトは、流し読みの効率を下げる
装飾用の画像は、互い違いになったリストのレイアウトで使われていると、ページを流し読みするユーザーがつまずく原因になることが、アイトラッキング調査でわかった。一方、テキストや画像が縦に整列しているページでは、ユーザーは効率的に流し読みをしていた。 Zigzag Image–Text Layouts Make Scanning Less Efficient by Kim Flaherty on November 26, 2017 日本語版2018年6月27日公開 画像は、大きな写真であれサムネイルであれ、現在のWebデザインには欠かせないものだ。特に、トップページや「こういう仕組みです」（How it works）ページのようなストーリーを伝えるページで、企業が複雑なトピックについて書いたり、製品の説明をするときには、関連する画像を付けた説明的なテキストのかたまりがあり、次の列も同じようなテキ
5人のユーザーでテストすれば十分な理由
手の込んだユーザビリティテストはリソースの無駄づかいだ。最高の結果を得るためには、5人以下のユーザーでテストし、小規模なテストを余裕のある限りたくさんやることだ。 Why You Only Need to Test with 5 Users by Jakob Nielsen on March 19, 2000 ユーザビリティはお金がかかって複雑だ、ユーザビリティテストなんて、よっぽど予算があって、しかも時間的にも余裕があるという、めったにないプロジェクトのために取っておけばいい、と考える人もいるようだ。だが、それは違う。手の込んだユーザビリティテストは確かにリソースの無駄づかいだ。最高の結果を得るためには、多くとも5人のユーザーでテストすれば十分。そのかわり、小規模なテストを余裕のある限りたくさんやることだ。 以前の調査で、Tom Landauerと私は、n人のユーザーでテストしてわかるユ
UXにおけるビジュアルデザインの5つの原則
スケール、視覚的な階層、バランス、コントラスト、ゲシュタルトの原則を正しく適用すれば、美しいデザインを生み出せるだけでなく、ユーザビリティも向上させられる。 5 Principles of Visual Design in UX by Kelley Gordon on March 1, 2020 日本語版2020年12月17日公開 ビジュアルを見たとき、我々はそれが魅力的か不愉快かを、通常、すぐに判断できる（なぜならば、こうした判断は、Don Normanのエモーショナルデザインのモデルでいうところの、本能レベルで展開されることが多いからだ）。しかしながら、レイアウトが視覚的に魅力的である理由を言語化できる人はほとんどいない。だが、優れたビジュアルデザインの原則をグラフィックに活かすことで、エンゲージメントを促進し、ユーザビリティを向上させることは可能である。 ビジュアルデザインの原則は、
モバイルサイトのサブナビゲーション
モバイルサイトのサブナビゲーションの主な実装方法としては、アコーディオンやシーケンシャルメニュー、セクションメニュー、カテゴリーランディングページが挙げられる。このうちのどれがそのサイトに最適なのかは、IAにある下位カテゴリーの数やサイトでのユーザーの移動パターンによって決定される。 Mobile Subnavigation by Raluca Budiu on July 16, 2017 日本語版2017年11月16日公開 情報アーキテクチャがかなり複雑で、カテゴリーの階層が多数あるWebサイトは多い。下位のカテゴリーは、デスクトップなら、ドロップダウンメニューやメガメニューの中にあることが多いが、こうしたサブカテゴリーをモバイルデバイスで表示するのは必ずしも容易ではない。 Cisco.com：デスクトップサイトでは、水平ナビゲーションバーを利用して、メインカテゴリーを収めている。マウス
クライアント中心設計
ある国のデザイン界の重鎮の先生とじっくり話をした。彼はUCDという言葉を頻繁に使っていたが、それはユーザ中心設計ではなく、クライアントに喜んでもらうことを第一に考え、クライアントの設定した締め切りに制約された、クライアント中心設計であった。 黒須教授 2015年7月23日 ある国でデザイン界の重鎮といわれている先生に招待されて出張し、彼とじっくり話をする機会が持てた。彼はUCDという言葉を頻繁に使っていたが、話をしているうちに、どうも彼が重視しているのはエンドユーザではなくクライアントではないのか、いいかえればUCDではなくクライアント中心設計なのではないかと思えてしまったので、ちょっとその話を紹介したい。 その先生の行ったプロジェクト まず、彼が学生達を指導して実施したプロジェクトの紹介ビデオを見せてもらった。そのプロジェクトはある航空会社からの委託で四ヶ月にわたって実施したもので、ユー
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
UXデザイン教からの脱却
UXデザイン教は、UXという概念を適当に解釈して使っていても受け入れてくれる、とても素晴らしい教義の世界のように思われる。しかし、きちんと編纂された教典もないようだと、早晩雲散霧消してしまうのではないか、と危惧している。 黒須教授 2014年6月2日 慶応大学の増井俊之さんはいつも鋭い指摘をしている。その中のひとつ、「ユーザインタフェース研究者という仕事」には次のように書かれている。 作曲家という仕事という記事を読んで、こんなことを考えてしまった。 （中略） いまだに変なユーザインタフェース研究が生き残っているというのは、どうなっているんでしょうか？ （中略） つまり「システムの有用性」だけで生き残るのは不可能であると言うことになってしまったんです。では、どうするか？と言うと、互助会的な（むかしのフリーメーソンみたいな）組織を作って、架空の「権威」を作るしかない。ユーザインタフェース研究教
WYSIWYGよ、さようなら
Macintoshスタイルのインタラクションデザインは限界に達した。Results-Oriented UI（結果志向のユーザインタフェース）と呼ばれる新たなパラダイムが、ユーザに大きな力を与える日がやってくるのかもしれない。 R.I.P. WYSIWYG by Jakob Nielsen on October 10, 2005 これまでの25年間、あるスタイルのユーザ・インターフェイスが幅を利かせてきた。Macintoshスタイルのグラフィカル・ユーザ・インターフェイス（GUI）である。しかし、今、それは限界に到達し、あるスタイルに取って代わられようとしている。GUIの土台にある貴重なインタラクション原理が、部分的とは言え、覆されようとしているのだ。 MacスタイルのGUIは、それ以前のインタラクション・パラダイムと比べると非常に使いやすいものだった。コマンドやパラメーターを直接入力するの
Alertbox: 2005年 ウェブ・デザインの間違いトップ10（2005年10月3日）
2005年、ユーザをうんざりさせてきたWebデザインの間違いをリストアップしてみると、古くから言われているものがランクイン。悪さをし続けていることがわかった。 Top Ten Web Design Mistakes of 2005 by Jakob Nielsen on October 3, 2005 Webデザインの間違いをリストアップするにあたり、今年は趣向を凝らしてみることにした。私が発行しているニュースレターの読者にお願いして、今年、もっとも腹立たしいと思ったユーザビリティ上の問題点を投票してもらったのだ。 読者の参加によって、ユーザテストでは気付かなかった多くの課題が浮き彫りになるだろうと思っていたが、そうはならなかった。30位までにランクインした問題点は、ユーザビリティガイドラインの中で指摘済みのものばかりだったのだ。今年のトップ10を読んで、“聞き覚えがあるぞ！”と思われる方
イントラネットホームページの標準形
近年、イントラネットのホームページには、基本的なレイアウトにのっとった似通ったものが多くなってきた。しかし、まったく同じに見えるイントラネットでも、機能やコンテンツが異なるために、そのユーザビリティは劇的に違うものになり得る。 Canonical Intranet Homepage by Jakob Nielsen on May 23, 2005 過去5年ほどの間に数百という数のイントラネットを見てきた。そこには、ある傾向が、はっきりと見られるようになっている。ホームページのレイアウトが、年々似てきているのだ。あるレイアウトが普及し、今や標準形と呼べる程になっている。 イントラネットのホームページ10個のスクリーンショットから平均をとって、下の画像を作ってみた。どのスクリーンショットにも多少の個性はみられる。しかし、レイアウトに関しては、かなり共通した部分のあることが下の画像にくっきりと浮
Amazon：もはやeコマース・デザインの手本にしてはいけない
Amazon.com の多数のデザイン要素が機能している主な理由は、それが世界最大規模で、最も成功しているeコマースサイトであるという理由が大きい。一般的なサイトは、Amazon.com のデザインを真似するべきではない。 Amazon: No Longer the Role Model for E-Commerce Design by Jakob Nielsen on July 25, 2005 一般的にいえば、大手のサイトを真似るのはよいことだ。特定のデザインにユーザが慣れ、それを自分のサイトで使えば、移行時の学習を手助けすることになり、結果的にユーザビリティが向上する。もしアプリケーションをデザインしているのであれば、Microsoft Office を真似るとよい。例えば、フロッピーディスクを「保存」を実行するためのアイコンに使うとよい（フロッピーディスクに保存するような人が、もう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザビリティコラム：Jakob Nielsen博士のAlertbox