OOUI実践｜Step3 レイアウトパータンの適用

こんにちは、中国人デザイナーのYINGです。
今日は前回と前々回に続いて、OOUI実践のステップ3についてご紹介します。
（日本語はまだまだなので、表現におかしな点があればご容赦ください！）

※今までの内容

Step3 レイアウトパータンの適用

レイアウトパータンとは

レイアウトパータンは、GUIが普及してから、さまざまなプロダクトが用いる一般的なUIパータンのことです。こういう一般化しているパータンを使用することで、ユーザーの学習コストが減らせて、よりわかりやすい、直感的に操作できるUIが実現できます。
『オブジェクト指向UIデザイン』の第3章の「3-5」では、OOUIに適したレイアウトパータンについて詳しく解説しているので、興味のある方はぜひ読んでみてください。

レイアウトパータンを適用

ここでは今まで作成したオブジェクト図やナビゲーションをレイアウトパータンに適用したデザイン（ワイヤーフレーム）は下記になります。

図3-1 レイアウトパターンの適用

上記はよくあるデザインパターンを用いて作成したWF（ワイヤーフレーム）ですが、いくつ問題があります。

1. まず一番大きな問題は、「帳簿シングル」→「出費コレクション」の遷移です。ビューを検討した際にこういう遷移を想定していましたが、実際に画面を作成すると、「帳簿コレクション」→「出費コレクション」のほうが自然であることに気づきました。

2. ナビゲーション項目は「帳簿」と「ユーザー」の2つですが、ケースケースを考えると、「ユーザーシングルビュー」の利用頻度がかなり少ないと思います。ナビゲーションの意味が薄いので、「ユーザーシングルビュー」への導線をどこかに確保すれば、ナビゲーション自体はいらなくなるでしょう。

3. 実際のWebサービスアプリでは、ログイン画面が要りますし、トップページやダッシュボードのような画面もあるのが一般的です。今回の場合、ログイン直後は「帳簿コレクションビュー」に遷移させてもいいと思いますが、せっかくなのでもっとトップページ感を出したいですね。

4. オブジェクト図やビューに含まれていないから忘れてしまいましたが、出費をカレンダーや統計グラフで見たいという要望もありました。今の出費コレクションは月単位の時系列で表示されていますが、カレンダーモードと統計グラフの追加も必要です。

5. 細かいところのデザイン調整や修正が必要です。例えば、出費の追加ボタンが目立たないので、直感的にわかりづらいところなどです。

ワイヤーフレームの修正・改善

上記の問題点を解決するように、WFを修正しました。全体的には下記になります。

図3-2 修正後のWF全体像

※プロトタイプはFigmaから確認できます。

では、主な修正点を見ていきましょう。（左は修正前、右は修正後）

図3-3 帳簿コレクション

まず、帳簿コレクションをよりトップページ感があるように、「今週の出費」と「今月の出費」の統計的数値をカード形式追加しました。
ヘッダーもなくして、帳簿追加ボタンは帳簿一覧の下に、帳簿カードと同じ形式のようなデザインに変更しました。（帳簿カードは帳簿詳細ではなく、出費コレクションに遷移します）
さらに、一番上にユーザーアイコンを追加しましたが、ここからユーザーシングルビューに遷移させるので、ナビゲーション（タブバー）は不要になります。

図3-4 出費コレクション

出費コレクションでは出費追加ボタンを強調するために、ヘッダーからページに浮いている追従ボタンに変更しました。
ヘッダーも大きく変更しました。元々のヘッダーは真ん中にタイトル、右側に出費追加ボタンがありますが、修正後は左側に所属の帳簿名（ここからトップページ＝帳簿コレクションに戻れます）、右側は新しく追加したナビゲーションエリアです。
ナビゲーションの「グラフ」と「カレンダー」ですが、これは出費コレクションのリストとは別の形式のビューとして考えられるので、表現形式の切り替えボタンになります。

もう1つのナビゲーション項目の「設定」は新しい言葉になりますが、ここから帳簿シングルに遷移しますので、本来であれば「帳簿詳細」です。ただ、帳簿シングルの中身は普通のユーザーから見ると、主にはその帳簿の設定項目なので、「帳簿詳細」より「設定」のほうがわかりやすいのではないかと思い、ラベルを変えました（この辺は日本語的センスも関係しそうで、違う意見もたくさんありそうですね）。
また、帳簿シングル（設定）では変更するとすぐ保存できるようにして、保存ボタンも省略しました。

図3-5 帳簿シングル（設定）

いくつ新しい画面とモーダルも追加しました。
例えば、カレンダー形式と円グラフ形式の出費コレクションと、帳簿追加やカテゴリのラベルを変更する際のモーダル、帳簿にユーザーを追加する際のモーダルなどです。

図3-6 追加画面

画面遷移はFigma確認できますので、よかったら操作してみてください。
＞ FigmaでWFプロトタイプを確認する

まとめ

最終的なワイヤーフレームは典型的なレイアウトパターンから少し離れてしまいましたが、遷移フローがより自然になったのではないかと思います。OOUIの設計ステップはこれで終わりますが、今まで流れをまとめると下記になります。

1. オブジェクトの抽出

   1. タスクをリストアップ

   2. 名詞を抽出

   3. 名詞の関係性を抽出

   4. 名詞の関係性をつなげ、オブジェクトを特定

   5. オブジェクトにプロパティを付ける

   6. タスクからアクションを見つける

2. ビューとナビゲーションの検討

   1. コレクションビューとシングルビューを作る

   2. コレクションビューとシングルビューの呼び出し関係を検討

   3. オブジェクトからルートナビゲーション項目を選定

3. レイアウトパターンの適用

   1. レイアウトパータンを適用

   2. デザインの修正・改善（必要であれば）

次回からは今回作成したワイヤーを用いて、UI（ビジュアルデザイン）を作ります。
OOUIと直接関係なくなりますが、興味のある方はぜひ続きもチェックしてください。
お読みいただきありがとうございました！

---

※参考本：『オブジェクト指向UIデザイン──使いやすいソフトウェアの原理』
※今回の使用ツール：Figma