Yandex.Moneyの再設計に取り組んだ方法

私の名前はDaria Kalininaです。Yandex.Moneyでは、インターフェイスの開発を担当しています。 現在、承認されたユーザー向けにサイトの外観を根本的に変更しています（サイトのこのセクションをウォレットと呼びます。実際、これは「インターネットバンキング」です）。 そして、このような視覚的なソリューションにどのようにそしてなぜ来たのか、そして次に何をするつもりなのかについてお話したいと思います。



新しいビューは一部のユーザーのみが使用できますが、ウォレットを持っている人は誰でも直接リンクから見ることができます。







使いやすさのテストと統計分析に関する多くの調査の後、2014年の初めに再設計を開始しました。



Yandex.Moneyの機能は、2014年までに劇的に変化しました。機能が比較的狭い電子財布から、最後の再設計以降、インターネットおよびオフラインでの支払いのための大規模なサービスに進化しました。他の多くの人に。



調査の結果を受けて、多くのプロセスとユーザーインタラクションポイントを作り直す必要があると確信しました。 簡単な例：ポータルの内部ページで、ウォレットの承認されたユーザーは最も人気のあるセクションの1つを見つけることができませんでした-「転送」：歴史的には、ナビゲーションに入れられず、メインページにのみ存在しました。







さらに、調査なしで、サイトの外観が絶望的に​​時代遅れになり始めたことは明らかでした-Yandexでは、デザイナーが積極的に使用し始めた視覚的ガイドラインの新しいシステムで作業が完了しました。



もう1つの前提条件は、（xScriptからNode.jsへの）新しいフレームワークへの移行でした。これは、開発における最も重大な変更の1つです。 実際、再設計とともに、サイトをゼロから書き直しています-ページごと、ページごと。 これが、Yandex.Moneyの再設計が徐々に行われる主な理由であり、一気に急落したわけではありません。 Node.jsのおかげで、ページの現在の実装を維持し、ポータル全体で同時に簡単に編集できるようになりました。以前のように各ページを個別に編集するのではなく、ほとんどがxScriptで実装されていました。



これに基づいて、再設計の目標が形成されました。新鮮でモダンな外観、シナリオの簡素化、サイトの必要なセクションへのパスの短縮により、人々はより積極的に戻ってきたいと思います。 再設計の作業は、最初のコンセプトスケッチが描かれ、新しいアイデアが議論された昨年の春に始まり、現在も継続されています。 そして今-まず最初に。

ナビゲーション：整理整頓

ユーザーに基本的なサービスと支払い取引への迅速なアクセスを提供したかったので、ナビゲーションの再設計から始めました。 ウォレットは、単なるユーザーアカウントよりも複雑なシステムであり、リンクされたカードや発行されたカード、数種類のパスワード、識別ステータスなどを管理する多くの追加のプロパティと設定があります。 ナビゲーションを論理的に2つの部分に分割する必要があると判断しました。1つはウォレットの設定を管理するためのすべてで、もう1つはお金の操作（支払い、振替、視聴履歴など）です。



Yandexサービスは通常、ヘッダーにカスタム設定を配置します。 たとえば、Yandex.Musicヘッダーの[マイミュージック]ボタンまたはYandex.Marketの[マイマーケット]ボタン。











したがって、最初のアプローチでは、「マイウォレット」ボタンもヘッダーに表示されました。 同時に、ユーザーのウォレットに関する最も重要な情報-彼の残高-は表示されたままになっているはずです。 また、ウォレットに直接関連する主な操作-お金の補充と引き出し-も表示され、簡単に見つけることができます。 設計は急速に拡大し、非常にかさばりました。







「マイウォレット」ボタンを削除することにしました。これを残高と組み合わせました。これはウォレットの隠phorのようです。 銀行カードのアイコンが残高の横に配置されました-アカウントにリンクされているユーザー向けです。







このフォームでは、ユーザー向けの新しいヘッダーを開始しました 。 しかし、彼らはすぐに、残高との比phorが機能しなかったことに気付きました。財布の設定に入るために残高をクリックする必要があることを誰も理解していませんでした。 小さくても非常に効果的な廊下のユーザビリティテストを実施した後、編集をさらに繰り返しました。バランスの横にウォレットアイコンを追加し、ドロップダウンメニューを示す矢印を追加しました。







