デジタルクリエイティブのインタラクションやUXの「時間制限」の考え方

2019.1.13 CSS

インタラクションやUXの設計において「時間」は重要な要素です。

おそらく細かいフェーズをすっ飛ばして普通にデザインして、コーディングして作ったであろうWebサイトでも稀に、メニューボタンをクリックしてメニューが開くまで、なぜか0.数秒の「間」をあけて動作させているサイトがあります。
実際に触ってみると、どうでしょうか。違和感を覚えるでしょう。

こういう設計を、デザイナーやフロントエンドエンジニアの感性で片付けず、人間の脳が判断する「時間制限」で考えられるよう、おおよその秒数ごとに人間の脳がどのような処理を行うか?をまとめます。

UXのための制限時間その1「約0.001秒〜」

音の途切れに気づく最短時間

短時間の出来事においては、人は視覚よりも聴覚のほうが敏感であるとされています。
脳が音を認識するまでには、鼓膜が振動を耳小骨に伝え、その次へ…と繰り返し、最終的に電気信号を発生し脳へと伝わります。これが高速であるがゆえに、細かい音の乱れで違和感を与えないよう作成しなくてはいけません。

0.005秒:提示された視覚刺激が無意識に影響を与える最短時間

意識化知覚(サブリミナル知覚)の基礎になってる現象です。

例えば、何かの画像を5ミリ秒〜10ミリ秒間見せられると、見たことには気づかないのですが視覚系の下位の部分にはその画像が記憶されます。次回同じものを見たときに、親近感があり見慣れたものを見る感情に近づけることができます。

また、例えば、画像や迫ってくる物体をみたときなどは、意識が理解する前にそれが消えてしまっても、拒否、恐れ、怒り、悲しみ、喜び…といった大脳旧皮質や中脳の反応を呼び起こすことがあります。

ただ、強い制御力を持ってはおらず、本来欲しくないものを欲しい感情に変えることはできません。

UXのための制限時間その2「約0.01秒〜」

0.01秒:タッチペンで書いてるときに画面に表示される軌跡が「途切れた」と感じる最短時間

入力系デバイスの連続した入力に対するリアクションのズレの限界値は0.01秒、と考えられます。

たとえば、タッチペンで線を書くときに、0.01秒以上の途切れが見えないようにするべきでしょう。

0.02秒:短いパルス状の音を続けて聞かせたときに持続音に聞こえる最長間隔

UIの動作によるサウンドフィードバックは0.02秒以上の間があくように設計すべき、と考えられます。

たとえば、細かいクリックに対し「カチッ」という音が長く鳴ってしまっては、連続した1つの音として認識されてしまうため、適切なフィードバックとはいい難いということです。

UXのための制限時間その3「約0.1秒〜」

視覚が出来事をとらえてから全体的に知覚するまでの時間

光が網膜に到達してから、その光によって起こった神経のインパルスが大脳皮質に到達するまでに約0.1秒かかります。つまり、僕たちが意識している世界は実世界より0.1秒遅れていることになります。

しかし、その遅れは0.1秒未満であれば脳が補完して適正に解釈できます。
たとえば、草原をウサギが走っているシーンを見たとします。脳の認識と比べ、0.1秒ウサギが先を行っている(認識が0.1秒遅れている)のですが、見ている景色としては脳が補完しているため遅れていません。なのでウサギを狩りで仕留めたい場合にはそれが可能なのです。

実務で言うならば、たとえばマウスを動かしている最中に0.1秒以上の遅れがある場合は、知覚とのズレが明確になるためユーザーは違和感を覚えます。入力系の動作に対する連動は0.1秒以内に行われるべきと考えることができます。

出来事や音を知覚の上で強制同期できる許容値

また、音に関しても同じことが言えます。
遠くの方で鳴る太鼓の音はズレて聞こえますが、近づいて聴くと次第にズレがなくなります、やがて、距離と音の伝達スピードの計算上よりも早く、0.1秒未満の遅れになった時点で太鼓を打った瞬間にピッタリ音が鳴っているように聴こえます。ここでも脳が同期しているためです。

サッカードの持続時間

眼球は1秒間に約3回ほど無意識に動いています。これを行うことで1回あたり0.1秒かかり、この間は視覚が抑制された状態になります。
この眼球の動きを「サッカード」といいます。

