Wikipedia Redesign: wat is er in de winkel?
Wikipedia ondergaat momenteel een hoognodig herontwerp om de gebruikerservaring te verbeteren.
Iedereen kan dit herontwerp bekijken door een account aanmaken, inloggen en klik vervolgens op de link 'Beta proberen' in de rechterbovenhoek van een willekeurige pagina.
Het "Wikipedia Usability-initiatief" is verdeeld in twee fasen. Fase 1 was de prototypefase en eindigde in de zomer van 2009.
Het projectteam bevindt zich momenteel in de tweede fase, de ontwikkelings- en testfase.
Het project is ook in vierën verdeeld releases ; vanaf het schrijven van dit artikel is de tweede uitgave (Babaco) momenteel in ontwikkeling.
In dit artikel bespreken we de ontwerpwijzigingen van Wikipedia en de redenen erachter.
Het Wikipedia Usability Initiative staat gepland om in het voorjaar van 2010 klaar te zijn. Meer informatie over het project is te vinden hier .
Het herontwerp is gericht op bruikbaarheid . Hoewel er geen drastische wijzigingen zijn aangebracht, is de algemene look en feel van de website veel schoner en moderner. De vernieuwde bewerkingsinterface is een belangrijke upgrade waar Wikipedia-editors zeker enthousiast van worden.
Zoals vele kleinschalige operaties heeft Wikipedia niet het budget om systematisch te testen hoe bezoekers de website gebruiken. In plaats daarvan vertrouwt het op feedback van gebruikers om problemen te lokaliseren en aan te pakken.
Schoongemaakt
Onze eerste indruk van het bèta-herontwerp is dat het er behoorlijk scherp en opgeruimd uitziet. De lay-out is nog steeds fundamenteel hetzelfde; dit herontwerp zal waarschijnlijk niet dezelfde verontwaardiging veroorzaken Facebook geroerd met zijn herontwerp terug in maart 2009.
De meest voor de hand liggende verandering is dat de verschillende componenten op de pagina niet langer beperkt zijn tot hun eigen doos. De gebieden navigatie en hoofdinhoud zijn niet ingesloten en strekken zich helemaal uit tot aan de rand van het browservenster.
De andere voor de hand liggende verandering is dat Wikipedia de achtergrondafbeelding van het open boek heeft teruggetrokken. Hierdoor wordt het ontwerp aanzienlijk opgeschoond en ziet het logo er veel scherper uit.
Oud ontwerp:
Nieuw ontwerp:
Lichte verandering in kleuren
Over het algemeen ziet het nieuwe ontwerp er zachter uit . De navigatielinks in de linkerzijbalk zijn nu iets groter en gemakkelijker te lezen. De kleuren van de koppelingen zijn enigszins gewijzigd om ze minder levendig te maken.
Het veranderen van de bezochte linkkleur van paars naar donkerblauw, maakt de website er moderner uit. Het vereenvoudigt ook het kleurenschema en maakt het uiterlijk professioneler.
Zoek naar barverplaatsing
De enige verandering die normale bezoekers zou kunnen laten struikelen, is de verplaatsing van de zoekbalk.
Het is niet langer genesteld in het midden van het navigatiegedeelte. Het is verplaatst naar de rechterbovenhoek van de pagina. Deze plaatsing is standaard geworden op veel websites en is waar mensen eerst kijken wanneer ze een zoekopdracht willen uitvoeren.
De nieuwe locatie van de zoekbalk:
Reorganized Tabs
De tabbladen zijn ook gereorganiseerd. Ze hebben een nieuwe look gekregen en zijn nu gemakkelijker te herkennen. Door ze in twee groepen te verdelen, wordt hun structuur logischer. De vervaagde bovenkant van de tabbladen opent ook de pagina.
Oud ontwerp:
Nieuw ontwerp:
Pagina bewerken
De nieuwe interface voor het bewerken van pagina's is geweldig. De combinatie van tekstuele en grafische pictogrammen en de groep bewerkingsopties maakt bewerken veel eenvoudiger.
Om erachter te komen wat elke knop eerder deed, moest de gebruiker over het niet-intuïtieve pictogram zweven en wachten tot de knopinfo verschijnt. niet meer. En met het nieuwe paneel rechts van het tekstgedeelte kunnen gebruikers door de pagina navigeren.
Oude bewerkingsinterface:
Nieuwe bewerkingsinterface:
Als u de nieuwe functies wilt inschakelen, gaat u naar 'Voorkeuren' en klikt u vervolgens op het tabblad 'Bewerken'. Onderaan vindt u een aantal selectievakjes met het label 'Experimenteel'.
De experimentele functies inschakelen:
De nieuwste versie bevat nieuwe dialoogvensters voor het invoegen van links en tabellen. Omdat het tekstgedeelte een beetje rommelig kan worden, zijn deze dialoogvensters handig om gebruikers te helpen zich op één taak tegelijk te concentreren.
Het dialoogvenster van de tabel zou kunnen werken met meer functionaliteit (zoals u de mogelijkheid bieden de inhoud van tabelcellen te bewerken), maar deze versie is nog in ontwikkeling, dus ik zal wachten om te zien of er nog meer komt voordat officieel functies aan mijn verlanglijstje worden toegevoegd.
Het dialoogvenster voor het invoegen van een link:
Het dialoogvenster voor het invoegen van een tabel:
Wat ontbreekt er?
Omdat het project nog steeds in bèta is, is dit het beste moment om aan te geven wat er nog meer kan worden gedaan om de gebruikersinterface van Wikipedia te verbeteren. Hier zijn mijn ideeën:
- AJAX BeautyTip voorbeeld van link hover
Het zou netjes zijn als er een tooltip zou verschijnen, via de BeautyTip jQuery-invoegtoepassing, wanneer u over een interne koppeling zweeft. De tooltip zou de eerste alinea van het gekoppelde artikel bevatten. De toename in bandbreedte van deze functie is misschien te groot, maar ik wil het nog steeds graag laten testen. - Syntaxis inkleuren in het bewerkte tekstgebied
Werken met code allemaal in dezelfde kleur is erg moeilijk. Het menselijk oog moet de tekst lineair scannen om te ontdekken dat hij dat wil. Visuele hints zouden een enorme hulp zijn. Terwijl we bezig zijn, zou het tekstgedeelte ook een horizontale schuifbalk moeten hebben, zodat dingen zoals tabellen er mooier uitzien in de code. - Optie om lichaamstekst met vaste breedte te hebben
Wanneer ik een lange passage van tekst aan het lezen ben, vind ik het leuk om mijn venster te maximaliseren om afleidingen te minimaliseren. Zoals het is, kan ik dit niet doen omdat de tekstregels breder worden dan mijn breedbeeldmonitor. Ik zou graag de breedte van alinea's tot ongeveer 600 pixels willen aanpassen om het lezen te vergemakkelijken. - Verhoog het visuele gewicht van de "Go" -knop
De enige verandering waar ik tegen ben, is de knop "Go" even zwaar maken als de knop "Zoeken". Het oude ontwerp woog de "Go" -knop een beetje zwaarder, waardoor het duidelijk was dat het indrukken van de "Enter" -toets hetzelfde was als het klikken op de "Go" -knop. Het verschil in gewicht was klein genoeg zodat gebruikers het verschil alleen konden zien door er recht naar te kijken. Dit moet worden teruggebracht.
Probeer het!
Het nieuwe ontwerp ziet er goed uit, maar het is nog niet af. Ik weet zeker dat het Wikipedia Usability Initiative-team het op prijs zou stellen als iedereen de bèta zou uitproberen en feedback zou sturen.
Wikipedia is afhankelijk van zijn gebruikers om erachter te komen hoe de website te verbeteren, en ik ben er zeker van dat de Webdesigner Depot-community met enkele geweldige ideeën kan komen.
Ten slotte, overweeg doneren aan Wikipedia . Omdat je kunt lezen oude Nintendo-spellen zonder Evony-advertenties is het bezaaid met een rommelige pagina.
Exclusief geschreven voor WDD door Eli Penner .
Wat denk je van het aankomende ontwerp van Wikipedia? Hoe zou je het ontwerp verbeteren?