Dans ce chapitre, nous allons voir un dernier exemple que vous allez forcément rencontrer, si ce n’est pas déjà le cas : la modification d’une fonctionnalité existante.
Les enjeux ici sont que non seulement il vous faut créer du code, modifier un projet, mais en plus, garantir que la fonctionnalité que vous avez changée n’ait pas régressé et perdu en intérêt pour votre utilisateur.
Je vous propose la situation suivante : en allant à un meetup sur la conception d’interface utilisateur et d'expérience utilisateur (UI et UX), vous avez vu qu’il était plus pertinent de mettre les liens cliquables en haut à droite. Aujourd’hui vous avez vos liens en haut à gauche. En effet, dans le chapitre précédent, c’est ce que vous proposait le tutoriel.
Cependant, pour les droitiers, depuis un téléphone mobile, il est plus facile d'accéder au coin droit que gauche. Or, statistiquement il y a plus de gens qui utilisent leur téléphone de la main droite, en utilisant leur pouce pour interagir avec l'écran :
Quand on travaille dans le développement, avoir des notions de conception d'expérience utilisateur est un vrai plus, surtout si vous n’avez personne de formé dans votre équipe. En effet, votre priorité reste votre utilisateur ; construire une fonctionnalité inutile ou mal pensée peut être une perte de temps pour vous. Ce, quel que soit votre langage ou votre technologie. Le cours UX design : découvrez les fondamentaux est une bonne introduction aux notions d’UX.
Étape 1 : posez-vous des questions pour identifier l’objectif visé
Qu’est-ce que je souhaite faire ?
Vous voulez modifier l’emplacement des liens permettant la navigation sur votre page depuis la barre de navigation qui se trouve en haut de l’écran. Ils passeront de gauche à droite, toujours regroupés.
De quel langage/quelle technologie j’ai besoin ?
Les liens hypertextes et ma barre de navigation sont des balises HTML, il semblerait que quelques paramètres en CSS soient suffisants. Les flexbox peuvent vous être utiles !
Quels sont les outils à ma disposition ?
HTML et CSS font partie de vos compétences. Il existe une multitude d’exemples et de tutoriels qui utilisent les flexbox en HTML/CSS.
Quel serait mon MVP ?
Ici le changement pour l’utilisateur ne peut pas se faire en plusieurs étapes. Le MVP est donc la modification de l’emplacement des liens cliquables, tout simplement.
Étape 2 : isolez la fonctionnalité
Vous n’avez pas eu le temps de valider votre proposition avec un avis extérieur mais elle ne devrait pas prendre trop de temps, donc présenter trop de risque.
Pour garantir la sécurité de pouvoir revenir en arrière, ici nous avons un très bel exemple de l’utilisation des branches avec Git. En effet, les branches permettent, entre autres, de pouvoir faire vivre plusieurs versions du projet en même temps, sans que l’une ou l’autre ne soit impactée. Cela vous permettra d’isoler votre modification. Vous ne la fusionnerez avec le projet en ligne qu’une fois que vous serez sûr.
Étape 3 : utilisez les ressources disponibles
L’objectif va donc être d'en savoir plus sur les flexbox. En tapant sur Google “flexbox css”, vous tombez sur cet article très clair, qui est exactement ce dont vous avez besoin !
Vous vérifiez la date de publication pour être sûr qu’il ne soit pas trop ancien. Ici il n’a que quelques mois, c’est parfait.
Concrètement ici, dans l’article, vous allez vous intéresser en premier à la partie container. En effet, la barre de navigation est un container, c’est sur ces propriétés que vous allez vous concentrer.
Étape 4 : intégrez la solution à votre projet
Pas besoin d’aller chercher midi à quatorze heures, vous testez la modification directement dans votre code. Mais ! Avant cela, vous avez fait une nouvelle branche sur Git, bien sûr. Grâce à ça, vous pouvez facilement annuler vos modifications et revenir en arrière. De plus, vous n'impactez pas directement le projet qui est en ligne, car ce n’est pas la même branche, donc pas la même version.
N'hésitez pas à lancer votre page web à chaque ajout d’une ligne dans le code CSS pour bien comprendre l’impact de celle-ci. Rappelez-vous, copier-coller du code c’est bien, mais c’est mieux si vous le comprenez !
En testant flex-direction: row-reverse , vous obtenez le résultat voulu. Parfait !
Alors oui, si vous avez testé justifiy-content: flex-end , vous avez obtenu le même résultat. Parfois il existe plusieurs façons de faire ce que l’on cherche à faire.
Ici, vous savez que vous allez ajouter un logo de l’autre côté de la barre de navigation. flex-direction semble donc la solution la plus appropriée pour notre cas.
N’ayez pas peur de tester pour voir et bien comprendre chacune des propriétés.
Si tout est OK, que vous avez bien testé que la navigation est toujours fonctionnelle, un nouveau commit est nécessaire. Ce n’est qu’une fois que vous serez sûr que vous pourrez fusionner cette modification sur la branche principale où se trouve le projet en ligne ou la version finale, et enfin, publier pour votre utilisateur.
En résumé
Les meetups sont un excellent moyen de continuer à monter en compétences et rencontrer des gens.
Les branches Git permettent de faire cohabiter plusieurs versions du projet sans prendre de risques.
Votre utilisateur doit être au centre de votre conception, c’est pour cela qu’avoir des notions UX est un vrai plus !
Et voilà, vous avez maintenant une multitude d’outils pour prendre dès maintenant de bonnes habitudes de développeur. Je vous encourage à les tester, à vous tromper et à apprendre, surtout !
