「システム開発者必読!!「UI」に入れる機能を決定する#1」の続きとして、こちらでは「UI」の機能を実際に決定できるように大詰めを行います。最後には順序立ててどんな機能が必要・不必要なのかを具体的な手順を紹介します!!

UI確定のためのプロトタイプ

U Iのプロトタイプの作成は表示させたい・動かしたいモデルのためのプロトタイプがあります。しかし、UI確定のためのプロトタイプは作成意図が異なります。実装され実際に使われるUIを、ここでは想定する必要があります。必然的に、今までに作成したものよりも、詳細になります。データ操作をいかに円滑に行ってもらうかにフォーカスしたUIを作成します。この時点で作成するプロトタイプは、ある程度ユーザビリティに踏み込まざるをえませんが、それは別途詳細に行うこととし、ここではUIが実現すべきデータ操作を明確にしていきます。

業務プロセスとUI

UIは機能を実現するために存在します。ユーザーとのやり取りを通じて機能を実現するのです。その機能の主な役目は、繰り返しになりますが「データ操作」です。 業務プロセスの5W2Hから、関わる可能性のあるデータ操作を想定し、それを実現するためのUIを想定し、プロトタイプを作成します。但し、これは開発者の論理です。所謂「作り手」と「使い手」(ユーザー)では求めるものが違います。

プロトタイプの提示タイミング

開発者とユーザーが業務プロセスの5W2Hを共有した上で、プロトタイプを基にUIの議論を行うのです。いきなり早期にプロトタイプを提示することにより、機能が肥大化し、業務プロセスの5W2H(業務プロセスを定義したらその内容は5W2Hとなっている)の定義自体が揺らいでしまうことがあります。そして肥大化した機能は、リリース後、確実といってよいほど使いものにならなくなります。あくまで業務フローの世界に惹き込んだ上でプロトタイプの出番です。

エンタープライズ系システムならば、この「業務の流れ」「業務プロセスの定義」が明確化した状態で開発者がプロトタイプを提示することにより、ユーザーは入力すべき項目や、どのような機能が必要か、主体的に議論を交わすことができます。コンシューマー向けシステムにおいても、お客様の操作の流れを捕獲した上でプロトタイプを提示することにより、「ペルソナ」がより効率的にデータ操作を行えるUI· 機能の議論が可能になります。

「UI-機能の明確化」の手順

「UI·機能の明確化」の具体的な手順は以下のとおりです。

Step 1 ユーザーシナリオの抽出

各業務プロセスの5W2Hの定義を基に、ユーザーシナリオを抽出します。厳密なユースケースでなくても、業務プロセスに基づいたユーザーの行動や振る舞いが明確になれば、どのような記述法でも構いません。ペルソナの行動を手順化した文音でも構いませんし、現時点で想定可能なレベルでのユースケース記述を用いてもよいでしょう。

Step 2 ペーパープロトタイプ(手書きのプロトタイプ)の作成

ユーザーシナリオを基に、必要と思われるUI·機能を想定して、エンタープライズ系システム、コンシューマー向けシステムに応じて作成した画面標準を参照にして、ペーパープロトタイプを作成します。データ操作の観点から必要と思われるUIをデザインしてみます。最低限必要と思われる操作と項目が表現されていればよいでしょう。紙に手書きで項目、ボタンがわかりやすいように大きく書きましょう。ハサミで切り貼りしても構いません。大きく書くことにより赤入れした際に修正しやすいというメリットもあります。

Step 3 画面遷移の明確化

UI同様、エンタープライズ系システム、コンシューマー向けシステムに応じて作成した画面遷移標準を参照して、画面遷移を検討し、上記ペーパープロトタイプを並び替えて、画面遷移を明確化していきます。

Step 4 プロトタイプの確認

開発者はユーザーに、作成したプロトタイプを実際に操作する気持ちになってもらい、UIの観点から確認を行います(違うページに移る場合は紙芝居のようにペーパープロトタイプを作る)。開発者は次ページに遷移するタイミングで次の画面に差し替え、紙の上とはいえ、ユーザーが操作をシミュレーションできる環境を構築します。ユーザーが紙のボタンを押したら、開発者は次画面のプロトタイプに差し替えるのです。ユーザーからの指摘事項をまとめ、プロトタイプと画面遷移に反映させていきます。反映の際には、UIの存在目的である業務プロセスの5W2Hとブレていないかを営時確認しつつ行います。

Step 5 機能の洗い出し

業務プロセスの5W2Hの定義を満たすUIを確定し、必要な機能を洗い出し定義していきます。併行して、必要項目も可能な限り洗い出します。

Step 6 プロトタイプ、画面遷移に関する要件の確定

現時点でのプロトタイプ、画面遷移を確定します。