見出し画像

DBを定義するようにUIをデザインする - オブジェクト指向UIデザイン

僕はプログラマーとして仕事をしています。プログラマーなのでアプリを作ることは出来るのですが、UIデザインは苦手です。どのようなUIにすればユーザが直感的に理解しやすいUIなのかわかりませんでした。
そんな僕と同じプログラマーにおすすめしたいのが、オブジェクト指向をUIデザインに活かす方法です。これを使えば、DBの定義が終われば勝手に直感的でわかりやすいUIが定義されてしまうのです。では、オブジェクト指向をUIデザインに活かすとはどうすればよいのでしょうか?

オブジェクト指向UIデザインとは?

オブジェクト指向UIは以下の原則で作られたUIのことです。

・オブジェクトを知覚でき直接的に働きかけれる
・オブジェクトは自身の性質と状態を体現する
・オブジェクトの選択→アクション選択の操作順序
・全てのオブジェクトが互いに協調しながらUIを構成する

これは現実世界と同じ原則であり、この原則に基づいたUIを作ることでユーザが直感的に理解しやすいものになります。
例えば現実世界で本を読むことを考えてみましょう。あなたはきっと本棚の前に立ち、読みたい本を選び、本を手にとってから読み始めるはずです。本を読むという行動を選択した後に、本を探し出すことをしないはずです。現実世界では物体という目に見えるものを選択した後に、行動という目に見えない意思決定を行います。アプリのUIもこの原則に基づき実装すべきです。

タスク指向UIデザインはわかりにくい?

オブジェクト指向UIとタスク指向UIでは選択する順序が変わってきます。タスク指向UIは行動を全面に出したUIになります。なにかの行動を選択した後に行動するオブジェクトを選択するデザインです。同じように読書することを考えた場合、本を読むというボタンを押した後に読める本の一覧が表示され、その中から読みたい本を選択するようなデザインになります。
行動を選択した後に対象物を選択するというのは一見わかりやすいように見えますが、この動きは現実世界の原則とは逆の思考順序となるためユーザは直感的に理解できません。また、行動のパターンと同じ数のUIが出来上がるため無駄な画面遷移が発生し迷子になりやすくなります。

プログラマーに理解しやすい理由

では、読書アプリを作ることを考えてみましょう。読んだ本をローカルに保存することを考えた場合、DBに読んだ本テーブルが出来上がり、読んだ本テーブルに対してSELECTE / INSERT / UPDATE / DELTEコマンドを使って操作することになると思います。これをそのままUIに落とし込みます。
まずは一覧画面をSELECTで作り、オプションで付くWHERE / ORDER BYをフィルタUIと連動させて作ります。一覧画面にはINSERTのボタンが表示され、INSERTのボタンをタップすると新しい読んだ本が追加され、追加が完了すると一覧画面に表示されます。一覧画面に表示されている読んだ本をタップすると個別画面に遷移し、そこにはUPDATE / DELETEのボタンが表示されています。
DB定義+DB操作=UIページ一覧の形にすれば無難でユーザが理解しやすいオブジェクト指向UIになります。ということは、オブジェクト指向UIの画面はDB定義が終われば作るべきUIも決まることになり、DB定義を行うプログラマーにもってこいのUIデザインだと言えると思います。

結論:デザインにもオブジェクト指向を

プログラマーがデザインするとどうしても野暮ったいデザインになってしまいがちです。しかし、UIは野暮ったくてもユーザが操作しやすく直感的に理解しやすい方が良いです。どれだけ格好良いデザインであったとしても、操作が直感的でなく理解しづらければ意味がありません。このオブジェクト指向UIの考え方を自作アプリに導入すれば、きっとユーザが理解しやすいUIになることでしょう。

ここで書いていることは、以下の本を読んで私なりに理解したことを書いたものになります。この本にはオブジェクト指向UIデザインを理解するためのワークが多数存在しており、全てのワークをこなしたときにはきっとオブジェクト指向UIとはどのようなものかを理解できることでしょう。プログラマーであればおなじみのUML図のようなものも出てきて、読んでみればなぜ僕がプログラマーにおすすめのデザイン手法であると思っているのかがわかると思います。


日々面白そうな本を探していますが、なかなかピンとくるものがなくて困っています。もしなにかおすすめの本があれば以下のリンクから教えてくれると嬉しいです!


サポートよりも面白い本を教えてくれると嬉しいです!なんでも好き嫌いなく読める方なので何も考えずにあなたが面白かった本を教えて下さい!