
オブジェクト指向UIでデザインしてみた【レベル2. 社員名簿アプリ】
こんにちは、わたるです。
UI/UXデザイナー必読書の「オブジェクト指向UIデザイン」にあるワークアウト(レベル2. 社員名簿アプリケーション)をやってみました。
進め方
指示されたタスクをもとにして、オブジェクト指向UIをデザインします。
本の記入例にならって「モデル」「インタラクション」「プレゼンテーション」を作成していきます。
レベル2. 社員名簿アプリケーション

ヒント
・複数のメインオブジェクトを扱い、ナビゲーションやループに適したりアウトパターンを理解する。
・複数のメインオブジェクトを抽出し、それぞれのビューの呼び出し関係を整理する。
・単一のツリー構造ではなく、ユーザーの思考の起点となるメインオブジェクトをルートナビゲーションに配置する。
名詞の関係性を抽出

チームに所属する固有の社員名は名前に統一しました。
オブジェクトの抽出

名詞の抽出では社員と名前が紐づいていなかったのですが、実際は「社員>名前」の関係が成り立ちます。
ここを気をつけながらオブジェクトの抽出を行いました。
モデルの作成

今回のメインオブジェクトは「チーム」と「社員」に設定しました。
それぞれのプロパティやアクションはモデル図の通りで、チームと社員は「1対多」の関係が成り立ちます。
本にある参考例と少し中身は違いましたが、根本的な問題はありませんでした。

インタラクションの作成

社員は1つだけのチームに所属するものと仮定しています。
ただ、この例だと社員とチーム(シングル)でループすることになるので、画面では社員(シングル)からチーム(シングル)への遷移は行えないようにします。
ルートナビには「チーム」と「社員」を配置します。
プレゼンテーションの作成


コレといった参考になるアプリはあまりなかったのですが、iPhone純正の「連絡先」や「メッセージ」を少し取り入れました。
インタラクションのフェーズで書きましたが、社員(シングル)からは所属チームに遷移できないようにしました。
ただし、本の参考画面ではループできるようになっています。ここをループさせるかどうかはどちらでも間違いではないので、作り手次第かなと思います。
個人的にループするとどこの階層にいるのかわからなくなる気がするのでループはやめました。
まとめ
レベル1よりモデルが1つ増えた程度であまり難しくはないのですが、考えることはかなり増えたように感じました。
また、今回は社員は1つのチームにしか所属できないことにしているので、この辺りの制限を止めるともう少し複雑になると思います。
この調子でレベル3を進めていきます。