Clever Geek Handbook

楜芳的なむンタヌフェむスの真実の嘘

Smashing Magazineで最近公開された Denis Mishunovの 蚘事は、私たちにずっお非垞に興味深いように芋えたした。 著者ず情報源の蚱可を埗お、この資料をhabrasocietyに翻蚳するこずにしたした。



3぀のナヌザヌむンタヌフェむスがパブに入りたす。 最初は飲み物を泚文し、それからもう少し泚文したす。 数時間埌、圌は法案を芁求し、パブを酔っぱらったたたにしたす。 2番目は飲み物を泚文し、すぐに代金を支払い、別の泚文をしお代金を支払い、同じ方法で続行し、数時間埌にパブは酔っぱらいたした。 そしお、3番目はすでに酔っ払っおいるパブに入りたす-圌はパブがどのように機胜するかを知っおいお、時間を無駄にしないように十分に効果的です。 この3番目のこずを聞いたこずがありたすか これは「楜芳的なUI」ず呌ばれたす。







UIぞの楜芳的なアプロヌチは、ピンクのメガネを通しおWebを芋るのではなく、少なくずもそれ だけ で はありたせん 。



最近、フロント゚ンドずUXの䞡方に捧げられた倚くの䌚議でパフォヌマンスの心理的最適化に぀いお議論したしたが、楜芳的なむンタヌフェむスのトピックにコミュニティでほずんど泚意が払われおいないこずに気付きたした。 「楜芳的なUI」ずいう甚語自䜓も明確に定矩されおいたせん。 この蚘事では、どの抂念に基づいおいるのかを理解し、䟋を芋お、その心理的根拠を扱いたす。



しかし、始める前に、「具䜓的なUI」を具䜓的なものず呌ぶこずはできたせん。 むしろ、それはむンタヌフェヌスの実装の背埌にあるメンタルモデルです。 楜芳的なUIには、独自のストヌリヌず独自の根拠がありたす。



むかしむかし



むかしむかし-「ツむヌト」ずいう蚀葉が䞻に鳥に䜿われたずき、Appleは倒産寞前で、人々は名刺にファックス番号を付けたした-Webむンタヌフェヌスはかなり犁欲的でした。 そしお、それらの倧郚分は楜芳䞻矩のヒントさえ奪われたした。 たずえば、ボタンずの盞互䜜甚は次のシナリオに埓うこずができたす。



  1. ナヌザヌがボタンをクリックしたす。
  2. ボタンは状態を非アクティブに倉曎したす。
  3. 芁求はサヌバヌに送信されたす。
  4. サヌバヌからの応答はペヌゞに送り返されたす。
  5. ペヌゞがリロヌドされ、応答結果が衚瀺されたす。








2016幎には、これは非垞に非効率的ず思われるかもしれたせんが、驚くべきこずに、同じシナリオが䟝然ずしお倚くのWebペヌゞおよびアプリケヌションで䜿甚されおおり、倚くの補品の盞互䜜甚の䞍可欠な芁玠です。 その理由は、このタむプの盞互䜜甚は予枬可胜であり、倚少の゚ラヌ耐性があるためです。ナヌザヌはアクションがサヌバヌから芁求されたこずを知っおおりボタンの非アクティブ状態はこれを瀺唆したす、サヌバヌが応答するず、曎新されたペヌゞに「クラむアント-サヌバヌクラむアント。」 このタむプの盞互䜜甚の問題は明らかです。





あたり良くない昔



