Concept du template de Joomla! 4 design

Concept du template de Joomla! 4 design

Panneau d'administration Affichages : 1356

Comment avons-nous introduit la pensée de conception dans Joomla 4 Admin Template ?

Joomla est l'un des principaux systèmes de gestion de contenu depuis 2005. Toutefois, sa popularité a récemment baissé. Sa part de marché a diminué. Le nombre d'utilisateurs a diminué. Les nouveaux arrivants ne choisissent plus Joomla. Les développeurs trouvent du réconfort sur les autres CMS. Cela nous donne une préoccupation alarmante. Un point à noter et que depuis le début, Joomla a été conçu par les développeurs, ce qui ne devrait pas être le cas. À quoi ressemblerait Joomla si nous pouvions intégrer la conception à Joomla ? C'est ce qui nous a fait repenser l'avenir de Joomla. C'est ainsi que la refonte de l'interface utilisateur de Joomla 4 Admin est née.

Objectifs fondamentaux de la refonte :

Nous avons ajouté des repères visuel pour faciliter la navigation des utilisateurs. Nous avons introduit une conception modulaire fluide pour augmenter la facilité de découverte, une architecture d’information appropriée et une amélioration de la convivialité globale.

Des actions rapides ont été ajoutées, relatives à la carte : menu points de suspension, affichage, édition, publication, etc... Nous avons présenté autant d'informations que possible sans détourner l'attention des utilisateurs, telles que la réduction des onglets et la visibilité du statut du système. En introduisant les modules, nous avons accéléré la flexibilité et l'efficacité d'utilisation. Les modules sont déplaçables avec une fonctionnalité de contraste / d’agrandissement, vous permettant de re-décorer votre tableau de bord à votre guise. Les 10 principes de conception que nous avons suivis sont énumérés ci-dessous :

  1. Visibilité de l'état du système : le système doit toujours informer les utilisateurs de ce qui se passe, par le biais d'un retour d'informations approprié dans un délai raisonnable.
  2. Adéquation entre le système et le monde réel : le système doit parler la langue des utilisateurs, avec des mots, des expressions et des concepts familiers à l'utilisateur, plutôt que des termes axés sur le système. Suivez les conventions du monde réel, en faisant apparaître les informations dans un ordre naturel et logique.
  3. Contrôle et liberté de l'utilisateur : les utilisateurs choisissent souvent les fonctions du système par erreur et ont besoin d'une "sortie de secours" clairement identifiée pour quitter cet état indésirable sans passer par un dialogue approfondi. Soutenir annuler et refaire.
  4. Cohérence et normes : les utilisateurs ne devraient pas avoir à se demander si des mots, des situations ou des actions différentes signifient la même chose.
  5. Prévention des erreurs : Même mieux que de bons messages d'erreur, une conception soigneuse empêche tout problème de se produire. Supprimez les conditions sujettes aux erreurs ou vérifiez-les et proposez aux utilisateurs une option de confirmation avant de s’engager dans l’action.
  6. Reconnaissance plutôt que rappel : Réduisez la charge de la mémoire de l'utilisateur en rendant visibles les objets, les actions et les options. L'utilisateur ne devrait pas avoir à mémoriser les informations d'une partie du dialogue à une autre. Les instructions d'utilisation du système doivent être visibles ou faciles à retrouver, le cas échéant.
  7. Flexibilité et efficacité d'utilisation : les accélérateurs - invisibles à l'utilisateur novice - peuvent souvent accélérer l'interaction pour l'utilisateur expert, de sorte que le système puisse répondre aux besoins des utilisateurs inexpérimentés et expérimentés. Permettre aux utilisateurs d'adapter les actions fréquentes.
  8. Design esthétique et minimaliste : les dialogues ne doivent pas contenir d’informations non pertinentes ou rarement nécessaires. Chaque unité d’information supplémentaire dans un dialogue entre en concurrence avec les unités d’information pertinentes et diminue leur visibilité relative.
  9. Aidez les utilisateurs à reconnaître les erreurs, à les diagnostiquer et à les résoudre : Les messages d'erreur doivent être exprimés en langage clair (sans code), indiquer précisément le problème et proposer de manière constructive une solution.
  10. Aide et documentation : Même s’il est préférable d’utiliser le système sans documentation, il peut être nécessaire de fournir une aide et une documentation. Toute information de ce type doit être facile à rechercher, centrée sur la tâche de l'utilisateur, énumérer les étapes concrètes à exécuter et ne pas être trop volumineuse.

