👽 🤹🏻 👩🏻‍⚕️ Quel est le problème avec les systèmes de wagons de chemin de fer 👨🏻‍🚒 🛍️ 🔮

Une fois, une femme a appelé notre équipe de soutien et a accidentellement séparé la famille, choisissant des endroits dans la voiture. Elle a voulu acheter un compartiment entier et a pris 15, 16, 17 et 18 sièges, les considérant comme un groupe. Même avant cela, nous soupçonnions qu'il n'était pas pratique pour tout le monde de lire les circuits, mais à ce moment-là, nous l'avons compris particulièrement clairement.

Ancien schéma:

nouveau après la recherche:

le schéma de choix des sièges dans une voiture fait partie du processus de commande d'un billet pour un train. Certaines personnes ne sont pas à l'aise de le lire et font des erreurs. De plus, ces dernières années, avant la mise en quarantaine, les gens des endroits reculés, loin de l'informatique, ont commencé à voyager activement, et cela a été particulièrement difficile pour eux. Par exemple, dans le premier diagramme ci-dessus, peu de personnes peuvent déterminer correctement et en toute confiance les étagères supérieure et inférieure sans indices supplémentaires.

Nous avons mené une étude à grande échelle sur l'utilisation de ces régimes. Nous avons collecté et testé plusieurs options pour les améliorer. Fabriqué sur la base de la meilleure version du kit d'interface utilisateur, qui est maintenant conçue pour une utilisation gratuite .

Et maintenant, je vais vous parler de ce qui peut généralement mal tourner lors du choix des sièges dans différentes voitures.

Faiblesses des anciens régimes

Un peu en avance, la première étude a montré ce qui était nécessaire:

Montrer plus clairement les étagères supérieures et inférieures, ce n'est pas évident pour tout le monde
Il est plus visible de diviser le compartiment en combinant les sièges en groupes afin que les gens ne se trompent pas lors de l'achat de billets dans différents compartiments
Mettez en surbrillance les ouvertures des fenêtres, ce qui rend leur emplacement plus évident, car les gens les confondent avec les murs
Afficher plus clairement des informations sur la direction du mouvement du train, de nombreux berceaux
Dans les wagons assis, il est plus évident de montrer la répartition des sièges par rapport aux autres - encore une fois, afin de ne pas séparer
Ne visez pas le réalisme dans les détails du diagramme du wagon, mais la simplification

Il y a des gens qui veulent vraiment s'asseoir près des fenêtres, mais ne peuvent pas comprendre comment cela fonctionne:

«Il y a des nuances dans Faucon pèlerin, - vous pouvez passer entre les fenêtres, donc je regarde attentivement,« où sont les fenêtres. Ce n'est pas visible ici: la bande est-elle une fenêtre ou un mur? "

Il y a ceux qui ne peuvent dormir que dans une certaine direction du train. Il y a ceux qui sont bercés dans le sens contraire au mouvement dans le sédentaire:

"Les endroits qui sont dans le sens et contre, - vous devez regarder où il est dirigé, peut-être teinter le dos."

La première approche de la refonte des régimes, "bouclés"

Au début, nous nous appuyions sur l'intuition. Nous savions que les passagers avaient des difficultés, mais nous ne savions pas s'il s'agissait de cas isolés ou d'un schéma. Nous avons essayé de rendre les schémas plus réalistes: à l'aide d'étagères et d'ombres à pseudo-volume, nous avons montré la hiérarchisation des sièges réservés et des voitures à compartiments. Les fauteuils d'une voiture assise ressemblaient à des fauteuils dans une salle de cinéma.

C'était:

C'est devenu:

Beau? Oui. Travaux? Non.

A montré le programme aux passagers

Ensuite, ils ont mené une grande série d'entretiens, qui ont montré aux gens des plans de voitures mis à jour. Et nous avons découvert ce qui suit.

1. Les gens ne comprennent pas où se trouvent le plateau supérieur et le plateau inférieur.

Autant que nous le souhaiterions, toutes les pensées spatiales ne fonctionnent pas bien. Pour indiquer les étagères supérieures et inférieures, des indications plus explicites sont nécessaires. Les utilisateurs expérimentés connaissent le schéma pair-impair, mais cela ne suffit pas.

"Il est nécessaire de pouvoir voir ce volume, afin de comprendre quelle étagère est sous laquelle - en 3D et il est bon de garder un œil dessus - tout le monde ne pourra pas."

2. Combinez mentalement des endroits des compartiments voisins

Visuellement, ces endroits sont plus proches, donc la théorie de la proximité fonctionne. Même un mur plus contrasté entre le coupé n'aide pas, nous l'avons vérifié.

"Je n'ai même pas remarqué que ce sont des compartiments différents - wow! Maintenant, je voudrais maintenant diviser la famille. "

3. Fenêtres et murs confus

Il est nécessaire de mettre en valeur les ouvertures des fenêtres, ce qui rend leur emplacement plus évident. Il y a des gens qui veulent vraiment s'asseoir près des fenêtres, mais ne peuvent pas comprendre comment cela fonctionne.

4. Recherche de la direction du mouvement

Il y a ceux qui ne peuvent dormir que dans une certaine direction du mouvement du train. Il y a ceux qui sont bercés dans le sens contraire au mouvement dans le sédentaire. Nous ne pouvons pas montrer la direction du mouvement sur tous les trains, mais dans les voitures à l'arrêt, cela est le plus souvent possible.

"Le mouvement du train doit être plus lumineux, sinon vous pouvez le sauter, car beaucoup de tout est bondé et n'est pas visible."

5. Orienté le long du dossier des sièges

Dans les wagons assis, il est important que les gens tournent le siège par rapport aux autres. Tout comme dans le cas du coupé - pour ne pas se séparer. Maintenant, la recherche du dossier nécessite un effort supplémentaire.

