クリーム色の背景、色付き表示、高コントラスト、大きな文字のほうが読みやすいですか?配色と文字を選ぶと、すべてのページに一度で反映されます。

無料レッスン

ユーザビリティの原則とは

このレッスンのあとで: ユーザビリティの原則を使って、画面の問題を判断できる。

50分のレッスンコマンド1件ユーザビリティテストラボ:使いにくいウェブショップを調べ、テストの結果をブラウザーで読む

使いにくい画面の見分け方

ユーザビリティの原則は、画面が使いやすいかを判断するための、決まった見方です。この見方があると、「なんとなく使いにくい」を、直す場所のある言葉に変えられます。

駅の券売機で、ボタンを押しても何も起きず、もう一度押して2枚買ってしまうことがあります。原因は人ではなく、画面の作りにあります。

このレッスンのゴール

メモ

ユーザビリティの原則を使って、画面の問題を判断できる。

重要な言葉

ことばいみ
ユーザビリティ人が目的を、楽に、まちがえずに達成できる度合い
可視性今の状態と、できることが、見てわかること
フィードバック操作の直後に、結果を返すこと
一貫性同じものは、同じ見た目と動きにすること
エラーの予防まちがいが、起きにくい作りにすること

学生が入力するセルは、このプレビューでは空白です。

押したら、何か返ってくるべき

可視性は、今どこにいて、何ができるかが、見てわかることです。フィードバックは、操作の直後に、結果を返すことです。

押しても画面が変わらないと、人はもう一度押します。ラボの店では、買うボタンを4回押した人がいました。

例: 問題と、守られていない原則

場面起きること原則
押しても、何も変わらない何度も押してしまうフィードバック
今、何段階目かがわからない途中で迷う可視性
「削除」と「消す」が混ざる同じ操作と気づかない一貫性
確認なしで、すぐ削除される誤って消してしまうエラーの予防

学生が入力するセルは、このプレビューでは空白です。

観察のメモは、原則を当てはめる材料

ラボの店では、12人がテストを受けました。観察者が書いたメモが notes.md に残っています。

次の Run は、そのメモを表示します。メモは英語で、8人分が1行ずつです。読みながら、どの原則に当たるかを考えてください。

観察者のメモを読む

コマンド
docker exec jupyter cat notes.md

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

同じものは、いつも同じに見せる

一貫性は、同じ意味のものを、同じ見た目と言い方で出すことです。ある画面で「購入」、別の画面で「買う」と書くと、人は別の操作だと思います。

エラーの予防は、まちがいを起こさせない工夫です。削除の前に確認を出す、日付を入力させずに選ばせる、などがあります。

よくある間違い

注意

多くの人は、原則を守れば必ず使いやすくなると考えます。原則は、問題を見つけるための見方です。直ったかどうかは、人に試してもらうまでわかりません。

問題は、場面と原則の組で書く

評価では、見つけた問題を一文で書きます。書くのは、「どの場面で」「何が起きたか」「どの原則に当たるか」の3つです。

例: 「支払い画面で、エラーが番号だけで出る。意味がわからない。フィードバックの問題」。この形で並べると、直す順番も決めやすくなります。

さらに挑戦: 身近な画面を評価する

毎日使うアプリや券売機を1つ選んでください。守られていない原則を、1つずつ探します。

見つけたら、「場面、起きたこと、原則」の形で、3つ書きましょう。1つは、守られている原則も挙げてください。

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

授業で使いますか?このモジュールを学生に割り当てると、教員用ガイド、自動採点つきの課題、学生ごとのラボを使えます。