Tableau de bord basé sur les données

Le tableau de bord redonne le contrôle aux utilisateurs et les places de nouveau sur le haut des informations. Ils peuvent accéder à la plupart des fonctionnalités, même avancées, via le nouveau tableau de bord. Ainsi, même les non-techniciens absolus ont la possibilité de gérer leur site directement depuis le tableau de bord grâce à sa simplicité.

Une personne "geek" sait comment réparer ou peaufiner son outil mais une personne non technicienne ne le sait pas. Par conséquent, les ressources importantes de Joomla, les blogs, les nouvelles et les mises à jour sont placées sur le tableau de bord de manière à être facilement accessibles.

Joomla 4 Admin UI donne une idée concrète du site. C'est complètement basé sur les données. Chaque fois que vous regardez une section, vous voyez les chiffres pertinents. Le système de modules vous aide à obtenir les points forts de votre site Web, à mieux analyser les éléments et à prendre les mesures qui s’imposent.

Cartes perspicaces

Le tableau de bord ou administrateur se compose de presque tous les modules du design original de Joomla 4. Cependant, nous avons ajouté quelques modules par défaut supplémentaires à la page du tableau de bord et apporté quelques améliorations subtiles à certaines. Vous pouvez repositionner l'emplacement des modules par simple glisser-déposer.

