次のお題はこちらです

WEBデザインとWEBディレクションの話

30分でやる短時間ユーザーテスト

去年くらいからデザイン思考を学びはじめて、(書籍を参考にしながら)部署内で2回ほどスプリントをやった。

SPRINT 最速仕事術――あらゆる仕事がうまくいく最も合理的な方法

SPRINT 最速仕事術――あらゆる仕事がうまくいく最も合理的な方法

思考の仕方や視点はとても参考になる... が、ちゃんとやろうと思うと丸々1週間予定を空ける必要があるので、他の仕事も抱えている身としては若干重たい。 プロジェクトメンバーも2人(エンジニア1名、デザイナー1名)しかいなかったので、もう少し短時間でできる手法を探してみよう、となった。

RITEメソッドを見つける

書籍やネットを漁ったところ、RITEメソッド (Rapid Iterative Testing and Evaluation: RITE)を応用したユーザーテストを見つけた。

RITEメソッドとは

  • 問題発見の精度よりも問題解決を優先する方法
  • 小さいテストを繰り返し、問題が見つかるたびにそれを修正する
  • 1990年代からある古典的な手法だが、応用を入れながら現在も使われている

方法

  1. 1人に声を掛け、ユーザーテストする
  2. 終わったら結果を整理→UI修正
  3. 次の人に声を掛け、2.の内容でユーザーテストする
  4. 終わったら結果を整理→UI修正

…のように、1人のテストが終わった段階でプロトタイプを修正してしまい、修正したものを使って次の人にユーザーテストする。

メリットとデメリット

メリット

  • 数人分のデータが集まるまで待たなくて良い
  • テストが終了した段階でおおよその問題の発見と解決が完了している

デメリット

  • 1人の行動で判断するので、UIの問題なのかその人固有の問題なのかの判断が難易度高い(設計が右往左往するリスクがある)
  • 修正のスピードが求められるため、「高速」だが「軽量」な訳ではない

RITEメソッドの応用事例

厳密なRITEメソッドは高速だけど軽量ではないため、各々応用して使っているところが多い。 調べた範囲では、下記のような応用例を見つけた。

グリー - 10分ユーザーテスト

  • ひとりあたり10分のユーザーテストを3名行なう(10分×3人=30分)
    • 思考は口に出しながら進めてもらう
    • その時に深堀りの質問もする
  • テストが終わった直後、その場で課題まとめ・改善策共有(できればTODOまで落としこむ)
  • 注意すること
    • 事前に観察者にインプットする(情報共有)
    • 被験者に勝手に話しかけない

GoogleAndroid部門

  • 「5人のテストと5回の修正」を1セット(1日でやる)
  • 「3人のテストと1回の修正」を2セット(2日間に分ける)

のパターンを使い分けてユーザーテストを行っている

コーヒーショップ・テスト

  • コーヒー1杯おごるのを条件にテストに協力してもらう
  • 場所はコーヒーショップ
  • 付箋でつくったペーパープロトタイプを5分前後で試してもらい、1人終わったらその場で修正
  • 15~20人繰り返し、テスト終了時にはUI修正が完了する

yagish風ユーザーテスト

元の手法や応用事例を参考にしながら、先日リリースしたサービスの開発期間で試してみた。

rirekisho.yagish.jp

ちょっとずつ軌道修正して、最終的には下記のフローに落ち着いた。 社内のメンバーに声をかけて、計10人ほど実施。

  1. ひとりあたり30分のユーザーテストを3~5人/日行う(操作15分/質問・感想15分くらいの配分)
  2. その日の分のユーザーテストが終わったらチームで結果を整理
  3. 結果から課題を抽出して修正箇所を決め、次のテスト実施日までに対応する
  4. 数日掛けて実施し、課題として上がったUI修正を完了した状態でFix

メモ:

  • 実施人数は計10名くらい
    • 意見が割れたときの判断材料を増やすために、一日のテスト人数は奇数(3か5)
    • 他の業務の合間を縫うなら3人/日くらいがちょうどよかった
  • 操作中は考えたこと・思ったことを随時口にしてもらうように頼む
    • 原則、こちらからは口出しや誘導をしない
    • 迷っていたり同じ行動を繰り返しているのに黙っている場合は、声を掛けて何をしているか(考えているか)を教えてもらう
  • 記録は簡易に取って、誰でも見返せる場所に置いておく
    • 気になったところ(行動・発言)をメモ
    • アクション別に項目分け(デザインスプリントを参考に。出し方は箇条書き程度で十分)
    • 解決すべき課題と修正内容をチェックリストにして書き出す
  • 操作中の動画を撮っておく
    • チーム内で意見が割れたときの見直し用に、操作中の動画を撮っておく
    • ここで困っていた/いやそんなことはなかった…と議論になったとき、記憶頼りにしないため

実際にやってみての感想とか

例えば、

  • 細かい説明なしで、そのサービスの目的(yagishの場合は履歴書の作成〜出力)を一人で達成できるか
  • 「次にどうしたらいいのか」が分からず、操作に迷っているところはないか
  • サービス内の文章や名称は正しく伝わっているか(そもそも読まれていない、別の解釈をされている可能性も)
  • 複雑すぎたり、期待したものと違う結果が出て困惑している画面遷移や機能はないか

は、比較的誰にでも共通することだし、社内メンバーに試してもらうだけでも一定レベルの問題解決ができる。

どんなに配慮していても、使ってもらったらその意図が伝わらなかった...みたいな現象は少なからずあるので、 30分くらいなら時間も都合してもらいやすいし、まずは周りにいる人に声をかけて試してもらうのは全然あり。

