『Designing Interfaces - Patterns for Effective Interaction Design』の第3版が2020年2月にオライリー社から発売されました。第2版はUI設計の際に辞書的にとても参考にさせてもらっているし、そこから10年後の改訂版なのでとりあえず手に入れてみました。が、分厚い英語本をサクサク読める能力が自分にはないので、紹介されているUIパターンの変化だけでも押さえておきたく、目次ベースで変更がある場所を自分なりに洗い出してみました。10年前の版との比較をすることで、いまのUIのトレンドも少し見えてくるかもしれない。

第3版どころか第2版も完全に読み込んでいるわけではないので、間違ってるところがあったらごめんなさい、指摘してください。あと比較しているのはパターンのみで、前段となる理論編には触れていません。理論編あんまり読んでない。

前書き

第3版の前書きで「この版はWebやモバイルといったスクリーンベースのデザインに焦点を当てる」と書かれています。逆に、以下のトピックは第3版には含まないと明言されています。

・ボイスインターフェース
・ソーシャルメディア
・テレビストリーミング 
・AR / VR / MR
・チャットボットや対話デザイン
・NUI / ジェスチャーベースインターフェース

ほとんどのトピックがオライリー社からそのトピックについて論じている書籍が出ているので、そちらを参照するようにとのことです。

Chapter 1. ユーザの行動

追加されたパターン
・Social Media, Social Proof, and Collaboration

削除されたパターン
・他者のアドバイス Other People's Advice
・個人的レコメンデーション Personal Recommendations

維持されたパターン
・安全な探検 Safe Exploration
・即座の喜び Instant Gratification
・最小限での充足 Satisficing
・Changes in Midstream
・回答の先送り Deferred Choices
・少しずつの組み立て Incremental Construction
・習慣化 Habituation
・小刻みな休止 Microbreaks
・空間的な記憶 Spatial Memory
・展望的な記憶 Prospective Memory
・繰り返しの効率化 Streamlined Repetition
・キーボードのみ Keyboard Only

ほとんどのパターンが第2版から引き続き掲載されているようです。「Social Media, Social Proof, and Collaboration」が増え、代わりに「他者のアドバイス」「個人的レコメンデーション」が削除されています。といってもほぼ置き換えに近いように思います。social proof とは「自分たちが知っている人がそれをおすすめしていたり、それを使っていたりするのを見るかどうかで選択に影響が与えられる」こととされています。UIとしては「ユーザーレビュー / コメント」のほか、「ユーザーが生成できるあらゆるデータを共有したり評価したりスレッドをつけられたりできるようにする」といったことが提示されています。

Chapter 2. コンテンツを整理する：情報アーキテクチャとアプリケーション構造

追加されたパターン
・モバイルによる情報への直接アクセス Mobile Direct Access
・タグ Tags

削除されたパターン
特になし

微妙に変更されたパターン
・ニュースストリーム News Stream → Streams and Feeds
・画像管理ツール Picture Manager → Media Browser
・マルチレベルのヘルプ Multi-Level Help → Help Systems

維持されたパターン
・ダッシュボード Dashboard
・カンバスとパレット Canvas Plus Pallete
・ウィザード Wizard
・設定エディター Setting Editor
・代替表示 Alternative Views
・多数のワークスペース Many Workspaces

削除されたパターンはありませんが、「Mobile Direct Access」「Tags」の2つが追加されています。
Tags は「ラベルをつけることで情報をカテゴライズする方法」とされています。note にもありますし、以前からよく見るUIであるように思いますが、第2版が刊行された10年前はあまりメジャーじゃなかったのでしょうか。Mobile Direct Access はパターンと言うよりもアプリケーションUI設計の原則みたいなもので、「アプリを開いて最初の画面で入力や設定などをさせず、ユーザーにとって有益な情報を提示すること」とされています。昨今のモバイルアプリの onboarding トレンドかもしれません。

Streams and Feeds はそこまで中身が変わっていないように見えます。第2版のときからNewsばかりではなく Facebook のフィードなども含まれていたので、内容に沿った見出しをつけ直した、というように見えます。
Media Browser もさほど中身が変わっているわけではなく、「画像だけではない」ことを示すように見出しをつけ直したように見えます。
Help System も似たような感じです。第2版でもインラインヘルプやツールチップからオンラインコミュニティまでを含めたマルチレベルのヘルプという概念でしたが、それがよりわかりやすくなるような見出しにしたということでしょうか。

