Ux and layout for detail page

[SBats]

Clearly the first version of the detail page doesn't work and/or responds to the board needs. I open this issue to discuss about it and try to find the best organisation and UX.

Here are few questions to start with :

• Is the gallery a major need for this page ?
• If we always display POIs and provide them with big enough pictures, could we put the galery in a tab like the informations or the close elements ?

[SBats]

Thoughts of @fredericbonifas :

• If we put the gallery in a tab, it becomes almost useless. We're maybe even better at giving a simple link to display a lightbox in full screen.
• Actually, there's to much space dedicated to a few part of the information (title, icons and description header). We might need to rethink this too.

My thought actually is to give half of the screen to Pois and map. The rest is shared between all the other information. From this we would still have to chose how to dispatch it between tabs and fixed spaces.

[camillemonchicourt]

Here are first thoughts. I need to also discuss it with Pierrick.

1. Actually the gallery shows images of the treks + images of the POIs of the trek. The pictures of POI dont necessary gives a global idea of the trek. Pictures of the trek are then the most important.
2. POIs are elements of the treks but not from other objects (touristic events and objects). When we will be on the detail page of a MUSEUM or a CONFERENCE, the images of it will be crucial. We dont need POIs on this pages, or just amongst other NEAR OBJECTS.

Actually it will be difficult to dont show the main image(s) of the object in detail page.

But I understand the problem.

Why not use this area (in RED). Not sure it will be available on all SCREEN SIZES and all OBJECTS (if text is longer) but it could be used to include POIs on treks OR to make the MAP bigger... Not a brillant idea... :-)

Another idea would be to put this general informations (icons, description header...) in a tab and to change the place for TABS. So there would be half of screen for the MAP (+ POIs eventually).

[SBats]

Thx for the help Camille !

Ok I wasn't sure about gallery needs, but now I am :). In fact if POI's aren't present (or important) for other categories, it's a bit odd to rely on for graphic illustrations.

Actually the red part depends a lot on the screen size and the content, so we can't count on it. As for the second solution, I've got the point but I've got a question about this. Are we going to always display the near objects when on a non-trek element ? Cause if not, it's a bit odd to have a half-size map where we display only one marker, don't you think ?

[camillemonchicourt]

Yes, all these need to be discussed.

In fact, NEAR OBJECTS are interesting on EVERY OBJECT. But not sure how they will be displayed.

[SBats]

Just a thought I had, What to you guys think about using tabs for POIS and NEAR OBJECTS and we display POIS for Treks by default and NEAR OBJECTS for other categories by default ? This way we optimise space. The only counterpart I see is the fact that the user can hide POIS easily.

[camillemonchicourt]

POIs are informations related to TREKS. They are part of treks and we add some only when we have a trek. So it makes sense to display them only on TREKS pages but not on other objects pages.

And yes when we are on a TREK it is crucial to display POIs at first sight.

[camillemonchicourt]

@amandine-sahl agrees with that too.

Good luck ! :-)

[SBats]

Ok, thx for your returns ! I'll try something ;)

[leplatrem]

Regarding gallery, @Grsmto had an interesting idea :

• you show only a line of 4-5 thumbnails and an arrow
• a click on any thumb or the arrow opens the lightbox fullscreen carousel

It mimics what is done here :

hikable.com

foursquare.com

Just stand on the shoulders of giants :)

[Sandrineforge]

Hi, Why don't put the POI on the map like Rando Ecrin? and change the tab “patrimoine” to tab “information” ?

[SBats]

Thanks again everyone for your help ! I think I've come-up with something quite well balanced I guess. . Please don't mind POIS markers and images crops as they aren't yet finished.

@leplatrem - I've followed your advice (that you've already gave me, I didn't forget :P). I've used a good old lightbox gallery with the main picture being the first cropped and small versions for togglin the gallery.

@Sandrineforge - I would like to prevent putting something on the map as it gives less clear space for map and POIS. The weakest point, IMO, on the V1 detail page is that you can't focus on anything because everything is important, big and colorful.

[Sandrineforge]

Yes, It's true, there so many important information. I remember we talk about the idea of taking POI when we put the map in full screan. It's also possible with V1 detail page ? The lightbox is a good idea.

Just one thing, about the text on the left, it's not balanced . May be we can put the hat and ambiance text between title and picture ? So, to be continued... :)

[SBats]

Yep, it was the case for V1. POIS are displayed in full-screen mode. I have yet to implement it with the new layout.

About the text, I'm not quite sure if it's a text position problem or a text construction. It's really hard to say and I totally agree with you. There's still something that bogs me about this part. A good practice in this case is to make a list where we order informations by their importance for the user like this :

(IMO, feel free to modify it !)

