「私はセラピストまたは心理学者になりました」-UXテストとモバイルインターフェイスに関するVitaliy Fridman

フロントエンドベンダーは、 Vitaliy Fridman （ Smashing Magazineの共同設立者）を長い間知っており、高く評価していますが、この名前はモバイル開発者やテスターに​​はあまり知られていません。 しかし、最近、HolyJS 2018 Piter のレポートのトップで一度に2つの場所を獲得したVitaliyは、新しいレポート「Extremes of testing：tricks from dark corners from mobile interface」でモバイル会議とテスト会議に参加しました。

そのため、 HeisenbugとMobiusを見越して、UXテストとモバイルインターフェイスについて質問しました。SmashingMagazineで具体的にどのようにテストが実行されるか、そしてスマートフォンまで。

-質問は、UXテストに深く没頭していない人向けです。テストに関係しますが、これはかなり独特で孤立した領域であると正しく理解できますか？ 単体テストは緑または赤のいずれかであり、ここに重要事項があります。

「まさに」 私が実施するテストでは、「緑」または「赤」とは言えません。 ここには多くの主観があります。異なるユーザーは、ある程度の偏見を持ち、他のサイトで学んだスキルを持っています。 たとえば、人は交換Webサイトまたはニュースサイトにのみアクセスできます。 彼がインターネットとインターフェイスを見る方法は、私たちと他の人々の両方とは大きく異なります。 したがって、このようなコンテキストでは、特定のサイトのターゲットユーザーを調査し、訪問した他のサイト、その使用方法、習慣を確認することが非常に重要です。

最も難しいのは、誰かが好きではないが誰かが好きではないかもしれない主観的なもので、アイデアがさまざまなユーザーに届くように、インターフェイスで客観的なものを選択し、誰もがそれをどのように行うかを理解しています。 むしろ「よく」行われたものではなく、良い回復経験を持つものを見る必要があります。

つまり、ユーザーが別のユーザーエクスペリエンスを使用してサイトでミスを犯した場合でも、すぐに通常の状態に戻り、どこにいても継続できる必要があります。 これは、たとえばコードカバレッジを完全に提供するのが難しい最も重要な部分です。

だから今、私はわずかに異なる計画の問題を抱えています。 適応エラーのテキストなど、細部をどのように変更できるかを検討します。 カードでの支払いが完了していない場合、それを報告するだけでなく、正確に何が起こったのか、それを修正する方法を言う必要があるとします。

私の仕事はこれらすべての詳細を調べることであり、そのようなプロセスの自動テストは不可能です。 人を見る必要があります。 だから、ある程度セラピストや心理学者になったと思う。 私は常に人々を見て、彼らを観察し、彼らがスクリーンをどう見るか、クリックする場所、クリックしない場所、指やマウスカーソルがどのように動くかに基づいて結論を出します。 これはやや異なる側面で、より抽象的な人間的です。

-「通常の」テストでは、人類はすでにテストなしでも重要であるという結論に達しました。 そして、すべてがより抽象的なUXテストの場合、彼らはしばしばそれに手を振って十分な注意を払っていませんか？

-はい、非常に頻繁に。 問題は、私にとって、UXは常に多数の実験であるということです。 アイデアがあります-それを試して、それがコンバージョンやエンゲージメントをどのように変えるかを確認する必要があります。 多くの場合、問題は、何かを変更してすぐに明らかにできると想定していることです。 しかし、UXでは、その効果はしばしば非常に長く、長期的な効果です。

ポップアップをハングアップして、クリックする人数を確認すると、これは短期的な効果であり、簡単に測定できます。 もちろん、たとえば購入時に重大なエラーがある場合（注文を完了するために何が必要かを理解していない場合）、すぐにこれに気づきます。 しかし、いくつかのものは長い間しか表示されません。

たとえば、機能、製品、またはその目的が何を意味するのかが明確ではないテキストに関しては、いくつかのことがあります。人々がこの機能を使用するか、戻るか、それを捨てるかを確認する時間を与える必要があります。当初彼らは彼女が何をしていたのか理解していなかったからです。 これはクリック率とエンゲージメントメトリックで測定できますが、問題は人々がこの機能を必要としないことではなく、ユーザーにどのように役立つか、いつ使用するかが明確でないことです。 したがって、このプロセスを何らかの形で体系化するために行う唯一のことは、毎週金曜日に少なくとも6人のユーザーと定期的にユーザーインタビューを行うことです。

