UX の改善求む ～実践コンテキスト調査 1 ～

Mさんは一年ほど前から、ナチュラルな英語表現や、映画でのセリフの言い回しを学ぶため、
字幕翻訳のオンライン講座を受けているのだが、その UI があまりにすごい。
どうすごいかっていうと、耐えがたいほどのユーザーエクスペリエンスなのだ。
今どき、こんな UI ってあり！？という信じがたい仕様の数々。
まさにシステムの作り手視点で作っちゃった UI のいい例。
教材はいいのに、ユーザビリティが・・・ヒドイ。なんてもったいないんだろう。
誰かこの会社に UX の改善を提案して！！という悲痛な願いを込めて、
ユーザー視点からそのインターフェースの一部始終を暴露しよう。（リアルネタ！）

ユーザーエクスペリエンスを改善のために、まずはユーザーの行動に着目し、
ユーザーの真のニーズを把握することが重要だ。
それにはユーザーの行動に着目するコンテキスト調査法が有効だ。

これは顧客中心のデザインプロセスを提唱したカレン・ホルツブラット氏が開発した手法である。
この調査では、エンドユーザーである協力者を「師匠」と見立てて、
調査者が「弟子入り」するという形をとる。
「弟子」は前提知識のない全くの素人として、
「師匠」に普段行っている仕事の流れを一通り教えてもらう。
既存システムがある場合は、実際に操作をしながら説明をしてもらう。

こうすることによってユーザーの行動と、なぜそのような行動をしているのかを把握することで
インターフェースによって導かれるユーザー行動のプロセス上の課題や、 真のニーズを把握していく。
（くわしい方法は「ソフトウェアユーザーエクスペリエンス設計」をみてね (* ^ーﾟ) ）

ここにコンテキスト調査によって得られた、ユーザー M さんの行動とその行動理由を記載しておく。
UX の改善のし甲斐がものすご～くある案件だと思う。
私が日本にいたなら自分が提案しに行きたいところだが、ぜひ、これを参考に、UX 改善を提案し、
案件を獲得し、UX 改善していただきたい。（ずばり他人頼み ＾＾；）

コンテキスト調査では、実際のユーザーである M さんを『師匠』として、
K さんが『弟子』入りすることで、一通りの行動の調査を行った。
なぜそのように行動するのかという行動理由がとても重要なため、
師匠 M さんには操作をしながら思っていることを口に出してもらい、
師匠 M さんの行動に疑問がある場合は、弟子 K さんが質問を行った。
師匠 M さんの心の声は「――」の後に記載してある。

このオンライン講座では 2 週間ごとに、短編映画などの映像に対して、字幕を作成し、
課題として提出する。
それに対して、添削をしてもらい学習をしていく、といったのが大まかな流れになる。
行動としては「課題を行う」「課題を提出する」と「添削結果を確認する」の大きく 3 つになる。
ここではまず、「課題を行う」についてみていこう。

というわけで、まずは課題を行うべく、M さんは、ブックマークから講座のログイン画面にアクセス。

ログインすると、左にグループ、右に名前（黒塗りつぶし部分）が書かれた画面が表示される

――　課題を見るには「グループ」をクリックすればいいんだったっけかな

弟子K 「なんで『グループ』を選んだんですか？」

師匠M 「いつもこっちに課題の問題が置いてあるんです。
　グループっていっても、別に誰かと共同作業やるわけでもコミュニケーションするわけでもないし、
　そもそも他に同じコースを受けている人が何人いるのかも知らないけどね。
　課題をやるのは、他の受講者もみんな同じって意味なんでしょうかね。正直よくわからないですけど」

「グループ」というのをクリックすると
左には「掲示板（更新順）」右には「コンテンツ（更新順）」と並んでいる。
どちらも「更新順」と書かれているが、「掲示板」と書かれたお知らせは新しいものが上、
古いものが下の新しい順になっており
「コンテンツ」と書かれたもの（課題を意味している）は、古いもの順になっている。

――　（掲示板のお知らせを見て）どれ読んだっけかな、
　　　このタイトルはなんとなく見覚えがあるから読んだのかも。
　　　こっちは読んでないかもなぁ
　　　いったいどれがいつ投稿されたんだろ。
　　　いちいち確認してても遅くなるし、ま、あとでいいや・・・

――　えーと、今回は課題何回目だっけ？たしか第11回くらいかなぁ

