1.0UX TIMEShttps://uxdaystokyo.com/articlesKim HyunMinhttps://uxdaystokyo.com/articles/author/kim/rich600338<blockquote class="wp-embedded-content" data-secret="93Y35uyKxk"><a href="https://uxdaystokyo.com/articles/quick-time-player/">Quick Time Playerの操作迷いを改善してみた</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/quick-time-player/embed/#?secret=93Y35uyKxk" width="600" height="338" title="“Quick Time Playerの操作迷いを改善してみた” — UX TIMES" data-secret="93Y35uyKxk" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2017/11/ジニーエフェクト.png25601600こんにちは！日本のIT企業でUXデザイナーを行っている金（キム）です。 UX DAYS TOKYOの勉強会のテーマに「Quick Time Player」の操作の改善というものができました。今回はなぜ、Quick Time Playerの操作が迷ってしまうのか？その問題点を洗い出して改善案も含めてご紹介します。 Quick Time Playerの録画した後の終了はどうやる？ 「人力検索はてな」に以下の質問が載せられていました。録画した後に、終了させる方法がわからないという質問です。 何が問題か？自分で再調査してみた 振り返ってみると、私も以前使ったとき同じ経験がありました。その時、録画開始はわかりましたが、録画終了をどうするかが分からなくてすごく迷った記憶があります。かなり前に使ったので、どのように終了をどうしたかが頭に残ってないので再度調査しました。 私が、普段慣れている録画ソフトのUIと流れを確認してみると、赤い録画ボタンを押して録画が終わったらピカピカと点灯する赤い録画ボタンを押すと終了になります。 では、なぜ、Quick Time Playerを使っているユーザーは「迷うのか？」を実際に確認してみましょう。 消えてしまうコントローラーはユーザーを不安にさせる Quick Time Playerの画面収録窓を開いてみると、赤い録画ボタンがありました。 押してみると、全体的な指示が出て、「全体録画」か「ドラッグで部分収録」できるようになっています。ここまでは迷わずにできました。 しかし、録画を開始してみると？！・・・？・・・？？ コントローラーが消えてしまって、一体何が起こっているのか？全然わからなくなりました。録画もできているのかどうかが分からない状態でした。 使ったことのない方のために、実際の画面をキャプチャしました。 なんと、操作ボタンが消えてしまいますね！ 消えてしまったので、次に何をしたら良いのかわからないので難しいです。リテラシーが高い人でも結構のハードルがありそうです。 繰り返しになりますが、そもそも録画が回っているのかが分からない状態ですし、今回の問題となっている”どのように録画を終了するのか”も迷うのは当然です。 終了のタイミングによっては、折角収録した録画を編集しなくてはならなくなるかもしれませんし、保存できなくて消えてしまうのではないか？などの不安も過ぎってしまいます。きっと、ユーザーストレスに繋がるとUIだと感じました。 改めて、今回の問題を定義しますと、録画のスタートと同時に操作パネルが消えてしまったので、終了したい時に、どこで何を行えば無事に保存できるかわからないということです。 ユーザーは短い文章しか認識しない 問題をもう少し深く見てみます。 実は良く見ると、スタートする際のコメントには「収録を終了する場合にはメニューバーの停止ボタンをクリックしてください。」と記載があります。 しかし、ユーザーはこのコメントを完全に読み飛ばしています。長文というわけではないですが、ユーザーは早く収録したいので細かく文字を読んでいません。 開発者の立場で考えると、終了方法について記載しているので大丈夫だと考えてしまうのかも知れません。 きっと、ユーザビリティテストを行っていたらすぐに発見できる内容だったと思うのですが、疑問です。もしかしたら、日本語にローカライズしていることが原因かもしれませんが、各国でユーザビリティテストの必要性を感じた問題でもありました。 まだ２つの問題が残っている 今回はユーザーが長文を認識しないということを提示しましたが、仮に認識していたとしても２つの問題がまだ残っています。 一つ目は、メニューバーの停止ボタンの認識ができていない。という問題です。ユーザーによってはメニューバーという名称の認識もない場合がありますし、停止ボタンがどれか認識していません。言葉だけの説明は凄くわかりにくいのです。上の画像は、実際の終了ボタンですが、すぐに終了ボタンと認識しにくいと思います。 二つ目は、ユーザーの短期メモリです。この画面からユーザーは録画という操作を行いますが、録画する内容のことで頭がいっぱいなので、停止ボタンのことを常に使って覚えていない限り忘れてしまいます。ユーザーの短期メモリも考慮して設計しなくてはなりません。 改良UIを考えてみた Quick Time Playerの問題点がわかって来たところで、改良UIを考えてみたいと思います。 まずは、結果としてユーザーに終了方法をより明示的に示すということが目的となります。 ３つのアイディアを考えてみた 以下は、ファーストアイディアで駄目なものも含まれていますが、幾つかの方法があるということで紹介します。続けて、３つのアイディアの実装するために考えてみました。 録画がスタートしてもコントローラーをずっと表示させ、コントローラーは録画されないようにする コントローラーがどこに格納されたのかジニーエフェクトで示す 開始時に終了ボタンのコントローラーを明示する （１）録画がスタートしてもコントローラーをずっと表示させ、コントローラーは録画されないようにする コントローラー内に表示されない旨を記載します。コントローラーは録画されないということを伝えることでユーザーは安心して使えるでしょう。 （２）コントローラーがどこに格納されたのかジニーエフェクトで示す 現状、録画ボタンを押した瞬間コントローラーが無くなるのが問題です。ここのフィードバックがユーザーに迷わせる部分だと思います。 Macの特徴でもあるジニーエフェクトで表現すればユーザーに次の行動に気づかせることも可能でしょう。 普段慣れているジニーエフェクトを活用してコントローラーがどこに格納されたのかを教えることでユーザーの迷いを防げることができます。 （３）開始時に終了ボタンのコントローラーを明示する 録画開始の際に、終了ボタンのコントローラーがどこにあるかを示すことでユーザーはコントローラーの認識ができるようになります。 その他 ショートカットキー ちょっとハードルが高くなりますが、あるショートカットキーを押すと録画を止めることができるというガイドを提示する方法もあります。 改良UIを考えて感じた開発者の思考 Quick Time Playerの「画面収録」について見てきましたが、開発の立場で考えると画面録画を行っているため、録画をしているという合図を与えるのは難しいかもしれない視点がて出来ました。 ジニーエフェクトも実際に使われている場面があるので、採用出来ない理由があるのだと思います。開発側も悩んで今のようなUIになったかもしれません。 今回、いくつかの改善案を考えてみましたが、どれも何かしらの工夫が必要で、開発者の中では完全にピッタリあった良いアイディアがないから今のデザインのままローンチされているのかもしれません。 ユーザーは開発者の気持ちはわからない しかし、ユーザーは開発側の事情を理解し、考えようとしません。なぜかというと、ユーザーは現在しようとする行動や目的があるため、それを達していくことに夢中からです。 操作が難しいと思ったり、すぐ解決できなかったり、迷って考えてしまったりになると、ストレスに繋がってしまします。 結局、他のサービスを探したりする離脱に繋がることになります。Quick Time Playerの「画面収録」操作に当たって、ユーザーがどう迷わず使えるのか、考えさせないのかを工夫する必要があります。 細かい点ところまでUIを作り込む大切さを知った 　今回のQuick Time PlayerのUIは、開発者の立場で考えると悩ましい点もあることも理解できますが、結果としてユーザーを迷わせてしまっているため、ユーザーの動きに沿った細かいUIの作り込みと工夫が必要だということがわかりました。 これらを汲み取るには、どの段階でもユーザビエリティテストの実施の必要性と細かいところUIデザインまで作り込み必要と工夫が大切だと感じました。 私も今回の事を通して自分のUIにも工夫をするようにと心がけたいと考えています。 まとめ：適切なフィードバックを返そう 　Quick Time Playerの問題点は、ユーザーへ返す「フィードバック」が弱かったためにおこなった問題です。 録画ボタンを押した瞬間、画面収録窓が一瞬でどこかに隠されてユーザーが気が付かないUIになっています。ユーザーの行動に適切なフィードバックを返すことでユーザーが迷わず使えることができます。 　録画を押したとき、画面収録窓がどこに隠されたかを適切なメッセージで教える、普段のUIと同じく赤い録画ボタンが回されていて録画をしている状態という合図を与えることです。 　ユーザーに無駄に考えをさせることはストレスになります。適切な学習や合図のフィードバックを返すことでユーザーは迷わず使えることができます。 ユーザーにわかりやすい、明示的なUIを実装させる 長文はユーザーは読まない 短期メモリを考慮して設計する ユーザビリティテストは絶対に必要