Udemyのオススメ講座はこちら 詳細を見てみる

「オブジェクト指向UIデザイン──使いやすいソフトウェアの原理」を読んだ #2

  • URLをコピーしました!

フルリモート&フルフレックスのSassスタートアップでプロダクトマネージャー(PdM)をしているゆーたろー(Twitter)です。

このブログで記事を書いたり、フォロワー1.5万人超えのグルメインスタをしたり色々しています。

1児のパパです。アラサーです。

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理の第2章「オブジェクト指向UIの設計プロセス」を読んだので学びや所感をまとめます。

  1. オブジェクト指向UIとは何か
  2. オブジェクト指向UIの設計プロセス(←この記事はこの章について)
  3. オブジェクト指向UI設計の実践
  4. ワークアウト:基礎編
  5. ワークアウト:応用編
  6. オブジェクト指向UIのフィロソフィー
目次

オブジェクト指向UIの設計メソッドはデザインサイクルを完成させる重要なノウハウ

UIデザインの方法論は

  • 前段:利用状況の把握〜ユーザー要求の特定(リサーチ)
  • 後段:デザイン試作〜デザイン評価(品質保証)

を反復することが有効とされているが、前段と後段をつなげるロジック=特定されたユーザー要求をUIでどう扱うべきなのかのセオリーがどこにも説明されていないと本書では書かれています。

めちゃくちゃ共感です。何ができるようにしたいのか、何を解決したいのかが明確でも「どんな画面にしようかな?」の答えを持つことができないのが現状です。

この溝を埋めるのがオブジェクト指向UI(以下、OOUI)の方法論です。

ユーザー、タスク、オブジェクトの関係

  • タスク指向UI:ユーザー→タスク(UI)→オブジェクト
  • OOUI:ユーザー→オブジェクト(UI)→タスク

タスク指向UIの場合、タスクを選ぶことが先です。

ユーザーの関心はオブジェクト(何を)にあるので、操作を開始してすぐにはそれが見えていないストレスを感じさせてしまいます。

OOUIの場合は、UIにオブジェクトを表示するので、操作中のストレスが少ないです。

また、オブジェクトに対するタスクがまとめられているため、画面もシンプルになります。

ユーザーがそのアプリケーションを使う理由・目的が「◯○するため」という動詞だったとしても、まずはオブジェクトを見せるのがOOUIの基本です。

OOUIのデザインレイヤー

以下の3つに分けられます。

  • モデル
  • インタラクション
  • プレゼンテーション

モデル(ユーザーの関心対象の模式)

  • モデルレイヤーはソフトウェアデザインの基盤で、デザイン全体の約60%を占めると言われている
  • オブジェクトモデリングは、OOUIにおける最も重要な活動
  • デザインプロセスで1番最初にすること
  • オブジェクトモデリングの結果は続く後続の活動(インタラクション、プレゼンテーション)の手がかりとなる
  • これがうまくできないと全体のデザインが間違った方向に向かう→ターゲットユーザーへの調査(ユーザーインタビューとか)や分析を十分に行う必要がある
  • モデリングの結果(うまくできているか/できていないか)は後続のインタラクション、プレゼンテーションを通して評価されるので、それぞれを反復する

最後のそれぞれのレイヤーを反復しながらより良くしていくという考え方がアジャイル開発の考え方と同じですね。(本書にも書かれています)

抽象→具体の一方通行ではなく、抽象と具体を行き来しながらよりよいデザインに仕上げていきます。(これはプロダクトマネジメントそのものと同じ)

インタラクション(構造と機能)

そもそもインタラクションってなんですの?状態だったので調べたらこういうことらしいです。

人間が何かアクション(操作や行動)をした時、そのアクションが一方通行にならず、相手側のシステムなり機器がそのアクションに対応したリアクションをする

https://ferret-plus.com/words/929

本書ではインタラクションレイヤーは操作の言語体系を作るもので、ソフトウェアの「フィール」を決定していると書かれているのですが、「フィール」についてはインタラクションデザインとはなにか?クックパッドのエンジニアが、北欧のデザインスクール「CIID」で学んだことで以下のように書かれています。

ユーザがボタンを押したり、ドアノブを押し上げるという行動を起こす。これがDOです。次に、指先や手に対してなんらかのフィードバックを感じるのがFEELです。最後に、ボタンを押したあと、電子機器に電源が入ったり、扉が開いたことを理解するのがKNOWのプロセスです。

https://logmi.jp/tech/articles/322112

インタラクションレイヤーで定義されたソフトウェアの構造と機能は、オブジェクトモデルを現実の仕事に繋げて、実際にそれが役立つ道具にします。

3つの中でインタラクションが1番わかりづらく説明されている印象ですが、本書内に具体的があるのでそれをそのまま引用するのが理解しやすそうです。

  • ナビゲーション
  • 入出力操作であるCRUD(作成、閲覧、更新、削除)
  • ビジネスロジック

プレゼンテーション(スタイルとレイアウト)

