OOUIとは
OOUI（Object Oriented User Interface）、つまり、オブジェクト指向ユーザーインターフェースのことです。
詳しくは上野学さんのOOUI – オブジェクトベースのUIモデリングの記事を読んでください。
実例、歴史、手法まで紹介されています。
今回はこちらの記事に則って、開発中のアプリケーションを見直していきたいと思います。
現在の状態
、、、。笑
一応、単語帳アプリなんですが、見て分かる通り、デザインに心がないのがバレバレですね。
基本的には、単語帳のリストがあって、選択すると単語カード画面になるようなもので、もちろん編集機能などをそなえているものを作成予定。
KAIZEN手順
- オブジェクトの抽出とスコープ定義
- ビューの定義と設計
- レイアウトとインタラクションの設計
KAIZEN1 オブジェクトの抽出とスコープ定義
UIのモデリングにおいては、ユーザーが意識している／意識すべき概念だけを定義できればよいでしょう。
オブジェクト（エンティティ）を抽出するためには、ユーザーがそのドメインで何をどのように行なっているかや、業務の内容（事業に対する位置付け、役割、フロー、入出力される情報など）をよく把握していなければなりません。
ユーザが意識すべき概念の列挙
- 単語帳を選ぶ
- 単語帳を作成する
- 単語帳を編集する
- 単語帳を削除する
- 単語カードを見る
- 単語カードを裏返す
- 単語カードを暗記済みにする
- 単語カードを作成する
- 単語カードを編集する
- 単語カードを削除する
「何をどのように」の列挙
先程列挙したものを名詞（青）、動詞（赤）に色付けして、名詞ごとに分類しました。
KAIZEN2 ビューの定義と設計
オブジェクトとビューの関係を見直しました
最終的に、、、
こうなりました！（いいのかどうかはわからない、、）
変更点として、、、
単語一覧Viewが単語Viewの前になりました。
→単語帳を手にとった時も、単語の全体感があって、ざっとある中からここから始めようとかの動作の流れになるんじゃないかなと思ってます。
単語編集画面を削除しました。
→同じ対象のオブジェクトに対して、見るっていう動作と編集する動作って画面を分ける必要がないんじゃないかなって思いました。
参考記事
OOUI – オブジェクトベースのUIモデリング
オブジェクトベースなUI設計を学んだら視点がガラリと変わった話
勝手ながら、ジャカルタでTwitter経由でお声がけいただき、とてもわかりやすいスライドでデザイン素人の私に丁寧に教えていただいた yutaroMurakami さんにはとても感謝しています。
最後に
デザイン部分は普段は関わらないド素人です。
見様見真似でやらせていただいたので、色々教えて下さい。どしどし待ってます。