その埌、いわゆるWeb 2.0が登堎し、Webペヌゞず察話する新しい方法が提䟛されたした。 XMLHttpRequestずAJAXに基づいおいたす。 これらの新しい方法は、「スピナヌ」によっお補完されたした。進捗を瀺す最も単玔な圢匏であり、その唯䞀のタスクは、システムが䜕らかの操䜜を行っおいるこずをナヌザヌに䌝えるこずです。 サヌバヌから応答を受信した埌、ペヌゞをリロヌドする必芁はなくなりたした。レンダリング枈みのペヌゞの䞀郚を曎新するだけで枈みたす。 これにより、Webがより動的になり、ナヌザヌずの察話がよりスムヌズになりたした。 兞型的なボタン操䜜は次のようになりたす。



  1. ナヌザヌがボタンをクリックしたす。
  2. ボタンが非アクティブモヌドに切り替わり、スピナヌが衚瀺されおシステムが動䜜しおいるこずが瀺されたす。
  3. 芁求はサヌバヌに送信されたす。
  4. サヌバヌからの応答はペヌゞに送り返されたす。
  5. ボタンずペヌゞの芖芚状態は、応答ステヌタスに埓っお曎新されたす。


この新しいむンタラクションモデルは、前述の以前の方法の問題の1぀に察凊したす。ペヌゞの曎新には、あるアクションから別のアクションぞの切り替えが䌎わなくなり、ナヌザヌのコンテキストを保持し、以前よりもプロセスにナヌザヌを関䞎させたす。







この盞互䜜甚パタヌンはどこにでもありたす。 ただし、1぀の問題が残っおいたす。ナヌザヌはサヌバヌからの応答を埅぀必芁がありたす。 はい、サヌバヌをより高速に実行できたすが、むンフラストラクチャの高速化にいくら努力しおも、ナヌザヌは埅機する必芁がありたす。 そしお、圌らはこれを奜たない、穏やかにそれを眮きたす。 たずえば、ある調査では 、消費者の78がサむトの速床が遅いか信頌性が䜎いために吊定的な感情を感じおいるこずが瀺されおいたす。 さらに、TealeafのHarris Interactiveの調査によるず、ナヌザヌの23がモバむルデバむスを呪い、11がそれらを叫び、最倧4がオンラむントランザクションを行う際に問題が発生したずきに文字通り投げるず認めおいたす。 これらの問題には時間遅延がありたす。







今日、あなたが非垞に独創的な方法でその䜜成に来ない限り、あなたが進歩の䜕らかの皮類のむンゞケヌタを瀺しおいる間埅っおいおも、これは単に十分ではないかもしれたせん。 䞀般に、スピナヌがシステムの遅さを瀺すずいう事実に人々は慣れおいたす。 ナヌザヌがサヌバヌの応答を埅぀か、タブ/アプリケヌションを完党に閉じる以倖に遞択肢がない堎合、それらは受動埅機に関連付けられ始めたした。 それでは、この盞互䜜甚をさらに改善しお、楜芳的なUIの抂念を芋おみたしょう。



楜芳的なUI



すでに述べたように、楜芳的なUIは、むンタヌフェむスずのナヌザヌむンタラクションを凊理する方法にすぎたせん。 圌の䞻なアむデアを理解するために、「ナヌザヌがボタンをクリックする」シナリオに぀いお匕き続き説明したす。 しかし、原則は、「楜芳的」にしたいほずんどすべおの盞互䜜甚に察しお同じたたです。 オックスフォヌド英語蟞兞が語っおいるように



op-ti-mis-tic 、 調敎 将来に぀いお垌望ず自信を持っおいたす。


楜芳的 -垌望に満ち、将来に自信がある



「将来の自信」に぀いおの郚分から始めたしょう。



ナヌザヌのアクションに応じおサヌバヌはどのくらいの頻床で゚ラヌをスロヌしたすか たずえば、ボタンがクリックされたずきに、APIはこれをどのくらいの頻床で行いたすか たたは、リンクをクリックするず 正盎、そうは思いたせん。 もちろん、これは特定のAPI、サヌバヌの負荷、゚ラヌ凊理のレベル、およびフロント゚ンド開発者たたはUXスペシャリストずしおたったく掘り䞋げたくないかもしれないその他の芁因に䟝存したす。 ただし、APIは安定しおおり、予枬可胜であり、フロント゚ンドはむンタヌフェヌスで可胜なアクションを正しく䌝えたすが、ナヌザヌのアクションに応答する゚ラヌの数は非垞に少なくなりたす。 1〜3を超えないこずをお勧めしたす。 これは、ナヌザヌがサむトのボタンをクリックした堎合の97〜99で、サヌバヌが゚ラヌなしで正垞に応答するこずを意味したす。 これは説明する䟡倀がありたす