もちろん、ターゲット層にヒアリングやテストをするのは大切で、面倒くさがらずにきちんと機会を設けなければいけない。 でも、ターゲットに近い属性でないと意味がないし...そんなの集めているヒマがないし...と、何もしないよりはずっといい。

デメリットを挙げるとしたら、テストする人のスキルと経験で結果が大きく変わりそうなところ。 課題の抽出や解決法の選択を手早く適切にやらないといけないので、日頃から観察力をつけておきたい。

Sassを使って長さの単位をpxに変換

弊社のメインサービス「書式の王様」では、主にMS Officeの書式テンプレートを取り扱っている。もちろん使い慣れているソフトでつくれるのは便利なんだけれど「ブラウザ上でささっと項目を入力して、PDFで書類を出力するサービス」もあったらいいのになーとも(いちユーザーとして)思う。そのためにはブラウザ上でのプレビュー表示/PDF出力の両方に対応できる書類レイアウトが必要なので、実際に試したメモをまとめておく。

WEB上でmmとptで単位指定する

PDF出力時に既存の書類と相違ないものをつくりたかったので、実際の書類でサイズを測りながら、「mm」と「pt」をCSSの単位指定に使ってみた。いつもはpxやremで指定している値の単位を置き換えるだけなので、あまり考えなくてもExcelやWordの元データを再現しやすい。

CSS3からは、長さ(length)に指定できる単位のバリエーションが増えた。すごい。

- CSS: カスケーディングスタイルシート | MDN

要素によって小数点の処理が揃わない問題

ところが、Chromeで見たときに同じ幅を指定しているはずのdivタグとtableタグの端が微妙に揃わない。ぱっと見は気づかないものの、よく見ると右端がちょっとだけずれている。

See the Pen Decimal point when unit of length is set to mm by shellme (@shellme-the-lessful) on CodePen.

mmで指定するとブラウザではpxに換算されるので(1mmはだいたい3.78px)小数点が発生しやすいのだけれど、

  • divタグ: 小数点以下も計算して表示
  • tableタグ: 小数点以下は切り捨て表示

という挙動があるらしい。知らなかった...。

小数点はブラウザ毎に丸め方が違うのでなるべく避けたいし、PDF出力にはHeadlessChromeを使う予定なのでスルーは難しい。かといって都度pxに再計算するのは時間がかかるので、Sass(Scss)のfunctionでpx変換用のオリジナル関数を作成することにした。

Sassのリファレンスを見ながら、px変換用の簡単な関数を試す

@function pixel-mm($var) {
    @return round( $var * 1.33 ) + px;
}

という関数を用意して、

.doc {
  padding: pixel-mm(18);
}

コンパイルすると、

.doc {
  padding: 68px;
}

CSSに出力できる。round()を使うと小数点以下が四捨五入されて整数になるので、前述の小数点問題は解消される。

微妙な点と改善ポイント

上記の方法で一応目的は達成されるけれど、いくつか気になる点が。

  • 単位別に関数を使い分けるのは少々手間だし、期間が空くと忘れそう
  • 単位が増える毎に関数も増殖するのは避けたい
  • 変数に単位(mmやpt)が入っていないので、他のメンバーが見たときに何の関数か分かりづらいかも

そのため、下記の条件でもうちょっといい書き方ができないか調査。

  1. 変数に単位を含めることができる
  2. 単位によって計算を分岐させることができる
  3. 単位が増えたときも簡単に追加できる

方法を調べる

分岐はif関数、変数から単位を取り出すのはunit関数でできるものの、「数値だけ」を取り出す関数は無いらしい。

関数一覧 | Web制作者のためのSassの教科書

でも、「同じ単位同士で除算(割り算)すると単位が出ない」という仕様を利用して数値だけを取り出すハックを見つけたので、これを参考にしてつくれそう。

www.nxworld.net

新しく単位をつけるには末尾に+ pxをつければいけるっぽい。

書き直したSass関数

最終的にこうなった。

@function pixel($var) {
  @if unit($var) == "pt" {
    @return round($var * 1.33 / ($var * 0 + 1)) + px;
  }
  @else if unit($var) == "cm" {
    @return round($var * 37.8 / ($var * 0 + 1)) + px;
  }
  @else if unit($var) == "mm" {
    @return round($var * 3.78 / ($var * 0 + 1)) + px;
  }
  @else if unit($var) == "in" {
    @return round($var * 96 / ($var * 0 + 1)) + px;
  }
}

この関数の場合は

.doc {
  padding: pixel(18mm);
}

.doc {
  font-size: pixel(18pt);
}

みたいな指定で書けるので、最初の関数と比べると初見でも何をしているのか理解しやすい。種類を増やしたときも、@else if...以降をコピペして書き換えればOK。今回はmmとptしか使わないけれど、せっかくなのでcmやinなども変換候補に入れてある。

[PR]ブラウザで書類がつくれるサービスつくりました

そんな試行錯誤を繰り返して開発したサービスが本日リリースされました👏👏👏

rirekisho.yagish.jp

WEBブラウザだけあれば、WordやExcelを持っていなくても、パソコンでも、スマホでも、いつもと同じスタイルの書類が作成できる、無料のWEBサービスです。 今回は、社会にでるときに必ず1度は機会がある『履歴書』をテーマに書式を用意しています。今後のアップデートでつくれる書類の種類や機能も増やしていこうとがんばっているので、転職やアルバイトに応募する際はぜひ使ってみてください。