なぜ買わずに帰ったのだろう
お店には、みんなが欲しがるティーポットがあり、値段もほどよく、評判もよいのに、レジの前でお客さんが帰ってしまいます。だれかが失礼なわけではありません。何を押せばよいのかがわからなかっただけです。使いにくいページは、静かにお客さんを失います。それを知る方法は、何人かが使うところを見ることだけです。
このレッスンが終わると
メモ
ページをよくある問題について調べ、ユーザビリティテストの数字を読むことができる。
キーワード
- ユーザビリティ：ページを使って、どれだけ楽にうまく目的を果たせるか。
- アクセシビリティ：目が見えにくい人、スクリーンリーダーやキーボードだけを使う人、小さなスマートフォンを使う人にも使えるかどうか。
- コントラスト比：文字の色と背景の色がどれだけ違うか。1（同じ）から21（白地に黒）まで。
- 代替テキスト（alt）：画像が見えないときに、画像の代わりになる言葉。
- 成功率：課題を最後までやりとげた人の割合。
- 中央値：時間を順に並べたときの真ん中の値。
はじめに：もう知っていること
メモ
頭の中で答えてください。1. 毎日使うページで、リンクはどんな見た目ですか。2. 10人中5人が課題を終えたら、成功率はいくつですか。3. 3、9、4 の中央値はいくつですか。答え： たいてい、押せる色つきや下線つきの文字。50パーセント。4（順に並べると 3、4、9 だから）。
始める前に
メモ
レッスンの上のバーにある ラボを開始 を押し、動いていると表示されるまで待ちます。コンテナはひとつ、jupyter だけで、ターミナルからは docker exec jupyter でその中の Python を使います。JupyterLab は作業の場で、ポート 8888 です。Preview（プレビュー）はポート 8000 で、お店のページそのものです。別のタブで開いてください。下の 実行 ボタンは、それぞれのコマンドをラボのターミナルに、同じセッションの中で順番に入力します。様子を見たいときや自分で入力したいときは、バーの ターミナルを開く（新しいタブ） を押します。
テストは観察から始まる
ls は作業フォルダーの中身を並べます。お店のページ、結果の表が2つ、メモ、最初のノートブック、スクリプトです。cat notes.md は、12人がお店を試しているあいだに観察した人が書いたメモを表示します。プレビューと見比べて読んでください。読みにくい灰色の文字、4回押された「Buy」ボタン、「Error 7 って何？」と聞いた人。メモはまだ数字ではありませんが、どこを見ればよいかを教えてくれます。
docker exec jupyter lsここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
docker exec jupyter cat notes.mdここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
コントラスト：文字は読めるか
このスクリプトは shop/style.css の色を読み、文字と背景の組み合わせごとにコントラスト比を計算します。ふつうの文字には4.5以上が必要というのが、よく知られたコントラストの目安です。本文は白地に灰色で、2.85。低すぎます。見出しは白地に濃い灰色で、15.91。じゅうぶんです。ほかに3組が不合格で、リンクの色は1.89です。
docker exec jupyter python3 steps/contrast.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
監査は、人がつまずくところを数える
監査は2つのページとスタイルシートを読み、よくある4つの問題を数えます。トップページでは、4枚の画像のうち3枚に代替テキストがなく、6つのリンクのうち5つが「click here」や「read more」のような言葉だけなので、リンクを読み上げで聞く人はどこへ行くのかわかりません。支払いのページでは、4つの入力欄のうち3つにラベルがなく、たったひとつのエラーメッセージはコードだけです。スタイルシートには、フォーカスの枠を消す規則がひとつあります。これは、キーボードを使う人に今どこにいるかを示す線です。
docker exec jupyter python3 steps/audit.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
確かめよう
ヒント
入力欄の中の薄い例の文字（プレースホルダー）は、なぜラベルの代わりにならないのでしょう。答え： 文字を入力すると消えてしまううえ、スクリーンリーダーが欄の名前として読まないことがあります。だから、消えないラベルが必要です。
テストを読む：成功と時間
12人がそれぞれ4つの課題を試しました。pandas は課題ごとに行をまとめ、成功率と時間の中央値を出します。ティーポットを探す課題は全員が成功し、中央値は27.5秒でした。むずかしかったのは支払いで、最後の課題を終えたのは50パーセントだけ、中央値は110秒でした。中央値を使うのは、とても遅い人が1人いると平均が大きく引き上げられるからです。
docker exec jupyter python3 steps/tasks.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
テストを読む：アンケートとミス
課題のあと、一人ひとりが10の質問に1から5で答えました。ふつうの採点のしかたでは、10個の答えが一人につき0から100の1つの数字になります。12人の得点は32.5から80.0までで、平均は55.0です。68前後の得点はふつう平均的と読まれるので、このお店はたいていのお店より使いにくいと感じられたことになります。2つ目のスクリプトはミスを数えます。最後の課題が34で、いちばん多いです。
docker exec jupyter python3 steps/sus.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
docker exec jupyter python3 steps/errors.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
直して、効いたかどうか確かめる
問題をひとつ選びます。たとえばフォーカスの枠です。JupyterLab で shop/style.css を開いて直し、保存して、プレビューを更新します。そのあと下のスクリプトを実行します。これは自分では何も直しません。監査とコントラストの検査をもう一度行うだけなので、数字が変わるのは、あなたの変更が効いたときだけです。数字にもプレビューにも表れない修正は、確かだとは言えません。
docker exec jupyter python3 steps/fix.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
よくある思い違い
注意
すべての検査に通るページは使いやすい、と考える人が多くいます。検査はよくある欠点を見つけますが、目的を果たせるかどうかは、実際の課題を試す人たちにしかわかりません。監査は直す欠点を見つけるために、テストはそれが大事だったかを知るために使います。12人では「全員」ではなく「多くの人」と言いましょう。
ノートブックで同じ数字を
バーから JupyterLab を開き、start.ipynb をダブルクリックします。2つの表を読み込み、同じ成功率、時間、ミスをセルごとに計算します。セルをクリックして Shift と Enter を押すと実行されます。最後のセルは、あなた自身の問いの場所です。いちばん遅い人は、アンケートの得点もいちばん低いでしょうか。
最後の確認
ヒント
見返さずに答えてください。1. ふつうの文字について、よく知られたコントラストの目安はどれだけの比を求めますか。2. ラベルなら解決できて、プレースホルダーでは解決できない問題は何ですか。3. 時間に平均ではなく中央値を使うのはなぜですか。4. 監査で問題がなければ、ページが使いやすいことの証明になりますか。答え： 4.5以上。消えずに残り、スクリーンリーダーが読み上げる名前。とても遅い人がいても引き上げられないから。いいえ。実際の課題を試す人だけがそれを示せます。
先生へ
ヒント
このレッスンは、ラボで進めるレッスンの小さな例です。手順と実行ボタンがレッスンで、ラボは生徒ひとりひとりのコピーです。ラボはサービスがひとつで、JupyterLab と、2つ目のリンクで開く小さなお店です。自動採点はありません。生徒は、変更したお店のファイル、監査とコントラストの前後の数字、短い文章を提出します。学習のポイント：1. コントラスト、ラベル、代替テキスト、リンクの言葉、フォーカスは、数字で確かめられる。2. ユーザビリティテストは、成功率、時間の中央値、ミスで読む。3. 修正は、監査をもう一度実行して確かめる。よくある思い違い：監査に問題がないことを、使いやすさの証明と考えること。用意するもの：ラボとブラウザー。ヒント：数字を出す前に、どの課題がいちばんむずかしいか予想させましょう。データは固定した種から作った架空のもので、どのコピーも同じ数字になります。ご自分のモジュールにコピーして変更するか、レッスンビルダーの ラボ メニューで最初から作れます。