マガジンのカバー画像

オブジェクト指向UIデザイン:読み合わせ

19
UIデザイナーの必読書「オブジェクト指向UIデザイン」を読んで得た学びを、自分のための備忘録としてnoteにまとめます。
運営しているクリエイター

#社内勉強会

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.18【応用編】

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.18【応用編】

UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。

ワークアウト:Level.17(通貨換算アプリケーション)

通常、主要なオブジェクトは自明なものとして抽出されるが、単純なシステムでもユーザー要求がタスクに強く依存しているケースがある。今回は「為替レート計算」のための簡単なアプリですが、これももっとGUI

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.16【応用編】

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.16【応用編】

UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。

ワークアウト:Level.15(出張申請・精算アプリケーション)

社員が出張・精算を行うアプリケーションです。

申請画面:出張を計画している社員が、行き先、ルート、日程などを申請する画面です。

承認画面:出張から帰ってきた社員が、実際の行動なようやかか

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.15【応用編】

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.15【応用編】

ワークアウト:Level.14(サイト管理アプリケーション)

サイトの全体像が掴みにくく、GUIらしくないモーダルなサイトになっています。

ヒント:まるでコマンドプロンプトのファイル操作感。一般的なユーザーは「自分が何を操作しているのか」「その結果どうなったのか」が把握しにくい。

オブジェクト抽出:「サイト」と「ページ」。サイトとページの両方には属性で「設定」がある。各種のメタ情報があり、内

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.14【応用編】

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.14【応用編】

ワークアウト:Level.13(アセット管理アプリケーション)

下の画面の状態はCRUD(作成、閲覧、更新、削除)のやることで入り口が分かれています。

ヒント:それぞれの画面フローはタスクに応じて無駄なくできているが、フロー同士では同じような画面が繰り返されています。検索に連続し更新や、削除をしたい場合TOPに戻らないと行けない状態です。

オブジェクト抽出:アセットのみ

各々が事前作成した

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.13【応用編】

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.13【応用編】

ワークアウト:Level.12(保険契約の顧客管理アプリケーション)

ヒント:具体的なアプリケーションタスクが記載されているので、どのような業務内容か、要望を把握する。

オブジェクト抽出:「契約」「顧客」「申込」「事故」の4つオブジェクトを抜き出します。申込を契約に入れるか、顧客に事故を含むかなど迷うポイントはありますが、抜き出されたタスク以上の業務が各オブジェクトに含まれていると考え、すべて

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.12【応用編】

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.12【応用編】

ワークアウト:Level.11(イベント管理アプリケーション)

ヒント:やることベースで作成されているため、同じような画面が繰り返されている。資材管理に横スクロールが発生し、閲覧しづらくなっている。

オブジェクト抽出:イベントと資材の2つ。ポイントは元のレイアウトにおいて「日程確認」のフローがあったということ。

レイアウトパターン検討:最も重要なオブジェクトは「イベント」。本書では左ペインの

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.11【応用編】

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.11【応用編】

ワークアウト:Level.10(スマートフォン用の営業支援アプリケーション)

タスクベースになっている問題の状態を、オブジェクトベースのアプリケーションにリバースエンジニアリングする。

ヒント:「訪問予定」「訪問検索」のように名詞と動詞が混在しており、タスクとオブジェクトの関係が曖昧になっている。「やること」を選んでから「対象」を選ぶフローを改善する。

オブジェクト抽出:ある程度出揃っている

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.9、10

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.9、10

ワークアウト:Level.6(商品管理アプリケーション)

ヒント:暗黙的なオブジェクトがあることを理解する。「商品」には「商品の種類」と「仕入れた商品」の2種類がある。これを適切な名称に直し、ユーザーにわかりやすく整理する。

オブジェクト抽出
暗黙的なオブジェクトとは何なのか?というところが今回のワークアウトのポイントのようです。「商品の種類」と「個数」をセットにした概念が「仕入れの明細」にな

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.8

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.8

ワークアウト:Level.5(家族で遊べる場所を探すアプリケーション)

ヒント:物理的オブジェクトと、暗黙的に存在するオブジェクト。(語られていないタスクをオブジェクトにできたか?)

チャレンジ:厳密に命名する必要がある。公園コレクションビューから公園を探す際に、どうゆう情報があるといいか?有用なプロパティはあるか?

オブジェクト抽出
皆、「すべり台」の意味が2種類あることは、感覚的には理解

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.7

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.7

ワークアウト:Level.4(会議室予約アプリケーション)

ヒント:コレクションビューの表示をマッピングビューのカレンダー表示を理解する。カレンダーの表示は縦か横か?会議室の名詞は凡化できるか?

オブジェクト抽出
メインオブジェクトに「スペース」を入れたのは将来的に設備が増えることを想定して、抽出。メインナビゲーションは「会議室」と「予約」はみんな共通して、ナビゲーション配置できました。

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.6

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.6

ワークアウト:Level.3(イベント店舗管理アプリケーション)

ヒント:お客さんと管理者が案内時に使うものを想定、コレクションビューの表示バリエーションを理解することが狙い(マッピングビュー)。

オブジェクト抽出
メインオブジェクトは「店」と「会場」。複数の相関関係については、呼び出す「会場」は「店」に対して一つですので、会場が複数ある表現は下記のよう。でもミニマム表現でいいので、下記のよう

もっとみる
『オブジェクト指向UIデザイン』をチームで読み合わせ。day.5

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.5

UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。

タスクをどう扱うか

タスク = ユースケース、ユーザーゴール、ユーザー要求

事前の適宜したタスク以上にタスクは次々増え、タスクは変化します。
粒度もさまざまで、タスクをやり終えないと分からない気づきがある。最初にタスクを定義し、それをもとにUIを作成しよ

もっとみる