製品には何らかのバージョンがあり、継続的な展開といくつかの機能があります-インターフェイスで何が起こっているかを人が理解しているかどうかを確認しています。 彼が注文の支払いや必要な情報に切り替えるのは速いですか？ コンバージョンと、インターフェイスで何が起こっているかを人がどのように理解しているかを調べます。彼がチェックアウトで探している情報にすばやく移動できるかどうかです。 これは、何らかの方法で自動化を実行する唯一の方法であり、従来のテストで行われています。

-ITの巨人は、アイトラッキングなどを使用してUXテストに慎重にアプローチします。 しかし、中小企業は「このGoogleは特別な研究所を割り当てる準備ができており、UXテストに干渉する何かがある」と考えているかもしれません。 大きなリソースがなければ、ここで結果を達成することは可能ですか？

-もちろん。 無料のリソースを含め、テストを可能にする非常に多くのリソースがあります。 アイトラッキングは役立つかもしれませんが、難しい状況では。 たとえば、美術館のいくつかの部屋に入る方法を見つけることができないルートの場合に使用できます。 この場合、博物館に行くときに人々がどこを見ているのか、それが非常に見つけやすいと思われるものを見つけられない理由を知ることは有用です。 人々が見るインターフェース、注意を払うもの、見るものを確認できます。

ヒートマップは非常に簡単な方法であり、作成するための多くのツールがあります。 トラフィックを分析してフローを生成し、各ユーザーのビデオを記録できます。ユーザーが行った場所、マウスが移動した場所、マウスが移動した場所、クリックした場所、戻った場所などです。

一方、テストごとにお金を受け取ったテスターのプールから人々を雇い、タスクを与えることができるツールがあります-たとえば、website usertesting.com。 これはすでにはるかに高価です（ビデオテストあたり49ドル）が、興味のある人口統計を選択し、その人に仕事を与えることができます。そこでは、いわゆる「思考プロトコル」が使用されます。 つまり、ユーザーがインターフェイスのメインページにアクセスしてタスクを完了すると、タスクを完了したときに、すべてを理解しているか、自分が見ているもの、このサイトが何であるか、ボタンをクリックしたときに期待することを伝える必要があります。 モバイルデバイス用に6〜7個、デスクトップ用に6〜7個のビデオを収集すると、多くのパターンを見ることができます。 さらに、ユーザーがマウスやタッチパッドを使用してどこを見て、どのように動作するかを注意深く監視する必要があります。

非常に多くの場合、誰かがインターフェイスで何かを理解していない状況があります。 人々はボタンやインタラクティブな要素が大好きです。 彼らはその方向に動き始めますが、それをクリックするのではなく、ボタンの周りでマウスをひねります。 そして、彼らはクリックするだけです。 これは、ボタンをクリックしたときに何が起こるかを人がよく理解していないことの兆候の1つです。 そのようなものは、非常に高価なデバイスなしで簡単に見つけることができます。

「他のタイプのテストの場合、職務の分離のアイデアがあります。」ここでは、開発者にコードの単体テストを記述させますが、手動テスターがそれを行います。 そしてUXテスト-それは誰のケアですか？

-会社の構造に依存すると思います。 欧米の企業は、UXデザイナーやユーザビリティテスターさえ持っていることが多く、これを終日行っていることは明らかです。 しかし、会社が小さい場合、他の人が責任を負います。 フロントエンドデザイナー（JavaScriptではなくUXに近い）がいる場合、そのデザイナーがいます。 また、プロトタイプを扱う人は、別個のユーザビリティテスターがいない場合、そのようなテストを実施する責任があります。

-そして、Smashing Magazineの場合、特にUXテストはどのように行われますか？

-すべてが非常にシンプルです。新しいアイデアが登場するとすぐに、私は個人的に5〜7人の人を集め、面接を行います。

タスクは、情報を見つけるか、支払いを試みることです。 私は彼らの同意を得て、彼らの行動を見て、行動と顔を記録し、各ビデオを非常にゆっくりと見ます。 人がどのように動くのか、マウスを使うのか、どこを見るのか、何に気づくのか、何がそうでないのかを詳しく見るには、1つのビデオに1時間半かかります。

また、ヒートマップを自動的に生成します。ユーザーがクリックした場所に、気付かないものがあります。 このデータに基づいて、インターフェイスを改善し、1週間後に同じことを行っています。 20人未満の小さな会社があります。 大企業では、ほとんど同じように見えますが、いくつかのテストが同時に行われるという違いだけがあります。