M さんが使っている画面は 1920 ｘ 1080 で、画面の広さには十分余裕があるが、
「コンテンツ」は第一回から第五回までしか表示されていない。
右左下の「すべて見る」をクリックすると、一覧が表示される。

表をマウスカーソルでポイントするとその行の色が一応変わるが
ポイントしてもリンクがカーソルが手の形に変わらない。

――　ここ、クリックできたんだっけ？

「第 11 回」の行をクリックすると、次のページが表示される。

――　あ、クリック出来た。

が、画面には「公開待ちのページです。現在閲覧できません」と書いてあって、
右側の項目がグレーになっている。

――　えぇ～。
　　　まだ始まってない回の講座なら、最初からグレーアウトするとか表示しないとか
　　　クリックできないようにしておけばいいのに。

ブラウザの戻るボタンで一覧画面に戻る。

――　今回は第 10 回だっけ、いやいや、9 回だったかな？

いくつかクリックして、今回受けるべき講座は 9 回であることがやっと発覚。

――　やっと見つかったよ。

第 9 回のページには、字幕制作のルールが書いてある。
台詞の長さによって字数制限があったり、
一行に表示する文字数は最大 15 文字などいろいろと字数制限があるのだが
それが書いてある。

――　いつも書いてある説明はほとんど一緒なんだよな。

M さんは、ルールをほとんど読まずに長いページを一番下までスクロールする。

そこには映像と 4 つのファイルのリンクが貼られている。
4 つのファイルを右クリックして「対象をファイルに保存」でローカルにダウンロード保存する。
ところがエクスプローラーでせっかくダウンロードしたうちのひとつを選択して開いて、削除した。

弟子K　 「なんで消しちゃったんですか？」
Mさん　 「今のは、解答書式のサンプルで、毎回同じ内容が書いてあるので
　　　　　　取っておく必要がないんです」

――　んじゃ、始めようっと。

ブラウザに戻り、黒く表示されている映像の再生ボタンを押し、途中まで再生しかける。が、

――　あ、聞き逃した。ちょい戻ろう（映像のプログレスバーを前に戻す）
　　　あ、戻りすぎ（映像のプログレスバーを進め）いや、もうちょっと前だって
　　　あぁ、もう仕方ない、ちょっと前から再生するか。
　　　もー巻き戻すたびにいちいち「バッファー処理中」になって時間かかるなぁ。
　　　・・・あれ、そうだ、ここにビデオファイルあったっけ。
　　　ローカルにダウンロードして再生した方が早いな。

映像の左下部分に小さく表示されている、ビデオリンクを右クリックして、
「対象をファイルに保存」でローカルにダウンロード保存する。

映像とダウンロードした PDF のスクリプトを開くと、M さんはメモ帳を立ち上げ、

『ああああああああああいいいいい』

と『あ』を10個、『い』を5個書いた。
そしてその下に字幕とすべき訳文を書いていく。

弟子K　 「なぜ『あ』とか『い』とか書いたんですか？」

Mさん 　「字幕というのは読みやすいように、字幕の一行は15文字までというルールがあったり
　また台詞の長さによって、一度に表示できる最大文字数が変わってくるので、
　文字数を意識することが大事なんですよ。
　でも、こうしておけば、下に書いた文字の数をカウントしやすくなります。」

弟子K　「なんでよりによってメモ帳なんですか？」

Mさん　「メモ帳であれば、文字間隔が一定（カーニングされない）なため、
　文字数を数えるのに都合がいいんです。
　最後の「い」より、右にはみ出ていれば、15 文字をオーバーしていることがすぐわかるし、
　「あ」は 10 文字の目安になります。こうして文字を数えながら字幕訳を作成していくんです。」

そういって映像とスクリプトを見ながら、訳起こしをして、メモ帳に記入していく。
一通り字幕訳を作成し終わったら、今度は字幕入力専用のクライアントアプリケーションを立ち上げ
別のテキストファイルに保存しておいた、ID とパスワードを見ながら入力する。
ID はテキストファイルからコピーペーストするものの、
パスワードは、テキストファイルを見ながら慎重に入力する。

弟子K　「なんで ID はテキストファイルからコピーしたのに、パスワードは手打ちしてるんですか？」

Mさん　「パスワードはなぜかコピーペーストできないんですよ。
　高いセキュリティを必要とするアプリでもないのに、
　毎回毎回覚えにくい長い ID とわかりにくいパスワードを
　いちいち入力しなきゃ使えないなんて、めんどくさいんですけどね。
　せめて ID とパスワード保存できるようにしてほしいや。」

