OOUIデザインの準備運動をやってみる

2020年11月26日 10:08

こんにちは、マスダです。

デザイナー3年目で、そろそろ真面目にUIデザインの手法を勉強しはじめています。私の所属するデザインチームでたびたび話題に上がるのがオブジェクト指向UIデザイン（以下、OOUIデザイン）という考え方。

最近、本も出版されてデザイナーさんだと知っているという方も多いのじゃないでしょうか。

ユーザーの関心の対象物を手掛かりにUIデザインを行っていくのがOOUIデザインです。そのOOUIデザインに取り掛かるのにソシオメディアさんが準備運動を用意してくれています。今回はその準備運動をやってみた感想です。
本当に感想です。つぶやきといってもいいかもしれません。

それでは、やっていこ〜🚀

1. ラフスケッチ

学校の教員が使うための情報システムをユーザー要件をもとに、ラフスケッチにおこすワーク。制限時間20分。

20分でもそれなりのものはできる。
オブジェクト抽出とオブジェクトに対するアクションさえわかれば、それをデザインのパターンに当てはめることで、見たことありそうなUIになるんだなぁ。
本当にアプリケーション作るならもっと情報量多くてアクションも増えてきて大変になるんだと思います。

2. モバイルアプリケーションのメインオブジェクト

モバイルアプリは下のナビゲーションに登場するオブジェクトがメインオブジェクトとわかりやすかったです。

3. デスクトップアプリケーションのメインオブジェクト

DiscordとFigma、モザイク多すぎてもはやなんのアプリかわからないw
デスクトップアプリはナビゲーションが左にあることが多いですね。

4. 一覧と詳細

メインオブジェクトの一覧と詳細を探して、どんなプロパティが表示されているか確認する。

・noteの記事
一覧：アイキャッチ・タイトル・本文の出だし・好き・書いた人（名前）・投稿からの経過時間
詳細：アイキャッチ・タイトル・本文・書いた人（アイコン・名前・紹介文・SNSリンク）・投稿日時・タグ・好き

・チャットワークのチャット
一覧：アイコン・チャット名
詳細：アイコン・チャット名・メッセージ一覧・概要・タスク一覧・メンバー一覧

・Pinterestのピン
一覧：画像・タイトル
詳細：画像・タイトル・紹介文・投稿者（アイコン・名前・フォロワー数）・コメント

5. アクション
6. 詳細情報に対するアクション

アクションを探してみる。

・noteの記事
見る、コメントする、好き、保存する、サイトに表示する、報告する、SNSでシェアする、新規作成する、削除する

・チャットワークのチャット
表示する、新規作成する、削除する、ピン留めする

・Pinterestのピン
表示する、アクセスする、保存する、シェアする、非表示にする、ダウンロードする、報告する、コメントする、作成する、削除する

7. 動詞の名詞化

名詞と動詞が組み合わさって表現されているアクションはあまり見当たらず…。見つけたのがTwitter。ツイートの右上メニューを開くとありました。ツイートに対するアクションとユーザーに対するアクションが「名詞＋動詞」になっています。

8. ラベル

ナビゲーションで〇〇一覧とか〇〇管理とか書かれているものを探したのですが、なかったです。流石にみんなが知っているようなアプリだときちんとしてますね👏
ふる〜い顧客管理システムとかだと顧客管理と顧客編集みたいなのが同時に存在したりするのだろうか🤔

9. 一覧に対するアクション

文字列検索・フィルター・並び替え・削除などを見つけました。
ん？削除とかアーカイブ、移動とかはオブジェクトのアクションで、複数のオブジェクトに対してできるだけであって、一覧に対するアクションではないか…。
だとすると、見つけたのは文字列検索、並び替え、絞り込み、ビュー切り替えの4つかな。

10. 関連するオブジェクト

オブジェクトの詳細画面で別オブジェクトの一覧を探す

SNS系だと、それぞれの投稿にコメントオブジェクトが紐づいています。いいねとかリアクションとかも一覧でみれます。
チャットツールだと、グループのなかにメッセージ一覧とかメンバー一覧とかがありますね。

11. 実生活のオブジェクト

身の回りのオブジェクトとアクションを探してみる。

・本：ページをめくる、読む、書き込む、付箋を貼る
・カバン：モノを入れる、モノを取り出す
・ボールペン：書く、回す
・自転車：解錠する、乗る、ブレーキをかける、止める、施錠する
・洗濯機：起動する、洗剤を入れる、洗う、乾燥させる

みたいな感じでしょうか。どの粒度がアクションなのかわからず、、たとえば洗濯機の「ボタンを押す」などもアクションなのか。
いや、洗濯機は洗濯物を洗う機械であって、洗濯物というオブジェクトを洗うためのツールだから、オブジェクトではない、、？
オブジェクトと考えるならアクションは「買う」「廃棄する」とかだろうか。
アクションを考えるときは「オブジェクトを〇〇する」のようにオブジェクトと「を」でつながらなきゃいけないのか…？
むむむ…🤔難しい。

12. 頭の中のオブジェクト

手で触ることのできない、頭の中にある抽象的なオブジェクトを探す。
業界 / 会社 / 部署 / チームとか、
家系 / 親戚 / 家族とか、
エリア / 路線 / 職種 / 求人とか、
旅行 / 手芸 / アウトドア / スポーツ / 観劇とか、
そういうことでしょうか。

13. 概念の名前

旅行 / 手芸 / アウトドア / スポーツ / 観劇などは総称して「趣味」と言えそうです。
ゲームする / 買い物する / 友達と会う / 山登りに行くなどは未来のことであれば、総称して「予定」みたいなくくりかたができます。一方で過去のことだとすると「思い出」みたいなくくりかたができそうです。

以上、OOUIデザインの準備運動でした〜。
オブジェクト指向に少しは慣れたかな🤗