OOUIデザインのトレーニング:浦島太郎

今回は昔話を題材にしてOOUIのデザインを行ってみましょう。

浦島太郎の竜宮城のスタッフが使うアプリケーションです。徐々にタスクが増えアップデートしていきます。もしかしたら最初に作った構造を途中で変えることになるかもしれません。それもまた練習ですのでとりあえず楽しみながらやってみてください。

タスク1

タスク1

1つ目のタスクは「ある亀が担当する旅人を確認する」です。まずは自身でデザインしてみてから次の解説へ進んでください。

モデル

まずは「亀」と「旅人」をオブジェクトとして定義してみます。

モデル

亀と旅人の関係性はどうなんでしょうね。専任でしょうか。ひとまず1人の旅人に対して亀は専任で担当につくことにしてみましょうか。

インタラクション

次はインタラクションを整理してみましょう。ある種機械的にコレクションとシングルを用意するとこんな感じですね。専任なので互いにシングル同士を参照します。

インタラクション

プレゼンテーション

ではこの段階でレイアウトしてみましょう。

とりあえず両方とも重要なオブジェクトということでルートナビゲーションには両方とも置いてみます。ラベルは「亀管理」「亀一覧」「亀情報」などだと冗長ですのでシンプルにオブジェクト名「亀」にしましょう。機能というよりオブジェクトをここで選ぶ感じです。

まずは「亀」です。ルートナビゲーションで選択されたもののコレクションをすぐに表示します。そしてコレクションからシングルへオーソドックスにドリルダウンします。亀は担当の旅人がいますからそれも表示します。

「亀」

次は旅人の方をいってみましょう。

構造は似ていますね。というか同じです。旅人側からすれば担当の亀がいるのです。マンツーマン、つきっきりですね。浦島太郎専任。

「旅人」

タスク2

では次です。タスク追加されます。誰が言い出したんでしょうか。とにかく追加されます。追加されるのはこちらです。

タスク2

「玉手箱を新規作成し旅人を登録する」です。

でました。玉手箱。浦島太郎はこれなしでははじまりません。というか終わりません。欠かせない不穏な箱です。これ新規作成できるようです。この世に1つじゃなかったんですね。ということで先ほど作ったモデルにも反映させデザインしてみてください。

モデル

モデル

「玉手箱」オブジェクトが増えました。何か識別するための名前ありそうです。つけておきましょう。新規作成できるそうなので、アクションにも「新規作成する」も明記してみます。本当は亀も旅人も同様に新規作成できるんじゃないかと思いますね。

「玉手箱」は「旅人」に紐づいちゃいました。浦島太郎、ちょっと運命が決まった感じです。

インタラクション

インタラクションはどうでしょうか。

玉手箱と旅人はこれまた対になりそうですね。1人の旅人に一個の玉手箱。

インタラクション

プレゼンテーション

ではまたこの段階で形にしてみましょう。

「亀」

変わってないように見えますが、ルートナビゲーションに1個「玉手箱」が追加されています。

次は旅人です。こちらはシングルに「玉手箱」が追加されました。浦島太郎に紐づいています。

「旅人」

では「玉手箱」の方をみてみましょう。玉手箱には旅人が紐づいています。

「玉手箱」

タスク3

ではまたまたアップデートです。

タスク3

追加されたのは「ある旅人の出発予定日を変更する」です。

モデル

出発予定日、どこからどこへなんでしょうか。とりあえず旅人に関する情報ですので、旅人のプロパティに追加しておきましょう。

モデル

今回はそれほど大きな変更はありません。

プレゼンテーション

インタラクションも変わりありませんのでプレゼンテーションにいってみましょう。といっても旅人のシングルに出発予定日がひっそりと追加されただけです。

「旅人」

同じオブジェクトに関する情報なら既存のオブジェクトに追加する。単純ですが構造が大きく変わらないようにするためには大事です。

タスク4

ではまたアップデートです。玉手箱に関するタスクが追加されます。

タスク4

追加されたタスクは「ある玉手箱を旅人が開いたか確認する」です。

玉手箱にそれを感知する仕組みがあるのか、それとも亀が岩陰からこっそり見届けて入力するのか、それは分かりませんがとにかく玉手箱に関する情報です。

作っているモデルに反映させ、プレゼンテーションなども更新してみてください。

モデル

玉手箱に関する情報なので玉手箱のプロパティに追加しましょう。

モデル

出発予定日とありますが、これがもしも竜宮城からの出発だとすると開封した頃には出発済みです。正確には旅人の状態や出発予定日に加え出発日などが必要になるかもしれません。

プレゼンテーション

