スクロールフェードの基礎
スクロールフェードがユーザブルというよりも気が散るものになるかどうかは、その持続性、応答性、ページ上の要素への控えめな適用といった要素に左右される。このデザインパターンを正しく用いれば、ブランド認知を向上させ、ページの読み込みを最適化し、コンテンツをより理解しやすくすることができる。 Scroll Fading 101 by Sara Ramaswamy on December 8, 2023 日本語版2024年4月11日公開 はじめに スクロールフェードは新しいデザインパターンだ。これは、スクロールによってトリガーされるアニメーションを指し、ユーザーがページ上の特定の地点までスクロールすると、新しい要素やコンテンツがフェードインしたり、フェードアウトするというものである。 動き（つまり、アニメーション）というものは前注意的に処理される。すなわち、ユーザーの目は自動的にアニメーションに引き
UXのためのAI：入門編
生成AIツールを、あなたのUXスキルを代替するためではなく、サポートし、強化するために使おう。小さなUXタスクから始めて、ハルシネーションや誤ったアドバイスに気をつけよう。 AI for UX: Getting Started by Kate Moran and Jakob Nielsen on November 3, 2023 日本語版2024年3月13日公開 最近、ヤコブは、UX分野は早急にAIに取り組む必要があると書いた。これは、既存のAIツールのユーザビリティ向上が切に求められていることもあるが、AIを適切に活用することで、UX業務に大幅な進化がもたらされる可能性があるからだ。 幸運なことに、UXコミュニティのメンバーの多くがこれに同意し、UXの作業にどのようにAIを使うべきかを我々に尋ねてきている。そこで、ケイトは、彼女のLinkedInのフォロワーに、これまで仕事でAIを使った
モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
無限スクロール：利用すべきとき、避けるべきとき
無限スクロールは、インタラクションコストを最小限に抑え、ユーザーエンゲージメントを高めるが、すべてのWebサイトに適しているわけではない。ページネーションや「さらに読み込む」ボタンのほうが良い解決策になることもある。 Infinite Scrolling: When to Use It, When to Avoid It by Tim Neusesser on September 4, 2022 日本語版2023年1月24日公開 無限スクロールは、商品一覧ページに使われるデザイン手法の1つで、ユーザーがスクロールダウンしていくと、コンテンツが次々に読み込まれるというものだ。これを利用すれば、ページネーション（訳注：コンテンツを複数のページに分割すること）の必要がなくなる。 Adidas.com：Adidasの商品一覧ページでは、ページネーションを使って商品を表示している。 Nike.com
状態切り替えコントロール：悪名高い「ミュート」ボタンの事例
2つの異なるシステム状態を切り替えるオンオフ型のコントロールは、現在の状態と、ユーザーがそのコントロールを押した場合にシステムが移行する状態の両方を、ユーザーに明確に伝える必要がある。 State-Switch Controls: The Infamous Case of the "Mute" Button by Raluca Budiu on October 18, 2020 日本語版2021年4月27日公開 先日、クライアントとのWebExミーティングで、私はマイクをオンにすることができないと思ってパニックになった。私は6時間のプレゼンテーションをすることになっていた。だが、自分のミュートすら解除できないとしたらどうすればいいのか。私は斜線の入ったマイクのアイコンをクリックし続けた。しかし、何をやってもマイクの斜線はそのままだったのである。 以下がそのときのスクリーンショットである：
アコーディオンのアイコン：どのシグニファイアが最適か
キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 日本語版2021年4月8日公開 アコーディオンが、現在、人気のあるUI要素であるのには理由がある。というのも、モバイルでは、コンテンツを折りたたんでページの長さを管理可能にする不可欠なツールになっている一方、デスクトップでも、視覚的な複雑さを軽減し、ユーザーが目下のタスクに最も関連性の高いコンテンツに集中できるようにしてくれるからだ（複雑なアプリケーションには特に適している）。 モバイルUXとアプリケーションデザインの両方の講座でよく聞かれ
スクロール連動型テキストアニメーションは、ユーザーを遅らせる
より魅力的に見せることを目的とするアニメーションも、使い方を誤れば、コンテンツ消費のスピードを遅らせ、ユーザーの障害になってしまう。 Scroll-Triggered Text Animations Delay Users by Aurora Harley on April 16, 2017 日本語版2017年12月4日公開 昔から知られているユーザビリティの課題の1つに、読み込みの遅さにユーザーが苛立ち、そのサイトや組織に関するイメージに悪影響を及ぼす、というのがある。時間が貴重なときには、一刻も早く欲しい情報の入手がほんの少し遅れただけでも不満を感じるものだからだ。 応答時間が遅くなるのは、大きな画像や凝った作りのウィジェット（たとえば、バナーカルーセルなど)の読み込みや、複雑なデータ処理によるサーバーの遅延によることが多い。しかしながら、最近実施したユーザビリティ調査では、まったく違
マイクロコンバージョンのためにユーザーに肩身の狭い思いをさせてはいけない
ユーザーに気まずい思いをさせることで、オファーに応じさせたり、ニュースレターに登録させようとするものを、マニピュリンクという。 Stop Shaming Your Users for Micro Conversions by Kate Meyer and Kim Flaherty on April 30, 2017 日本語版2017年9月5日公開 厄介なトレンドがWebで伝染病のように広がっていっている。ニュースレター登録などのコンバージョンにユーザーを必死に近づけようと、一部のWebサイトが人を巧みに操るようなリンクテキストをポップアップモーダルに追加しているのだ。そうしたラベルはユーザーに肩身の狭い思いをさせようとするもので、マニピュリンク（manipulink）と呼ばれている（この気の利いた用語はSteve Costelloによって作り出された）。このラベルで用いられているのが、罪悪
モーダルと非モーダルダイアログ： 用いるべき場合とそうでない場合
モーダルダイアログはユーザーを遮って何かしらの行動を要求するものである。これはユーザーの注意を重要な情報に向けてもらうことが必要な場合には適している。 Modal & Nonmodal Dialogs: When (& When Not) to Use Them by Therese Fessenden on April 23, 2017 日本語版2017年8月24日公開 まず、モーダルダイアログと非モーダルダイアログの違いをさらに理解するために、「ダイアログ」と「モーダル」という用語の意味するところから考えてみたい。 ダイアログ（＝dialog。dialogueともいう）とは、2人の人の間で交わされる対話のことをさす。ユーザーインタフェースにおけるダイアログとは、システムとユーザーの間の「対話」であり、ユーザーへの情報や行動の要求であることが多い。 ユーザーインタフェースのモード（＝mo
A/Bテストとユーザビリティテストの使い分け
A/Bテストは、用意した複数のデザインのどちらの成果指標がよりよいか、という結果を定量的に比較検討するための手法です。いくつかのデザインの選択肢があった場合に実際にユーザーに利用してもらうことで、どのデザインが最も数値目標達成率が高いかを把握するのには有効ですが、なぜその結果になったのか、という理由を把握することはできません。デザイナーの発想の域を越えることはできず、変更すべきデザイン要素が別のものだったとしても気づくことができません（例：真の問題は、色ではなく配置だった）。 一方、ユーザビリティテストは、ユーザーの利用状況を観察することで、目的達成を妨げる問題など、定性的な洞察を得るための定性的な手法です。まだ開発途中である場合や、リリースしたあとに、ターゲットとしたユーザーがどのように思考し行動するかを把握するのに有効ですが、定量的な指標による評価にはあまり向きません（それをしようとす
美的ユーザビリティ効果
ユーザーはインタフェースの見た目が魅力的だと思うと、ユーザビリティのささいな課題には寛容になる。こうした美的ユーザビリティ効果は、UIの問題をわかりにくくし、ユーザビリティテスト中の課題発見を妨げることがある。ユーザー調査中は、ユーザーの言うことに耳を傾けるだけではなく、彼らがやっていることもよく観察することによって、美的ユーザビリティ効果の事例かどうかを識別するとよい。 The Aesthetic-Usability Effect by Kate Meyer on January 29, 2017 日本語版2017年5月15日公開 ユーザビリティテストの進行役がよく感じる不満に次のようなものがある。最適とはいえないUIにユーザーが苦労し、多数のエラーや障害に直面していることがわかったため、その体験についてのコメントを彼女に求めたところ、サイトの配色が素敵、としか言ってくれなかった、という
デザイン思考は強いチームを築く
デザイン思考はイノベーションを促進するだけではなく、共通のボキャブラリー、生成物、信頼にもとづいたチーム文化を生み出すことで、チームを強くしてくれるのだ。 Design Thinking Builds Strong Teams by Sarah Gibbons on September 18, 2016 日本語版2016年12月19日公開 どんな企業も1人の能力だけで成功することは不可能だ。成功している職場のベースになっているのはチームなのである。しかし、チームでの作業にはかなり大きなコストがかかる。共通の知識や前提、ボキャブラリー、文化といった、メンバー同士の共通の土台を築くのに時間を費やさなければならないからである。強いチームというのは共通の土台がすでにできあがっているので、コラボレーションによってもたらされるメリットがコミュニケーションのオーバーヘッドを上回る。その結果、こうしたチー
注目を求めるデザインパターン： “頼むから行かないで”ポップアップと“戻ってきて”タブ
注目を集めようとする度合いが大きすぎるこの2つのWebサイトデザインパターンはエンゲージメントの促進を狙ったものだが、ユーザーのブラウザタブの利用方法とは相容れない。 Needy Design Patterns: Please-Don’t-Go Popups & Get-Back-to-Me Tabs by Kate Meyer and Kim Flaherty on May 15, 2016 日本語版2016年8月19日公開 UXデザインでの「ダークパターン（dark pattern）」とは、デザイナーがユーザーをだまそうとするときに使う方策をいい、ユーザーをだまして、自分たちの会社の目標のためにユーザー自身に害になりそうなことをやらせることである。たとえば、ユーザーのショッピングカートに自動的に余分なアイテムを追加するサイトは、ダークパターンを使って売上を増やそうとしている、といえる。
Webフォームのユーザビリティ： アドバイス・トップ10
確立されている（しかし、無視されることの多い）以下のガイドラインに従い、ユーザーがWebフォームをきちんと最後まで埋められるようにしよう。 Website Forms Usability: Top 10 Recommendations by Kathryn Whitenton on May 1, 2016 日本語版2016年7月19日公開 飛行機の旅行者の安全確保にアメリカ運輸保安庁（TSA）は貢献している。一方、彼らのせいで空港で時間がかかったり、人前で服を脱ぐことを強制されたりすることに大勢の人がイライラしているのも間違いない。そのため、TSAにはかなりの量の苦情が寄せられていると予想がつく。 なので、TSAの苦情受付フォームを初めて見たとき、そのデザインにあまりにもはっきりしたエラーがあるので、もしかしてわざとそうしたのではないかと疑ってしまった。入力フォームには一番下に、「Prev
商品一覧の構造分析
流し読みや商品の比較をしやすくするために、一覧ページの項目説明は、コンテンツの優先順位を損なわないビジュアルデザインとレイアウトにしなければならない。 The Anatomy of a List Entry by Kim Flaherty on April 10, 2016 日本語版2016年7月5日公開 少し前のことだが、週末旅行のためのホテルをオンラインで予約した。そのときに私がたどったプロセスは、ほんの一握りの数のWebサイトを通じて、選択肢となるホテルを探し、各々についてざっと理解して、絞り込むというものだった。しかし、どこに泊まりたいのかを最終的に決めるまでに、結局、何日もかかったので、疲れはててしまった。 Webでのホテル予約というのは、オンラインでのほかの大半の作業同様、選択肢を調べて、検討し、絞り込むということが欠かせない。大体の場合、ユーザーはまず検索条件のセットを指定す
フロントエンドスタイルガイド： 定義と要件、コンポーネントチェックリスト
フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日本語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義： フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ
ユーザーの意図が検索フィルターのデザインを変える – U-Site
検索結果ページを読み込むタイミングが早すぎたりページの表示位置を変更したりすると、絞り込みプロセスが分断される。検索フィルターやファセットは、ユーザーエクスペリエンスがスムーズになるようにデザインしよう。 User Intent Affects Filter Design by Katie Sherwin on February 7, 2016 日本語版2016年4月27日公開 検索フィルター（編注： 条件による絞り込み検索機能）は、おそらく、インターネットができて以来のWebの最高のイノベーションではないか。このコントロールのおかげで、旅行サイトやECサイトのような情報量の多いサイトで、干し草の山の中から針を見つけ出すかのような、見つけるのが困難な情報を即座に見つけることができるようになった。そして、検索結果を効率的に絞り込む機能によって、さまざまなブランドが評価を確立してきている。検索
音声対話のUX： すばらしき新世界…だが、変わらない部分もある
音声対話はグラフィカルユーザーインタフェースとはかなり異なるものだが、伝統的なユーザビリティ原則がそこでのユーザーエクスペリエンスの質に決定的な役割を果たすことに変わりはない。 Voice Interaction UX: Brave New World...Same Old Story by Kathryn Whitenton on January 31, 2016 日本語版2016年4月11日公開 音声コマンドを利用して、コンピュータをコントロールするときのエクスペリエンスが、新世代の音声対話システムの登場により、大きく変わってきている。AppleのSiriやGoogle Nowが利用できるようになって数年経ったことで、このテクノロジーは赤ん坊としての時代は終えたといえる。むしろ、今は、幼児期といっていいだろう。つまり、歩いたり、話したりしはじめたところだが、まだ何度も転ぶし、まったく意
守ってはいけない、iOSのデザインルール4つ
ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。 4 iOS Rules to Break by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade on July 9, 2015 日本語版2015年8月31日公開 巨大ソフトウェア会社（たとえば、AppleやMicrosoft、Google）はユーザーとデザイナー双方のためにデザインガイドラインを作成している。 おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての
モバイルデバイスにおけるアコーディオンUI
アコーディオンはモバイルのスペースを節約するが、方向感覚を失わせたり、大量スクロールの要因にもなる。しかし、簡単なデザイン修正で、このUI要素のユーザビリティは改善できる。 Accordions on Mobile by Raluca Budiu on May 31, 2015 日本語版2015年7月21日公開 アコーディオンというのは、展開することで、隠していた情報を表示するデザイン要素である。オーバーレイとは違い、アコーディオンはページのコンテンツを押し下げるので、ページコンテンツの上に重なることはない。 Toomy.com： Price（：価格）というフィルターはアコーディオンとして実装されており、展開するとページコンテンツは押し下げられる。 デスクトップでのアコーディオンの利用には議論の余地がある。一方、モバイルではアコーディオンは最も役立つデザイン要素の1つだ。ごく小さな画面スペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
