Design, UX, Technique & Performance - lorsque votre portail s'améliore encore !

Design, UX, technologie & performance - lorsque ton portail devient encore meilleur!

Stefan Petri
publié:

De marquant et frappant à plutôt discret mais néanmoins utile – ces dernières semaines et mois, nous avons apporté de nombreux changements sur TutKit.com. Parmi eux se trouvaient des améliorations de performances et des mises à jour techniques ainsi que des ajustements de design et d'expérience utilisateur. Tout cela impacte positivement ton expérience utilisateur. Ce qui a changé sous le capot et au-dessus – un aperçu complet.

Maintenant c'est sombre

Désormais, tu peux changer le design en foncé ou clair à tout moment en un seul clic. Nous l'avons préconfiguré selon ce qui est défini dans le système d'exploitation.

Dunkle Design in TutKit.com aktivieren

Dans cette foulée, nous avons également converti toutes les images au format AVIF, afin que votre navigateur n'ait pas à télécharger autant de données (environ 70 % de la taille des images ont ainsi diminué en terme de taille de fichier).


Ressources, modèles & E-books : plus en un coup d'œil, sans clic supplémentaire

Depuis longtemps, nous affichons sur les pages de nos ressources, modèles et E-books des miniatures représentatives de tous les contenus individuels. Ainsi, tu vois directement ce à quoi t'attendre lors du téléchargement.

Derrière chaque miniature se cachait également un petit menu. Par ce biais, tu pouvais agrandir la miniature, marquer le contenu comme favori et accéder aux indications de compatibilité. Sympa ... Mais cela signifiait aussi que tu devais ouvrir le menu pour agrandir chaque image, cliquer sur une icône, regarder l'image et la refermer avant de passer à la suivante. Un détour inutile. Nous avons donc supprimé le menu. Désormais, il suffit de survoler une petite miniature avec la souris, et hop : la version grand format t'est présentée.

Les ajustements supplémentaires réalisés lors de la refonte ont rapidement entraîné d'autres modifications judicieuses : Les indications de compatibilité peuvent maintenant être consultées via l'icône-info directement visible. La mise en favori du contenu se fait via l'icône en forme d'étoile également visible directement, laquelle n'est désormais affichée que pour les utilisateurs connectés.

Effet de survol pour les éléments individuels
Concentré sur l'essentiel : Lors de la visualisation de nos contenus individuels, il te suffit de survoler la miniature pour la voir en grand. D'autres fonctionnalités, auparavant cachées dans un menu, sont maintenant directement accessibles via des icônes.

Tutoriels vidéo : désormais tu es aussi ici dans l'image par l'image !

Si tu as déjà exploré l'une de nos pages de tutoriels vidéo il y a quelque temps, tu as dû y trouver peu plus qu'un désert gris de textes et de boutons de lecture. La présentation a été entièrement repensée, de manière à refléter exactement la même disposition que celle des ressources, modèles et E-books.

En d'autres termes : Même pour nos tutoriels vidéo, de petites vignettes sont maintenant visibles, ce qui est tout simplement plus esthétique. Que la vidéo soit gratuite ou une mise à jour récente, tu le vois – comme pour les ressources – sous la forme de badges colorés sur les images.

Nouvelle vue: vidéos avec images d'aperçu
De gris à wow : Alors que tu ne voyais que des boutons de lecture auparavant dans les tutoriels vidéo, nous affichons maintenant également des miniatures.

Ainsi, nos pages se présentent désormais de manière uniforme. Que ce soit pour une ressource, un modèle, un E-book ou un tutoriel vidéo : il y a une miniature que tu peux agrandir en passant la souris dessus ; il y a un bouton pour le téléchargement ou pour lire la vidéo ; il y a des icônes pour plus d'informations et pour ajouter aux favoris ; si des éléments supplémentaires comme des fichiers de projet, des instructions ou des tutoriels texte sont disponibles, tu trouveras les liens en bas des descriptions de texte.

De plus, des éléments superflus comme les icônes de triangles d'ouverture et de fermeture des textes ont été supprimés, de sorte que la vue est plus épurée selon le principe du moins c'est plus. Toutes les améliorations ont également été adaptées pour les appareils mobiles.

