デザインど素人がオブジェクト指向UIデザイン勉強会を開催したら、すごく勉強になった
🌷 この記事で言いたいこと 🌷
プロダクト開発に関わるなら、オブジェクト指向UIデザインをみんな一度は読もう。エンジニアもPMも営業も例外ではない、読もう。皆がオブジェクト指向UIを意識しよう。
こんにちは！とよもも(@momokotoyopet)です。
2021年3月7日と27日の2回に渡り「オブジェクト指向UIを通じてUIデザインを考える勉強会」を開催しました。これは、オブジェクト指向UIというデザイン設計パターンを元に、ウェブやスマホアプリのUIデザインを作っていく勉強会です。
オブジェクト指向UIの考え方や概念については、ソシオメディア株式会社さんの「オブジェクト指向UIデザイン-使いやすいソフトウェアの原理」を参考にしました。勉強会では3〜4人で1チームになってお題のプロダクトを「オブジェクト指向UI」の設計方法に則ってデザインしていきました。
私はWEBアプリのエンジニアで、デザインのデの字も知らないど素人です。しかし、勉強会を開催して良いことばかりでした。良いプロダクトとはどうデザインされているのか？直感的でない使いにくいプロダクトになってしまう理由は？を言語化することができました。
この本を読んで使いやすいプロダクトのデザインとは？今のプロダクトの改善点は？を考えるきっかけになればと、この記事を書きました。
🌷 オブジェクト指向UI V.S タスク指向UI
本の中では「オブジェクト指向UI」と「タスク指向UI」について説明されています。例外を除き、「タスク指向UI」は直感的ではなく、使いにくいプロダクトになりやすいため「オブジェクト指向UI」を使ってデザイン設計をしよう、とこの本では主張されています。
🌱 オブジェクト指向UIとは
「オブジェクト」を起点としてUIをデザインを設計していく方法です。オブジェクトとは、そのプロダクトを操作する「お目当て」のことです。読んだ本を管理するプロダクトの場合を例に取ると「本」がオブジェクトになります。「本」を起点として、「本を登録する」「本を削除する」「本の一覧を見る」「本の詳細を見る」と操作していきます。
下記は読書メーターという読書管理アプリのUIです。「本」というオブジェクトを起点に、「本の一覧」から「本の詳細」へと画面が移動します。
オブジェクト指向UIを元にデザインされているプロダクトでは、ユーザは「オブジェクト」を直接眺めたり動かしたりできるので、自分なりの意味性を見出すことができます。その結果、ユーザは「オブジェクト」という対象物を意識しながらプロダクトを直感的に使うことができます。
あなたがスマートフォンを初めて触った時、説明書をじっくり読まなくても「直感的に」「自然と」使いこなせたと思います。それはスマートフォンが「オブジェクトを起点に作られたオブジェクト指向UIだからです。
🌱 タスク指向UIとは
反対にタスク指向UIとは「ユーザーが行うこと（タスク）を想定し、そのタスクに応じて設計されたUI」です。「ユーザは〜ができる」を起点に考えられ、行うこと（タスク）ベースでUIが作られていきます。
タスク指向UIの設計方法を元にデザインを作成すると、結果的に下記のようなUIになります。
ユーザは「行うこと（タスク）」をまず選択し、その後にタスクを完了するためのページに遷移します。このやり方だと、タスクが増えれば増えるほど、並ぶボタンが増えていきますね。また、「何を扱えるのか」がはっきりとしないため、直感的ではなく扱いにくいプロダクトとなっていきます。
「こんな風にデザイン設計しないでしょ・・・」と思うかもしれません。しかし、業務系アプリを中心にまだまだ「タスク指向UI」でデザインが設計されています。
下記のウィンドウは「ターミナル」と呼ばれ、コマンドを打ってPCを操作するためのアプリです。PCを操作するために「〜に移動する」「〜のファイルを開く」といったコマンドを入力します。タスク指向UIで作られていますね。ターミナルを使いこなすには、多少のトレーニングが必要です。何も知らない人がこのターミナルを使いこなせることはないと思います。これがタスク指向UI のデメリットです。
🌷 なぜ使いにくいプロダクトが作られてしまうのか
「オブジェクト指向UIデザイン」によると、いまだに多くのプロダクトがタスク指向UIで構成される理由として、下記のように説明されています。
システム業界では、業務上の複雑なニーズを満たすために、開発プロジェクトの上流工程においてユーザーの要求事項をまとめます。ユーザーの要求を満たさなければシステムの存在価値がありませんから、設計者は熱心に「ユーザーがやりたいこと」を定義しようとします。特に業務アプリケーションにおいてはユーザーの業務をオンラインで実現しなければならないので、業務内容を厳密に把握することが設計のスタートです。そのため古くから業務分析のための手法が多く研究されています。
業務というのは仕事の流れでありタスクですから、ユーザーの要求は「やること」としてまとめられていきます。その「やること」を実現するためにさまざまな機能要件が定義されていくので、UIの構成もその「やること」をベースに組み立てられてしまうのです。
引用元「オブジェクト指向UIデザイン - ソシオメディア株式会社」
上述のように、ユーザの「やること・やりたいこと」だけをヒントにプロダクト開発をしてきた方がいるのではないでしょうか。ギクッとした方は、ぜひ「オブジェクト指向UIデザイン-使いやすいソフトウェアの原理」を読んでみてください。
🌷 なぜ開催しようと思ったのか
理由は一つ、参画しているプロジェクトのプロダクトが使いにくすぎるから。まだプロトタイプのプロダクトなのですが、下記のような問題点がありました。
・直感的に使うことができない
・機能がありすぎてどこに何があるのかわからない
・目当てのタスクを完了するためのステップについて説明を受けないとわからない
「今後どうやってこのプロダクトを売っていこう？」を考えた時に、「まずはできるだけ直感的に使えるようにしなければ・・・」と思いました。その為に「なぜこのプロダクトはこんなに使いにくいのか？」を考える必要があります。考えている内に、友人に勧められて何となく読んだ株式会社ソシオメディアさんの「オブジェクト指向UIデザイン」をふと思い出し「これだーー！！！このプロダクト、タスク指向UIになってやがる！！」と気づいたんですね。
例えば、メニューバーに表示されているボタンには「企業を設定する」「マスターデータを登録する」「権限を設定する」など、タスクをまず選ぶ典型的な「タスク指向UI」になっていました。「タスク指向UI になっているんだったら、少しずつオブジェクト指向UIに変えていこう」、そう思ったのがきっかけです。
しかし、「ITに疎い業界の人にこのプロダクトを使ってもらう為に、オブジェクト指向UIに変えていきませんか？」を説得するためには、まずは自分がオブジェクト指向UIについて知らなければいけません。
ということで開催したのが、今回の勉強会です。
🌷 開催してみて学んだこと
上記のような理由で開催した今回の勉強会でしたが、思った以上に学びが多くありました。
🌱 使いにくい理由を言語化できるようになった
今までは使いにくいプロダクトを触っても「なんか使いにくいなぁ・・・」と思う程度でした。しかし、オブジェクト指向UIを学んで、なぜ使いにくいのか？どうすれば改善できるのか？を言語化できるようになりました。これだけでも前進です。
もちろん使いにくいプロダクトの全てが「タスク指向UI」で作られているとは限りませんが、タスク指向UIとオブジェクト指向UIの二つの概念を知っているだけで、使いにくさの原因を突き止めるヒントになります。
🌱 コツがわかればある程度できるようになる
本には「オブジェクト指向UI設計の基本ステップ」について説明がされています。
・ステップ1．オブジェクトの抽出
・ステップ2．ビューとナビゲーションの検討
・ステップ3．レイアウトパターンの適用
それぞれのステップについて詳しく説明されているため、説明の通り設計すれば誰でもオブジェクト指向UIでのデザインが考えられるようになっています。
本の後半には出されたお題を元に実際にオブジェクト指向UIの設計をしてみるパートがあります。このお題を1つか2つを数人でやってみると、オブジェクト指向UIの基本的な考え方が身に付くはずです。
👆 勉強会で「イベント管理アプリ」のお題をもとに作ったデザイン（3人1チームとなって作成）
🌱 データベース設計になる
上述の「オブジェクト指向UI設計の基本ステップ」の1つ目「ステップ1．オブジェクトの抽出」では、このプロダクトで操作対象となるオブジェクトを定義します。この作業はデータベース設計におけるテーブル・カラム定義と同様の作業です。
そのため、オブジェクト指向UI設計をすることで、データベース設計も行うことができます。であれば、「プロダクトを新規で開発する際は、全員が2~3時間ほど時間をとってオブジェクト指向UI設計作業をやればいいのでは？」と思いました。
１つのプロダクトを作るのに、デザイナーはデザイナーでオブジェクト指向UIを元にオブジェクトを洗い出し、エンジニアはエンジニアでデータベース設計をするのは非効率です。であればプロダクト開発に関わる人全員が同じ画面を見つめてオブジェクト指向UI設計を行えば、認識違いや齟齬も起こりにくくなるのではないでしょうか。私が次回プロダクトを1から開発する機会がある場合は、絶対にこの時間を取ろうと思いました。
👆 勉強会でとあるチームが定義したオブジェクト（お題：イベント管理アプリ）
🌷 プロダクト開発に関わる全ての人にこの本を
最初は私が関わっているプロジェクトでどう皆を説得するか？から始めたオブジェクト指向UIデザイン勉強会でしたが、思った以上に大きな学びとなりました。
2回の勉強会の開催で合計25名ほどの方に参加していただきました。その場でチームに分かれて、「初めまして」の中、出されたお題をチームであーじゃないこーじゃないと言いながらデザインする作業は予想以上に盛り上がりました。「社内でエンジニアを交えて同じ勉強会を開催してみます！」というフィードバックもいただき、普段デザインを触らない人にとっても得るものが多かったようでとても嬉しいです。
私はこの本を、プロダクト開発に関わる全ての人に勧めたいです。この世から、「使いにくい、何がどこにあるのかよくわかんない」プロダクトを駆逐したい。
普段デザインを触らないエンジニアやデザインに興味が全くないエンジニアやPMなどプロダクト開発に携わっている人は一度でいいのでこの本を手にとって「オブジェクト指向UI」について学んで欲しいと思います。