19 octobre 2009

5 Conseils cruciaux pour designer et maintenir facilement un site web

Comment s’assurer que le développement de notre site web évoluera dans le temps? Comment pouvons dès l’étape de la pré-production et de la conception penser à ce que notre site web sera dans 3-4 ans? Ce billet décrit 5 conseils cruciaux afin de concevoir dès le départ un site web qui durera dans le temps, sera facilement modifiable et facilitera sa maintenance.

1. Design et Maintien du Code

Ce premier conseil est sans aucun doute le plus grand des conseils que je peux vous donner. Il faut tout d’abord accepter qu’il y a un grand paradoxe entre ce que nous “apprenons” et ce que nous “faisons” dans la vraie vie. Durant mes années d’université, j’ai appris de nombreuses choses; des techniques, de la théorie, mais j’ai aussi appris à “apprendre”. Ce que les professeurs nous montrent et nous enseignent n’est malheureusement pas toujours à point. Peut-être par manque de connaissance de leur part, ou tout simplement par manque de temps. Mais le point demeure, une fois arrivé sur le marché du travail, nombreux sont ceux qui frappent un mur et s’aperçoivent que ce qu’ils ont appris n’était pas nécessairement la meilleur façon de travailler.

Il est possible de créer quelque chose de beau tout en gardant le cap sur ce que le produit doit être à la fin. Commencer dès le début à concevoir en pensant au développement à long terme du produit. L’étape de pré-production sert avant tout à s’assurer que nous sommes, dans la majorité des cas, paré à toute éventualité. Concevez le design de votre site web ou votre application de manière à ce qu’il soit facile à maintenir, mettre à jour et ainsi l’adapter rapidement et facilement à l’étape du polissage.

Bien souvent, lorsque nous designons un site, nous sommes portés à sacrifier bien des options simplement pour l’esthétique. Par example, nous pouvons être portés à utiliser des images aux endroits où du simple texte avec un style serait suffisant. Ou encore choisir une structure pour un menu qui n’a pas été pensé à un éventuelle mise à jour. Quand le site s’agrandira et que le menu n’aura plus assez d’espace, il deviendra alors complètement inutilisable.

J’ai eu à travailler sur une application de gestion qui s’addressait à plusieurs types d’utilisateurs, j’ai eu à inclure un menu de 12 boutons différents et qui aussi bizarre que cela peut paraître, ne pouvaient pas être regroupé ou réarchitecturé différemment. Le pire dans tout cela est que cette application était évolutive et que nous serions porté à y ajouter du contenu avec les années. Je n’ai pas besoin de vous mentionner que c’était chiant. Imaginez le calvaire que ce serait pour les programmeurs d’avoir tous ces boutons en image et de devoir travailler avec tous ces menus qui comportent tous un nombre différents d’éléments, dépendant du type d’utilisateur. Ouch! Heureusement pour eux, les boutons étaient dynamiques et permettait une meilleur intégration. Un aspect important de la maintenance est d’être capable de penser dès le départ comment le site va évoluer, grandir et changer. En résumé, lorsque vous travailler sur la conception d’un site d’envergure, regarder les façons qui vous permettre de rendre “votre” vie (en temps que designer) et “leurs” vies (en temps de développeurs/programmeurs) plus facile.

2. Trouver vos utilisateurs et mieux comprendre leurs objectifs

Demandez-vous qui sont vos utilisateurs, et quels sont leurs objectifs premiers en venant sur votre site. Comment pouvez-vous les aider dans leurs tâches afin de rendre leur visite plus facile et agréable, et ainsi augmenter le taux de conversion ou le retour sur votre site.

Que ce soit un site d’envergure ou un petit site web, le nombre d’utilisateurs visitant ou utilisant votre site peut varier. Tout dépendant du type de site web, vous pourriez être confronter à de possible acheteurs, auteurs (ajoutant ainsi une plus-value à votre site en emmenant du contenu), de simples visiteurs, des administrateurs et aussi des membres réguliers. Chaque type d’utilisateurs à ses propres objectifs, ses propres connaissances et ses propres tâches à accomplir. Un administrateur ou un membre régulier aura un taux d’absorption et d’adaptation à votre site et à son architecture bien plus grand qu’un visiteur qui visite votre site pour la première fois. Quelques fois ces tâches se chevauchent, et parfois ils sont complètement différents. Cependant nous devons nous rappeler que tous ces types d’utilisateur ne sont forcément pas tous égaux. Chaque utilisateur à ses besoins et ses contraintes, et nous devons tous essayer de répondre à leur besoins. L’endroit commun où ces types d’utilisateur se retrouvent est généralement à la page d’accueil. C’est à cet endroit que tous les utilisateur se rencontrent, recherche de l’information, se pose des questions et décide s’ils poursuive la visite de votre site ou si tout simplement quitte et ne revienne probablement jamais. Cela reviens à dire que la page d’accueil est le morceau le plus important de votre travail de design et d’architecture.