例えば文章を左から右に読む際、捉えている文字の左右にある文字を、眼球は高速で移動しています。このように、眼球は無意識のうちに高速で動いており、この動きを「サッカード」といいます。
1秒間に約3回ほど、1回あたりに0.1秒ずつとどまっては動いてを繰り返しています。動いている間は空白ではなく

約0.14秒:ある事象がほかの事象を引き起こしたと知覚される間隔の最長

「Aをおこなって起こったB」
この因果関係を認識できる最大の間隔です。

文字を打っている場合、打った文字が表示されるまでに0.14秒以上かかると、文字を打ってる感じがしなくなります。よって注意は文の意味からそれて、タイピングをすること自体に向いてしまいます。

UXのための制限時間その4「0.2秒」

視覚に入った4個ほどのものの個数を数えずに認識できる時間

例えば硬貨を一度に4,5枚並べたとして、その枚数は見ただけで認識できるでしょう。

ただ、その個数が許容量を超え増えるにづれ、1つにあたり50ミリ秒かかるとされています。
それでも数えるよりは速いので、多すぎて数える必要が発生しないことがベターと考えることができます。

脳が出来事の存在や順序を編集する時間

脳は約0.2秒の枠で出来事を切り取って、その間のさらに細かい出来事を組み立て直して理解することがあります。

例えば、スクリーンに点を投影します。その点を消し、0.2秒以内に別の場所に投影します。
それを見た僕たちは「点がもともとあった場所から別の場所に動いた」と、知覚を再構成します。
これが0.2秒以上間があいてしまうと連続性がなくなり、別の出来事と認識してしまう、ということです。

0.25秒:視覚に出現した物体の名前がわかるのにかかる最短時間

UXのための制限時間その5「0.5秒〜」

物体を認識したあと、他の物事に注意を向けられなくなる時間

人間は自分の注意を引きつけるものや人を目にしたり、音を聞いたりすると0.5秒間は別の物事について音も聞こえず目も向けられない状態になります。これを「注意の瞬き」といいます。

強く主張するインタラクションのあと、ユーザーの注意が他のオブジェクトに向くよう設計する必要があります。また、裏を返せば対象の要素をしばらく固定させることが出来るとも考えられます。

UXのための制限時間その6 「0.7秒〜」

予期しない出来事に対する意識的な反応をするのにかかる時間

視覚系が環境内の物事に気づき→意識的に運動を始動→そして運動系がその運動を実行する一連の流れにかかる時間です。

例えば、赤信号に気づき→車を停止することを意識し→ブレーキに足を乗せる一連の流れです。

ちなみに危険を感じて即座に動作を取る場合はこの1/10の時間とされています。
また、加齢やアルコール摂取後など状態にもより値が変化するとされています。

UXのための制限時間その7「1秒〜」

人間同士の会話で、「会話が途切れた」と感じない最長の時間

会話の間に挟まれる「間」の長さです。

これが長い場合、会話が途切れた理由を考えることに注意が向いてしまいます。

対話型のインターフェースやストーリー設計においては1秒までのテンポを意識することで快適な体験の提供に繋がると考えることができます。

UXのための制限時間その8「6〜30秒」

タスク内のタスク(ユニットタスク)に対して注意を向けられる時間

大きな仕事を計画して実行する際に、それをより小さな仕事に分割して考え、取り組んでいるはずです。その最小単位を「ユニットタスク」といいます。そして、6秒〜30秒は、それに対して集中し続けられる許容時間とされています。

それを超える長さを1つのユニットタスク(≒1回の単純な作業)で要する場合は意図的にタスクを分割させる、もしくは簡単に組みなおしてみるべきと考えることができます。

UXのための制限時間その9「10秒」

ユーザーがファイル転送や検索をする際など、「重い」処理を行う場合に、「かかっても仕方ない」と思う時間です。これ以上かかる場合はストレスを与える可能性があります。

そういった場合はプログレスバーで進捗を示すなどのフィードバックを与え、状態の変化を明示的にするべきでしょう。

最後に

今回の記事は

から抜粋しました。

ユーザーが持つ様々な時間制限について書かれている節です。

その他、人間の認知機能について様々な解説があるのでぜひ見てみてください!

 

でわ!

Profile

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。