GUIを読み解く

37

ボタン、フォーム、ナビゲーションなどの画面要素を組み立て、人が迷わず操作できる導線と応答を設計する。GUIの原則、パターン、試作、実装へつながる判断を扱う。

  1. GUIを備えたパーソナルコンピュータが一般利用者へ広がり、インターフェースは技術の付属物ではなく、人と計算機の対話を設計する対象として前景化した。『インタフェースの科学』と『ユーザー・インタフェースの設計』は、協調・認知・対話原則からその基礎を組み立てる。

    出典 1. Computer History Museum
      1. 『インタフェースの科学』の書影インタフェースの科学古川康一、溝口文雄
  2. Webブラウザが登場し、インターフェースの対象は単体のデスクトップからネットワーク上の情報空間へ広がった。GUIの表現、認知工学、ユーザビリティ評価を扱う本を通して、操作を設計し検証するための異なる視点が見えてくる。

    出典 1. CERN WorldWideWeb2. W3C WAI
      1. 『コンピュータ画面作成ハンドブック』の書影コンピュータ画面作成ハンドブックW.O.Galitz
      1. 『見せるユーザー・インタフェース・デザイン』の書影見せるユーザー・インタフェース・デザインアーロン・マーカス
      2. 『ユーザインタフェイスの実践的評価法』の書影ユーザインタフェイスの実践的評価法S.ラブデン、G.ジョンソン
      1. 『ノンバーバルインタフェース』の書影ノンバーバルインタフェース黒川隆雄
      1. 『ユーザーインタフェースの設計 第2版』の書影ユーザーインタフェースの設計 第2版ベン・シュナイダーマン
      2. 『GUIデザイン・ガイドブック』の書影GUIデザイン・ガイドブック菊池安行、山岡俊樹
      1. 『ユーザーオリエンテッドなサイト構築のための実践Webデザイン』の書影ユーザーオリエンテッドなサイト構築のための実践WebデザインDarrell Sano
  3. アクセシビリティが国際的な設計基準へ整理され、2007年にはマルチタッチUIが携帯端末の操作を大きく変えた。一方、この年代の本はデスクトップの一貫性、認知、構造化、評価を中心に、GUIを再現可能な設計手順へ落とし込んでいる。

    出典 1. W3C WCAG 2.02. Apple iPhone
      1. 『構造化インタフェースの設計と評価』の書影構造化インタフェースの設計と評価山岡俊樹、藤原義久、鈴木一重
      1. 『Design rule index』の書影Design rule indexWilliam Lidwell、Kritina Holden、Jill Butler
      1. 『ディフェンシブ・ウェブデザインの技術』の書影ディフェンシブ・ウェブデザインの技術37signals
      2. 『使いやすいソフトウェア』の書影使いやすいソフトウェアLarry L. Constantine、Lucy A.D. Lockwood
      1. 『デザイニング・インターフェース』の書影デザイニング・インターフェースJenifer Tidwell
      1. 『魅力的なインタフェースをデザインする』の書影魅力的なインタフェースをデザインする井上勝雄
      1. 『デザイニング・ウェブインターフェース』の書影デザイニング・ウェブインターフェースBill Scott、Theresa Neil
  4. 画面サイズに応じて構成を変えるレスポンシブWebデザインが提唱され、UIは単一画面ではなく、多端末・状況・入力方法をまたぐ設計へ向かった。モバイルパターン、マイクロインタラクション、心理、検索、触覚、No UIまで、扱われる論点が一気に広がる。

    出典 1. A List Apart
      1. 『UIデザインの基礎知識』の書影UIデザインの基礎知識古賀直樹
      1. 『Mobile First』の書影Mobile FirstLuke Wroblewski
      2. 『デザイニング・インターフェース 第2版』の書影デザイニング・インターフェース 第2版Jenifer Tidwell
      1. 『モバイルデザインパターン』の書影モバイルデザインパターンTheresa Neil
      2. 『ゲームインターフェイスデザイン』の書影ゲームインターフェイスデザインKevin D. Saunders、Jeannie Novak
      1. 『スマートフォンのためのUIデザイン』の書影スマートフォンのためのUIデザイン池田拓司
      2. 『スマートフォンUIデザインパターン』の書影スマートフォンUIデザインパターン鈴木雅彦
      3. 『これからのUIの教科書』の書影これからのUIの教科書川俣晶
      4. 『UX・画面インターフェースデザイン入門』の書影UX・画面インターフェースデザイン入門山岡俊樹、前川正実、平田一郎、安井鯨太
      5. 『インタフェースデザインの教科書』の書影インタフェースデザインの教科書井上勝雄
      1. 『マイクロインタラクション』の書影マイクロインタラクションDan Saffer
      2. 『SF映画で学ぶインタフェースデザイン』の書影SF映画で学ぶインタフェースデザインNathan Shedroff、Christopher Noessel
      1. 『融けるデザイン』の書影融けるデザイン渡邊恵太
      2. 『モバイルデザインパターン 第2版』の書影モバイルデザインパターン 第2版Theresa Neil
      3. 『UIデザインの心理学』の書影UIデザインの心理学Jeff Johnson
      4. 『さよなら、インタフェース』の書影さよなら、インタフェースゴールデン・クリシュナ
      5. 『失敗から学ぶユーザインタフェース』の書影失敗から学ぶユーザインタフェース中村聡史
      6. 『UI GRAPHICS』の書影UI GRAPHICS水野勝仁、深津貴之、渡邊恵太、菅俊一、緒方壽人、iA、鹿野護、森田考陽
      1. 『触楽入門』の書影触楽入門テクタイル(仲谷正史、筧康明、三原総一郎、南澤孝太)
      1. 『UIデザインの教科書[新版]』の書影UIデザインの教科書[新版]原田秀司
  5. 対話型生成AIが一般公開され、UIは決められた操作を提示するだけでなく、変動する出力の能力・限界・根拠をどう伝えるかを担い始めた。UI設計の全工程とAIの入力・計算・出力を扱う二冊から、従来の原則と新しい課題を比較できる。

    出典 1. OpenAI ChatGPT2. NIST AI RMF
      1. 『はじめてのUIデザイン 改訂版』の書影はじめてのUIデザイン 改訂版池田拓司、宇野雄、上ノ郷谷太一、坪田朋、元山和之、吉竹遼
      1. 『AIインターフェースデザイン』の書影AIインターフェースデザインLouise Macfadyen