ユーザインタフェースのデザイン

74 第４章 プロトタイプシステムの開発と初期形成的評価

図 4-3 プロトタイプ（マイクロブログ）

第４章 プロトタイプシステムの開発と初期形成的評価 75

3 種類のチェックリストを準備した．それぞれの情報の詳細度はチェックリストで チェックする際の最初のデフォルト値として設定し，利用途中で，情報の詳細度を 変化させることができるユーザインタフェースを設けた．各チェックリストでは，

最初に選んだチェックリストのタイプが反映されるように Cookie を利用し，利用 途中で，on/off のボタン（図 4-4，図 4-5，図 4-6）をクリックすることで，チェ ックリストのチェック項目毎の詳細度の変更ができるようにした．また，改善提案 のための参考情報として掲載している，「改善の視点」と「改善例」についても，

表示の on/off ができるようにした（図 4-7）．但し，「改善の視点」と「改善例」

については，当初のチェックリストのデザインには含んでおらず，後述する専門家 レビュー後に追加した内容である．この状態も Cookie として保存されるので，次 回チェックリストを利用する際も同じ表現形態となる．また，形成的評価のため，

利用者がクリックした on/off ボタンについては，随時 Web サーバ側のログに残る 仕組みを構築し，ユーザ行動の分析やユーザインタフェースの改善に役立てた．

（２） 3x3のマトリックス型のポータルサイトの入口

図 4-1 で示した通り，3x3 で合計 9 個所の入り口をポータルサイトに設け，縦方 向は利用者のフロー理論に関する知識の多寡，横方向は利用者の教授経験・教材設 計経験の多寡を指標としている．合計 9 個所の入り口に，5 種類の活動を配置した．

この配置は初期設定であり，入り口の数や活動の配置については今後の形成的評価 を通して修正・改善していくこととした．初期段階での設計としては以下のデザイ ン方針に基づき活動を構成した（図 4-1）．

（A） フロー理論に関する知識がない利用者に関しては，まず，「フロー理論入門」

教材を学習し，フロー理論に関する必要最小限の知識を身に付けることを 推奨する．

（B） 利用者の知識と経験の差により，チェックリストの詳細版，通常版，簡易 版と変化させる．最も知識があり，経験が豊富な場合はチェックリストの 簡易版の利用を推奨する．

（C） 教材設計経験あるいは教授経験が少ない初心者に関しては，フロー理論入 門教材だけでは，不足と考え，フロー経験実例集の活動を設け，より具体 的にフロー経験とはどのようなものかを理解してもらう活動を追加する．

76 第４章 プロトタイプシステムの開発と初期形成的評価

（３） チェックリストの情報の詳細度の切替

3つの表現形式を持つチェックリストに関しては，利用中に，利用者が意図的に，

情報の詳細度を切り替え可能なボタンを設け，随時，詳細版，通常版，簡易版と内 容の詳細度を切り替えられる仕組みを設けた．

図 4-4 プロトタイプ（チェックリスト（詳細版））

第４章 プロトタイプシステムの開発と初期形成的評価 77

図 4-5 プロトタイプ（チェックリスト（通常版））

図 4-6 プロトタイプ（チェックリスト（簡易版））

78 第４章 プロトタイプシステムの開発と初期形成的評価

図 4-7 プロトタイプ（チェックリスト（改善の視点と改善例））

第４章 プロトタイプシステムの開発と初期形成的評価 79