マイクロインタラクション ―UI/UXデザインの神が宿る細部

感想・レビュー・書評

• 

  reon777さんの感想

  フォロー

  2021年8月1日

  サンプル画像がたくさんあって分かりやすかった

  2

  詳細をみる
  コメント0件をすべて表示
• 

  hatsuさんの感想

  フォロー

  2020年6月27日

  人がお勧めしているのをみて購入したが、良本だった。
  以下、この本で学んだことをメモ。
  
  ## マイクロインタラクションとは
  
  - マイクロインタラクションとは、ある作業をひとつだけこなす最小単位のインタラクション（やりとり）
  - 同じようなアプリが(例えばアラームとか)がたくさん存在する現代、このマイクロインタラクションが非常に大切になる。
  - マイクロインタラクションを構成する4つの要素
  1. トリガー：マイクロインタラクションを開始させるもの
  2. ルール：マイクロインタラクションの動作を定義するもの
  3. フィードバック：そのルールをユーザーに明示するためのもの
  4. ループとモード：；マイクロインタラクションのルールを制御するためのルール
  
  ## トリガー
  
  - マイクロインタラクションを開始させるもの
  - 手動トリガーとシステムトリガーの2つがある
  
  手動トリガーは、 `ユーザーが自ら起動する`トリガー
  
  ### 手動トリガーの7原則
  
  1. ターゲットとtなるユーザーがコンテキスト(周囲の状況、文脈)からトリガーであると認識できるものをトリガーとする
  2. トリガーにより、常に同じことが始まるようにする
  3. データを前面に出す
  4. 視覚的なシグにファイアを「破壊」しないこと
  - ボタンのような外見であれば、ボタンのように動作しなければならない
  5. マイクロインタラクションの使用頻度が高いほど、見つけやすいものでなければならない
  6. 偽のシグニファイアが生成されないようにする（ボタンのような外見であれば、ボタンのように動作しなければならない）
  7. トリガー自体では表せない情報を提供するときに限ってラベルを付加する
  - 文字を使いするのではなく、ラベルの内容を視覚的に表せないかを考えてみる
  
  ### システムトリガー
  
  - システムがマイクロインタラクションを開始するもの
  - エラーや、位置情報、データの到着、内部データ、他人のリアクションなど
  - 所定の条件が満たされた時にシステムによって発動される
  
  ## ルール
  
  - ルールを使って、マイクロインタラクションの機能を専門家でなくともわかるように説明するモデルを作る。ルールによってどのような順番で何ができて、何ができないかが決まる
  - ルールには制約が反映されなければならない。ビジネス上の制約、コンテキストからくる制約、技術的な制約をうまく処理しなければならない
  - ゼロから始めないこと。ユーザー、プラットフォーム、環境についてすでに知っていることを利用してマイクロインタラクションを改善する
  - 複雑さを取り除く。ユーザーによる制御は最小限にする
  - 選択肢を減らして賢いデフォルトを用意する。選択肢が増えれば、それだけルールも増えてしまう
  - 操作結果の認識が単純な方を用いる。少ない操作で多くの結果が得られるようにする
  - ルールを利用してエラーを防止する。ヒューマンエラーが起こり得ないようにする
  - 言葉は簡潔にする。ラベルで十分な場合は、説明的な文章を用いない
  - マイクロインタラクションの価値を向上するアルゴリズムを実現するように心がける
  
  ## フィードバック
  
  - マイクロインタラクションにおけるフィードバックの真の目的は、マイクロインタラクションのルールをユーザに理解してもらうことです。マイクロインタラクションが起動されたら、何が行われたかその結果として何が起きたか2点を知らせる必要があります。
  - フィードバックを提供しなければいけない場面
  1. 手動トリガーの直後、あるいはルールを手動で調整している最中やその後
  2. システムトリガーによって、マイクロインタラクションの状態に著し変化がもたらされた場合
  3. ユーザーがもう少しでルールを破りそうな場合、あるいは破ってしまった場合は例外なく常に
  4. システムがコマンド(機能)を実行できない場合
  5. 重要な処理なら必ずその進捗状況を表示する(時間がかかる場合は特に)
  
  ### フィードバックの5原則
  
  1. フィードバックでユーザーに負担をかけない
  - フィードバックを出す基準は「必要性」
  2. フィードバックは的外れなものであってはならない
  - フィードバックが存在する李竜は、いかなる時もユーザーの手助けとなるメッセージを伝えること。
  3. 最小のフィードバックで最大限のメッセージを伝えること
  4. 見落とされがちなものを使ってメッセージを伝える
  5. 人間的なフィードバックにする。表面的な人間らしさはマイクロインタラクションに構成を持たせる役に立つ
  - 文章は全て単刀直入かつ人間的にするべきですが、「あなた」等の人称代名詞は避けた方が無難です
  
  ## ルールとモード
  
  ### モード
  
  - モードとは、アプリなどが通常とは異なった動作をする特別な機能状態のこと
  - ルールが二股以上になったもので、マイクロインタラクションの場合には、モードを設けるのは極力避けるべき
  - モードを設ける一番の理由は、頻繁には使わない操作があって、モードを分けなければそのマイクロインタラクションの主目的の操作が煩雑になってしまうこと
  - モードを設けなければならない場合、そのモード専用の画面を用意することです。新しいモードに入るときに、これから普段とは違った作業をするのだと言うことをユーザに示す合図になります。
  - 新しいモードで行ってまた元のモードに戻ってくる時、新しいモードで変更した事は全て反映されているものの、それ以外はそこを離れたときの状態であることが求められます。
  
  ### ループ
  
  - 繰り返し実行される、一つあるいは一連のコマンドのこと

  

  0

  詳細をみる
  コメント0件をすべて表示
