読書メモ: ABOUT FACE インタラクションデザインの本質

• URL: ABOUT FACE　インタラクションデザインの本質
• 著者: 上野 学 (@manabuueno)
• 公開日: 2024-08-19

いつ読むか？

• インタラクションデザインの一般教養やベストプラクティスを総体的に身につけたいとき

読書メモ

レスポンス速度に対するユーザーの認知

p. 242

• 0.1 秒まで
  • レスポンスが一瞬だと感じる
• 1 秒くらいまで
  • レスポンスが早いと感じる
• 10 秒くらいまで
  • レスポンスが遅いと感じる
  • ユーザーは集中力が切れそうになるが、かろうじてアプリケーションにある程度の注意をとどめておける
  • 対策
    • インジケーターを表示する
• 10 秒くらい以上
  • ユーザーの集中力は完全に切れる
    • コーヒーを淹れに行く
    • 他の作業を始める
  • 対策
    • オフライン
    • バックグラウンド
    • キャンセルできるようにする

日付の並び順の指定

p. 265

ユーザーのメンタルモデルに対応させる。

例. 日付の並び替え

• NG
  • 昇順、降順
• OK
  • 新しい順、古い順

データはツリーではなくモノクライングループで表現する

p. 265-266

格納方法

• 1列に並べる
• 階層が1つの複数の列

メタモデル

• キャビネット
• 本棚

階層が深いデータを扱わないといけない場合

次のような機能を提供する。

• 検索ツール
• アクセスツール

流し目テスト (squint test)

p. 367

やり方:

片目を閉じ、もう片方の目で画面を薄目で見る。

確認:

• 際立って見える要素はどれ？
• ぼやけて見える要素は？
• グループ化されているように見えるのはどこ？

最小限のビジュアル要素と機能要素にする方法

p. 376

要素を1つずつ削除していき、デザインに悪影響が出たら、最後に削除した要素を元に戻せ。

Antonie de Saint-Exupery の言葉:

「完成は付加すべき何ものもなくなったときではなく、除去すべき何ものもなくなったときに達せられるように思われる。」

用語: ファットナビゲーション

p. 519

ファットナビゲーション

「ファットナビゲーション（ファットフッター）」は、ウェブサイトの最下部に配置される、情報量が多く視認性に優れた大型のメニューのこと。

通常のフッターとは異なり、主要なページへのリンクが網羅されていたり、製品やサービスの詳細、企業情報、SNSへのリンクなどが詳しくまとめられている。

ユーザーがサイト全体を把握し、目的のページにたどり着くための「地図」のような役割を果たす。

無限スクロール

p. 519

• 無限スクロールがあるとページフッターは排他的なナビゲーション
• アクセシビリティの問題がある (書籍発行の時点？)
• ブラウザーの戻る、次へ、で位置を保持するのが困難

新しい情報の閲覧を主目的としている。 リスト下方の情報の妥当性が急速に失われていくコンテキストでは有効 (ニュースフィードなど)。

用語: イヤーマーキング (チェックボックスリスト)

p. 535

イヤーマーキング

「イヤーマーキング（earmarking）」は、UIデザインにおいて、複数の選択肢の中から特定の項目を「選択済み」としてマークする行為、あるいはその状態を視認可能にするチェックボックスなどの要素そのものを指す。

主にチェックボックスリストなどで使用され、ユーザーがどの項目を選んだのかをひと目で判別できるようにするための機能である。

• どの項目が選択され、どの項目が選択されていないかを明確に確認できる
• 項目が相互排他ではないことがはっきりと認識できる

モードレスダイアログとサイドバー

p. 559

モードレスダイアログでは、終了コマンドボタンを使用するな。

モードレスダイアログには様々な機能を呼び出すためのボタンが存在するが、これらのボタンがクリックされたときに、ダイアログを閉じるべきではない。 反復的な操舵のために表示が維持されるからこそモードレス。 ダイアログが閉じるのは、ウィンドウの「閉じる」コントロールがクリックされたときだけにするべき。

モーダルダイアログでは、タイトルバーに「閉じる」コントロールを使用しない方がよい。

「閉じる」コントロールによって実行される機能がユーザーにとって不明確である。 キャンセルされるのか、確定されるのかなど。

p. 560

画面の解像度が上がっていく中で、ドキュメント作成時に頻繁に使用される一連のコントロールを、わざわざツールバーやサイドバーペイン以外の場所に配置する理由はなくなりつつあるのだ。

• ユーザーは作業中のジョブを中断した別のフローティングウィンドウに移動する必要がない
• ユーザーは一連のコントロールを管理したりしなくて済むようになる

確認ダイアログをなくす

p. 580

確認ダイアログを適切に機能させるには、ユーザーがほぼ間違いなく [いいいえ] または [キャンセル] ボタンをクリックするであろう場合にのみ、確認ダイアログを表示するようにしなければならない。ユーザーが [はい] または [OK] ボタンをクリックする可能性が高い場合には、絶対に表示するべきではない。

確認ダイアログがいつも同じ場面で表示され続けると、ユーザーは慣れてしまい、ほとんど見もせずに閉じるようになる。

確認ダイアログをなくすには、

• 尋ねることなく実行する
• アクションの結果を簡単にもとに戻せるようにする
• モードレスなフィードバックを提供する

デザインや認知心理学などの分野で使われるキーワード

• イディオム
  • 慣用句
  • 意味を論理的に考えなくても、一度覚えたら直感的に使える「操作の決まりごと」。
• アフォーダンス
  • 物自体の形や性質が、どのような操作が可能かをユーザーに「示唆すること」。
• プライアンシ
  • 操作に対して、コンピュータが反応を返していることを示す「手応え」。
• ポスチュア
  • そのソフトウェアがユーザーのデスクトップ上で占める「立ち位置や振る舞い」。