ログインに成功すると、課題一覧が表示されるので、今回行う課題番号を選ぶ。

――　えーとぉ、今回は第 9 回だったっけ？
　　　間違ったらやっかいだから、確認しておくか。

弟子K　「なんでやっかいなんですか？」

Mさん　「選択を間違えるといちからアプリを立ち上げなおさなきゃいけないんです」

作業中のスクリプトの PDF ファイルを確認し、今やっているのが「第 9 回」であることを確認したうえで、
該当する課題番号の列の右端のボタンを選択する。

すると映像ファイルを選ばせるファイル選択ダイアログが開くので、映像ファイルを選択する。

Mさん　「もしここで課題番号を押し間違えたことに気付いて、戻ろうと、『キャンセル』を押したりすると
　『未対応のフォーマットです』とエラーを出して、おちるんです（強制終了）。
　この場合、アプリケーションを立ち上げ直して、面倒なログインをまたしなくちゃいけなくなります。

また、『キャンセル』を押さなかったとしても、もしもここで間違った映像を選択したりしても、
　選び直しができないため、またアプリケーションを閉じて立ち上げなおすしかないんです。
　間違えるといちいち面倒なんですよ」

正しい映像を選択すると、ローカルにある映像が読み込まれ、左の黒いエリアに映像が表示される。
右のエリアで該当欄を選択すると、左の映像が該当箇所の再生箇所に飛ぶ。
つまり右で19:13を選択すると、左の映像も19秒13フレームの位置に飛ぶのだ。

Mさん　「この映像の下の『Max Characters』の文字数以内の字幕訳を白い欄に入力していきます」

Mさんはメモ帳から一行目の字幕文章をコピーし、白い欄にペーストし、その下の「SAVE」ボタンを押す。
そしてこれを字幕一行ごと繰り返していく。

弟子K　「なんで、このツールで最初から作業をしないで、あらかじめメモ帳で字幕の文章を
　作っておいたんですか？」

Mさん　「それはずばり、しょっちゅうフリーズするから。
　このツールでは、ローカルにある映像を読み込み、
　それに合わせて字幕を作成できるようになっています。
　でも、文字を入力するとか、何か操作をするたびに、なぜかサーバーに通信にいくんです。
　それで、しょっちゅうフリーズします。

いったい何の通信をしに行っているのか。何を通信する必要があるのかさっぱりわかりません。

本来なら、このツールで映像を再生させつつ、字幕訳を入力したいところですし
　おそらく当初の目標はそういう意図で作ったんでしょうけど
　下手にさわるとすぐフリーズするので、できるだけさわらないようにするため、
　あらかじめ字幕内容はメモ帳で編集しておいて、このツールでの操作は
　最小限に抑えるようにしています。」

ということで、左下の白いエリアにふたつめの字幕をコピペする。

――　二行目終わって、三行目を入力・・・

右のエリアの三行目のエリアを選択すると

――　あれ、入力したはずの二行目の項目が反映されていない。

弟子K　 「なんで今入力したはずの二行目は反映されていないんですか？」

Mさん　 「やっちゃった。実はなんとこれ、字幕を入力すると、一行ごと、
　SAVEボタンを押さなくてはいけないんです。
　うっかり、SAVEボタンを押さずに次の行を入力しようとすると、
　入力文字が何も反映されずに『※』になってしまうんですよ。
　だから、慣れるまでは何度も入力しては、『あれ？反映されない』ってことをよく繰り返してました。
　だからここで入力して文章を作るのは、フリーズ以外の意味でも危険なんですよ。
　せっかく作成した文章がボタンを押し忘れると簡単に消えちゃうんですから。」

SAVEボタンを押すと、このように変なダイアログボックスが出てきて、
OKを押すと該当の一行のみを保存できる。
そしていちいちサーバーに通信に行く。

――　この白いエリアはいったい何なんだろう？

一行入力し、いちいち保存するたびに毎回毎回ポップアップでこの変なダイアログボックスが出てきてOKを押さないといけない。

――　うっとおしいなぁ。ある程度入力してからまとめて保存してくれればいいのに。

Mさん　「きっとあまりに落ちやすいため、毎回保存するという仕様になっているんでしょうね。
それでSAVEボタンを押すたびに、毎回毎回サーバーに通信に行ってるみたい」