• 

  kappappa14さんの感想

  フォロー

  2020年3月19日

  マイクロインタラクション
  
  ### サマリ
  
  #### 動機
  自作アプリを考える上で、UXの基本を知りたく。
  
  #### 全体の感想
  
  - 因数分解が丁寧、事例も豊富だから、自社の課題を設定しやすい。何回も読み返したい本。
  - 基本的に認知負荷を下げるためのもので独創性を発揮するものではない。使うものほど使いやすい位置に、一般的な認知にあった形・動きに、言葉は次の指示を明確に。
  - フィードバック・ロングループを使って、サービスの持つ人間性を表現することができる
  
  ### 覚えたこと
  
  #### まえがき
  
  マイクロインタラクションとは
  ある作業をひとつだけこなす最小単位のインタラクション（やりとり）
  
  #### マイクロインタラクションのデザイン
  
  新しいハードウェアが普及することでインタラクションのデファクトスタンダードも変わる（タッチスクリーンが登場したことでマウスのスクロールが逆になった）
  
  電気が登場したことで、行った動作そのものとはかけ離れた結果を生み出す可能性が生じた
  
  トリガー
  マイクロインタラクションを開始させる動作。ユーザーがそれをいつどの程度使いたいと思うかによって決まる
  
  ルール
  トリガーによって起こされる動作。
  
  フォードバック
  ルールによっておきた動作を五感でFBする動作。
  
  ループとモード
  長期的に見てどうするのかを定義する。スイッチを入れ（トリガー）、ライトがついた（ルール/フィードバック）後に、一定時間で消すのか、次に押すまでつけっぱなのか、など
  
  マイクロインタラクションはそれ自体が製品の大きな特徴であるかのようなSignature Moments（記憶に残る瞬間）を作り出す
  
  #### トリガー
  
  トリガーの要素 = コントロール　＊　コントロールの状態　＊　ラベル
  トリガーの種類 手動トリガー、システムトリガー
  
  ユーザーが文脈からトリガーであると認識できるものをトリガーにする
  
  トリガーにより常に同じことが始まるようにする
  
  鍵となるデータを前面に出しておく
  
  視覚的なシグニファイアを破壊しない（ボタンはボタンとして機能させる）
  
  使用頻度が高いものほど見つけやすいものであるべき
  
  トリガー自体では表せない情報を提供するときに限ってラベルを付与する
  
  シグニファイア
  人間にとって知覚可能なデザイン上の手がかり
  
  #### ルール
  
  目的となる最終的な状態を定義する
  
  具体的な一つ一つのルールは一つの文章（オブジェクトをどう操作するか）にしてみるとはっきりする
  
  ルールのステップとともに、オブジェクトの状態も変化するのが一般的。ルールごとの変化を決めていく必要がある
  
  処理時のユーザーの状態が把握できると、作るべきルールがより広がる（使われているプラットフォーム・デバイス、時刻、過去の行動、ログインしているか、、）
  
  人間とコンピュータの処理の得意領域に合わせて分ける。コンピュータは素早い計算や記憶、複数の作業が得意（カレンダーに残り日数を補足情報として表示する、とか）
  
  ベストな状態は、選択肢がなく次々と決定が進む状態。Googleの検索画面はそれ以外にもやは単純化しようがないので間違えようがない
  
  ラベルはできる限り簡潔に。説明しなくてもわかるものは余計な説明を加えない
  
  #### フィードバック
  
  フィードバックでユーザーに負担をかけない。必要があるときだけ対応する
  
  フィードバックは機械→人間への反応のため、個性を発揮するのに使うことができる。エラー表示などの際に表現を柔らかにすることで、愛着を与えることができる
  
  人間は何かに集中している時に視野が狭くなる。例えば送信エラーの表示は送信ボタンの側に設置するようにする
  
  #### ループとモード
  
  モードはインタラクションが分岐している状態。Shiftを押している時だけキーが別の意味を持つなど。ユーザーがその操作をしていることを忘れることがないメリットがあるものの、複雑にするのには向かない

  

  0

  詳細をみる
  コメント0件をすべて表示