Chapter 3. 動き回る：ナビゲーション、標識、経路探索

追加されたパターン
特になし

削除されたパターン
特になし

微妙に変更されたパターン
・ディープリンクできるステート Deep-linked State → Deep Links
・シーケンス表示 Sequence Map → Progress Indicator

維持されたパターン
・明快な入り口 Clear Entry Points
・メニューページ Menu Page
・ピラミッド Pyramid
・モーダルなパネル Modal Panel
・避難口 Escape Hatch
・分厚いメニュー Fat Menus
・サイトマップフッター Sitemap Footer
・ログインツール Sign-in Tools
・パンくず Breadcrumbs
・注釈付きスクロールバー Annotated Scroll Bar
・アニメーションによる転換 Animated Transition

内容はほとんど変わっていません。ナビゲーション / 情報探索についてのUIトレンドはこの10年でほとんど変わっていないということでしょうか。そうなるとパターンを知るのも大事ですが、それは我々の普段の行動で染み付いている可能性もあるので、もっと根幹の理論をきちんと学んだほうがよさそうと感じました。

微妙な変更のある2パターンも、内容にさほど変化はなく、見出しのつけかえと、事例を最新のものに変えただけのように見えます。

Chapter 4. ページを構成する

追加されたパターン
特になし

削除されたパターン
・右揃えと左揃え Right/Left Alignment
・対角線バランス Diagonal Balance
・反応的な追加表示 Responsive Disclosure
・反応的なイネーブル化 Responsive Enabling
・リキッドレイアウト Liquid Layout

維持されたパターン
・視覚的なフレームワーク Visual Framework
・中央ステージ Center Stage
・等分グリッド Grid of Equals
・タイトルつきセクション Titled Sections
・タブ形式モジュール Module Tabs
・アコーディオン Accordion
・開閉可能パネル Collapsible Panels
・移動可能パネル Movable Panels

追加されたパターンはありませんが、いくつかのパターンが削除されています。削除されたのは「テキストやコントロールなど、ページ内で比較的小さく静的な要素の空間的な関係を扱っ」たもの（右揃えと左揃え / 対角線バランス）と、「コンテンツのレイアウトの動的な側面を扱」ったもの（反応的な追加表示 / 反応的なイネーブル化 / リキッドレイアウト）とのことです。これらが2020年において有効でないかと言われるとそうでない気がするので、トレンドの変化というよりも単に編集の都合な気がしています。特に「反応的な追加表示」「反応的なイネーブル化」についてはフォームの章にあったほうが自然な気がしなくもない。

Chapter 5. よい見た目にする：視覚的なスタイルと美学

章構成が大きく変化しました。第2版では「深みのある背景」「少色相・多明度」「コーナー処理」といったデザイントレンドがパターンとして提示されていましたが、第3版ではパターンがまるっとなくなり、「色」「タイポグラフィ」「アイコン」といったトピックの概論が掲載されているようです。パターン集というより教科書に近い。美学的な部分は具体的な例を伝えるよりも原理原則を伝えるほうが世の流れと判断されたのでしょうか。

とはいえ「Ranges of Visual Styles」としていくつかのスタイルトレンドが提示されています。
・Skeuomorphic: iOS の「ウォレット」アプリや「計算機」アプリなど
・Illustrated: Eventbrite など
・Flat Design: Material Design や Fluent Design など
・Minimalistic: Todoアプリ の「Clear」や iOS の「ヘルスケア」アプリなど
・Adaptive / Parametric: iOSの「メジャー」アプリなど

Chapter 6. モバイルへの対応

追加されたパターン
・Collections and Cards

削除されたパターン
・サムネイルとテキストのリスト Thumbnail-and-Text List
・テキスト消去ボタン Text Clear Button
・スリム化したブランディング Streamlined Branding

微妙に変更されたパターン
特になし

維持されたパターン
・縦方向のスタック Vertical Stacks
・映写スライド Filmstrip
・タッチ表示ツール Touch Tools
・下部ナビゲーション Bottom Navigation
・無限リスト Infinite List
・ゆとりのあるボーダー Generous Borders
・読込中のインジケーター Loading Indicators
・豊富なアプリ連携 Richly Connected Apps

まず、第2版ではモバイルについての章はかなり後半の方にあったのですが、第3版では中盤に移動しました。重要性が増しているのかもしれません。