1. Name and type of the element
2. Gallery
3. Main infos (length, ascent, themes ...)
4. Map
5. POIS / Near objects
6. Hat
7. Ambiance
8. Description
9. Access and transports infos
10. Contacts
11. Various links

What do you think ?

[Sandrineforge]

If we talk about importance for the user, I agree with your list. But ambiance has no reason to be before description, It will be confused for user... I don't no

[SBats]

Ok ! You're definitely not the only one thinking that way. @gutard and @fredericbonifas explained me a bit more about the use of the different parts. I'll put them above the image. Thx !

[SBats]

Mm I think we're going to miss the appeal for this page on small device. Text is going to push the gallery all the way down. We'll discuss this further when we'll send you the test version.

[Sandrineforge]

Ok, good job !

[camillemonchicourt]

Just tested it on our server and it is a great evolution, well done and very good ideas. We have a few things to discuss but this is a great step forward !

Thanks.

[SBats]

Thanks a lot @camillemonchicourt ! I'm glad you like it ! In fact there's still a lot of work to do on the design and ergonomy, but we're definitely on a good path. Please feel free to create github issues for anything you think of. We need to exchange a lot at this point :)

[camillemonchicourt]

Yes, that's what I planned. Check the actual devs and create tickets for any comments or ideas.

[Sandrineforge]

Ok, great. I don't control well Git Hub, thanks for you help ! And we also enjoy about this developement.

[SBats]

En: Here we go with the new version : pois and near objects dislayed on the side of the map (like in the v1) but they expand and the main infos are collapsed. Also we always keep Near elements and pois parts visible but one of them is collapsed.

Fr : Voilà une nouvelle version de l'interface. les pois et les éléments à proximité sont affichés sur le coté de la carte (comme pour la v1). La différence est que la zone s'agrandit lorsque l'on consulte le détail d'un poi, et la zone d'informations principales se réduit alors. L'idée est aussi de conserver les zones de pois et d'éléments proches toujours visibles mais l'une d'elle est repliée et l'autre ouverte.

Basic:

Opened POI:

Near Element view:

[Sandrineforge]

I like it, just for near element, we want to put them on the map with a Pop up. I show this new version this afternoon. Thanks.

Tu lis dans nos pensées ! Ce à quoi nous avions pensé pour les POI ! j'étais en train de bricoler une maquette.... Pour les À proximité, nous avions plus pensé à faire figurer sur la carte le marqueur et avoir une POP UP au survol de la souris. Mais j'aime bien cette idée, je la montre autres et on en reparle !

[Sandrineforge]

For the blok "near element", what's their comportement ? opening like POI or opening the card on e new window ?

Pour les blocs à proximité, si on les dispose ainsi comment ça réagit ? ouverture d'une vignette , bascule sur la fiche de l'objet ?

[SBats]

En: Glad you like it ! In fact I must admit I wanted to refactor to much things when there where already great things that juste needed some tweaks to go further (like the pois). Near elements are also displayed on the map but are just standard links. They represents other elements that have their own descriptions and pois. We don't want to force opening a new window. This must be an user's choice

Fr : Ravis que cela vous plaise ! Je me rends de plus en plus compte que certains éléments ne nécessitaient pas une refonte complète en terme d'ergonomie et ne nécessitaients que de petit ajustements pour amener la plateforme plus loins ! Concernant les éléments à proximité, ils sont présents sur la carte également. Ce sont de simples liens qui déclenchent une navigation. L'ouverture dans une autre fenetre est choisie par l'utilisateur, nous ne l'imposons pas.

[camillemonchicourt]

Nous avons échangé sur tout ça hier avec le PnC. Il y a encore une réflexion sur l'ordre des champs sur la fiche détail ainsi que sur la position des POIs (sous la carte ou à droite de la carte) + l'affichage et l'interactivité des POIs et A Proximité.

Merci

[SBats]

En: IMO :

• informaiton ordering on detail main part -> Icons part contain strong informations that might be overwelmed by the header and ambiance text + main visual. It could be interesting to put them at the top. Though it could create an unpleasant reading experience because of a unbalanced rythm.
• POIS -> Bringing them to the side of the map give them much more readability as they need verticality to be pleasant to the user's lecture. In fact larg parts of text are just painfull to read. As for my concern, I find it really more logical an intuitive to keep the 3 mains block of informations (infos, map, interests point) on an horyzontal interaction. People are used to it with app now.

Fr : Me concernant :