Vous trouverez ci-dessous une explication des principes de conception selon un ordre numérique.

  1. La fiche de synthèse donne un aperçu des données sur le site Web. Ici, nous avons apporté les informations pertinentes sur les fonctionnalités les plus utilisées telles que Article, Plugin, Media, & Menus.
    1. Accès rapide pour gérer et afficher.
    2. Possibilité de personnaliser le panneau de présentation rapide en fonction des préférences de l'utilisateur.
  2. Afficher le statut général de la mise à jour du site Web afin que vous n'ayez pas besoin d'aller ailleurs pour mettre à jour votre système et tous vos plugins et composants. En outre, les extensions, les modèles et les plug-ins sont regroupés alors qu'ils étaient auparavant placés à des emplacements différents.
    1. Affichage du statut de mise à jour sur tous vos composants à la fois. Avec l'avantage de tous les mettre à jour en un seul clic.
    2. Afficher un message d'avertissement si une mise à jour est nécessaire.
  3. Cache: Auparavant, il n'y avait pas de section dédiée pour le cache et les utilisateurs devaient vider le cache manuellement en sélectionnant un par un et en passant à une autre page. Le module de cache introduit les données de cache pertinentes et un système de suppression de cache en un clic.
  4. Le module d’enregistrement global présente l’état de l’enregistrement à l’échelle du système et donne des informations sur le nombre total d’enregistrements.
  5. La fiche d'informations sur le site présente des informations plus informatives sur le site avec des icônes personnalisées.
  6. Article brouillon rapide: Nous avons introduit un nouveau moyen de rédiger des articles à la volée. Ainsi, au lieu de passer à la section article et de créer un tout nouvel article, les utilisateurs peuvent rapidement noter leurs idées directement dans le tableau de bord et y travailler plus tard.
  7. Le module Article présente 5 articles, pour les articles récents et les articles populaires côte à côte avec un onglet qui permet aux utilisateurs de mieux comprendre la dernière mise à jour de la performance des articles.
  8. Le module Activité récente montre l’activité globale du site chronologiquement de l’administrateur avec tous les utilisateurs du site.
  9. Le module Joomla News and Events permet aux utilisateurs de rester en contact avec la communauté, y compris les dernières tendances, actualités et articles. Pour qu'un utilisateur ne rate jamais une mise à jour.
  10. Des ressources utiles ont été manquantes sur le backend Joomla depuis le début, il est nécessaire de fournir des informations utiles pour aider un administrateur de site à démarrer, à résoudre les problèmes et à rassembler des connaissances générales sur la maintenance d'un site Web. Par conséquent, le module Ressources de développeur a été introduite avec les liens les plus nécessaires.
  11. Dans la conception précédente, nous n'avions que le nom des utilisateurs connectés, tandis que la nouvelle interface utilisateur administrative introduit la carte des utilisateurs connectés afin d'afficher des informations exploitables et la possibilité de forcer la déconnexion de tout utilisateur récent directement à partir du tableau de bord.
  12. Il est absolument nécessaire de mettre des ressources utiles à la disposition des nouveaux utilisateurs afin qu'ils ne se perdent pas. Par conséquent, des liens vers la boutique Joomla, des conseils d’utilisation, l’apprentissage de Joomla sont mis à la disposition dans le module Ressources Joomla.
  13. Nous avons introduit des données pertinentes sur le module de demandes de confidentialité avec des informations codées par couleur afin que les utilisateurs puissent plus facilement connaître le statut de confidentialité.
  14. Les utilisateurs ont maintenant la liberté de redécorer le tableau de bord en déplaçant des modules, via la petite flèche, n'importe où sur la page.
  15. Les utilisateurs peuvent également développer et réduire n'importe quelle module en un seul clic sur le chevron.
  16. Pour ajouter un module sur le tableau de bord, un utilisateur doit maintenant sélectionner un module spécifique sans savoir s'il est publié (car il n'y a pas d'indicateur). Après avoir choisi le module, il ne peut pas être publié immédiatement. Un titre est gênant (pourquoi appeler quelque chose sous un nom différent de celui d'origine). Par conséquent, nous proposons l’idée d’utiliser une simple case à cocher pour gérer les modules du tableau de bord afin que les utilisateurs sachent lesquels sont publiés et lesquels ne le sont pas et peuvent ainsi contrôler efficacement leur tableau de bord (non encore implémenté aujourd'hui).

Liste des nouveaux modules ajoutées :

Liste des modules améliorées :

Panneau de navigation piloté par priorité

Nous avons introduit la conception compartimentée et réorganisé le panneau de navigation en fonction de leur priorité. L'architecture des informations du menu de navigation de la barre latérale gauche a été radicalement améliorée. Les extensions sont ajoutées à la barre de navigation car elle héberge de nombreuses fonctionnalités fréquemment utilisées telles que l'installation, les templates, les modules, les plugins, etc...

Le menu principal comprend les paramètres de Contenus, Menus, Composants, Utilisateurs, Extensions et Système sont situés dans le coin supérieur gauche. En bas à gauche, nous rassemblons une collection de ressources utiles et de messagerie privé. Dans la barre en haut à droite, nous avons mis les Accessibilité, Profil administrateur et Lien de site.

Notre objectif est de réduire considérablement les difficultés d'interaction. Nous avons étendu la zone de travail afin que vous puissiez vous concentrer davantage sur la tâche à accomplir. Même si vous souhaitez naviguer vers une section différente, vous n'avez pas besoin de quitter l'interface existante. La barre latérale gauche est considérablement améliorée pour la rendre plus accessible. Vous pouvez maintenant survoler n'importe quel élément, les paramètres associés seront développés et vous pourrez naviguer jusqu'à la zone souhaitée.

Navigation intérieure

Les onglets masquent le contenu, alors que notre objectif est de fournir des informations à l’avance. Nous avons essayé de réduire autant que possible la présence d'onglets dans la conception afin de permettre aux utilisateurs de naviguer facilement dans le contenu sans se perdre.

Selon RTL Designing, le point de focalisation d'un utilisateur commence dans l'angle supérieur gauche de la page et se termine dans l'angle inférieur droit. Le flux de travail du contenu interne a été conçu en conséquence. Nous avons également utilisé un seul bouton principal pour améliorer la concentration des utilisateurs sur chaque page intérieure.

Nous avons suivi le modèle F pour la navigation . Vous trouverez ci-dessous une comparaison avec le modèle précédent.

Avant :

 Après :

Vous trouverez ci-dessous une explication des principes de conception selon un ordre numérique.

Principes de conception :

  1. Nous avons pris en compte trois éléments lors de la conception du bouton principal.
    1. Nous avons placé le bouton principal dans le coin supérieur droit et l'avons distingué de tous les autres boutons. Cette interface utilisateur d'administration se compose d'un seul bouton principal, contrairement à la conception précédente.
    2. Nous avons supprimé les icônes inutiles telles que Enregistrer, car les icônes n'étant pas universelles, elles augmentent l'encombrement visuel.
    3. Au lieu de faire plusieurs actions liées à une action principale de base, nous avons tout fusionné en un seul bouton principal "Enregistrer". C'est ainsi que nous avons réduit la charge cognitive.
  2. Placez tous les boutons secondaires et tertiaires chronologiquement à gauche. Sauf pour "Fermer", car c'est plus pertinent pour l'action principale.
  3. Des onglets réduits car les onglets ont tendance à masquer des informations.
  4. Les informations à onglets sont apportées au début afin qu'elles soient toujours disponibles. Ils sont ajoutés à la barre latérale droite. Cette fonctionnalité comprend le référencement, les images, les liens et la publication.
  5. Éditeur : la plupart des options essentielles sont conservées sur la ligne de front, tandis que les options moins fréquemment utilisées sont masquées dans un menu à débordement. Pour que les utilisateurs ne soient pas submergés par trop de fonctions.
  6. Toutes les options de la barre latérale droite sont réductibles, de sorte que vous ne pouvez vous concentrer que sur les goûts actuels.
  7. Vous avez opté pour les options avancées car ce sont des fonctionnalités moins fréquemment utilisées par la plupart des utilisateurs.
  8. Nous avons fusionné plusieurs options différentes sous un même titre, telles que des images, pour une meilleure organisation. En outre, cela réduit la charge de mémoire.
  9. En utilisant efficacement les cases à cocher et les boutons radio, nous avons rendu toutes les informations visibles afin que le processus de prise de décision d'un utilisateur soit plus facile et plus rapide.
  10. Fil d'Ariane : Afin de comprendre facilement où vous vous trouvez dans le flux de travail, nous avons ajouté Breadcrumbs.

Gestionnaire des articles

Pour s'aligner sur le principe de conception, la page de liste a également été redessinée. Une conception de table efficace avec un objectif très spécifique, c'est-à-dire une information précise survolant le trajet naturel des yeux de l'utilisateur. Par conséquent, un utilisateur peut obtenir toutes les informations dont vous avez besoin et accéder à des articles individuels sans être submergé par les informations.

Nous avons introduit le débordement de texte comme le titre de l'article. En outre, il est plus facile de sélectionner un seul article en survolant une fiche article en particulier. Nous avons distingué chaque article en maintenant l’uniformité générale. Vous trouverez ci-dessous une comparaison avec la conception précédente.

Avant :

Après :

Vous trouverez ci-dessous une explication des principes de conception selon un ordre numérique.

Principes de conception

  1. Nous avons compartimenté chaque article afin de pouvoir les différencier visuellement, tout en gardant un aspect uniforme et facile à parcourir.
  2. Nous avons réduit la redondance des fonctionnalités en supprimant toutes les fonctionnalités de la section de liste disponibles dans la sélection par lot.
  3. Tri : Le tri était difficile car il y avait un ordre chronologique répétitif. Au lieu de parcourir la liste, il vous suffit maintenant de cliquer sur un bouton pour trier comme vous le souhaitez.
  4. Recherche et filtrage : nous avons repositionné la barre de saisie dans le coin supérieur droit afin qu'elle soit facilement accessible (en suivant l'approche naturelle). La recherche et le filtrage fonctionnent maintenant simultanément dans tous les résultats de la recherche, alors qu’avant, le filtrage n’était applicable que pour la partie visible du tableau.
  5. En considérant le nouveau flux de travail sous Contenu, nous avons repensé une option Statut plus accessible via une liste déroulante sans modifier le flux de travail Statut principal.
  6. Pagination : réarrangez la pagination au bas du tableau rendant toutes les pages accessibles par sélection plutôt que par liste déroulante. Nous avons également donné la liberté de choisir le nombre de pages à afficher dans une seule vue et rendu les informations visibles sur le nombre de pages disponibles.
  7. Options : Nous avons placé tout le menu des options sous le bouton Option. Pour que vous n'ayez pas à aller sur une autre page et sélectionnez l'onglet spécifique pour effectuer une action. (À mettre en œuvre).
  8. Action rapide : Une action rapide a été ajoutée à chaque élément de la liste pour qu'il ne soit pas obligé d'accéder au menu Actions pour chaque élément sélectionné. (À mettre en œuvre)