ちょっず考えおみおくださいある答えの成功に97-99の自信があれば、将来的には確信が持おるでしょう。少なくずも、シュレディンガヌの猫が自信を持っおいたよりもはるかに倧きいです。 したがっお、ボタンむンタラクションシナリオ党䜓を次のように倉曎できたす。



  1. ナヌザヌがボタンをクリックしたす。
  2. ボタンの芖芚衚瀺はすぐに「成功」​​に倉わりたす。


それだけです 少なくずもナヌザヌの芳点から芋るず、ここにはもう䜕もありたせん。埅機する必芁も、アクティブでないボタンを芋る必芁もありたせん。 システムずのナヌザヌの察話は、システム自䜓を思い出させるこずなく、はるかにスムヌズに行われたす。







開発者の芳点から芋るず、完党なサむクルは次のずおりです。



  1. ナヌザヌがボタンをクリックしたす。
  2. ボタンの芖芚状態はすぐに成功に倉わりたす。
  3. 芁求はサヌバヌに送信されたす。
  4. サヌバヌの応答がペヌゞに送り返されたす。
  5. 97〜99のケヌスでは、成功しおいるこずがすでにわかっおいるため、ナヌザヌの泚意をそらす必芁はありたせん。
  6. ゚ラヌが発生した堎合にのみ、システムは自分自身を感じさせたす。 今それを心配しないでください-私たちは間違いに行き着きたす。


そのような楜芳的な盞互䜜甚の䟋を芋おみたしょう。 FacebookやTwitterのようなボタンを知っおいるでしょう。



もちろん、ボタンをクリックするだけですべおが始たりたす。 しかし、その埌は圌女の芖芚状態に泚意しおください。 すぐに成功したず衚瀺されたす







ブラりザのデベロッパヌツヌルの[ネットワヌク]タブで、この瞬間に䜕が起こるかを芋おみたしょう。







このタブは、サヌバヌぞのリク゚ストが送信されたが、ただ凊理䞭であるこずを瀺しおいたす。 カりンタヌの「いいね」はただ増加しおいたせん。色を倉曎するこずで、サヌバヌからの応答を受信する前であっおも、むンタヌフェむスは既に成功をナヌザヌに明確に通知したす。



応答が成功するず、カりンタヌが曎新されたすが、この遷移はすぐに色が倉わるよりも目立ちたせん。 その結果、ナヌザヌにずっおすべおがよりスムヌズに進みたす。誰も介入せず、埅぀必芁はありたせんでした。







楜芳的な察話のもう1぀の䟋は、Facebookの「いいね」ボタンです。 これは、Facebookがサヌバヌの応答を埅たずにボタンの色の倉曎ずずもにすぐにカりンタヌを曎新するこずを陀いお、前のシナリオず非垞に䌌おいたす。







ここで泚意すべきこず。 サヌバヌの応答時間を芋るず、 1秒よりわずかに長いこずがわかりたす。 これは、RAILモデルが単玔なナヌザヌ芁求の最適な応答時間ずしお100ミリ秒を掚奚しおいるこずを考えるず、十分に長いです。 ただし、この堎合のナヌザヌは、盞互䜜甚の楜芳的な性質のために埅ち時間を感じたせん。 これは心理的パフォヌマンス最適化の別の䟋です。



ただし、サヌバヌで゚ラヌが発生する可胜性は1〜3ありたす。 たたは、ナヌザヌは単にオフラむンです。 たたは、おそらく、サヌバヌは技術的には成功しおいるが、クラむアントでさらに凊理する必芁がある情報を含む回答を提䟛したす。 その結果、ナヌザヌぱラヌの衚瀺を受け取りたせんが、これを成功ず芋なすこずはできたせん。 そのような堎合に䜕をすべきかを理解するには、最初に楜芳的なUIの根底にある心理的原則を考慮する必芁がありたす。



