マガジンのカバー画像

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

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

#OOUI

maiokamoto

maiokamoto

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

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

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

ワークアウト：Level.17（通貨換算アプリケーション）

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

もっとみる
maiokamoto

maiokamoto

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

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

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

ワークアウト：Level.16（契約管理アプリケーション）

「新規申請」「変更申請」「解約申請」「承認」「照会」やることのタスク指向で設計されている。

ヒント：タスク同士の間に似たような「検索」や「一覧」が登場する。「承認」は一部の権限のあるユーザーにの

もっとみる
maiokamoto

maiokamoto

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

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

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

ワークアウト：Level.15（出張申請・精算アプリケーション）

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

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

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

もっとみる
maiokamoto

maiokamoto

社内の会議室を予約するアプリ

オブジェクト指向UIお題を膨らませてアプリケーションデザインしました。https://note.com/okamotomai/n/n1874d90faeac
maiokamoto

maiokamoto

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

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

ワークアウト：Level.14（サイト管理アプリケーション）

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

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

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

もっとみる
maiokamoto

maiokamoto

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

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

ワークアウト：Level.13（アセット管理アプリケーション）

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

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

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

各々が事前作成した

もっとみる
maiokamoto

maiokamoto

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

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

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

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

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

もっとみる
maiokamoto

maiokamoto

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

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

ワークアウト：Level.11（イベント管理アプリケーション）

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

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

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

もっとみる
maiokamoto

maiokamoto

近所の公園を気軽に探すアプリUI

オブジェクト指向UIお題を膨らませてアプリケーションデザインしました。https://note.com/okamotomai/n/n04162bb3d00f
maiokamoto

maiokamoto

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

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

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

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

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

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

もっとみる