Accessibilité

La conception de l'interface utilisateur administrative est centrée sur l'accessibilité. Il a la plus grande importance. Nous avons essayé d'implémenter chaque liste de contrôle d'accessibilité WCAG 2.1 dans notre conception.

Les niveaux AA de WCAG 2.1 requièrent un rapport de contraste d'au moins 4,5:1 pour le texte normal et de 3:1 pour le texte de grande taille, ainsi qu'un rapport de contraste d'au moins 3:1 pour les composants graphiques et d'interface utilisateur (tels que les bordures de saisie de formulaire). Le niveau AAA requiert un rapport de contraste d'au moins 7:1 pour le texte normal et de 4,5:1 pour le texte de grande taille.

Le texte large est défini à 14 points (généralement 18,66 pixels) et gras ou plus grand, ou 18 points (généralement 24 pixels) ou plus.

Puisque nous avons accordé la plus grande importance à l'accessibilité, nous avons assigné un menu complet pour Accessibilité sur la barre supérieure. De là où vous pouvez personnaliser vos besoins en matière d’accessibilité à votre convenance. Les fonctionnalités répertoriées ci-dessous sont ajoutées au menu Accessibilité.

  1. Mise à l'échelle du contenu
  2. Désactiver le mouvement
  3. Gros Curseur
  4. Pointeur de souris surligneur
  5. Échelle de contraste accrue
  6. Loupe
  7. Mode sombre (sera mis en œuvre ultérieurement)

 