Le grand nettoyage sur les pages des packages complets

Qu'est-ce qui peut être supprimé ? Comment peut-on afficher les choses différemment ? Où peut-on placer quelque chose de mieux ? Ce sont les questions que nous avons posées à nos pages de packages complets pour les simplifier tout en maintenant un haut niveau d'informations. En plus des changements mentionnés ci-dessus dans la vue des contenus individuels, nous avons apporté les ajustements suivants :

Galerie : Dans les galeries, nous montrons comment utiliser par exemple nos ressources et modèles. Auparavant, il y avait un effet de rotation ici. Joli, mais aussi distrayant. Nous avons donc réduit la vue de la nouvelle galerie à exactement trois éléments : tu vois l'image sélectionnée, un sous-titre et la navigation vers la gauche et la droite - sans grand feu d'artifice d'effets.

Ouvrir et fermer et un peu plus de couleur : Jusqu'à présent, presque chaque section d'une page de package complet pouvait être ouverte ou fermée, avec des boutons correspondants sous forme de triangles disponibles. La fonctionnalité a été supprimée. Cela rend les pages encore plus claires – et soyons honnêtes : Y a-t-il quelqu'un qui ait jamais utilisé cette fonctionnalité ? En outre, nous avons offert un peu plus de couleur aux sous-titres en continu. Désormais, au lieu d'un noir massif, un vert tendre de TutKit sépare les différentes sections de haut en bas.

Zone d'information : En haut à droite des pages des packages complets, nous regroupons toutes les informations supplémentaires, par exemple concernant la compatibilité, le nombre de contenus et les catégories. Beaucoup de données sont réunies ici.