3. Comprendre le but du site

Avant de répondre aux différents besoins de vos utilisateurs, vous devez préalablement prioriser les groupes d’utilisateurs, et dans cet ordre d’idée, vous devez comprendre ce que le site essaie d’atteindre comme but. Bien que chaque groupe d’utilisateurs pense naturellement qu’il est le plus important, c’est à vous de mettre les priorités aux bonnes places et de voir le pourquoi le site a été premièrement créé.

Une fois l’analyse de vos utilisateurs et de leur tâches, et aussi du but premier du site, vous arrivez au point où vous mettez un type d’utilisateur avant un autre. Idéalement, sur chacune de vos pages, vous devriez identifier le type d’utilisateur, les tâches et les priorités.

4. Designer et raffiner

Avant de s’attaquer au design de votre site, il faut s’assurer que toutes les étapes précédentes, sans exception, ont été travaillées et réfléchies. Avez-vous défini vos types d’utilisateurs, le but du site, les priorités de celui, et ainsi de suite? Une fois fait, nous pouvons commencer le design. Le design visuel est une parti importante de l’expérience utilisateur, mais il faut bien comprendre qu’il ne fait que communiquer un message. Si le design ne communique rien ou n’amène rien de plus à l’utilisateur, il devient alors obsolète. D’où l’importance d’avoir accompli les étapes précédentes, sans quoi, un travail de redesign sur plusieurs pages ou de l’interface en entier sera inévitable.

viens après l’étape des maquettes, certains aiment commencer directement dans Photoshop, mais pour ma part, j’apprécie davantage utiliser une feuille de papier et un simple crayon. Et ce pour plusieurs raisons, mais la principale est qu’elle nous permet de s’attarder directement à l’architecture d’information. Nous indiquons grossièrement où le contenu se situe, comment nous interagissons avec sans perdre trop de temps à peaufiner une couleur, un boutons ou un effet visuel qui ne ferait que nous embrouiller dans notre travail.

Une fois que vous avez une bonne idée de comment vous aller interagir à travers votre site web et que vous avez esquisser les partie importante de votre site, viens l’étape de concevoir vos maquettes sur votre ordinateur et ainsi les raffiner, raffiner, raffiner. Raffinez les jusqu’à ce que tout ce qui n’est pas vraiment utile ne fasse plus parti de votre interface. Garder votre site web, sans interférence. Trop en faire ne veut pas nécessairement dire mieux faire. Variez vos essaies: changez les grosseurs, images, layout et tous ce qui affectent l’information que vous y présenter. Porter une attention particulière à ce qui vous saute aux yeux quand vous entrez pour la première fois votre site web. Est-ce que ce qui attire votre regard en premier répond aux objectifs de votre site web et aux tâches principales que vos utilisateurs veulent accomplir? Si la réponse est non, il serait intéressant de revenir à l’étape de raffiner votre design.

5. Organiser pour le futur

1-Une bonne structure = bonne organisation:

Scripts, Stylesheets, images d’interfaces, images de contenu, et ainsi de suite, toutes se doivent d’être organiser dans des dossiers séparer. Pour un petit site web, vous pourriez être capable de juste tout mettre ensemble. Cependant, plus le site est gros et plus il est important d’être capable de retrouver facilement et rapidement ce que vous avez de besoin.

2-Utilisez une façon cohérente et intelligente de nommer vos fichiers:

Rien de pire que de travail avec une pile d’images nommé avec des numéros (ex: image0143.jpg). La façon dont vous travaillez vous regarde, mais se doter du méthodologie utilisant des préfixes communs et descriptifs aide énormément. Par exemple, j’ai pris l’habitude de nommer mes boutons commençant par “btn_”, ou mes images de background par “bg_”. Les préfixes ont l’avantage que vos fichiers sont automatiquement triés par noms et ainsi apparaissent regroupé ensemble.

3-Faites un back-up de vos fichiers:

En tant que designer, vous serez tenter de vouloir voir instantanément votre travail lors d’un changement. vous enregistrerez alors vos nouveaux fichiers par dessus les anciens et ainsi vous les écraserez. Mais que se passera-t-il lorsque vous vous rendrez compte que vous devez revenir à la version précédente? Penser à utiliser un SVN (Subversion (en abrégé svn) est un système de gestion de versions).