矢印が驚異的に機能することが判明しました:)ウォレット番号やその他の設定の場所についての質問の数は、急激に減少しました。 サイトでの検索クエリの統計も同じように減少しました。



現在、このユニットの改善を続けています。たとえば、小さな画面の場合、「補充」および「削除」ボタンをきちんとした「+」および「-」に折りたたみます。







クリックマップを分析した後、ウォレット設定のドロップダウンメニューで、ほとんどの場合ウォレット番号の先頭をクリックします-明らかに、それを選択してコピーします。 ここでは、ウォレット番号をクリックして自動コピーを追加する予定です。







ナビゲーションを2つの部分に論理的に分割するという概念を開発して、左のメニューにすべての主要なサービスを残しました。転送、商品とサービスの支払い、支払いを受け取るためのツールです。



コンセプトの最初のバージョンでは、すべてのメニュー項目をアイコンで表示しました。







次に、サービスとユーザーアクションの履歴を分離しようとしました。別の中間バージョンを取得しました。







その瞬間、Yandex検索の検索フィルターもアイコンとして表示されました-ユーザーを混乱させる可能性があると判断したため、アイコンを放棄し、テキストメニューを使用してクラシックバージョンに落ち着きました。







新しいナビゲーションの開始後、主要なアクセントを付けたいサイトのノードページへのトラフィックが大幅に増加しました。 「翻訳」リンクが最もクリック可能になりました-翻訳サービスを別のエンティティとして開発し、他の同様に重要なブロック用に、以前は翻訳の形式で占められていたメインページのスペースを解放できることに気付きました。

登録：少ないステップ、より多くのオプション

サイト訪問者を登録ユーザーに変換することは私たちの主なタスクの1つであるため、登録をできるだけ短く簡単にするようにしました。 2年前、ユーザーは3つのステップを経て登録を正常に完了しました。1年前、このパスを2つのステップに減らしました。







プロセスから余分なフィールドを削除し、視覚部分を更新しました。新しいデザインのすべてのフィールドとコントロールを再描画しました。 統計を分析した結果、ソーシャルネットワークを介した認証を持つユーザーに十分な注意を払っていないことがわかりました-そして、ソーシャルネットワークを介した登録の数が5倍に増加したため、ソーシャル認証のボタンを最初から上げました。 さらに、新しい登録により、電話番号をログインとして使用できるようになりました。 その結果、登録のコンバージョンがほぼ2倍に増加します。



ここで、再設計する各プロセスを慎重にレビューし、ユーザー向けに他に単純化できるものを探していることを個別に指摘したいと思います。 支払いサービスは、非常に分岐した複雑なメカニズムであり、多数の内部制限があります。 それらの多くは、適切なセキュリティを維持し、法的および規制要件を遵守するために必要です。 このようなシステムに、ユーザー（および設計者）に明らかなソリューションを実装するのは必ずしも容易ではありません。



たとえば、個人間の送金では、パスポートデータを要求する義務があります。これは法律です。 これを行うために、ユーザーの出身地、支払い方法、支払い履歴、識別ステータス、銀行カードを発行したかどうか（パスポートデータを既に入力した可能性がある場所）-チェックの結果に基づいてシステム全体を決定するシステムを開発しました特定の瞬間に追加情報を要求するかどうかを決定します。 その結果、当社のWebサイトのユーザーは、支払いごとにパスポートデータを入力するのではなく、一度だけ入力します。



UXの改善が難しいセキュリティ制限の例は支払いパスワードです：ワンクリックで設定を記憶するのではなく、ウォレットのすべての重要な操作に対してそれを要求します（さらに、すべてのクライアントがSMSまたはアプリケーションからのワンタイムパスワードを使用することを強くお勧めします、よりシンプルだが安全性の低い永続的なパスワードの代わりに）。 しかし、ここでは、「あなたはあなたです」という確認と確認の自動化に取り組んでおり、最終的にはセキュリティ要件を遵守しながらサービスとのやり取りが簡素化されます。