6. Ils ne veulent pas du réalisme, mais de la simplicité.

Le détail élevé et le réalisme soulèvent de nombreuses questions - chacun interprète ce qu'il voit à sa manière. Et au contraire, en supprimant tout ce qui n'est pas nécessaire, nous réduisons le nombre d'écarts. Les accoudoirs sont une décoration supplémentaire. Dans l'image ci-dessus, les accoudoirs ne créent qu'un bruit visuel et rendent difficile la compréhension de l'apparence des sièges.

A travaillé sur les bugs

Les schémas étaient difficiles à créer et à mettre à l'échelle. Il n'y avait pas assez de constructeur. J'ai dû monter dans Illustrator, marquer la zone sous les sièges de la voiture et renommer manuellement chaque endroit. L'arrière-plan des diagrammes a été dessiné séparément dans Photoshop, puis importé dans Illustrator dans un raster.

Nous avons retiré tous les guirlandes en excès et dessiné le kit d'interface utilisateur dans la figure, en passant complètement au format vectoriel. Maintenant, tous les diagrammes de wagons dans Tutu.ru sont assemblés à partir de ces composants: Les

icônes et les polices dans le kit d'interface utilisateur ouvert peuvent différer de celles sous licence pour l'entreprise.L'équipe

a un guide détaillé pour assembler les diagrammes. Désormais, les schémas de voitures peuvent être assemblés non seulement par les concepteurs. La tâche du concepteur est de faire un examen après l'assemblage du circuit.

Sur les diagrammes de wagons, nous ne montrons à une personne que les informations qui affectent sa décision d'achat. S'il s'agit d'un train avec des wagons assis comme des hirondelles, il est important de montrer l'emplacement des fenêtres, des tables et des dossiers des chaises.

Dans les Hirondelles chariot nous démontrons: sièges pour les passagers avec des animaux, les places les moins chères, d' autres voyageurs, la direction de Voyage et des photos à partir d' un certain angle du chariot

Tout le monde sait que , dans un chariot compartiment il y a des fenêtres et des tables par défaut, donc il est plus important de montrer le regroupement des sièges de

grille

Élément tailles et l'indentation sur les diagrammes est basée sur une grille de 4 pixels. Nous avons doublé la taille minimale de l'empreinte dans le diagramme afin que les gens manquent moins lors de la commande par téléphone.

Il existe des exceptions où vous devez augmenter ou diminuer visuellement la taille des éléments avec des traits. Par exemple, la taille du coupé 78 x 78 n'est pas un multiple de 4 pixels. Dans ce cas, le retrait apparent des sièges aux parois du compartiment est de 4.

Les dimensions des couloirs et des passages dans les voitures sont généralement égales à un ou deux modules de sièges.

Icônes Les

icônes sont inscrites dans un conteneur de 24 pixels. Parfois, il est utile de réduire les icônes à 18 pixels. Par exemple, lorsque vous devez désigner des endroits pour les passagers avec des animaux ou des personnes handicapées. Ou montrez à d'autres voyageurs dans un endroit très fréquenté.

Nous essayons de combiner les mêmes zones en une seule icône, sans indiquer les zones de la voiture qu'elles occupent. Par exemple, si le chariot a une double toilette ou deux porte-bagages adjacents, nous montrons une icône à leur place. Il suffit à l'acheteur d'avoir une idée générale de ce qui se cache derrière lui et du temps qu'il faut pour aller aux toilettes.

Dimensions des voitures

Dans une classe, nous nous efforçons de créer des schémas de taille égale pour les voitures. De plus, la largeur et la hauteur des schémas au premier stade de l'élaboration des schémas ne sont pas limitées et dépendent du nombre de composants du schéma. Il est utile de commencer à dessiner les diagrammes d'un train spécifique avec une voiture avec le plus de sièges.

En utilisant Swallows Premium comme exemple, nous collectons d'abord le schéma de la voiture n ° 2.

Et puis pour la voiture n ° 3, nous supprimons les endroits inutiles sous les zones de toilettes, de glacières, de porte-bagages, en préservant la grille d'origine et l'emplacement des fenêtres.

Augmenter la vitesse de création de circuits Un

concepteur de circuits doit nommer chaque siège selon un modèle de la forme «siège-21». Parfois, de tels endroits dans la voiture peuvent être plus d'une centaine. La figure a un bon outil pour renommer les couches en masse. Il se souvient de l'ordre de duplication des calques et les renomme selon le modèle "seat- $ N".

Nous partageons gratuitement un ensemble de composants

Vous pouvez télécharger un ensemble de composants pour vos diagrammes de wagons et l'utiliser sous une licence Creative Commons BY.

Kit d'interface utilisateur de diagrammes de wagons dans la figure →

Pour l'utiliser, faites une copie du fichier, et il apparaîtra dans vos projets.

Si vous n'avez jamais travaillé dans Fig, essayez-le - vous pourriez l'aimer. Il s'agit d'un outil Web pratique utilisé par les designers du monde entier. Le « Guide de Figma » de Sasha Okuneva a aidé les gars de notre équipe à connaître l'instrument plus rapidement .

De nouveaux programmes peuvent être consultés sur notre site Web. Par exemple, voici les trains de Moscou à Saint-Pétersbourg - nous avons déjà mis en place de nouveaux plans pour les Sapsans et les Hirondelles. Nous n'avons pas encore atteint le siège réservé, coupé et SV, nous y travaillons.

Eh bien, bien sûr, les schémas peuvent être utilisés n'importe où: si les transporteurs, les chemins de fer russes ou quelqu'un d'autre veulent les appliquer ou les modifier pour construire le leur sur la base d'eux, nous sommes tous pour.