オブジェクト指向でUIデザインしてみた #2 /会議室予約アプリケーション
こんばんは。UIデザイン勉強中のakkoです。
今日もこちらの書籍のワークアウトを進めていきます。
お題：会議室予約アプリケーション
・会議室を新規登録する
・会議室「スグリ」の予約状況を確認する
などの機能を持つアプリをデザインしていきます。
《アウトプット》 Before
まずは前回と同様、答えを見ずに一通り作ります。
また、前回の振り返りを生かして、特に序盤のプロセスを飛ばさず順番に踏んでいきます。
名詞とその関係性を抽出、汎化
名詞の関係性をつなげてオブジェクトを特定、メインオブジェクトの特定
（のちにそれぞれ「ルーム」「予約」としました。）
モデル・インタラクションの作成
プレゼンテーションの作成
上記をもとに最初に出来上がったものがこちらです。
評価
前回より慎重に進めてみましたがどうでしょうか。
見本と見比べて、出てきた問題点などをまとめました。
アウトプット１回目の評価
●良かった点
・大枠は見本とずれていなかった。
・予約のコレクションビューをうまく作れた。このワークアウトのポイントである、カレンダー表示の縦軸と横軸の設定が正しくできた。
●問題点
・「ディスプレイ」の名詞を汎化できていなかった。
そのせいもあり、「設備」をメインオブジェクトとして設定できていなかった。
・「予約状況を見る」はボタンではなく、直接「予約」のコレクションビューを呼び出す方がよかった。
●疑問点
・会議室の追加は、管理者用の機能。予約するボタンはユーザー用の機能。誰に向けて作ってるのか途中で迷った。
・「予約する」ボタンは要らない？見本にはなかったのはなぜ？（未解決）
《アウトプット》 After
上記をもとに１つずつ修正していきます。
モデル・インタラクション
まずはモデル・インタラクションを調整しました。
メインオブジェクトに「設備」を追加します。
これができていなかったのは、ディスプレイ以外にも設備が増えるパターンを想像していなかったからです。
プレゼンテーション
見本と見比べると、各画面にも細かい改善点を見つけたため、１つずつクリアにしていきました。
＜改善点＞
・今すぐ使えるかどうかが重要なのに、それが分かりづらい→「利用中」だけでなく「利用可」の明記が必要
・構成のごちゃつきを避けるため、コレクションビューの情報量を少なくした結果、必要な情報が足りない画面になってしまった。シングルビューに飛ばないと得られない情報があるのがストレス。（定員、設備）
・ディスプレイの有無は、コレクションビューでは写真を見ることで分かるようになればいいかなと思ってた。しかし、設備が増えることを考えると写真ではカバーし切れない。あまり良い方法ではなかった。
＜改善点＞
・文字のジャンプ率が小さく、見出しがわかりづらかった。
・設備が増えるかもという視点がなかった。
・左のような「予約状況を見る」はボタンではなく、直接「予約」のコレクションビューを呼び出す方がよかった。無意識ながらタスク指向UIを作ってしまったということ！？
＜改善点＞
・部屋ごとのサムネイル写真がある方が分かりやすい。
・定員の記載がある方が分かりやすい。
・縦のグリッド線があるとなおよし
＜改善点＞
・コレクションビューのボタンの文言と飛んだ先のシングルビューの見出しの文言を統一して、関連性をわかりやすく持たせた方がいい。今回の場合は「9:30~10:30」の文言。（もし間違って別のをタップしてしまったときに気付きやすい）
振り返り
今回の一番の気づきは、下図のBeforeに「予約状況を見る」ボタンを配置して無意識のうちにタスク指向UIを作ってしまっていたことです。
少し気を抜くと（？）タスク指向なデザインになってしまったのは自分でも驚きました。実体験できたのはある意味良かったです。
対象が見せることが一番大事というのを改めて念頭に置いて引き続き進めたいです。
このようにボタンが縦に並んでいる状態は基本ありえないのかもしれません。
この記事が気に入ったらサポートをしてみませんか？