許可されていないユーザーのホームページ

別のプロジェクトは、初心者向けのページの再設計でした-初めてサービスに来て、それが何のためで何ができるかを理解したい人。 実際、Yandex.Moneyは電子通貨であり、多くの便利な機能を備えた電子決済サービスではないと多くの人が信じています。 誤解を覆すことが重要であることは明らかです。



更新されたページの最初のバージョンは、「各サービスには独自の画面があります」という原則に基づいて構築されました。 それぞれのサービスの独立性を示したかった：振替、サービスの支払い、支払いの受け取り、そして最後に、財布、支払い情報の別個のエンティティとアグリゲーターとして。 一部のサービスでは、個別のログインページも作成されました（たとえば、「City Payments」-サービスの支払いのためのサービス）。







少数のオーディエンスでページをテストした結果、このようなソリューションでは登録数が増えないことがわかりました。長さはユーザーの焦点を大きくぼかすことになります。 次に、不要なものをすべて削除し、登録への直接の移行とウォレットボーナスの簡単な説明のみを残しました。 他のサービスへの移行（サービスの支払い、振替、支払いの受け入れ）は、視覚的にバックグラウンドで削除されます。







このページの2番目のバージョンを起動した後の登録の増加は8％でした。 実験の結果、再設計のアプローチが正しいことが確認されました。ユーザーにすべての機能を同時に表示する必要はありません。主なものを強調表示し、強調を正しく設定する必要があります。

支払いスケジュール：ユーザーのニーズに焦点を当てる

再設計の次の大きなステップは、アクティブユーザー向けのメインページでした。 このプロジェクトでは、ユーザーがサイト上を移動する主な方法、最も一般的なアクションと訪問したページを慎重に研究しました。 そして、彼らは最も要求の厳しいものすべてを手に入れました：履歴、支払いの詳細、設定の有無に関係なく、すべての入金取引



メインページのメインコンセプトは、支払いライン、「タイムライン」に縮小されます。 以下は時系列での支払い履歴です。 上記は「将来の支払い」です。お気に入り、自動支払い、リマインダーが設定されている支払いです。 それらの中間には、ユーザーのプロファイルに基づいた推奨事項があります。「実際の」ユーザーに今すぐ提供したいものです。



最初のバージョンの1つでは、タイムラインイベントが「引き付けられる」線の色を変更することにより、これら3つのブロックを分離しようとしました。







それを見て、ヘッダーがなければ、私たち自身がどのブロックを知っているのかを知りました-何について、ユーザーは明白ではないでしょう。 ヘッダーを追加し、すべてのブロックを1つにマージして、「実際の」ブロックを色で強調表示しました。







ただし、ここで推奨事項を強調表示するこの方法は、個々の操作にカーソルを合わせると黄色の強調表示と競合することを忘れました。次のアプローチでは、タイムラインブロックを再度分割しましたが、ヘッダーは保持しました。







ページの一般的な構造とともに、ユーザーとHistoryブロックの相互作用を考えました。 Old Historyは、Excelに似た1つの大きなスプレッドシートです。







最新のオンラインバンキングの支払い履歴と同様に、コンパクトテープに再フォーマットしました。 到着と費用は色で分けられ、日付はより読みやすくなりました。







以前は、ユーザーが支払い名をクリックすると、支払いの詳細が記載された別のページに移動しました。 新しいアプローチでは、メインページからユーザーを撤回したくありませんでした。タスクは、支払いのすべての詳細をここに表示することでした。 最初のアプローチでは、Yandex.Diskによって提案されたソリューションを使用しました-左の列には追加データがあります。 しかし、コンテンツがページの幅全体に配置されているドライブとは異なり、情報は左側に集中しています-このソリューションを試した後、ワイドスクリーンではこの状況が少なくとも奇妙に見えることがわかりました。







2番目のアプローチでは、この列をタイムラインと組み合わせましたが、幅と質量が同じであるため、互いに競合し始めました。