• l'ordre des champs de la fiche détail -> Les icones me semblent importantes et se retrouvent noyées par les visuels, le chapeau et l'ambiance. Peut être est-il nécessaire de les remonter ? Cela peut, en revanche, nuire au rythme global de lecture.
• les POIs -> l'affichage sous la carte sur un espace trop horizontal ne fonctionne pas car nous avons à faire à des éléments qui contiennent du texte relativement long. Offrir un espace vertical permet une lisibilité optimum. De plus il me semble plus logique de conserver une horizontalité dans les interactions entre les 3 principaux blocs d'information (fiche, carte, intérets). Cela semble plus naturel à utiliser et fait partie des habitues d'utilisations des apps.

[Sandrineforge]

For the order, we agree about pictogram are not at the good place, but at time we don't know the best solution. POI, for PnC, we like the right of the map, it's easy for reading and for using, but becarefull to the proportions of each block, to not unbalanced page. We are not really convinced by the big map when POI details open. We need thinking about all of this.

FR : • Pour l'ordre de la fiche détail, on est d'accord sur le faite que les pictos ne sont pas au bon endroit, reste à savoir quelle est la meilleur solution. • Pour les POI , au PnC mettre les POI à droite de la carte nous convient mieux, en therme d'utilisation et de lisibilité, attention quand même aux proportions de chaque bloc, pour ne pas déséquilibrer la page. Juste, on est pas convaincu par le passage grand carte à l'ouverture d'une fiche POI... a voir, rien n'est décidé pour le moment, nous avons besoin de réfléchir encore un peu.

[camillemonchicourt]

Oui, comme le suggérait Simon, il serait même mieux d'ouvrir un ticket par sujet pour pouvoir vraiment suivre, fermer le ticket quand c'est réglé et pouvoir échanger sujet par sujet sur chaque ticket. :-) Là je suis encore plus perdu.

Aussi, il serait bien d'identifier tous ces tickets avec une milestone (V2 layout par exemple) pour pouvoir les retrouver et les dissocier de tous les tickets qui traînent sur la V1.

Concernant les points qui restent donc encore dans cette discussion :

DISPOSITION DES POIs

On doit rediscuter de ça début de semaine prochaine.

En effet l'affichage à droite de la carte comporte différents avantages. Par contre, l'équilibre et la construction de la page est moins sympa, la carte verticale fonctionne un peu moins bien que la carte verticale, l'accès aux A PROXIMITÉ (et prochainement aux SERVICES) est bien moins visible et le système d'ouverture des POIs qui décale la carte sur les infos est dommage (il faut que ça bouge le moins possible). Mais il est en effet fort possible que cette disposition soit la plus adaptée et nous avons des premières idées pour les inconvénients soulevés. On en reparle début de semaine prochaine !

ORDRE DES CHAMPS

En effet, il faut rebasculer les infos pratiques (pictos) au-dessus de la photo et basculer d'autres choses sous la photo. Il faut aussi un peu retravailler l'affichage de ces infos pratiques. On précise ça aussi début de semaine prochaine.

Merci.

[Sandrineforge]

:+1:

[SBats]

Fr : POIs - Je pense que l'une des plus importantes problématiques à laquelle nous devons faire face est le fait qu'il y ait beaucoup trop d'information à intégrer pour l'utilisateur, d'où l'idée de masquer les infos principales lorsque l'on souhaite en savoir plus sur un POI. L'idée qui me vient si les proportions vous gènes est de dédier un espace entre la carte et le détail du POI à l'affichage des miniatures des images du POI qui est ouvert. L carte ne grossirai pas et cela permettrait de mettre plus en avant l'élément de patrimoine que l'on observe.

Pictos - Je vais faire un essais de redisposition des pictos, peut-être les remettres dans une barre fixée en haut comme sur la v1. On risque de perdre beaucoup de place en revanche. J'attends d'avoir le retour de @camillemonchicourt pour voir les idées que vous pourriez soulever :)

En: POIs - I believe one of our biggest pitfall is the fact there's to much informations to focus on at the same time. From this observation come the idea of collapsing main infos to the profit of the currently selected POI. If you think it's unbalanced, maybe we could try to put a thumbnails gallery of the current POI pictures between the map and the right part with the informations. It could enhance the immersion for the user.

Icons - I'll try something with pictos. Maybe put them back in a top fixed bar like in the v1. Though we might lack space if we do this. I wait for @camillemonchicourt feedbacks and will see which ideas come up

[camillemonchicourt]

POI En effet, il y a beaucoup d'infos à afficher et la nouvelle maquette améliore nettement la lisibilité de tout ça. Concernant les POIs sur le côté, c'est peut-être la solution. Mais ce que l'on évoquait est qu'il serait peut-être encore plus simple et plus lisible d'afficher directement les POIs complets avec images et texte dépliés pour éviter les actions et les fenêtres qui bougent, s'ouvrent et se ferment. Un peu comme on avait sur la V1, à voir si ça prend pas trop d'espaces en largeur, quitte à le réduire et proposer un SLIDESHOW pour agrandir une photo. On en rediscute ces jours-ci.

