All Articles

OOUX

OOUX とは / なぜやるか

web アプリケーション画面に存在するものを オブジェクトとして定義し、関連を設計していく手法。オブジェクトを現実世界のモノと同様に動きや役割を明確に定義し、ユーザがわかるようにすることで、ユーザビリティの向上を狙う。関連性や役割を明確にすることで、画面の構成に不自然さがなくなり、ユーザが使い方で混乱しづらくなる。あるWebページを正しく使うためには、画面に存在するものを正しく理解する必要があるため。その前段で開発者が関連や定義を理解していなければ、開発途中で使いにくい画面が開発されてしまう。

バックエンドのデータモデリングの作業をフロントエンドにも持ち込むというイメージのほうがわかりやすいかも。

進め方

Step 1: オブジェクトを定義する

特に補足なし

Step 2: オブジェクト間の関連をマッピングする

has many / has one など関係を定義する。またどんな関連なのかも詳細に書いておくとよい。
例えば、Person が Article を持つとき、 has 0-m articles favorited などと表現する。

Step 3: それぞれのオブジェクトがどのようなCTAを提供しているか議論する

各オブジェクトがどんなアクションを起こすかをリストアップする。例えば、Person は follow できるなど。動詞が望ましそう。また、Person が役割に応じてできることが違う場合、交差図つかってそれぞれリストに追加する。

Step 4: 属性定義

コアコンテンツ / メタデータをオブジェクトに付与する。

コアコンテンツ

  • 一意の識別子(各インスタンスは通常、一意の値を持つ)
  • テキスト文字列(ロジック、要件なし)
  • 画像、動画、イラスト、アイコンなどのメディア

メタデータ

  • 日付や価格、場所など

    • オブジェクトのインスタンスリストをソートしたりフィルタリングしたりすることで、ユーザーがこのオブジェクトの関連するインスタンスを見つけられるようにすることができる

各オブジェクトの属性(入れ子になっているオブジェクトも含む)を強制的にランク付けし、最も重要な属性を一番上にする。こうすることで、ユーザに届ける重要な情報が整理される。例えば詳細ページに行く前にどんな情報を出しておくかなど。この難しい作業には、ドット投票やユーザーアンケートが大いに役立つ。

所感

CTA のような UX 用語は初耳だった。Call To Action で 行動を促すモノを指すとのこと。例えば、~するボタンなど。 コアコンテンツとメタデータの違いの考え方が勉強になった。今まで、識別子 id とそれ以外はメタデータと思っていたため。要は、あるテーブルがもつデータはざっくりすべてメタデータのような理解でいた。コアコンテンツとメタデータをわけることのメリットはなんなんだろう。順位付けして、仮にメタデータが上位に来ていたらそれはコアコンテンツだよね。みたいな区分に使えるとかかな。

その他