Nous n'avons pas encore tout mis en œuvre sur la liste de contrôle d'un point de vue graphique. Ils sont mis en œuvre. La conception est mise en œuvre sur la base des quatre principes suivants.

  1. Principe 1 : perceptible
  2. Principe 2 : utilisable
  3. Principe 3 : compréhensible
  4. Principe 4 : Robuste

Les principes AA définis, seront certainement mis en œuvre, alors que nous allons essayer de mettre en œuvre le reste. Vous trouverez ci-dessous la liste de contrôle que nous allons développer.

Icône sur mesure

Pour transmettre la personnalité de la marque, de bonnes icônes sont obligatoires. Il est absolument nécessaire de créer une icône attrayante visuellement pour l’attractivité esthétique du design. Au lieu d'utiliser la version gratuite gonflée de FontAwesom. Nous avons essayé d'éliminer la charge de mémoire et de concevoir des icônes correspondant à la voix de notre conception. Nous avons créé une nouvelle bibliothèque de polices d'icônes pour le modèle d'interface utilisateur d'administration. Le Joomla Iconfont se compose de 426 icônes vectorielles infiniment extensibles absolument libre d'utiliser. Nous continuerons à ajouter d'autres icônes si nécessaire. C'est le repo GitHub pour la bibliothèque Iconfont de Joomla.

Menu

La page intérieure des éléments de menu est conçue selon les mêmes principes que les pages de liste. Cependant, il existe quelques modifications intéressantes. Vous trouverez ci-dessous une explication des principes de conception selon un ordre numérique.

Principes de conception

  1. Ajouter un nouveau menu : Nous avons introduit une nouvelle méthode révolutionnaire pour ajouter un nouvel élément de menu sans avoir à quitter la page de liste (sera implémentée).
  2. Auparavant, le menu du site et le menu de l'administrateur se trouvaient à des emplacements différents mais partageant des fonctionnalités similaires. Les deux sont placés tous ensemble dans la page de liste de menu interne.
  3. Module de liaison : nous avons résolu quelques problèmes avec le bouton Module lié, tels que la visibilité et la possibilité de survol. Par conséquent, nous avons amélioré la trouvabilité en la faisant figurer sur la liste des tables (à mettre en œuvre)
  4. Pour prévisualiser rapidement le menu de tous les éléments de menu affectés à un menu particulier, nous avons ajouté un bouton d’affichage rapide au lieu de rediriger les utilisateurs vers une autre page.

