ユーザビリティテストラボ：使いにくいウェブショップを調べ、テストの結果をブラウザーで読む

このラボは、生徒ひとりひとりに専用の JupyterLab と、わざと使いにくくした小さなウェブショップを用意します。読みにくい灰色の文字、「click here」としか書かれていないリンク、ラベルのない入力欄、代替テキストのない画像、消されたフォーカスの枠、「Error 7」としか言わないエラー、スマートフォンでは押せないほど小さなボタンです。そばには、そのお店を12人、4つの課題、10問のアンケートで試したユーザビリティテストの結果と、ページを調べて数字を読む短いスクリプトがあります。

これは攻撃のラボではありません。どのコピーもインターネットにも、ほかの生徒にもつながっていないので、何かをダウンロードすることも、中のものがほかの人に届くこともありません。お店は作りものです。本物のお店ではなく、直すためのページです。

生徒が学ぶこと

ユーザーと同じ目でページを見ること。背景に対する文字のコントラスト比、画像の代替テキスト、入力欄のラベル、リンクの言葉、フォーカスの枠、ボタンの大きさです。そのあと、ユーザビリティテストを読むこと。pandas で課題ごとの成功率と時間の中央値を出し、課題ごとのミスを数え、10問のアンケートが一人ひとりとグループにつける得点を見ます。最後に、ページを直し、ライブプレビューで変更を確かめ、監査をもう一度実行して裏づけること。ユーザビリティ、ユーザー体験、アクセシビリティの入門に向いています。正確な文言は、お使いの認定団体の単元で確認してください。ここでは引用していません。

ブラウザーで実行する

ラボはサービスをひとつ、jupyter だけを起動します。お店のページ、テストのデータ、メモ、ノートブック、短いスクリプトを作業フォルダーに書き出し、お店はそのフォルダーから配信します。ラボのページからは2つのリンクが開きます。ひとつは JupyterLab で、生徒がお店のファイルを編集し、スクリプトを実行する作業の場です。もうひとつは Preview（プレビュー）で、お店そのものです。変更を保存したら、生徒はこれを更新します。JupyterLab はトークンを求めません。プラットフォームの入口が、すでに誰が開いているかを知っているからです。ラボのそばのターミナルには自分の Python がないので、docker exec jupyter のあとに実行したいコマンドを付けて、ラボの Python を使います。

  1. コンテナーのページを開く. バーの「つくる」を開き、「コンテナーを実行」を選びます。ページは誰でも開けて、Git ラボと SQL ラボはアカウントなしで起動できます。ほかのラボには無料アカウントが必要です。アカウントを作成してサインインし、「起動」を押します。
  2. ラボを探す. 「サンプルラボ」のカードにすべてのサンプルが並んでいます。ユーザビリティテスト：ウェブショップを調べるを探します。
  3. 「起動」を押す. 「起動」はそのまま1回の操作で実行します。「先にファイルを編集」は compose ファイルを開くので、起動する前に変更できます。
  4. 開く. ラボのページのバーには2つのリンクがあります。JupyterLab を押すと作業の場が、Preview を押すと別のタブでお店が開きます。次に「ターミナルを開く」を押し、docker exec jupyter python3 steps/audit.py と入力すると、2つのページにある問題の数が表示されます。

生徒に提出してもらうもの

変更したお店の3つのファイル（index.html、checkout.html、style.css）を、JupyterLab の File、Download でダウンロードして提出します。あわせて、監査とコントラスト検査の出力の前後、そしてテストで見つかった問題のうち最初に直したものとその理由を、自分の言葉で書いた短い文章を出してもらいます。自動採点はありません。文章を見れば、数字を理解したかどうかがわかります。さらに力をつけたいときは、それぞれの修正を、観察者のメモか成功率の低い課題と結びつけ、12人だけではテストにわからないことは何かを書くように求めてください。

このラボの基本レッスン

Usability Testing Basics は、このラボで進める小さなレッスンです。生徒は作業フォルダーの中身を並べて観察者のメモを読み、お店の色のコントラストを調べ、ページを監査し、テストの成功率、時間の中央値、アンケートの得点を読み、ミスを数え、自分で変更を加えたあとにもう一度監査を実行します。