そして、ボタン、ボタンの位置、またはページ上のテキストを変更した場合に起こることだけではありません。 テストには2つのタイプがあります。一方で、A / Bテスト-ボタンとその他の小さなものです。 一方、何かを完全に変更しようとすることができます。これはA / Zテストと呼ばれます。 たとえば、設計を完全に置き換えてテストする場合。

似たような色、タイポグラフィがありますが、情報の整理、レイアウト、およびすべてのコンポーネントの配置が完全に異なるという点で完全に異なります。 ボタンの位置を変更するだけで、KPIが何であれ、ローカルの最大値、ローカル変換に到達する可能性が高くなります。 まったく異なる設計により、ローカルの小さな測定では困難な、まったく異なるレベルの変換を実現できます。

-Smashing Magazineで最初に何かをした後、テスト後に大幅に変更したときに具体的な例を挙げていただけますか？

-たとえば、異なる機能を備えた有料サブスクリプションを導入した場合。 3つの関税計画があり、長い間、それぞれの人にどれだけの人が支払うことができるかを考えていました。

そして、多くの読者にとって、これらの計画は完全に不適切であることをテストし、発見しました。 彼ら、特に大企業の人々は、年間計画を必要としていました。毎月7ドルから9ドルの報告を行わないためです。 人々は年次計画を見つけることができませんでした-それは要求に応じていましたが、彼らは単にそれを見つけることができませんでした。 その結果、対応するボタンを追加し、インターフェイスを少し変更すると、人々はそれに気付き始めました。



-モバイルインターフェースの運命に移りましょう。 以前は、モバイルインターネットのシェアがどのように成長しているのか、そしてスマートフォンの販売が伸びなくなった2018年にこれについてはどうでしょうか？

-2018年もこれは続きます。 さらに、今年は非常に重要な年だと思います。今年は多くの転換期があったからです。

小売店、音楽やビデオコンテンツの消費、ラジオなど、私たちが取るものは何でも構いません。モバイルトラフィックがデスクトップトラフィックを超えているのはほぼすべての場所です。 デスクトップトラフィックが劇的に減少しているとは言いませんが、デスクトップトラフィックは増加せず、モバイルトラフィックは非常に増加しています。

モバイルトラフィックは、インド、アジア、アフリカ、南アメリカにのみ来ています。これは、現在のヨーロッパやアメリカよりもはるかに高い成長を遂げています。

そして最後に、モバイルトラフィックは非常に重要です。なぜなら、今年初めてモバイルコンバージョンがデスクトップを上回ったからです。 長年にわたり、マーケティング担当者は、モバイルマーケットへの投資はそれほど価値がないと言ってきました。 今年はすべてが変化しました-現在、モバイルトラフィックほど重要なものはありません。

これは、電話だけでなく、Apple Watch、その他のガジェット、IoTについても同様です。 インターネットに接続された冷蔵庫にも情報が表示される場合があります。 もちろん、会話インターフェイスやチャットボットなどについても話します。これらは主にモバイルでの使用に最適化されています。

-数年前、モバイルファースト（主にモバイルデバイス用のインターフェイスの作成）がUIの流行語になりました。そして、現在の「転換点」は、多くの企業にとってこれが流行語の主流になっているということですか？

「そうです。」 私は現在、会社全体をどのように組織するかについて真剣に考えている会社と仕事をしています。 当初、彼らはモバイル市場を無視しており、デスクトップは15年前から存在している-それは大きな電子商取引小売業者だ。 そして突然、モバイル市場が登場しました。

もちろん、彼らは最適化、レスポンシブデザインを行いました。 これはすでに良好ですが、AndroidおよびiOSアプリケーションがまだあります。 その結果、開発者とデザイナーの大半がデスクトップサイトで作業し、小さなグループがモバイルサイトで作業したことが判明しました。 今、彼らはこの傾向に気付いているので、何を変える必要があるかについて非常に考えています。

デスクトップは安定しており、その場合は成長しませんが、モバイル市場とトラフィックは非常に成長しています。 そのため、すべてのアーキテクチャを変更して、最初にすべてをモバイルから開始し、一部の機能が最初にモバイルデバイスのみに到達し、次にデスクトップに到達するように計画しています。

小規模なチームには今や非常に大きな責任があるため、チームを編成するためにこれが何を意味するのかについて、多くのことを考える必要がありました。 また、インターフェイスだけでなく、組織全体の「デジタル変換」を実現する方法についても、最初にモバイルに移行する方法を検討しました。

彼らにとって、多くの人にとって、これはモバイルではなく、コンテンツが最初である可能性が高いです。 時計、電話、タブレットなど、あらゆるフォームファクターに関する情報を整理する方法について説明します。 組織、フィルター、アクセス可能な方法で情報を表示することに、より多くの注意が払われます。そのため、情報が多すぎないため、ユーザーが使用するのに便利です。 繰り返しますが、これは適切なテストが非常に重要になる瞬間です。