Processus de création de menu

Le processus de création de menu a également été radicalement amélioré. Vous trouverez ci-dessous une explication des principes de conception selon un ordre numérique.

  1. Nous avons simplifié le processus de sélection du type d'élément de menu en introduisant un menu déroulant au lieu de barres contextuelles. Ce faisant, nous avons considérablement réduit les difficultés d’interaction.
  2. Les informations à onglets sont apportées au début afin qu'elles soient toujours disponibles. Ils sont ajoutés à la barre latérale droite. Cette fonctionnalité comprend la planification, les options de lien, la sélection de menus et d'autres options toujours visibles pour votre commodité. Comme ils sont réductibles, vous pouvez y accéder à tout moment.

Module

La section Modules était incluse dans la section Contenus de la conception précédente. Étant donné que le contenu lui-même est un composant, nous l'avons déplacé dans une zone pertinente située dans la section Extensions.

Avant :

Après :

Nous avons créé un processus de sélection de module transparent avec recherche intégrée. Tous les modules sont répertoriés dans une fenêtre contextuelle afin que les utilisateurs n'aient pas besoin de quitter la page en cours.

Affectation de module

Nous avons repensé le processus d’affectation des modules pour le rendre plus facile en créant une structure d’arbre appropriée avec des modules.

Avant :

Après :

Médias

Avant :

Après :

  1. Nous avons introduit une arborescence de répertoires appropriée afin que les utilisateurs sachent où se trouve un fichier particulier lorsqu'ils en utilisent un.
  2. Une option de téléchargement avancée est introduite où les utilisateurs peuvent utiliser le système de glisser-déposer pour le téléchargement de fichiers ou utiliser une URL ou simplement ajouter un fichier directement à partir du cloud (sera implémenté ultérieurment).
  3. Pour une action rapide et des informations sur les médias, nous avons introduit un menu de points de suspension pour chaque fichier multimédia.
  4. Nous avons spécifié une icône désignée pour chaque type de fichier (docs, mp3, SVG, etc.) afin que vous puissiez reconnaître rapidement un type de fichier simplement en regardant les icônes.
  5. Nous avons ajouté un module réductible pour montrer aux utilisateurs la progression du téléchargement de fichiers de manière visuelle. Cela donne l'état d'avancement aux utilisateurs, alors qu'avant il n'y avait aucun moyen de voir les états. Nous avons également introduit des informations exploitables et des contrôles tels que Annuler et Supprimer.

Templates

Le gestionnaire de Template est placé sous Extensions alors qu'il était auparavant placé dans Système. Cela facilite beaucoup le processus d'installation du modèle. Vous trouverez ci-dessous une explication des principes de conception selon un ordre numérique.

Avant :

Après :

  1. Ajouter un nouveau template : Nous avons introduit une nouvelle méthode révolutionnaire pour installer un nouveau modèle sans avoir à quitter la page existante.
  2. Pour visualiser, identifier et sélectionner un template plus facilement parmi la collection de template, nous avons introduit un système de vue en grille.
  3. Redistribuez les informations de sorte qu'un utilisateur n'ait pas besoin de parcourir la documentation, la prévisualisation de template et d'autres informations relatives aux template. Comme ils sont soigneusement intégrés à la vue template.
  4. Rendre les actions connexes visibles sur le template par défaut.
  5. Placé un bouton commun pour rendre tout un template par défaut en un seul clic.

Système

Au lieu d'utiliser un tableau de bord pour toutes les fonctionnalités du système, nous avons introduit un menu intégré pour le système afin que les fonctionnalités du système soient toujours accessibles.

Après :

Configuration globale

  1. Nous avons suivi une approche centrée sur l'utilisateur tout en introduisant la barre latérale.
  2. Nous avons réorganisé l'architecture de l'information pour améliorer la facilité de recherche et la facilité d'utilisation.
  3. Nous avons correctement utilisé le concept de menu déroulant et de boutons radio. Et divisé des informations importantes en morceaux.