無料の個人アカウントでは、ホームにある Basics モジュールに入っていて、どの学校もライブラリーの Basics フォルダーからコピーできます。わざと小さくしてあります。ラボで進めるレッスンとはどんなものかを先生に見せるためで、残りはラボが受け持ちます。変更したいときは、自分のモジュールにコピーしてください。

GitHub のコード

compose ファイルに Dockerfile はありません。公開されている標準のイメージをひとつだけ使います。Jupyter Docker Stacks の scipy-notebook を日付つきのタグに固定し、特権のない専用アカウントとメモリ 512 MB で動かします。このイメージのライセンスは BSD-3-Clause で、こちらからは配布していません。ファイルは起動時に、固定した種からお店、テストのデータ、スクリプトを書き出すので、どのコピーも同じ数字になり、何もダウンロードしません。お店は、バックグラウンドで動く Python の簡易ウェブサーバーで配信します。限界は正直にお伝えします。お店は3つの小さなファイルで、テストは作りもので小さく、監査が調べるのはよくある問題のいくつかであってすべてではなく、ラボの中にはあなた自身のものを除いてブラウザーはなく、インターネットから何かをインストールすることもできません。ラボを止めると何も残らないので、生徒は先にファイルをダウンロードします。

課題として出す

何を提出するかを課題に書いておきます。

  1. ラボを作る. モジュールで課題を追加し、「コンテナーラボ」のカードを選んでから「GitHub リポジトリ」を選びます。https://github.com/mitsurutech/lab-usability とブランチ main を指定します。compose ファイルは既定の compose.yaml です。変更したい場合は、たとえば別のお店や別のテスト結果を書き出すときは、先にリポジトリをフォークしてください。
  2. 公開して試す. 「公開」すると、確認したコミットに固定されるので、あとでリポジトリを変更しても、すでに出したラボは変わりません。まず自分のコピーを起動してください。
  3. 配布する. ほかの課題と同じように配布します。期限を付けることもでき、課題には何をするか、何を提出するかを書いておきます。
  4. 提出物を採点する. 生徒のコピーを開いて提出された内容を確認し、採点します。足りない場合は理由を書いて差し戻します。

このラボを試す、そして費用

無料の個人アカウントで、このラボの基本レッスンに取り組めます。毎月、ほとんどのレッスンに足りる無料クレジットがあり、カードは要りません。クラスで使う場合、学校は最初の365日間、生徒50人まで無料で、その後は生徒1人あたりの年額です。すべてのラボが含まれ、教職員は無料です。

よくある質問

なぜトークンやパスワードを入力しないのですか。
ラボのウェブページには、プラットフォームの入口を通ってしか届きません。入口はあなたが誰かをすでに知っていて、あなたとあなたのモジュールを教えるスタッフだけを通します。そのため JupyterLab はトークンなしで起動します。ほかの人が届くパソコンでは、このように起動しないでください。
なぜターミナルでは docker exec jupyter を使うのですか。
ラボのターミナルには curl、psql などのクライアントはありますが、Python はありません。docker exec jupyter は、Python とすべてのライブラリがあるラボ自身のコンテナの中でコマンドを実行します。JupyterLab にも、File、New、Terminal から開く専用のターミナルがあります。
ファイルを保存してもプレビューが変わらないのはなぜですか。
プレビューはお店のフォルダーを配信する静的サーバーなので、ディスク上のファイルをそのまま表示します。JupyterLab で保存してからプレビューのタブを更新してください。古いページのままなら、キャッシュを使わずにもう一度更新します。
生徒はテストのデータを変えたり、ページを追加したりできますか。
作業フォルダーの中のものはどれも編集できますが、コピーはインターネットにつながらないので、外から持ってくることはできません。生徒全員に別のお店や別のテストを渡したいときは、リポジトリをフォークし、compose ファイルが書き出す内容を変えて、そのフォークをラボに指定します。