ここはイメージしやすく、ソフトウェアデザインの表層です。

  • グラフィックの形、色
  • ビューのフォーマット
  • 画面レイアウト
  • アニメーション
  • サウンド

インタラクションとプレゼンテーションの組み合わせがユーザーニーズを満たしていないと評価されるときは、モデルレイヤーに立ち返ってユーザーのメンタルモデル(個人の実世界に対する認識や解釈に関する認知モデル=その事象に対する理解や認識)をデザインしなおすべき。

ここでモデルのところで書いた

モデリングの結果(うまくできているか/できていないか)は後続のインタラクション、プレゼンテーションを通して評価されるので、それぞれを反復する

と繋がりますね。

ユーザー中心のデザインとは

あるユーザーに最適化された手順は他のユーザーにとっては不便であり、「ユーザーフレンドリー度合い」は下がります。ユーザーが増えれば増えるほど下がります。

ユーザー中心のデザインとは「ユーザーに合わせたデザイン」ではなく、「ユーザーが自ら合わせることができるデザイン」のことと解説されています。

具体例としてりんごの皮むき機と果物ナイフの話が取り上げています。

りんごの皮むき機はりんごの皮を剥くことに特化しているため、他にもやるべきタスクが増えたときには対応することができません。

果物ナイフの場合、りんごの皮を剥くことはもちろんできるし(りんごの皮むき機よりは難易度が上がるが)、肉や野菜を切ることもできます。

果物ナイフを持った人が「あ、これ果物だけじゃなくて野菜にも肉も、パンとか魚にも使えそうだ」を考え、利便性が上がっていきます。

果物ナイフのような抽象度が高い道具が使用者に特定の行為を強要しないという意味でモードレスです。反対にりんごの皮むき機のような抽象度が低い道具はモーダルです。(りんごの皮を剥くという行為を強要しているから。強要しているという言い方はアレですが、それしかできないからです)

モードレスな道具は人と道具の相互発展をポジティブな方向に促しますが、これがモードレスなオブジェクト指向のデザインを行うことの意義です。

OOUIの基本ステップ

  1. オブジェクトの抽出(モデルレイヤー)
  2. ビューとナビゲーションの検討(インタラクションレイヤー)
  3. レイアウトパターンの適用(プレゼンテーションレイヤー)

1. オブジェクトの抽出(モデルレイヤー)

OOUIにおけるオブジェクトの抽出は、オブジェクト指向分析におけるクラス定義、データベース設計におけるエンティティ定義と同じです。

オブジェクトを抽出するためにはドメインへの理解、ユーザーの理解が必要なので、ユーザーインタビューや既存システムの調査、市場分析などの前段の取り組みが必要です。

ある概念がオブジェクトと言えるかの判断基準

  • 数えられる名詞である
  • 同種の集合として管理するこちができる
  • 共通のアクションを持っている

2. ビューとナビゲーションの検討(インタラクションレイヤー)

ビューとは以下のように説明されています。

ウィンドウ、ページ、分割されたレイアウト内の一つのペイン、メニューとして表示されるひとつのリストなど、ユーザーが実際に画面上で目にするひとまとまりの情報表示領域

ここで考えるべきことは

  • 一覧表示すべきオブジェクトは何か
  • 1件表示(詳細画面)が必要なオブジェクトは何か

であり、どのような画面(細かいデザインは抜き)が必要かを検討します。

3. レイアウトパターンの適用(プレゼンテーションレイヤー)

ここでも細かいデザインは抜きですが、「2. ビューとナビゲーションの検討(インタラクションレイヤー)」で決めた画面をどのようなレイアウトで画面に表示するかを検討します。

PCのレイアウトとスマホのレイアウトは変える必要はありますが、画面のUIを同じして1つの画面にまとめて表示するか画面ごとに分けて表示するのかを検討します。

実際にGmailのPC版とスマホ版を見比べて、この画面がPCではここにあって、スマホだとここにあって…でも画面自体のUIは同じだな…みたいなことを見てみると良いと思いました。

(今までこんな視点持っていなかったな…)

この記事で記載している”細かいデザイン”は縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS&テクニックで説明されている「こういうケースはこういうUIにするのが効果的だよ」ということです。

余談ですが、この本もめっちゃおすすめです。

最後に

この章を読んで思ったのですが、OOIUの設計プロセスがオブジェクトからスタートするの、なんとなくですがドメイン駆動設計に似ているなーと思いました。

(エンジニアとして働いているときにドメイン駆動設計入門 ボトムアップでわかる!ドメイン駆動設計の基本という本でキャッチアップしました。途中で挫折したけど。)

プロダクトマネジメントでもデザインでも

  • ユーザーを理解する
  • ドメインを理解する

は共通して重要と説明されているのが印象的でした。

まあそりゃそうだよね。

次の章はこちら。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

ブログを開設するなら「SWELL」が絶対オススメ!

この記事を書いた人

大学院(機械工学)→重工業→エンジニア→プロダクトマネージャー(PdM)

神戸グルメのインスタアカウントを運用しています↓
https://www.instagram.com/kobe_gourmet_life/

コメント

コメントする

目次