Installation de Joomla!

Nous avons inversé le processus d'installation en apportant le message d'avertissement au début de l'installation de Joomla. Cela devient gênant si les utilisateurs sont informés, après l'installation, qu'il doit corriger ces avertissements afin de pouvoir exécuter correctement le site.

Installation progressive

Nous avons introduit un tout nouveau système dans le processus d'installation et l'appelons Progressive Disclosure afin que vous ne soyez pas submergé par les champs de formulaire. Nous avons divisé l'ensemble du processus d'installation en 5 étapes consécutives.

Nous avons utilisé toutes les meilleures pratiques UX pour concevoir les champs de formulaire, tels que le titre en haut des champs de formulaire, un exemple de texte dans l'espace réservé et des instructions en bas pour que les utilisateurs puissent remplir le formulaire plus rapidement.

Pour prévenir les erreurs, nous avons ajouté des éléments tels que le mot de passe et l'indicateur de mot de passe en tant que type d'utilisateur.

Nous avons ajouté une barre de progression contenant des informations pertinentes dans le processus d’installation, afin que les utilisateurs puissent connaître leur statut. 

Lors de la finalisation du processus d'installation, nous avons fourni des options permettant de personnaliser l'installation et des recommandations, ainsi que des boutons permettant de rediriger vers la page d'administration et d'ouvrir l'aperçu de votre site en direct.

Connexion administrateur

Avant :

Après :

Au lieu de présenter les informations de manière diffut comme dans la conception précédente, nous avons fusionné toutes les informations dans une seule fenêtre. Les liens utiles tels que le forum d'assistance, la documentation et les nouvelles sont disposés en bas. Nous avons également ajouté une preuve sociale à voir lorsque l'utilisateur se connecte au système.

Les extensions

La conception de l'extension suivante est en cours de création et doit encore être mise en œuvre. Nous avons décomposé le plan ci-dessous.

Avant :

Après :

  1. Ajouter une nouvelle extension : Nous avons introduit une nouvelle méthode révolutionnaire pour installer une nouvelle extension sans avoir à quitter la page existante. Cela nous a aidé à supprimer les onglets existants tels que Télécharger depuis un package, Installer depuis une URL pendant les installations. Et ainsi les fusionner ensemble dans un seul popup.
  2. Nous plaçons l'option de catégorie dans le coin supérieur gauche afin qu'elle soit toujours facilement accessible. Et en fait un menu réductible avec une fonctionnalité d'affichage/masquage. Après avoir caché la catégorie, vous aurez plus d’espace pour parcourir les extensions.
  3. Nous avons placé les critiques et les scores sous l'aperçu des extensions.
  4. Nous avons supprimé l'encombrement visuel en utilisant un dépassement de texte et en contenant le texte de description sur 3 lignes.
  5. Pour accélérer le processus d’installation, nous avons ajouté un bouton d’installation sans avoir à accéder au répertoire.

Pour résumer, nous avons examiné de plus près l'infrastructure de Joomla! et avons identifié son caractère unique. L’organisation des données sous forme d’arbres est ce qui différencie Joomla! des autres CMS. Les développeurs ont été les concepteurs de notre bien-aimé CMS Joomla, basé sur la communauté, ce qui a permis de nombreuses fonctionnalités tout en augmentant le flux de travail. Une intégration négligé de nouvelles fonctionnalités pourrait faire de Joomla un autre CMS plus complexe. Ce qui ne devrait pas arriver. Nous avons abordé ces problèmes et incorporé la pensée conceptuelle dans les domaines où cela était possible. Avec ce design, nous espérons retrouver son régime perdu et remettre la couronne à Joomla! en tant que roi des CMS.

 

Article traduit de l'anglais au français. A noter l'énorme travail de toutes l'équipe de JoomShaper pour l'élaboration de ce concept.

 

 

 

Imprimer

Dans la même catégorie

Affichage des notifications

Le menu est fixé !

Le menu est fixé !

Joomla! 4 va rocker l'industrie du web

Joomla! 4 va rocker l'industrie du web