MyScenari 6 - Ergonomie et graphisme

Bonjour à tous,

Nouvelle dans l’équipe de conception de Scenari, je suis spécialisée dans le design d’interfaces et d’expériences.
Pour préciser mon rôle, je travaille sur l’ergonomie et le graphisme des interfaces Scenari, dans le but de faire évoluer l’efficacité et le confort d’utilisation.

Suite à la sortie de MyScenari 6, je vous propose d’exprimer dans ce sujet les retours et questions que vous pourriez avoir sur

  • l’expérience vécue dans l’interface d’édition et dans les supports de diffusion ;
  • l’aspect visuel de l’interface d’édition et des supports de diffusion.

Je précise que cela peut aller de remarques générales à des retours plus spécifiques sur Opale 4 ou OptimOffice 2 (nous pourrons parler de Dokiel 5 lors de la prochaine mise à jour).

Voici une liste non-exhaustive de pistes de réflexion qui vous aidera à vous lancer. N’hésitez pas à l’alimenter si vous pensez à d’autres choses :slight_smile:

  • L’utilisation de cette fonctionnalité est difficile / je ne comprends pas comment l’utiliser ;
  • Cette fonctionnalité ou action est visuellement trop discrète / trop visible / attrayant (couleurs, typographie…) ;
  • Cette fonctionnalité ou action est visuellement mal placée dans l’interface / je ne trouve pas une fonctionnalité que j’utilisais avant ;
  • Il me manque une ou des actions nécessaires pour qu’une fonctionnalité marche correctement ;
  • Une ou des icônes ne sont pas claires, je ne comprends pas le message caché derrière ce ou ces icônes ;
  • Je n’arrive pas à atteindre mes objectifs car il manque quelque chose d’indispensable dans l’interface / quelque chose m’empêche d’y arriver.

Si besoin, nous créerons des sujets plus spécifiques de discussion selon vos réponses.

Anna

3 « J'aime »

Salut et merci pour cette initiative !! :slight_smile:
Une première remarque issue d’un fil de conversation, mais c’est peut-être plus du ressort de la résolution technique que de l’ergonomie : Lien image - #8 par lalejand

1 « J'aime »

Bonjour ,
Quelques remarques sur la refonte de l’éditeur d’Opale liées à ma pratique récente .

  • Quelques difficultés à bien identifier la hiérarchie des blocs
  • Quelques difficultés à bien identifier les blocs de titres vs blocs de paragraphes. Il m’est arrivé de copier du texte dans un titre…
  • Lisibilité du formulaire un peu chargé pour moi (méta, champs optionnels).
    Comme souvent sur ces sujets, il doit y avoir une bonne dose de changements des habitudes et critères subjectifs. A voir si c’est partagé par d’autres utilisateurs.
    A gauche l’éditeur du monde d’avant, à droite la nouvelle mouture.

Bonne journée
Ludovic

A tous : n’hésitez pas à nous faire des retours !

Pour éviter à chacun de jouer au jeu des 7 différences, je précise quelques changements significatifs qui ont été apportés à Opale 4 (visibles sur les copies d’écran de Ludovic) :

  • Les libellés des champs mono-ligne (Titre, Titre court, …) ne sont plus présentés horizontalement en 2 colonnes, mais verticalement, le libellé au dessus du champ, comme pour les zones de contenus (paragraphes…)
  • Les libellés des champs vides ne sont plus affichés avec des couleurs « atténuées »
  • L’indentation marquant la structure logique a été réduit
  • Le trait vertical à gauche marquant les blocs a été supprimé
  • Les filtres ont été positionnés à droite
  • Un autre changement non visible sur ces copies d’écran : la représentation des blocs refermés

Encore une fois, nous essayons des choses, mais vos retours nous sont nécessaires pour avancer !

2 « J'aime »

Bonjour,
Merci pour ces essais sur l’interface :slight_smile: Je partage les remarques de Ludovic. Juste en regardant les photos (sans avoir essayé donc) je préfère l’interface d’avant à part peut-être pour « Les libellés des champs vides ne sont plus affichés avec des couleurs « atténuées » » que je préfère pour la nouvelle version (et je ne sais donc pas pour la représentation des blocs refermés).

Bonjour à toutes et à tous,

Suite à quelques retours, nous avons ajusté l’éditeur Opale notamment pour gagner en compréhension de la structure.
Voici les principaux ajustements : retour en mode horizontal des champs de saisie des métadonnées et des titres, suppression de l’encadré sur les champs de saisie des metadonnées et des titres, retour de l’opacité sur les boutons d’ajout d’élements, indentation de la structure)
Ci dessous, quelques écrans de la version qui sera disponible trés prochainement.





N’hésitez pas à nous remonter vos remarques pour améliorer les prochaines itérations.

Pour faire suite à cet échange sur le post Scenari 6:

Bonjour,

Il y a effectivement un soucis avec l’extension MyScenari, on ne peut pas pour l’instant récupérer son skin pour le modifier. Je remonte l’erreur, ce sera corrigé à la prochaine mise à jour.
En attendant, vous pouvez enlever cette image simplement avec cette règle.

.home #root {
    
background: none;
}

Mickaël

Merci pour le code, je l’ai appliqué à quelques autres endroits dans le skin et le main et ça marche!
Michel

Pour être plus précis, j’ai appliqué la modification à la ligne 265 de main.css et 39 de skin.css.
Il y a deux pages affectées:


La modification du skin.css affecte la page d’acceuil (gauche)
et le main.css corrige la deuxième page (droite)
https://michelsabourin.scenari-community.org/SimTurbTech/co/SimTurbTech.html
https://michelsabourin.scenari-community.org/SimTurbTech/co/SimTurbTech_1.html
Sans ces correction j’obtiens le résultat suivant:

Peut-être que la correction de la ligne 39 du skin.css n’est pas à la bonne place.

Vous remerciant pour votre aide,

Michel

Bonjour,

Merci d’avoir ajouté ces précisions à votre retour.
La correction pourra être faite à la prochaine mise à jour.

N’hésitez pas si vous remarquez d’autres soucis d’affichage :slight_smile:

Anna

Ok, je vois.
Tu as ajouté « background:none » dans :

.default #main {
	background: url(../img/tpl/back-bottom.svg) no-repeat bottom;
	background-size: 100% 60px;
    background: none;
}

L’instruction que t’avait donnée @mid

.home #root {
background: none;
}

Ne fonctionne que sur la « home ». C’est pour ça que ça n’avait pas d’effet sur les autres pages.

Comme tu as pu remarquer, c’est l’instruction .default #main qui porte l’image de fond grise dans le reste des pages.

Du coup, avec l’instruction

.default #main {
    background: none;
}

placée dans skin.css (donc en surcharge, sans toucher au fichier main.css) tu obtiendrais le même résultat.