そういいつつ、試しにネット接続を切ってみたら、
サーバーからレスがない、ログインしなおせという旨の英語メッセージが出てきてアプリが落ちた。

――　また落ちた！
　それに日本語字幕を作成するソフトなのに、なんで中途半端に英語メッセージを出すんだ！
　だいたいまとめて複数行入力して、最後にサーバーに保存しに行けばいいじゃねぇか！！(`皿´)
　オフラインになったなら、ローカルに一時保存しておいて、
　オンラインになった時にサーバーと通信すればいいと思うんだけど・・・
　くっそぅ。またしても、立ち上げ直して、面倒なIDとパスワードを入力しなきゃいけねぇ・・・(〃*`Д´)！

そしてアプリを立ち上げ直し、メモ帳を見ながらIDとパスワードを入力し、
映像を選択しなおす・・・というプロセスを一からやり直す。

――　こんなバカアプリをプロの字幕翻訳者達が使ってるなんて信じられねぇ！！o(｀ω´*)o！

弟子K　「えっ。これって字幕製作現場で使われているアプリなんですか？」

Mさん　「そうらしいぜ。笑っちまうだろ、あんさんよぉ」

残りの字幕を一行一行入力しては「SAVE」ボタンを押していく。
時々フリーズしては・・・やりなおし・・・を繰り返す。
そして、映像の下の「Max Characters」の文字数以上の文字を入力し、SAVEボタンを押すと、

いつものように保存していいか確認するダイアログボックスが出てきた。
OKボタンを押すと、押した後になって、初めて文字数オーバーの警告の
ダイアログボックスが出てきた。（順番おかしいって）

――　あー文字数オーバーしてたか。

文字を打ち直し、カーソルを移動させながら文字をカウントして、「SAVE」ボタンを押し、
変なダイアログの「OK」を押して保存する。

――　やっとできた！

一通り入力したら、左の映像エリアの下の再生ボタンを押すことで映像を再生しながら
白いエリアに入力した字幕を同期表示して確認することができるので流れを確認する。

――　これでだいたいいいかな。

画面右上にある緑色の「Complete」ボタンを押す。

弟子K　「今までデータは保存してきたのに、なぜそのボタンを押すんですか？」

Mさん　「こうすることでサーバー側のデータのステータスが「完了」に変わって、
　必要なデータが作成されるんです」

「Complete」ボタンを押すことで、確認メッセージが出てくる。

――　やたら厳重だなぁ。

「yes」と書いてOKを押す。
終わったら右下のオレンジ色のCloseボタンを押して終了。。。しようとすると、
本当に終了したいかのダイアログボックスが表示される。

――　いつもは意図に反して勝手に強制終了を繰り返すくせに、
　こちらが意志を持って終了しようとするときには、わざわざ確認メッセージボックスが出してくるんかい

で、今度は、また別のWebページ、今のアプリケーションの「ユーザーページ」というのにアクセスする。
ブラウザの記憶機能をつかってログインすると、課題一覧が表示される。

Mさん　「再編集をしたい場合は、該当回数の『コンプリート解除』を押すことで、
　さっきのアプリでまた編集できるようになります。
　これでいい場合は、『提出用ファイルDL』というのを押して、
　テキストファイルをローカルにダウンロードします。」

テキストファイルには、字幕訳と、表示開始、終了時間が記載されている。

この出力テキストのうち、ルビを振る個所を編集する。

弟子K　「なんで、テキストをまたダウンロードして、編集してるんですか？」

Mさん　「さっきのアプリでは、ルビが振れないんです。
　なのでこうして、ルビを振るための記述を、指定の書き方で手動で追加する必要があります。」

ルビを振るための記述を追加し終わると、今度は一番最初にダウンロードした課題解答記入用紙のWordファイルを開く。
そこに、先ほどダウンロードし編集したテキストの内容をコピーぺーストし、
IDと氏名を入力し、保存する。

――　これで提出用ファイルが出来上がった！
　　　ゼェゼェ・・・・・
　　　次は課題の提出だ。

（つづく）

どうだろう、一つの提出用ファイルを作るのに、どれだけグルグルといろいろなアプリを使い、
無駄な動きをしているか、お気付きいただけただろうか。
行動プロセスの改善のしがいがあることまちがいなし！
Mさんの言葉だけではなく、行動とその理由に着目すると、
ものすごく改善の余地があることが見えてくるだろう。