L'émergence de nouveaux services est devenue un test pour la page principale de Mail.ru - il est devenu plus difficile pour les utilisateurs de trouver les sections dont ils avaient besoin, et la société a décidé de mettre à jour la conception. Les spécialistes du groupe Mail.ru ont parlé des changements apportés à la version mobile de la page principale du portail, des tâches qu'il résout et des résultats obtenus.
Comme c'était avant
L'ancienne version de la page d'accueil mobile depuis plusieurs années a complètement résolu les tâches qu'on attendait d'elle. Les utilisateurs se déplacent facilement entre les onglets, trouvent facilement "Courrier", "Recherche" et "Actualités". Cependant, l'émergence de nouveaux produits du groupe Mail.ru est devenue un défi croissant - il était plus difficile de les intégrer dans la version actuelle et il y avait une fragmentation entre les blocs. Par exemple, la ligne « Rechercher » ou la fenêtre de connexion « Mail » a commencé à s'aggraver, la profondeur de défilement de la page a diminué et les utilisateurs ont quitté le milieu du fil d'actualité. Ancienne version mobile de la page principale de Mail.ru
De plus, en raison de la refonte de la marque Mail.ru, Mail et Poisk ont commencé à différer sensiblement du style visuel de la page principale. Il est devenu clair qu'il était temps de mettre à jour complètement le principal - organiser de manière organique les produits actuels de l'entreprise, jeter les bases de nouveaux services et partenaires.
Le plan ressemblait à ceci :
- Modifier le style visuel de la page principale en fonction du nouveau design du système Mail.ru ;
- Rendre l'accès à tous les services pratique et rapide ;
- Ajoutez une navigation de page divertissante grâce à des recommandations individuelles de matériaux et de méthodes de conception ;
- Maintenir la visibilité de tous les produits et prendre en compte les intérêts de ceux vers lesquels les utilisateurs se rendent le plus souvent à partir de la page principale - "Courrier", "Recherche" et "Actualités" ;
- Adaptez les changements pour les appareils avec de petits écrans, afin que chaque utilisateur soit à l'aise.
Où as-tu commencé
De forts changements dans l'UX de tout produit peuvent entraîner des difficultés pour les utilisateurs. Pour rendre l'adaptation au nouveau design moins pénible, nous avons décidé de mettre à jour le principal par étapes.
Pour commencer, nous avons décidé d'attirer l'attention de l'utilisateur sur des éléments importants avec des outils visuels uniquement. Options de la première page de l'interface utilisateur
Dans un premier temps, trois versions de la page principale ont été développées. La même séquence de blocs est visible : « Mail » en haut, « Search » au milieu, puis publicité et « News ». Nous avons supprimé tous les éléments non prioritaires du premier écran afin de concentrer l'attention de l'utilisateur sur les produits clés et de ne pas le distraire de Mail et de la recherche. Dans ces variantes, nous avons globalement modifié uniquement l'interface utilisateur, appliqué partiellement notre nouveau système de conception, à savoir : des blocs et des boutons arrondis, ajouté une ombre et créé des widgets météo et citations, mais laissé beaucoup de couleur d'accent.
Ensuite, nous avons travaillé sur le reste des produits de défilement. Chaque bloc et produit a acquis son propre design, ce qui a contribué à remplir leurs fonctions. Nouveau ruban
Par exemple, pour "Kino Mail.ru", ils ont créé un fond sombre - de cette façon, le contenu multimédia est plus facile à percevoir. Pour les jeux, nous avons ajouté de grandes cartes avec une couverture, sur lesquelles des mises à jour sont perceptibles. Une commutation pratique entre les chaînes a été ajoutée au programme TV pour permettre à l'utilisateur de trouver plus facilement les programmes qui l'intéressent. Nous avons également récemment introduit Pulse, un flux de recommandations personnalisé. Sur la nouvelle page principale, nous avons légèrement modifié son style, ajouté un fond sombre, ce qui a augmenté la cliquabilité.
Tout en changeant la page principale, nous avons mené une série d'études d'utilisabilité dans notre laboratoire pour comprendre comment les utilisateurs réels perçoivent les changements. Selon les résultats des premières études, 80% des personnes interrogées, quel que soit l'emplacement de la publicité, ont choisi le chapeau bleu comme étant plus lumineux et plus attrayant. Ils l'ont quittée. Mais le problème de hiérarchisation des produits restait - la couleur bleue a attiré beaucoup d'attention, c'est pourquoi la "Recherche" a été perdue. Les utilisateurs ne l'ont pas remarqué ou ont pensé qu'il s'agissait d'un panneau de mot de passe pour se connecter à leur compte de messagerie.
Changer la page UX
Il est temps de reconstruire la structure de la page. Grâce à des recherches antérieures et à une vision stratégique du produit, nous avons compris que la structure du premier écran devait permettre à l'utilisateur de naviguer instantanément sur l'écran d'accueil. Variations de la page d'accueil pour la recherche UX Pour les tests dans le laboratoire UX, nous avons rassemblé plusieurs mises en page avec différentes mises en page de blocs pour déterminer quelle combinaison serait la meilleure pour les utilisateurs. En eux, nous avons changé la structure, à savoir:
- « Rechercher » a été placé en haut, car cela signifie le début de l'étude de la page, et cette disposition est généralement plus familière à l'utilisateur ;
- «» «» , . «», , «» . . : , ;
- «» «». , «» «». ;
- .
Les tests UX ont montré ce qui suit. Les utilisateurs ont immédiatement vu "Rechercher", ce que nous voulions. "Mail" est devenu moins visible, mais nous l'avons ensuite corrigé visuellement, ajouté de la couleur et de l'animation à l'entrée.
"News" est resté au même endroit, mais nous avons fait un peu de travail sur le bloc lui-même : nous avons modifié la quantité de news (les tests ont également montré la nécessité de cela), ajouté des retraits entre les matériaux et augmenté la taille de la police. "Pulse" a été ajouté au flux, le rendant sans fin, de sorte que le pied de page a été déplacé vers le menu burger en haut à gauche - c'est ainsi que nous avons obtenu une place pour d'autres projets du groupe Mail.ru sans pertes pour la conception et l'utilisateur.
Au départ, nous avons décidé que la publicité serait en haut, séparée du reste des blocs - il nous a semblé que c'était plus pratique. Mais les personnes testées ont perçu la page entière comme une annonce, alors elles l'ont placée en dessous.
Pour le développement ultérieur de la conception, l'option avec le meilleur résultat après les tests en laboratoire a été choisie, où :
- En haut se trouve un bloc de navigation avec un menu, une géolocalisation et un profil ;
- « Rechercher » au-dessus de « Mail » et « Météo » à côté de « Actualités » ;
- Moins de couleur d'accent (seuls le logo et la recherche restent bleus).
Touches finales
Nous avons décidé de la structure, maintenant il ne reste rien de moins important - la partie visuelle.
Nous avions plusieurs options avec des formes et des détails différents. En conséquence, la page est devenue "propre": blanche avec des blocs de touches bien marqués. La couleur de l'entreprise distingue organiquement "Recherche", "Courrier" et "Actualités". La ligne "Rechercher" a été arrondie pour qu'elle ressorte davantage et ne se confond pas avec les widgets ci-dessous. "Météo" et guillemets séparés - les blocs horizontaux sont plus adaptatifs et permettent d'ajouter de nouveaux éléments. Ajout de widgets Vous pouvez désormais ajouter plusieurs produits à côté du widget Mail sans rien casser. Dans d'autres versions, cela ne peut pas être fait en raison du double carrousel. En conséquence, vous pouvez comparer comment c'était et comment c'est devenu.
Comparaison de l'ancien et du nouveau design de la version mobile de la page principale de Mail.ru
Comment la nouvelle maison vit et prospère
« Nous déployons toujours la mise à jour progressivement afin de ne pas casser les scénarios utilisateurs habituels. Les utilisateurs ont perçu positivement le nouveau design, ce qui a été confirmé par l'augmentation de la conversion et des références », explique Vyacheslav Yashkov.
En conséquence, nous avons remarqué les changements suivants :
- + 12% aux transitions vers des projets médias, dont météo et covid ;
- + 4 % aux transitions vers « Rechercher » ;
- + 5% aux transitions vers le "Mail".
En ce moment, nous travaillons activement à la personnalisation de la page afin de ne fournir que des informations utiles et pertinentes. Pour les utilisateurs de l'écosystème, l'intégration ira beaucoup plus loin.
La composition de l'équipe créative :
- Alena Kitabova - Chef de produit.
- Vyacheslav Yashkov est le chef de l'équipe de conception Search & AI.
- — Search & AI.
- — frontend- .
- — frontend- .
- — frontend- .
- — frontend- .
- — .