Nous avons de nouveau rangé et amélioré de manière illustrative la zone d'information. Ainsi, les progrès dans l'apprentissage des tutoriels ne sont désormais visibles que pour les utilisateurs connectés (les visiteurs déconnectés n'en ont de toute façon pas besoin). L'évaluation de nos packages a été déplacée vers le bas dans la section des commentaires. Nouveau dans la zone d'information, un lien vers les droits d'utilisation. Le changement le plus frappant concerne finalement la représentation des personnes ayant créé le package. Au lieu de leurs noms, nous affichons leurs portraits. Espérons que cela rende l'ensemble un peu plus convivial...

De nombreuses petites améliorations de détails :

  • plus de navigation par slider pour les logiciels/catégories
  • défilement continu général sur la recherche, les pages de catégories, etc.
  • Cards : moins d'ombre, plus d'icônes, coins carrés
  • Cards : animation supprimée, à la place un overlay vert
  • Effet de survol optimisé sur les boutons divisés
  • Visages plus grands, par exemple dans le blog et pour la visite guidée en vidéo
  • Visage dans le formulaire de contact
  • Pied de page entièrement nouveau (plus d'ouverture, affichage des visages, etc.)
  • Page de l'auteur : suppression du lien "Vers le site web de l'auteur", défilement continu, overlays verts
  • Page d'accueil : Nouveaux contenus plus présentés sous forme de slider
  • 4 colonnes pour les auteurs
  • Pop-ups avec saut de page
  • Nouveau module pour les publics cibles

Avec moins de questions sur l'amélioration des performances

Des pages rapides qui se chargent rapidement - Google aime ça, nous aussi et vous aussi sûrement. En ce qui concerne les performances de notre portail, nous continuerons à apporter des améliorations à l'avenir. Par exemple, nous avons déjà mis en œuvre l'optimisation des images. Elles ont en effet été passées du format JPG plus léger aux formats WEBP et AVIF beaucoup plus légers.

De plus, nous avons examiné les bases de données et les requêtes effectuées lors de l'appel de nos pages. Assez technique tout ça, mais juste pour donner un exemple : lorsque vous arrivez sur l'une de nos pages de packages complets avec des tutoriels, le système doit savoir, entre autres choses, dans quelle mesure vous pouvez regarder les vidéos. Avez-vous donc une adhésion? Avez-vous acheté le package? Certains vidéos sont-ils éventuellement gratuits? Nous devons poser de telles questions en grand nombre lors de l'appel des pages, ce qui prend évidemment du temps. C'est pourquoi nous agissons ici pour améliorer les performances (Attention, les choses deviennent vraiment techniques):

  • Les requêtes inutiles à la base de données, posant plus de questions que nécessaire, ont été supprimées.
  • La vitesse des requêtes les plus fréquemment effectuées à la base de données a été améliorée.
  • Le code dans les méthodes PHP a été optimisé et les requêtes répétées à la base de données dans certaines boucles ont été éliminées.
  • Toutes les parties de notre système ont été vérifiées pour d'éventuelles requêtes inutiles à la base de données utilisées sur toutes les pages, en particulier celles liées à nos menus. Ces dernières ont été optimisées pour de meilleures performances.
  • Il a été constaté que certaines requêtes à la base de données étaient inutilement répétées plusieurs fois, en particulier celles associant les utilisateurs aux packages. Ces répétitions ont été corrigées en utilisant un système de mémoire cache temporaire, permettant ainsi d'économiser du temps et des ressources.
  • Les journaux d'erreurs du système ont été surveillés et tous les problèmes signalés ont été résolus.
  • Les tâches système automatisées (Cronjobs) ont été vérifiées pour celles qui duraient trop longtemps ou qui échouaient. Ces tâches ont été rendues plus efficientes en filtrant les informations directement depuis la base de données, plutôt que via du code PHP indirectement.

Concernant la technologie, tout est à jour ? Tout est à jour !

Nous avons bien sûr également optimisé beaucoup de choses sous le capot ou mis à jour des packages logiciels comme :

  • Mise à jour vers la dernière version de PHP.
  • Laravel (notre framework) a été mis à jour de la version 9 à la 10.
  • Près de 35 packages du framework ont été mis à jour ainsi que le SDK de notre fournisseur de paiement Braintree.
  • Nous utilisons maintenant http2 (nous aimerions vraiment utiliser la version 3, mais le serveur Apache ne le prend pas encore en charge).
  • Ubuntu a été mis à jour de la version 20.04 à la 22.04 (ce qui était important pour le support de l'image AVIF).

Qu'est-ce qui vient ensuite ?

Nous travaillons actuellement intensivement pour rendre notre portail accessible en plusieurs langues à partir de janvier. C'est un grand effort, mais nous sommes fiers lorsque nous y parvenons.

De plus, il sera possible dès la semaine prochaine d'acheter des contenus individuels à prix réduit, s'il y a une promotion en cours. Cela implique que notre boutique distincte (shop.psd-tutorials.de) ne sera plus mise à jour avec de nouveaux produits et sera fermée au plus tard à la fin du premier trimestre 2024, et tous nos contenus seront accessibles exclusivement sur TutKit.com.

Nous prévoyons également d'envoyer au moins une fois par mois une newsletter en 2024, afin que tous les membres et abonnés à la newsletter puissent voir toutes les nouveautés. Car jusqu'à présent, nous avions toujours réussi à publier au moins un nouveau contenu chaque semaine!

Nous continuerons bien sûr à fournir de nouveaux contenus intéressants. Par exemple, je veux personnellement réaliser une nouvelle formation sur Adobe Photoshop Elements, car il y a enfin eu des changements sur l'interface et il est maintenant temps de fournir une toute nouvelle formation à ce sujet. Le thème de l'IA continuera à nous occuper et nous maintiendrons ou proposerons de nouveaux produits existants au top de leur forme.

Il manque encore quelque chose? N'hésitez pas à m'écrire un e-mail à info@tutkit.com. Je serais également ravi si le blog avait une fonction de commentaire. Qu'en pensez-vous? Utile ou est-ce que de toute façon presque personne ne commente par manque de temps?

Publié le de Stefan Petri
Publié le:
De Stefan Petri
Stefan Petri gère avec son frère Matthias le populaire forum spécialisé PSD-Tutorials.de ainsi que la plate-forme d'apprentissage en ligne TutKit.com, qui met l'accent sur la formation et le perfectionnement des compétences professionnelles numériques. 
Retour à l'aperçu