• 

  ikutani41さんの感想

  フォロー

  2016年4月16日

  UI/UXを考える際の手順、必要な概念を整理しながら例示を行ってくれる良本。
  事例より先に体系的に考えたい人には特におすすめ

  0

  詳細をみる
  コメント0件をすべて表示
• 

  shin-goさんの感想

  フォロー

  2015年9月19日

  マイクロインタラクション=最小単位のインタラクションの積み重ねが「愛される製品」と「許容範囲の製品」の違いを生むというのは納得。より良いマイクロインタラクションの組み立て方が、トリガー、ルール、フィードバック、ループ、モードに分割して説明される。最後の方にあったユーザーテストや定量的な分析でのマイクロインタラクションの評価方法も使えそう。

  0

  詳細をみる
  コメント0件をすべて表示
• 

  chieさんの感想

  フォロー

  2015年9月1日

  大事なのは、おもてなしの心。
  でも、この設計はいちばん後ろに持って行かれがち。

  0

  詳細をみる
  コメント0件をすべて表示
• 

  bob-taniさんの感想

  フォロー

  2015年1月13日

  細部に宿る神の話。
  アイデアは複数の問題を解決するをじでいく内容。
  コントロール可能な作る側のルールが特に注目と感じた。

  0

  詳細をみる
  コメント0件をすべて表示
• 

  iamaslibさんの感想

  フォロー

  2014年6月4日

  貸し出し状況等、詳細情報の確認は下記URLへ
  http://libsrv02.iamas.ac.jp/jhkweb_JPN/service/open_search_ex.asp?ISBN=9784873116594

  0

  詳細をみる
  コメント0件をすべて表示
• 

  zourockさんの感想

  フォロー

  2014年5月28日

  ソフトウェアアプリケーションから家電までどんなものにも含まれている、「ボリュームを調節する」「ボタンを押すと洗濯が始まる」といったような最小単位のインタラクション（マイクロインタラクション）を設計する際に考えるポイントが書かれています。
  読んでみると当たり前ではと思うこともありますが、これまでなんとなくいいと思っていたようなこともひとつの大枠として示してくれているので、GUIを考える上での基礎にいいと思いました。

  0

  詳細をみる
  コメント0件をすべて表示
• 

  disktnkさんの感想

  フォロー

  2014年5月16日

  製品を構成する機能単位に分解し、目的・役割を明確にしたマイクロインタラクションとして洗練していくデザイン指南本。UI/UXのTips集というよりは、マイクロインタラクションを創っていく手順や考え方が中心。simple is bestをどう実践していくか、のフレームワークの1つだと解釈した。
  6章の実例は、文章だけで理解するのは辛い。あと、アクセシビリティについて少しくらい言及して欲しかった。例えばラベルのないアイコンであっても、スクリーンリーダーに対応させる必要がある。

  0

  詳細をみる
  コメント0件をすべて表示