インタラクションは変わらず、プレゼンテーションでは玉手箱に開封状態を追加してみましょう。

「玉手箱」「旅人」

状態を強調する場合はバッジをつけたりコレクションでもラベルで開封状態を示すと良いでしょう。

タスク5

では次へいってみましょう。またまたアップデートです。

タスク5

今回のタスクは「復帰対象(ベニクラゲン摂取期間3年以上)の旅人を探す」です。少し複雑なタスクですね。

ベニクラゲンを3年以上摂取すると復帰する対象になるという感じでしょうか。自ら摂取しているのか、知らずに摂取しているのかちょっと謎めいています。このタスクも今まで作ったモデルに反映させデザインしてみてください。

モデル

ある特定の条件にマッチした旅人を探しているようですので、旅人の情報として扱ってみましょう。なんだかよくわかりませんが旅人のプロパティに「ベニクラゲン摂取期間」というものを追加してみましょう。

モデル

ベニクラゲン、怪しいですね。ベニクラゲの成分が含まれているんでしょうか。

プレゼンテーション

ではプレゼンテーションにも反映してみましょう。少しだけレイアウトを変更してみていますが、ベニクラゲン摂取期間が表示されるようになりました。復帰対象として明示する場合は摂取期間3年以上であれば自動的に復帰対象フラグを立てても良いでしょう。

「旅人」

タスク6

次のアップデートです。

タスクは「ある玉手箱の老化値(旅人のベニクラゲン摂取期間の10倍、単位はディテロメア日)を計算する」です。なんでしょうかこれは。

玉手箱、開けるとあっという間に歳をとってしまいますが、その数値のようですね。ここでもベニクラゲンの摂取期間を基準にしているようです。その10倍の期間分老化してしまうのでしょうか。やはり玉手箱、なかなかすごいパワーを持っています。テロメアに対して負の方向で作用するのでしょうか。あなどれませんし、よくわかりません。

しかし一つわかるのは玉手箱に関する情報であるということです。

ではこの概念をモデルに反映してデザインをアップデートしてみてください。

モデル

玉手箱に関する情報ですので、玉手箱のプロパティに「老化値」を追加しましょう。「計算する」というタスクではなく計算済みの値をプロパティとして用意しましょう。

モデル

プレゼンテーション

ではプレゼンテーションです。玉手箱に老化値プロパティが追加されています。

「玉手箱」

浦島太郎が開けてしまった玉手箱の老化値を確認することができるようになりました。

タスク7

では最後のアップデートです。

タスク7

追加されたタスクは「ベニクラゲンによって老化耐性を獲得していた旅人の地域分布をエクスポートする」です。よくわかりませんね。またベニクラゲンが出てきました。

最後もこれまで作ったモデルに反映してデザインしてみてください。

モデル

「老化耐性を獲得している旅人」とあります。つまり旅人によって老化耐性を獲得していたりしなかったりがあるということですので、旅人に関する情報としてまとめてみましょう。

旅人のプロパティに老化耐性を追加します。アクションに「エクスポートする」も書いておきましょう。

モデル

プレゼンテーション

ではプレゼンテーションです。まずは旅人のシングルです。老化耐性が追加されました。老化耐性いつわかるんでしょうか。玉手箱を開けた時にでしょうか。亀がこっそりのぞいて結果をメモるんでしょうか。どうなんでしょう。何の記録なんでしょうか。

玉手箱を開けていなければ老化耐性は判明しないかもしれません。あり、なし、不明があるのかもしれません。

「旅人」

そして旅人のコレクションはどうでしょうか。「老化耐性のある旅人の分布」を把握するために地図表示を用意してみましょう。老化耐性のある旅人にはバッジをつけたり、コレクションにフィルタ機能をつけ、旅人を老化耐性の有無などで絞り込めるようにしても良いでしょう。分布ということは位置情報も必要ですので旅人のプロパティに追加する必要もありそうです。

「旅人」

亀たちは一体何をしているのでしょうか。全貌は見えませんがどうも玉手箱の老化パワーに対するベニクラゲン摂取の有効性について旅人を使って調べる治験的な構造が見えてきますね。

ということで今回はタスクを少しづつ増やしながらデザインを進めていく練習を行いました。構造が破綻したり、あまり複雑化しないように少しづつ機能を追加していく練習になったかと思います。

ちょっとしたタスクがアプリケーションを複雑にすることはよくあります。一方でどのタスクが形を複雑にするかというのは予想しきれない面も多々ありますので、実際のプロジェクトでもタスクと形を行き来しながらデザインすると良いと思います。

The Art of User-Interface Design