また、ポップアップウィンドウに詳細を表示するというアイデアも拒否しました。そのようなウィンドウは、支払いの詳細のみにユーザーを集中させるためです。 そして、ユーザーがタイムラインと対話するのを妨げないように、追加情報が必要でした。







最終バージョンは、タイムラインの横にある別の「島」で、支払いに関する必要な情報をすべてコンパクトに配置しました。 古い支払いの詳細では目立たないリンクで表示されていたすべてのターゲットアクションも、ここで実行されました。







タイムラインで最初に思いついたチップの1つは、関連する操作（支払いや返品など）をメールの「会話」などのチェーンに統合することでした。 古い履歴では、支払い詳細の相互参照を使用したリンク、新しいページで開かれたリンクを実装しました。 新しいコンセプトでは、タイムラインの周りのすべての詳細を表示し、ユーザーをどこにも連れて行かないようにしたため、相互参照は奇妙な効果をもたらしました：ある操作の詳細でリンクをクリックすると、タイムラインは過去の関連する操作にスクロールバックし、ユーザーは文字通り過去になります、リンクをクリックする前に私が見たものにフォーカスを失います。 したがって、支払いをチェーンに結合しました。発生した時間に関係なく、関連するすべてのトランザクションが並べて表示されます。







「接着」により、とりわけ、リンクされたカードによる支払いの技術的特徴に関連する混乱からユーザーを解放することができました。 このような支払いは、技術的には2つの操作に分けられます。カードによるウォレットへの補充と、ウォレットから店舗への支払いです。 古い履歴には、両方の操作が一貫して表示され、多くのユーザーが困惑していました。 これで、タイムラインで主な支払いがストアに表示され、アカウントの技術的な補充は関連する一連の操作に隠されています。



時折タイムラインに表示される可能性のある別のブロックは、ユーザーからのアクションを必要とする着信操作です。たとえば、保護コードによる確認を待っている安全な転送です。 メインページでは、マーカーカウンターを備えた追加の上部ブロックにそれらを表示します。











シナリオの設計と並行して、アイコンのシステムを作成し、新しいインターフェイス要素を描画し、ブロックの相互作用の強調とルールを作成しました。ここでは、主にYandexの視覚的ガイドラインシステムに依存しました。 いくつかの困難な時期に、当社のデザイナーが独自のソリューションを発明し、それが他のYandexサービスに提供されました。 たとえば、多くのシナリオでは、複雑なフォームに記入することを推奨しており、ガイドラインフォーム要素の標準セットでは十分ではありませんでした。そのため、「疑似フィールド」（以前のユーザーアクションに基づいて値が自動的に入力されるが値を調整できるフィールド）またはアイコン付きの複雑なドロップダウンリストを取得しましたおよびグループ化。











履歴、推奨事項、リマインダーがまだない新規ユーザー向けに、個別のナビゲーターページを作成しました。これにより、ウォレットを快適に使用でき、最も人気のある機能が紹介されます。

次は？

再設計の前提条件と目標に戻ると、更新されたウォレットはユーザーの個人スペースの機能をより良く実行し、その設定、習慣、支払いパターンに合わせて調整されます。 そして、ウォレットから成長した決済サービスは、すべてのユーザー（ウォレットからそれらを使用するユーザーと外部からサイトにアクセスするユーザー）のニーズを考慮して、独立して開発する機会を得ました。



今年は、アイデアやスケッチから、サイトの最も重要な部分の再設計の完全な実装までの長い道のりを歩んできました。 上記に加えて、転送の形式を完全に書き直しました（これについては別の話をすることができます-この形式には非常に多くの紛争とアプローチがありました！）、 支払いを受け取るためのソリューションのデザイナーは 、 Yandex.Kassa Webサイトを立ち上げ、将来の再設計をサポートする他の多くのマイナーな改良を行いました。



今後は、サイト上のすべての商品とサービスの支払い方法の再設計、支払いプロセスの簡素化、カードのリンクやアカウントへのアクセスの復元など、すべての非支払いプロセスのレビューが行われます。 移動するほど、更新されたサービスはより統合され、便利になります。 建設的なフィードバックをお待ちしています。