TestLinkに関する文書(http://dev.ariel-networks.com/column/tech/testlink/)の番外編です。

TestLinkの(内部)概念はよく考えられていると思います。しかし、UI(ユーザインターフェース)は誉められる出来ではありません。

オープンソース系のソフトはUIに弱点のあるソフトが多々あります。画面の見栄え(色合いやエフェクト)がいまいちなソフトも多いと思います。個人的に見栄えをそれほど重視しないので気にしていません。しかし、使いやすさは重要です。自分が使いやすいと思うソフトは、内部概念と画面表現の対応が素直なものです。包含関係のある関係は、画面でも包含関係として表現されるべきです。並列関係にあるモノは画面でも並列に扱われるべきです。良く使うからなどの理由で、概念と矛盾するショートカットがあるUIは混乱します。

TestLinkのUIがいまいちなのは、TestLink開発チームの能力が低いからだと言うつもりはありません。優れたUI設計は本質的に難しいからです。

ちなみに、UI設計(色とかフォントではなく、画面の本質的な構成)について考えるのが好きな人がいれば、是非採用したいので、アリエルの採用ページ(http://www.ariel-networks.com/recruit/)から応募してください(もちろん、プログラマも募集しています)。

TestLinkの画面を見ながら何がまずいのか考えてみます。スクリーンショットは面倒なのでTestLink JPのサイトにある画面を使います。

• TestLinkスクリーンショット http://testlinkjp.org/uploads/top.JPG

厳密な説明は冒頭の文書に譲り、画面を読み解く上で必要な知識を列挙すると次のようになります(意味を知らなくても用語の関連性だけ分かれば充分です)。

• トップ階層に「テストプロジェクト」(複数)がある
• 「テストプロジェクト」とは独立して、「ユーザ管理」がある
• 「テストプロジェクト」内に以下の要素がある

• 「テスト計画」(複数)
• 「テスト仕様」
• 「要件」

• 「テスト計画」、「テスト仕様」、「要件」はそれぞれ文書の入れ物(フォルダ)なので、追加や削除などの操作(アクション)がある

この構造を頭に入れた上でスクリーンショットを見てみます。

画面右上のプルダウンメニューがトップ階層にある「テストプロジェクト」からカレントプロジェクトを選択する操作です。そもそも、トップ階層のコンテキスト切り替えを右上のプルダウンメニューでさせるUIが分かりづらいです。

プルダウンメニューでカレントプロジェクトを選択すると、画面全体のコンテキストが選択したカレントプロジェクトに切り替わります。つまり、画面内のアクションメニューは基本的にカレントプロジェクトに対する操作になります。たとえば、テスト計画の切り替え(画面右の濃い青のプルダウンメニュー)の選択肢は、カレントプロジェクト内のテスト計画になります。テスト仕様や要件の追加や削除(画面左側のアクションメニュー)も、カレントプロジェクトの中での文書の登録や削除になります。

同じUIパターンをテスト計画でも使っています。(画面右の)プルダウンメニューからカレントのテスト計画を選択すると、その下のアクションメニュー(画面右の「テストの実行」「テスト計画」領域内のアクションメニュー)が、選択したテスト計画へのアクションになります。

画面の右領域はテスト計画のコンテキスト、という考えなのでしょうが、独特すぎます。

更に良くないと思うのは、画面左側の上から4つ目、5つ目の領域にある「テストプロジェクトの管理」と「ユーザの管理」です。これらはカレントプロジェクトに対するアクションではありません。もし「新規テストプロジェクトの作成」メニューをクリックして作成できるテストプロジェクトがカレントプロジェクトの子プロジェクトなら一貫性はあります。しかし、実際にはプロジェクトの階層関係はないので、すべてがトップ階層になります。新規プロジェクトはカレントプロジェクトと並列関係になります。ユーザの管理に関しても同じです。ユーザはプロジェクトの中に作成するわけではありません。

上に並んでいるメニューバーも混乱します。左から見ていきます。

「ホーム」は常に一貫して同じ意味です(コンテキスト非依存)。ホームページに戻る操作です。隣の「仕様」はカレントプロジェクトのコンテキストで動く操作です。次の「実行」と「結果」はカレントテスト計画のコンテキストで動く操作です。次の「ユーザの管理」と「個人情報」はコンテキスト非依存の操作です。

UI設計の難しさが分かります。