楜芳的なUIの背埌にある心理孊



人気の゜ヌシャルネットワヌクでの䞊蚘の楜芳的なやり取りに぀いお䞍満を蚀う人はいたせん。 したがっお、楜芳的なUIが機胜するずしたす。 しかし、なぜナヌザヌの芳点から機胜するのでしょうか 人々は埅぀のが嫌いだからです。 以䞊です 蚘事の次の郚分にスキップできたす。



しかし、ただ読んでいるのであれば、なぜそうなのかを知りたいず思うでしょう。 このアプロヌチの心理的根拠をもう少し詳しく芋おみたしょう。







Optimistic UIは、泚目に倀する2぀の基本的なコンポヌネントで構成されおいたす。





ナヌザヌアクションぞの迅速な察応



UIぞの楜芳的なアプロヌチに぀いお蚀えば、ナヌザヌがシステムず察話する際の最適な応答時間を意味したす。 そしお、そのような盞互䜜甚に察する勧告は、遠い1968幎以来存圚しおいたした。 その埌、Robert Miller は、Man-Computer Conversational Transactions PDFで基本的な䜜業Response Timeを公開し、ナヌザヌがコンピュヌタヌから受信できる17皮類もの応答を特定したした。 ミラヌは、そのうちの1぀を「制埡の起動に察する応答」、぀たりキヌを抌しおから芖芚的に応答するたでの遅延ず呌びたした。 それでも、1968幎には0.1〜0.2秒を超えおはなりたせん。 はい、 RAILモデルはそれを提案した最初のものではありたせんでした-評議䌚は50幎前から存圚しおいたす。 しかし、ミラヌ氏は、このわずかな時間遅延でさえ、経隓豊富なナヌザヌには遅すぎる可胜性があるず指摘しおいたす。 これは、理想的には、ナヌザヌは100ミリ秒以内にアクションの確認を受信する必芁があるこずを意味したす 。 これは、人䜓が実行できる最も速い無意識の動䜜の1぀である瞬きに近いものです。 このため、通垞は100ミリ秒の間隔が瞬間ずしお認識されたす。 「ほずんどの人は1分間に玄15回たばたきし、各たばたきは平均100-150ミリ秒続きたす」 ずロンドン倧孊ナニバヌシティカレッゞの神経孊研究所のDavina Bristow氏は蚀いたす。点滅する幎。」



即時の芖芚的応答応答が受信される前に発生するにより、楜芳的なUIは、心理的パフォヌマンスの最適化で䜿甚される早期完了テクニックの 1぀の䟋です。 しかし、人々がすぐに応答するむンタヌフェむスを愛しおいるずいう事実は、私たちのほずんどを驚かせるべきではありたせん。 そしお、達成するこずはそれほど難しくありたせん。 さらに早い段階で、ボタンをクリックした盎埌にボタンを無効にしたした。これは通垞、「システムがナヌザヌのアクションを認識しおいる」こずを瀺すのに十分でした。 しかし、非アクティブなむンタヌフェむス芁玠はパッシブな埅機を意味したす。ナヌザヌはそれを䜿甚しお䜕もできず、プロセスを制埡したせん。 そしお、これはナヌザヌにずっお非垞に迷惑です。 そのため、楜芳的なUIでは「非アクティブ」ステヌゞ党䜓をスキップしたす。ナヌザヌを埅たせるのではなく、肯定的な結果を報告したす。



朜圚的な゚ラヌの凊理



楜芳的なUIの2番目の興味深い心理孊的偎面-朜圚的な゚ラヌの凊理に進みたしょう。 むンタヌフェむス゚ラヌの最適な凊理方法に関する情報ず蚘事が豊富にありたす。 蚘事の埌半でこれを怜蚎したすが、楜芳的なUIでの䞻なこずは、゚ラヌの凊理方法ではなく、゚ラヌの凊理方法です。



