システム開発者必読!!「UI」に入れる機能を決定する#1

システム開発者必読!!「UI」に入れる機能を決定する#1

システムで最もユーザーの注意を引く(UI)のはデザインなどの視覚的情報だけでなく、その機能性です。種々のUIについて、必須の機能をどのように選択していくかという手法をこの記事では紹介しています。ぜひご一読ください

UIの基本形

UIは基本形として以下の画面要素を持ちます。

・検索

・参照

・表示

・選択

・入力

・実行(ボタンクリック)

・結果表示

・画面遷移(他画面へ)

上記7点の形を基に、UIと画面遷移を要件化していきます。

情報システムにおけるUIの意味

情報システムにおいてUIは、「ユーザーに円滑にデータ操作を行ってもらう」ために存在します。ITを使用した情報システムとユーザーとの間を取り持つのがUIの役割です。ユーザーに「円滑に」データ操作をしてもらうことができてはじめて、UIは価値を持つのです。

UIにおけるデータ操作とは?

この「データ操作」とは、データに関する以下の4種類の操作を指します。

・生成(Create)

・参照(Read または Refer)

・更新(Update)

・削除(Delete)

これらの頭文字をとったものが、後述する CRUDです。目的に沿ったこの4種類のデータ操作を円滑に行うために必要なUIを考えていさます。

UIと機能

前述のように、「UIは機能を実現するために存在する」と筆者は考えています。そのため、「UIと機能は併行して定義すべき」とも考えます。つまり UIが固まることにより機能が固まり、機能が固まることによりUIが固まるのです。但し、一つだけ例外があります。それは「バッチ処理」です。もちろん、コンシューマー向けECサイトのように、バッチ処理が存在しないシステムなら必要ありません。但しその場合でも、注意すべきなのは外部·内部を問わずデータ連携、集計処理です。そういった意味ではECサイトであっても、基幹系システムとの連携があるのなら要注意です。

ユーザーシナリオ

UXから大枠のユーザーシナリオ(体験前後を含む概要業務フロー)は抽出済みですが、ここではエンタープライズ系かコンシューマー向けかを問わず、「行いたい業務の工程」(業務プロセス)から詳細なユーザーシナリオを抽出します。これはユースケース記述で表しても構いません。ユーザーシナリオは「一連の行為」である業務プロセスを基に、実際にUI操作レベルまで落とし込んだ手順を想定します。特にユーザーシナリオの中でデータ操作に着目し、UI と機能を想定していきます。コンシューマー向けシステムの場合、そのユーザーシナリオには、主人公としてお客様のペルソナがアクターとして登場します。ユーザーシナリオに登場するアクターは業務の役割(担当)を表し、ペルソナは実際に「顔」を持った登場人物になります。ペルソナがウキウキするようなストーリーを想定してUIを検討しましょう! コンシューマー向けの場合、特にユーザービリティが差別化の大きなポイントになります。お客様視点を最重要視しましょう!

初期のユーザーシナリオから、UIを意識したプロトタイプを作成し、さらなるユーザーシナリオの磨き上げを繰り返すことにより、UIが固まっていきます。以下は、自然言語で記述したユーザーシナリオの例です。主人公はペルソナです。

「鈴木太郎は、以前から気になり、店舗やWebサイトで比較検討していたプリンタを購入することにした。12月23日、書斎の机に置いてあるノート PCでサイトにアクセスし、併行して、価格比較サイトで該当サイトの価格が最安値であることを確認してから、商品をカカートに入れた。購入に用いるクレジットカード情報や届け先情報は、サイトに会員登録した際に登録済みであるが、会員番号の入力カで間違ったため、エラー表示された。慌てて正しい会員番号を入力後、商品選択後の確定処理を行うことで購入を行った。その際、レコメンド表示された消耗品も思わず購入してしまった」。

この例文のように、ペルソナを主人公とするまさにシナリオを自然言語で記述するわけですが、ユーザの行動や振る舞いを明確にすることを意識して、以下の内容を想起できる内容であることが望ましいでしょう。

・ユーザのUI操作とそれに対するシステムの応答内容

・シナリオの基本パターンと代替パターン

・シナリオが中断して終了するパターン

ユーザーシナリオをユースケース記述の形式で書くと、以下の例のようになります。

ユースケース名:【「(システムは)XXをXXにする」という形で記載する】予約情報を登録する。

概要:【内容を要約して記載】窓口担当者が予約情報をシステムに入力すること。

アクター:【使用者】窓口担当者

事前条件:【事前になされるべき条件(省略可)】① 予約可能座席が用意されている。② 会員登録がされている。

事後条件:【事後に整う条件】(省略可)予約情報が登録済みである。

基本フロー:【アクターとシステムの対話を順序を付けて記載】

  • 窓口担当者は会員番号を入力する。
  • システムは会員情報を表示する。
  • 窓口担当者は予約座席を選択する。
  • システムは予約座席情報を表示する。
  • 窓口担当者は予約確定入力を行う。

例外フロー:【アクターとシステムの例外の対話を記載】

  • で会員番号が無効の場合、システムは会員番号が無効であることを表示してユースケースを終了する。

代替フロー:【アクターとシステムの代替の対話を記載】⑤の前に予約座席の追加がある場合は③に戻る。

事後条件を満たすフローが「基本フロー」及び「代替フロー」であり、途中で中断するフローが「例外フロー」になります。

 

テックカテゴリの最新記事