PICTOS Concernant les pictos, je pense qu'il faut seulement les mettre dans le bloc d'info comme actuellement mais directement sous le titre de l'objet (ou sous le chapeau) et basculer les textes sous la photo. Je crains un peu le bandeau fixe qui va prendre de la place et va ajouter un autre niveau de lecture, donc de la confusion dans la construction de la page.

Un rapide (très rapide...) essai confirme cela :

[Sandrineforge]

Juste une idée comme ça... Eest ce qu'on peut pas imaginer un plein écran :

en bas, (voir la flèche bleu), un volet qui s'ouvre au survol de la souris

Du coup, on résout plusieurs PB : • la carte trop petite • la mise en avant des POI / a proximité / service (sous forme d'onglet à droite sur la carte) • la partie description ou on a toute les infos en une seule fois...

[camillemonchicourt]

Concernant la nouvelle version (avec les POIs et A PROXIMITE a droite), il y a pas mal d'inconvénients soulevés ici eu PNE. En terme d'ergonomie mais aussi de lisibilité de l'info (les A PROXIMITE sont du coup très peu lisibles et il faut penser que s'y ajoutera bientôt les SERVICES et les ÉTAPES des CIRCUITS ITINÉRANCE).

Au final la proposition précédente avec 1/3 vertical pour les informations de l'objet, 1/3 horizontal pour la carte et 1/3 horizontal pour les objets de la carte reste la proposition qui nous semble la plus adaptée. Quitte à garder les POI intégrés (et masquables) dans la carte partie droite comme on avait sur la V1.

Concernant la dernière proposition, dommage de découper les fiches en 2 pages et de n'afficher que la carte à première vue.

On en rediscute donc.

[SBats]

@Sandrineforge Je ne suis pas vraiment favorable à un redécoupage en deux écrans différents pour la fiche et la carte + POI/ a proximité ..., cela met en arrière-plan notamment la galerie qui est importante pour beaucoup d'utilisateurs, des retours que j'ai eu (premier contact concret avec l'élément). En fait l'idée de base me semble bien, masquer certains contenus selon ce que l'utilisateur cherche, mais le fait de masquer toute la fiche me semble un peu extrême.

@camillemonchicourt Pour ce qui est de l'ancienne mise en page, le problème est qu'il n'y a que peu d'espace pour la carte dors et déjà, et rajouter les POIs la rend inutilisable sur 80% des écrans. Et conserver les informations textuelles sur un affichage trop horizontale les rends illisibles (la problématique sera la même avec les services et les étapes)

Pour moi la problématique reste que l'on veut mettre beaucoup trop de choses en avant, d'où notamment l'idée de @Sandrineforge de découper la page en deux écrans. Car à vouloir tout rajouter (services, etapes, etc ...) au premier plan, on se retrouve avec une interface inutilisable. Cela dit je pense que le fait de rajouter ces éléments va les faire ressortir vis à vis des POIs étant donné qu'ils prendront plus de hauteur.

Nous sommes arrivés à une impasse en terme de place. Soit certains éléments doivent être masqués selon les actions de l'utilisateur, soit il faut réduire la quantité d'information (ce qui ne me semble pas être viable).

Cette semaine je travail sur la page d'accueil. Cela vous laisse le temps de continuer à échanger. Je ne réponds pas à tous les message par manque de temps, mais n'hésitez pas à donner plein d'idées ! Et je ne refuse pas vos idées non plus, juste je pense que nous n'avons pas encore trouvé la bonne solution et qu'il faut persévérer. Je me remet sur cette problématique début de semaine prochaine.

Quoi qu'il arrive il faudra arrêter une interface v2.0 la semaine prochaine pour pouvoir finaliser cette version, quitte à préparer une v2.1 dans la foulée où l'on mennera la réflexion plus loin (idéalement avec plus de retours utilisateurs).

Bon courage à tous et merci encore pour votre aide ! :+1:

[Sandrineforge]

Je ne retrouve pas le site ou j'ai vu ce sytème... dommage, la page qui "monte" au survol de la souris, ne masquait pas complètement le 1er écran.... bref, c'était une idée au passage.

Concernant les élément sur la carte, sous forme d'onglet (patrimoine, à proximité, service, étape...) peut être faut-il qu'on accepte l'idée que tous soit au même "niveau" avec quand même un paramétrage d'ouverture par défaut sur les POI lorsqu'on ouvre une fiche rando.

Je sais pas, on réfléchit de notre côté, on préfère quand même ce système à l'autre même si effectivement on doit l'améliorer encore.

[SBats]

Thx everyone ! everything is on the issue #297 now ! Please comment on it if you have any feedback.