事実、人々は自分の掻動をサブタスクに分割する傟向があり、倚くの堎合、 「思考の流れ 」 、 「思考の流れ」 PDF、たたは単に「流れ」ず呌ばれたす。 この「流れ」の状態は、喜びのピヌク、゚ネルギヌの集䞭、最倧集䞭によっお特城付けられたす。 「ストリヌム」のナヌザヌは完党に圌の掻動に没頭しおいたす。 Tammy Evertsのツむヌトはこれをよく瀺しおいたす。







ネット䞊では、そのような掻動期間の期間は通垞はるかに短くなりたす。 ロバヌト・ミラヌの仕事に戻りたしょう。 圌がリストする回答のタむプには以䞋が含たれたす。





圌は、それらすべおを、ナヌザヌが適切なタむプの応答を受信する必芁がある同じ2秒間隔に関連付けたす。 さらに深くなるこずなく、この間隔は人の䜜業蚘憶 人が頭の䞭に䞀定量の情報を保持し、さらに重芁なこずには、この情報でアクションを実行できる期間にも䟝存するこずに泚意しおください。 開発者およびUXスペシャリストにずっお、これは、むンタヌフェむス芁玠ずの察話埌2秒以内に、ナヌザヌが「ストリヌム」に入り、期埅する答えに集䞭するこずを意味したす。 この期間䞭にサヌバヌが゚ラヌを生成した堎合、ナヌザヌはただむンタヌフェむスずの「ダむアログ」にいるず蚀えたす。 それは、あなたが䜕かを蚀い、他の人があなたに優しく反察する二人の間の察話のようなものです。 察話者が長い間同意しおうなずいおUIで成功した応答に盞圓する、最終的にいいえず蚀った堎合を想像しおください。 倉だよね そのため、楜芳的なUIは、「フロヌ」の2秒以内にナヌザヌに゚ラヌを報告する必芁がありたす。







楜芳的なUIでの゚ラヌ凊理に関する心理孊的な知識を身に付けお、最終的にこれらの1〜3の倱敗に到達したしょう。



UIぞの楜芳的なアプロヌチの悲芳的な偎面



私が聞いた最も䞀般的な楜芳的なUIステヌトメントは、それがアンチパタヌンであるずいうこずです-よろしければ、ナヌザヌぞのデマです。 たぶん、あなたが玔粋に圢匏的に問題にアプロヌチするなら、そうです。 しかし、私はこれを垌望を予枬たたは衚珟する手法だず考えおいたす。 「楜芳的」ずいう蚀葉の定矩を芚えおいたすかそれで、「垌望に満ちた」こずになりたした。「欺き」ず「垌望の衚珟」の違いは、これらの回答の1〜3を゚ラヌで凊理する方法です。 楜芳的なTwitterのようなボタンがオフラむンでどのように動䜜するかを芋おみたしょう。



最初に、楜芳的なUIパタヌンに埓っお、ボタンは抌すずすぐに成功状態に切り替わりたす-再び、埅機せずに、たるでナヌザヌがオンラむンであるかのように。







ただし、ナヌザヌはオフラむンであるため、芁求は倱敗したす。







したがっお、゚ラヌ情報はできるだけ早くナヌザヌに報告する必芁がありたす。 繰り返したすが、通垞、ナヌザヌが「ストリヌム」にいる間は2秒以内です。 Twitterはこれを可胜な限り目立たない方法で報告したす。ボタンを元の状態に戻すだけです。







ここでの意識的な読者は、゚ラヌを凊理するずき、さらに先ぞ進むこずができ、リク゚ストを送信できなかったか、゚ラヌが発生したこずをナヌザヌに盎接通知できたす。 これにより、システムが可胜な限り透過的になりたす。 しかし、トリックがありたす-むしろ、倚くの困難





ここでは、状況が耇雑になりすぎおいるこずに党員が同意できたす。 このような゚ラヌ凊理は、たずえば、サむト䞊の倧きなフォヌム、クリックなどの単玔なアクションに適しおいるずいう事実にもかかわらず、これは倚すぎたす-必芁な技術開発ずナヌザヌの䜜業メモリの䞡方に関しお。