-サイトのモバイル版とデスクトップ用に大幅に異なるインターフェースを作成する価値がありますか？

-私はあなたが非常に異なる必要がある状況があると思います。 たとえば、「夢の台所」をデザインできるIKEAプロジェクトがありました。 このようなプロジェクトは、デスクトップデバイスとモバイルデバイス間で単純に「転送」することはできません。それらの機能は異なります。 デスクトップでは、通常のデスクトップアプリケーションのように見え、モバイルではAR / VRアプリケーションとして見え、3Dでオブジェクトを目の前で直接見ることができます。 これは、デバイスを活用したまったく異なるシナリオです。

そして、古典的なサイトの場合、最も簡単なことは、最小限の変更で1つのサイトを作成することです。 もちろん、これはアプリケーションの存在を排除するものではありません。 さらに、PWA（プログレッシブWebアプリ）の助けを借りて、システムレベルでインストールできるアプリケーションをサイトにすることもできます。 しかし、一般的には、ほとんどの場合、1つのサイトとコードベースを持ち、異なるデバイスで可能な限りそれを使用することが最も合理的です。

-Smashing MagazineもプログレッシブWebアプリですよね？

-はい、サイトをオフラインで使用し、自分をアプリケーションとして追加できます。キャッシュがあります。 しかし、これは特別なことではありません。 また、人がオフラインで購入できるときに、「オフラインeコマース」のようなものを作成しようとしている企業があります。 簡単なことではありませんが、PWAを使用すると非常に優れたパフォーマンスが得られるため、アイデアは優れています。 これは、エラーやサーバーへの継続的なアクセスなしに、迅速に注文する（または少なくとも準備する）ことができることを意味します。

たとえば、gitの場合、ある種のコミットを作成した後、サーバーへのプッシュがありますが、すべての変更は最初にローカルで行われます。 考え方は似ており、かなりうまくいくと思います。 これはPWAの大きな利点です。

-Smashing Magazineには非定型のユーザー統計があります（たとえば、インターネット全体のようにブラウザーの共有がまったく配布されていないなど）。

-3年前、モバイルトラフィックの11％、現在は約22％でした。 正直なところ、これは非常に小さいです。 事実、非常に長い記事があります。 それらを読むのに40-50分かかります。 電話からそんなに多くを読むことは非常に困難です。 現在、サイトのモバイルトラフィックは平均ではるかに多くなっていますが、当社の機能により、この点にはまだ到達していません。

-Artemy Lebedev はモバイルインターフェースを批判し 、「画面が大きいほどインターフェースが優れている」と述べました。 小さな画面への移行により、優れたデザインを作成することがより難しくなったと感じていますか？

-それどころか、美しいデザインを作成する方が便利になったと思います。 私はあらゆる種類の制限の大ファンです。 すべてのプロジェクトには何らかの制限が必要です。 コンセプトを開発するとき、私たちは通常、通常の形式の外側で考えるように強制します。 私たちはデザインを開始し、デザインを思いつき、自分自身に限界を設定します。

たとえば、「このプロジェクトでは、3色以上は使用できません。」 これは、2色のみを使用するという意味ではありませんが、通常とは異なる解決策につながります。 または、三角形、円、正方形を使用しないと言います。 そして、これ以外に何を使用できますか？ モバイルデバイスのサイズはそれ自体が大きな制限です。 そして、私たちは興味深い解決策を思いつきます。

どこでも美しいインターフェースを描くことができると思います。 もちろん、ある時点で問題が発生します。 たとえば、チャットボットには色やタイポグラフィの観点から視覚的なコンポーネントはなく、テキストを送信するだけです。 しかし、そこにも美しさがあります。

時計や小さなデバイス、会話インターフェイスの方向に進むほど、視界が失われ、本質だけが残ります。 , , , , , . , , , . .

— ? , , , . - ?

— , , . , , . , . , — , , . , . , , , .

, . , . , , .

— , , , ?

— , . IKEA. , WebVR, , - , . , , . , , .

, , , mobile first content first. , desktop last. . , Smashing Magazine . mobile first, 1800 , .

. , . . , mobile first, , . , , mobile , . . mobile first and desktop first.

— «» . «» , . , , UX?

— . , . 2% , «» . 98% , .

, . , , . , «» . .

: Heisenbug ( 6-7 ) Mobius (8-9 ). , , , — .