Wikipedia fait actuellement l'objet d'une refonte indispensable pour améliorer l'expérience utilisateur.

Tout le monde peut prévisualiser cette refonte en créer un compte, se connecter puis en cliquant sur le lien "Essayer la bêta" en haut à droite de n'importe quelle page.

L’ Initiative d’utilisation de Wikipedia a été divisée en deux phases. La phase 1 était la phase prototype et s'est terminée à l'été 2009.

L'équipe du projet est actuellement dans la deuxième phase, qui est la phase de développement et de test.

Le projet a également été divisé en quatre libère ; dès la rédaction de cet article, la deuxième version (Babaco) est en cours de développement.

Dans cet article, nous discuterons des changements de conception de Wikipedia et des raisons qui les ont motivés.

L'initiative d'utilisation de Wikipedia devrait être prête au printemps 2010. Plus d'informations sur le projet sont disponibles ici .

La refonte est axée sur la convivialité . Bien qu'aucun changement radical n'ait été apporté, l'aspect général du site Web est beaucoup plus propre et moderne. L'interface de retouche améliorée est une mise à jour majeure sur laquelle les éditeurs de Wikipédia seront certainement intéressés.

À l'instar de nombreuses opérations à petite échelle, Wikipedia ne dispose pas du budget nécessaire pour tester systématiquement la manière dont les visiteurs utilisent le site Web. Au lieu de cela, il s'appuie sur les commentaires des utilisateurs pour identifier et résoudre les problèmes.

Nettoyé

Notre première impression de la refonte de la version bêta est qu’elle est assez nette et nette. La mise en page est toujours fondamentalement la même; cette refonte ne causera probablement pas le même outrage que Facebook remué avec sa refonte en mars 2009.

Le changement le plus évident est que les divers composants de la page ne sont plus confinés dans leur propre boîte. Les zones de navigation et de contenu principal ne sont pas fermées et se prolongent jusqu'au bord de la fenêtre du navigateur.

L'autre changement évident est que Wikipedia a retiré l'image de fond du livre ouvert. Cela nettoie la conception de manière significative et rend le logo beaucoup plus net.

Conception ancienne:


Nouveau design:

Léger changement de couleurs

Dans l'ensemble, le nouveau design est plus doux . Les liens de navigation dans la barre latérale gauche sont maintenant légèrement plus gros et plus faciles à lire. Les couleurs des liens ont été légèrement modifiées pour les rendre moins vives.

L'ancienne couleur du lien (à gauche) par rapport à la nouvelle couleur du lien (à droite):


L'ancienne couleur du lien visité (à gauche) par rapport à la nouvelle (à droite):

Changer la couleur du lien visité du violet au bleu foncé contribue grandement à rendre le site plus moderne. Cela simplifie également la palette de couleurs et rend l’apparence plus professionnelle.

Déplacement de la barre de recherche

Le seul changement susceptible de faire trembler les visiteurs réguliers est la réinstallation de la barre de recherche.

Il n'est plus niché au milieu de la section de navigation. Il a été déplacé en haut à droite de la page. Ce placement est devenu standard sur de nombreux sites Web et est l'endroit où les gens regardent en premier lorsqu'ils veulent effectuer une recherche.

Le nouvel emplacement de la barre de recherche:

Onglets réorganisés

Les onglets ont également été réorganisés. Ils ont reçu un nouveau look et sont maintenant plus faciles à repérer. Les diviser en deux groupes rend leur structure plus logique. La partie supérieure des onglets ouvre également la page.

Conception ancienne:


Nouveau design:

Modification de la page

La nouvelle interface d'édition de page est merveilleuse. Le mélange d'icônes textuelles et graphiques et le regroupement des options d'édition facilitent la modification.

Pour déterminer ce que chaque bouton faisait auparavant, l'utilisateur devait survoler l'icône non intuitive et attendre que l'info-bulle apparaisse. Plus maintenant. Et le nouveau panneau à droite de la zone de texte aide les utilisateurs à naviguer dans la page.

Ancienne interface d'édition:


Nouvelle interface d'édition:


Pour activer les nouvelles fonctionnalités, accédez à vos "Préférences", puis cliquez sur l'onglet "Modification". En bas, vous trouverez des cases à cocher intitulées "Expérimental".

Activation des fonctionnalités expérimentales:


La dernière version inclut de nouvelles boîtes de dialogue pour insérer des liens et des tableaux. La zone de texte pouvant être un peu encombrée, ces boîtes de dialogue sont utiles pour aider les utilisateurs à se concentrer sur une tâche à la fois.

La boîte de dialogue de la table peut faire plus de fonctionnalités (comme vous permettre d'éditer le contenu des cellules de la table), mais cette version est encore en développement. J'attendrai donc pour voir si d'autres fonctionnalités sont ajoutées à ma liste de souhaits.

La boîte de dialogue pour insérer un lien:

La boîte de dialogue pour insérer un tableau:

Qu'est-ce qui manque?

Étant donné que le projet est encore en version bêta, le meilleur moment est de suggérer ce qui peut être fait pour améliorer l'interface utilisateur de Wikipedia. Voici mes idées:

  • Aperçu d'AJAX BeautyTip sur le survol de lien
    Ce serait bien si une infobulle apparaissait, via le BeautyTip jQuery plug-in, chaque fois que vous survolez un lien interne. L'info-bulle contiendrait le premier paragraphe de l'article lié. L'augmentation de la bande passante de cette fonctionnalité pourrait être trop importante, mais j'aimerais quand même la tester.
  • Coloration de la syntaxe dans la zone de texte d'édition
    Travailler avec du code tout dans la même couleur est très difficile. L'œil humain doit scanner le texte linéairement pour le trouver. Des conseils visuels seraient une aide énorme. Alors que nous y sommes, la zone de texte devrait également avoir une barre de défilement horizontale afin que les choses comme les tableaux soient plus belles dans le code.
  • Possibilité d'avoir un corps de texte à largeur fixe
    Lorsque je lis un long passage de texte, j'aime maximiser ma fenêtre pour minimiser les distractions. En l’état, je ne peux pas le faire parce que les lignes de texte deviennent plus larges que mon moniteur à écran large. J'aimerais pouvoir fixer la largeur des paragraphes à environ 600 pixels pour faciliter la lecture.
  • Augmente le poids visuel du bouton "Go"
    Le seul changement auquel je suis confronté est de faire en sorte que le bouton "Go" ait le même poids que le bouton "Search". L'ancienne conception pondérait le texte du bouton "Go" un peu plus lourd, rendant évident que le fait d'appuyer sur la touche "Entrée" était la même chose que de cliquer sur le bouton "Go". La différence de poids était suffisamment faible pour que les utilisateurs puissent voir la différence en la regardant juste. Cela devrait être ramené.

Essaye le!

Le nouveau design a l'air bien, mais ce n'est pas encore fini. Je suis sûr que l’équipe Wikipedia Ergonomie Initiative apprécierait que tout le monde teste la version bêta et envoie des commentaires.

Wikipédia dépend de ses utilisateurs pour savoir comment améliorer le site Web, et je suis certain que la communauté Webdesigner Depot peut proposer de bonnes idées.

Enfin, considérez faire un don à Wikipedia . Parce que pouvoir lire vieux jeux Nintendo sans Evony Ads jonchent la page est plutôt sympa.


Écrit exclusivement pour WDD par Eli Penner .

Que pensez-vous du design de Wikipedia? Comment pourriez-vous améliorer le design?