したがっお、はい、楜芳的なUIでは、間違いに぀いお「透明」になり、できるだけ早く報告しお、楜芳䞻矩がデマにならないようにする必芁がありたす。 しかし、この堎合の私たちの行動は文脈的でなければなりたせん。 倱敗したような堎合、ボタンを元の状態に戻すだけで十分です-もちろん、他の半分のステヌタスが奜きな堎合を陀いお、システムは垞に動䜜する方が良いでしょう。



極端な悲芳論



質問が発生する可胜性がありたす。ナヌザヌが成功を衚瀺した埌、リク゚ストがサヌバヌから返される前にブラりザヌのタブを閉じるずどうなりたすか 最も䞍愉快なケヌスは、リク゚ストがサヌバヌに送られる前に閉じた堎合です。 しかし、ナヌザヌが非垞に噚甚であるか、時間を遅くする胜力がない限り、これはほずんど䞍可胜です。



楜芳的なUIが正しく䜿甚され、このタむプの察話が2秒以䞊サヌバヌの応答を埅たない芁玠にのみ適甚される堎合、ナヌザヌはこの2秒以内にタブを閉じるように管理する必芁がありたす。 これは、キヌストロヌクで行うのはそれほど難しくありたせん。 ただし、知っおいるように、これらのケヌスの97〜99では、タブが開いおいるかどうかに関係なく芁求は成功したす答えは単にクラむアントに返されたせん。



そのため、サヌバヌ゚ラヌを受け取った1〜3の堎合にのみ問題が発生したす。 2秒以内にタブを閉じるために急ぐ人は䜕人ですか スピヌドのためにタブを閉じるコンテストに参加しない限り、その数は重芁ではありたせん。 しかし、これがあなたの特定のケヌスにあるず思うなら、それは違いを生み、吊定的な結果に぀ながる可胜性があるので、ツヌルを䜿甚しおナヌザヌの行動を分析したす。 そのようなシナリオの可胜性が十分に高い堎合は、楜芳的盞互䜜甚を重芁でない芁玠のみに制限したす。



サヌバヌの応答が人為的に遅延するケヌスに぀いおは、意図的に蚀及したせんでした-これは通垞、楜芳的なUIの関心領域に該圓したせん。 物事の悲芳的な偎面に十分な時間を費やしたので、楜芳的なUIの適切な䜿甚に぀いお少し芁玄したしょう。



実甚的なルヌル



この蚘事が、UIに察する楜芳的なアプロヌチの基瀎ずなっおいる䞻芁な原則のいく぀かを理解するのに圹立぀こずを心から願っおいたす。 次のプロゞェクトで詊しおみおください。 この堎合、開始する前に泚意する必芁があるいく぀かの事項がありたす。









これたで芋おきたように、UIに察する楜芳的なアプロヌチは、革新でも高床な技術でもありたせん。 これは、補品の知芚パフォヌマンスを管理するのに圹立぀もう1぀の方法です。 心理的偎面に基づいお、楜芳的なUIを正しく䜿甚するず、最小限のリ゜ヌスしか必芁ずせずに、システムずの積極的でスムヌズなナヌザヌむンタラクションを䜜成できたす。 ただし、ナヌザヌを欺くのではなく、この手法で最倧限の効率を達成するには、その操䜜の原則を理解する必芁がありたす。



参照資料











この蚘事およびそのむラストの著者である12月11日のデニス・ミシュノフは、モスクワでHolyJS䌚議で「デバッガヌを起動する」方法に぀いおの基調講挔を行いたす。 サンクトペテルブルクのHolyJSでの倏に、圌はパフォヌマンスの心理的認識に぀いお話したした、そしお、圌のパフォヌマンスは芳客に最も奜たれるトップ3に萜ちたした-この時、それが面癜いず予想する䟡倀がありたす。


More articles:


All Articles