新しいサービスの出現は、Mail.ru のメイン ページのテストになりました。ユーザーが必要なセクションを見つけるのが難しくなったため、同社はデザインを更新することを決定しました。Mail.ru Group の専門家は、ポータルのメイン ページのモバイル バージョンの変更点、それが解決するタスク、および達成した結果について話しました。
以前のように
数年間の古いバージョンのモバイル ホームページは、期待されていたタスクを完全に解決しました。ユーザーはタブ間を簡単に移動でき、「メール」、「検索」、「ニュース」を簡単に見つけることができます。しかし、新しい Mail.ru Group 製品の出現はますます困難になってきました.それらを現在のバージョンに統合することはより困難であり、ブロック間には断片化がありました。たとえば、「検索」行や「メール」ログイン ウィンドウが悪化し始め、ページのスクロールの深さが低下し、ユーザーはニュース フィードの途中で離れました。 Mail.ruのメインページの古いモバイル版
さらに、Mail.ru ブランドの再設計により、Mail と Poisk は、メイン ページのビジュアル スタイルと著しく異なるようになりました。会社の現在の製品を有機的に整理し、新しいサービスとパートナーの基盤を築くために、主なものを完全に更新する時が来たことが明らかになりました。
計画は次のようになりました。
- Mail.ru システムの新しいデザインに基づいて、メイン ページのビジュアル スタイルを変更します。
- すべてのサービスへのアクセスを便利かつ迅速にします。
- 素材とデザイン方法の個々の推奨事項を通じて、面白いページ ナビゲーションを追加します。
- すべての製品の可視性を維持し、ユーザーがメイン ページから最も頻繁にアクセスする製品 (「メール」、「検索」、「ニュース」) の関心を考慮します。
- すべてのユーザーが快適に過ごせるように、小さな画面のデバイスに変更を適応させます。
どこから始めましたか
製品の UX に大きな変化が生じると、ユーザーにとって問題が発生する可能性があります。新しいデザインへの適応の苦痛を軽減するために、メインのデザインを段階的に更新することにしました。
まず、視覚的なツールのみを使用して、ユーザーの注意を重要な要素に向けることにしました。 最初の UI ページ オプション
最初の段階では、メイン ページの 3 つのバージョンが開発されました。同じブロックのシーケンスが表示されます。上部に「メール」、中央に「検索」、次に広告、「ニュース」です。ユーザーの注意を主要な製品に集中させ、メールや検索から気を散らさないように、最初の画面から優先度の低い要素をすべて削除しました。これらのバリアントでは、UI のみをグローバルに変更し、新しいデザイン システムを部分的に適用しました。つまり、丸みを帯びたブロックとボタン、影を追加し、天気と引用のウィジェットを作成しましたが、多くのアクセント カラーを残しました。
その後、残りのスクロール製品に取り組みました。各ブロックと製品は独自のデザインを獲得し、機能を果たすのに役立ちました。 新しいリボン
たとえば、「Kino Mail.ru」の場合、彼らは暗い背景を作成しました。これにより、マルチメディア コンテンツが認識しやすくなります。ゲームについては、更新が目立つカバー付きの大きなカードを追加しました。チャンネル間の便利な切り替えがテレビ番組に追加され、ユーザーが興味のある番組を簡単に見つけられるようになりました。また、最近、パーソナライズされたレコメンデーション フィードである Pulse を導入しました。新しいメイン ページでは、スタイルを少し変更し、暗い背景を追加してクリック性を高めました。
メインページを変更しながら、実際のユーザーが変更をどのように認識しているかを理解するために、ラボで一連のユーザビリティ調査を実施しました。最初の調査の結果によると、回答者の80％は、広告の場所に関係なく、より明るく魅力的な青い帽子を選択しました。彼らは彼女を残しました。しかし、製品の優先順位付けに関する問題は残りました.青色が多くの注目を集めたため、「検索」が失われました。ユーザーはそれに気付かなかったか、メール アカウントにログインするためのパスワード パネルだと思っていました。
ページUXの変更
ページ構造を再構築する時が来ました。以前の調査と戦略的な製品ビジョンを通じて、最初の画面の構造は、ユーザーがホーム画面を即座にナビゲートできるようにする必要があることを理解しました。 UX 調査のためのホームページのバリエーションUX ラボでのテストでは、さまざまなブロック レイアウトのいくつかのレイアウトをまとめて、ユーザーにとってどの組み合わせがより良いかを判断しました。それらでは、構造を変更しました。つまり、次のとおりです。
- 「検索」は、ページの学習の始まりを意味するため、上部に配置されています。この配置は、一般的にユーザーにとってより親しみやすいものです。
- «» «» , . «», , «» . . : , ;
- «» «». , «» «». ;
- .
UX テストでは、次のことがわかりました。ユーザーはすぐに「検索」を見ました。これは私たちが望んでいたことです。 「メール」が目立たなくなりましたが、視覚的に修正し、入り口に色とアニメーションを追加しました。
「ニュース」は同じ場所に留まりましたが、ブロック自体に少し手を加えました.ニュースの量を変更し (テストでもこれが必要であることを示しました)、資料間にインデントを追加し、フォント サイズを大きくしました。 「Pulse」がフィードに追加されてエンドレスになったため、フッターが左上のハンバーガー メニューに移動しました。これにより、デザインとユーザーに損失を与えることなく、他の Mail.ru グループ プロジェクトの場所を確保できました。
当初、私たちは広告を他のブロックから切り離して上部に配置することにしました。そのほうが便利なように思えました。しかし、受験者はページ全体を広告として認識したため、それを下に配置しました。
さらなる設計開発のために、実験室でのテスト後に最良の結果が得られたオプションが選択されました。
- 上部には、メニュー、地理位置情報、およびプロファイルを含むナビゲーション ブロックがあります。
- 「メール」の上に「検索」、「ニュース」の横に「天気」。
- アクセント カラーを減らします (ロゴと検索のみが青のままです)。
最後の仕上げ
私たちは構造を決定しました。今、それほど重要なことは残っていません - 視覚的な部分です。
形状やディテールの異なるいくつかのオプションがありました。その結果、ページは「きれいな」状態になりました。つまり、有名ブランドのキー ブロックが付いた白でした。 「検索」「メール」「お知らせ」を有機的に区別するコーポレートカラー。 「検索」行は、より目立つように丸みを帯びて、下のウィジェットと融合しないようにしました。分離された「天気」と引用符 - 水平ブロックはより適応性があり、新しい要素を追加できます。 ウィジェットの追加メール ウィジェットの横に、何も壊さずに複数の製品を追加できるようになりました。他のバージョンでは、二重カルーセルのためにこれを行うことができません。その結果、どのように、どのようになったかを比較することができます。
Mail.ruのメインページのモバイル版の新旧デザイン比較
新しい家がどのように暮らし、繁栄するか
「通常のユーザー シナリオを壊さないように、常に更新を段階的に展開しています。ユーザーは新しいデザインを好意的に認識しており、それはコンバージョンと紹介の増加によって確認されました」と Vyacheslav Yashkov 氏は言います。
その結果、以下の変化に気づきました。
- + 12% 天気や covid などのメディア プロジェクトへの移行。
- 「検索」への遷移に +4%;
- 「メール」への移行に+ 5%。
現時点では、有用で関連性の高い情報のみを提供するために、ページをパーソナライズすることに積極的に取り組んでいます。エコシステム ユーザーの場合、統合はさらに深くなります。
クリエイティブ チームの構成:
- Alena Kitabova - プロダクト マネージャー。
- Vyacheslav Yashkov は、検索 & AI デザイン チームの責任者です。
- — Search & AI.
- — frontend- .
- — frontend- .
- — frontend- .
- — frontend- .
- — .