追加されたのは「Collection and Cards」です。おそらく「サムネイルとテキストのリスト」の現代版だと思われます。サムネイルとテキストのリストは基本的に全体をタップするしかありませんでしたが、Cards は Material Design の同名コンポーネントにもあるように、そのなかにボタン等の機能を盛り込むことができます。2010年当時よりもモバイルデバイスの画面解像度が上がり、そういった要素を盛り込む余地が生まれてきたのかなと思います。

その他、「テキスト消去ボタン」と「スリム化したブランディング」の2つが削除されました。前者はあまりモバイルと関係ないといえばないので消えたのかな？後者は「PC版に比べてモバイル版はロゴ等のブランディング要素を小さく表示する」というもので、モバイルファースト（という言葉も古いけど）の時代にはそぐわない考え方かもしれません。

Chapter 7. リストで表現する

追加されたパターン
・Cards

削除されたパターン
・行のストライプ配色 Row Striping
・カスケーディングリスト Cascading Lists
・ツリー表示テーブル Tree Table

微妙に変更されたパターン
・2パネルのセレクタ Two-Panel Selector → Two-Panel Selector or Split View
・アルファベット式スクローラー Alphabet Scroller → Alpha/Numeric Scroller

維持されたパターン
・1ウィンドウでのドリルダウン One-Window Drilldown
・リストのインレイ List Inlay
・サムネイルのグリッド Thumbnail Grid
・カルーセル Carousel
・ページネーション Pagination
・項目へのジャンプ Jump to Item
・新規項目の入力行 New-Item Row

他と比べると変更が大きい章かもしれません。増えたのは「Cards」で、既存の「サムネイルのグリッド」パターンと似ていますが、こちらは「モバイルや Web で flexible に利用される」ということが強調されています。また、「サムネイルのグリッド」パターンはすべてのサムネイルが同じ大きさであることが求められますが、Cards はたとえば Pinterest に見られるように、必ずしも同じアスペクト比であることを強要しません。

削除されたのは「行のストライプ配色」「カスケーディングリスト」「ツリー表示テーブル」です。「行のストライプ配色」はリストテーブルの行の背景色を1行おきに変えるというものですが、たしかに最近あまり見ない気がします（Mac の Finder はいまも採用している）。余白がとれないときの情報分割の手段として提示されていたものですが、最近はモバイルで表示すると1行の厚さが大きくなったりするので避けられたりするのでしょうか。「カスケーディングリスト」は階層構造にあるリストを並列して表示するものですが、なんでこれ削除されたんだろう。「ツリー表示テーブル」も今なお有用なパターンな気はするんですが、なぜか削除されてしまった。

個人的には「カルーセル」とか削除しちゃっていい気がするんだけどなあ。ただの社内調整用ツールでしかない印象。

Chapter 8. 事を行う：アクションとコマンド

追加されたパターン
特になし

削除されたパターン
特になし

微妙に変更されたパターン
・マウスオーバー表示ツール Hover Tools → Hover or Pop-Up Tools
・目立つ「完了」ボタン Prominent "Done" Button → Prominent "Done" Button or Assumed Next Step
・プログレス表示 Progress Indicator → Spinners and Loading Indicator

維持されたパターン
・ボタンのグループ Button Groups
・アクションパネル Action Panel
・動的なメニュー項目 Smart Menu Items
・プレビュー Preview
・キャンセル機能 Cancelability
・マルチレベルのアンドゥ Multi-level Undo
・操作の履歴 Command History
・マクロ Macros

追加・削除された項目はありません。

「Hover Tools」が「Hover or Pop-Up Tools」に変更されていますが、これはモバイル対応の意図のようです。モバイルには Hover がないので。

「Prominent "Done" Button or Assumed Next Step」は単に「Done」じゃない場合もあるよね、というくらいに見えます。

「Progress Indicator」に Spinners が追加されています。スピナーは「システムが正常に動いていることを示すアニメーションだが、完了率のような状態の変化はない」と書かれており、完了率を示さない進行表示として提示されています。うまく使い分けましょうということのようです。

Chapter 9. 複合的なデータを表示する：ツリー、チャート、その他のインフォメーショングラフィックス

追加されたパターン
・The Power of Data Visualization

削除されたパターン
・部分的なズーム表示 Local Zooming
・放射状テーブル Radial Table
・ソート可能なテーブル Sortable Table

微妙に変更されたパターン
特になし

維持されたパターン
・データティップ Datatips
・データのスポットライト Data Spotlight
・動的なクエリ Dynamic Queries
・データのブラッシング Data Brusing
・複数Y軸のグラフ Multi-Y Graph
・小さな複合データ群 Small Multiples

いくつかのパターンが削除されています。

「部分的なズーム表示」は数多く並ぶデータの中から、マウスの動きに従って一部分だけ拡大し、その部分のデータ量を増やすというものです。たとえば MacOSX の Dock もそれに近いことをしているようですが、たしかに最近あんまり見ない。

「放射状テーブル」はデータビジュアライゼーションの文脈ならともかく、たとえばWebサイトとかではほとんど見ないですね。モバイルならなおさら。

「ソート可能なテーブル」はあまりに一般的なUIパターンとなっている気がしますが、なんで削除されてるんだろう。モバイルにそぐわない、ということもないきがしますが…

追加されている「The Power of Data Visualization」はパターンと言うよりも概論みたいな話でした。

Chapter 10. ユーザの入力を受け取る：フォームとコントロール

追加されたパターン
特になし

削除されたパターン
特になし

微妙に変更されたパターン
・よいデフォルト値 Good Defaults → Good Defaults and Smart Prefills
・同一ページでのエラーメッセージ Same-Page Error Messages → Error Messages

維持されたパターン
・寛容な入力形式 Forgiving Format
・構造化された入力形式 Structured Format
・穴埋め Fill-in-the-Blank
・入力ヒント Input Hints
・入力プロンプト Input Prompt
・パスワード強度メーター Password Strength Meter
・オートコンプリート Autocompletion
・ドロップダウン形式の選択ツール Dropdown Chooser
・リストビルダー List Builder

この章はパターンに対する変更はあまりないのですが、第2版に存在した「コントロールの選択」という節がごっそり削除されています。チェックボックスやラジオボタン、ドロップダウンリストなどコントロールUIの種類が大量に例示された節で、個人的にはこれの2020年版が見たかったというのが第3版に大きく期待していたところなんですが、まるっとなくなっていて残念です。まあ2010年当時と違い、 Material Design とか Lightning Design System とかで一覧は洗い出されがちだから選択肢自体が減ったしまったのかもしれません。

微妙に変更された「よいデフォルト値」「同一ページでのエラーメッセージ」は第2版では「フォーム全体に渡ってデザインすることになるもの」とされていたものです。

「良いデフォルト値」は「Good Defaults and Smart Prefills」となっており、「Smart Prefills」が追加されています。とはいえ内容はほとんど変わっておらず、「Smart」さを出すためにどのようなデータ（ユーザーの過去の入力 / 現在地 / 現在時刻など）を使って Prefill を行うか、という概要が追加されているのみです。

「同一ページでのエラーメッセージ」は単に「Error Messages」となっており、「同一ページでの」が消えています。しかし内容的には第2版と同様、「モーダルダイアログや別ページでエラーメッセージを表示するのはやめろ」とされており、その部分がタイトルから消えた意図はよくわかりませんでした。事例として挙げられている Twitter の登録フォームはモーダルダイアログ上で複数ステップに分けられており、それを考慮して「ページ」という言葉を省いたのかもしれませんが、パターンの内容としては同様です。

Chapter 11. ユーザーインターフェースシステムとアトミックデザイン

章自体が新規追加されており、下記の事柄が書かれています。

・コンポーネントベースのユーザーインターフェースシステムの概要
・アトミックデザインの思想
・Webやモバイルに特化したUIフレームワークの事例

UIパターンとコンポーネント指向の相性がいいので取り上げたという感じなのかな？

UIフレームワーク事例は「Bootstrap」「Foundation」「Semantic UI」「Materialize」「Blueprint」「UIKit」が紹介されています。

Chapter 12. スクリーンを超えて

章自体が新規追加されたものですが、3ページ程度の短い章です。「コネクテッドデバイス」「予測システム」などのスマートシステムが主流になったとしても、この第3版で示しているようなインターフェースデザインの原則は有効であるといったことを書いて締めている「あとがき」みたいな章です。

（章削除）ソーシャルメディアの利用

第2版には存在していた章ですが、第3版では章自体が削除されています。

まとめ

第2版から10年たってUIパターンのありようがどれだけ変わったのかと思いましたが、思ったより変わってませんでした（ちゃんと読んでないので実はめっちゃ変わってるのかもしれませんが）。

やはりパターン集は参考程度にして、原則をもとにして思考して設計していくしかないのかもしれないですね。理論編はいつか日本語版が出たら読むかなあ。