Hardware.Info design update

124 reacties
Inhoudsopgave
  1. 1. Inleiding
  2. 2. Tekentafel
  3. 3. Voorpagina, header & footer
  4. 4. Nieuws- en review-overzichten
  5. 5. Productgroeppagina's
  6. 6. Productpagina's
  7. 7. Gadgets
  8. 8. Twitter en Facebook
  9. 9. Op naar de volgende stap
  10. 10. Reacties

Inleiding

12 augustus vorig jaar introduceerden we Hardware.Info 4.0 – een geheel nieuwe layout en design, na ruim vier jaar ontwikkeling en verbetering van de website sinds de vorige vernieuwing. De reacties waren (gelukkig) grotendeels positief en dankzij de uitgebreide feedback konden we in de eerste maand na de introductie al een zeer groot aantal verbeteringen aanbrengen, waaronder wegpoetsen van bugs die er ondanks uitgebreid testen tussendoor waren geglipt. Een aantal zaken vergde wat meer tijd, maar vandaag is het zover: het design van de site heeft een flinke lik verf gekregen.

Een productinfomenu direct na introductie van Hardware.Info 4.0...

Bij introductie van Hardware.Info 4.0 constateerden we dat over één onderdeel van het design de meningen zeer sterk verdeeld waren: de lichtblauwe achtergrondkleur. Hoewel sinds jaar en dag kenmerkend onderdeel van de HWI huisstijl, bleek het voor menige vaste bezoeker toch even slikken te zijn, het grote blauwe vlak, dat vooral op hoge resoluties goed zichtbaar was. Vervelender was, dat zowel de kleur blauw als bepaalde andere onderdelen van het design zeer verschillend werden weergegeven, afhankelijk van de gebruikte monitor. Met name goedkopere TN-panelen en notebookschermen bleken allerlei nuances, aanwezig in het design, niet goed weer te geven.

...en zoals het er tot 21 april 2011 uitzag...

Een ongewenst gevolg was dat de diverse elementen van de site niet voor iedereen goed te onderscheiden waren. Bij een site als Hardware.Info, met een zeer grote hoeveelheid uiteenlopende informatie (ruwweg onderverdeeld in redactionele inhoud, productinformatie en community-pagina's), is het van groot belang dat de bezoeker weet waar hij/zij zich bevindt. Kleurgebruik en contrast kunnen daarbij een belangrijke rol spelen, die met het design bij introductie van HWI 4.0 niet goed uit de verf kwam. Reden genoeg om te inventariseren wat beter kon en daar wat aan te doen!

...en het menu in de nieuwe vormgeving!

Tekentafel

Naar aanleiding van deze inventarisatie, waarin zoals gezegd ook de feedback van bezoekers en contacten is meegenomen, zijn we terug naar de tekentafel gegaan om een aantal aanpassingen te maken. Eén resultaat is direct zichtbaar: de lichtblauwe achtergrond is verdwenen. Op meerdere plaatsen is daarnaast het contrast van designelementen verhoogd, maar de belangrijkste wijziging is een sterkere visuele scheiding tussen de ‘hoofdinhoud’ aan de linkerkant van het scherm op alle pagina’s met uitzondering van de voorpagina en de ‘gadgets’ aan de rechterzijde. Met deze aanpassingen hopen we dat het voor onregelmatige bezoekers sneller duidelijk is waar ze moeten kijken voor de belangrijkste informatie – of het nu een nieuwsbericht, review of productpagina betreft.

In de nieuwe vormgeving zijn de hoofdinhoud en de extra informatie van de gadgets ter rechterzijde duidelijker visueel van elkaar gescheiden.

Naast de kleur- en contrastaanpassingen hebben we op een groot aantal punten kleine wijzigingen aangebracht in de navigatie, waardoor hopelijk sneller duidelijk is waar je je in de site bevindt en welke opties je op dat punt ter beschikking staan. Een goed voorbeeld hiervan zijn de productgroeppagina’s, waarop nog een grote verandering heeft plaatsgevonden. Ook zijn diverse elementen van de site 'interactief' gemaakt - ze veranderen wanneer je er met je muis over beweegt, waardoor sneller duidelijk is dat hier extra functionaliteit beschikbaar is.

Verdere aanpassingen vind je op tal van plaatsen. In de volgende pagina's nemen we je mee op een korte tour langs de veranderingen.

Op alle pagina's zijn kleine wijzigingen in de header aangebracht, met name zichtbaar in het zoekveld en de hoofdnavigatie. De globale zoekfunctie is één van de onderdelen van Hardware.Info waar we best trots op zijn; via deze weg is vrijwel alle inhoud van de site snel te vinden. Ook zoeken met algemene termen zoals 'moederbord' of 'videokaart', maar ook combinaties als 'realtek mediaspeler' of '23 inch monitor' levert relevante resultaten op, die vrijwel direct op je scherm staan. Helaas weet nog niet iedereen de weg naar de zoekfunctie te vinden. Om die reden hebben we de zoekbalk wat opvallender gemaakt en het contrast met de achtergrond vergroot.

De oude header van Hardware.Info...

In het hoofdmenu zelf zijn ook wijzigingen gemaakt. Het is nu duidelijker welk menu-item je hebt geselecteerd en op de meeste pagina's is direct duidelijk waar je je in de site bevindt.

...en de nieuwe: meer contrast laat de zoekbalk opvallen, de navigatie geeft duidelijker aan waar je je bevindt in de site.

Andere wijzigingen in de header zijn de land-selectie vlaggetjes, die nu nog duidelijker laten zien welke je hebt geselecteerd, en de links naar de mobiele site, de 'Tools'-pagina en de RSS-feeds. De oorspronkelijke links oogden als tabs, maar waren dat natuurlijk niet: je komt op een nieuwe pagina.

Footer

Ook onderaan de pagina zijn cosmetische wijzigingen zichtbaar. De footer functioneert als een soort mini-sitemap, die nu duidelijker aanwezig is en hierdoor hopelijk helpt om snel de gewenste informatie te vinden.

Oud:

en nieuw:

Nieuws- en review-overzichten

De nieuws- en review-overzichtpagina's hebben kleine wijzigingen ondergaan. De 'Lees meer'-knoppen zijn duidelijker en gekleurd om ze te onderscheiden van de links naar de reacties, de paginakop staat nu boven de filters in plaats van er onder en net als op de meeste pagina's zijn de beschikbare 'gadgets' aangepast en in overeenstemming gebracht met vergelijkbare pagina's elders op de site. Dat laatste geldt voor alle pagina's, we hebben geprobeerd zoveel mogelijk de voor de hand liggende gadgets op iedere pagina beschikbaar te stellen. Voor wie het even was vergeten, gadgets zijn de blokjes met aanvullende informatie in de rechterbalk op iedere pagina.

Oud:

en nieuw:

Productgroeppagina's

Misschien wel de meest ingrijpende wijziging is de vormgeving van de productgroeppagina's. Deze sprongen enigszins uit het vorige design; in het nieuwe ontwerp zijn ze qua vormgeving geheel geïntegreerd, nemen ze minder ruimte in en is duidelijker hoe de keuze van criteria directe uitwerking heeft op de selectie in het 'Producten vergelijken' tabblad. Bovendien is ruimte gecreëerd voor in de toekomst te introduceren functionaliteit. Al met al hopen we hiermee een nog eenvoudiger te gebruiken filtersysteem te kunnen bieden, zodat je nog sneller de juiste producten vindt.

en nieuw:

Productpagina's

Ook de productpagina's hebben we onder handen genomen. Een veelgehoorde klacht was dat de tabbladen niet duidelijk herkenbaar waren als tabs. Niet zo prettig, want achter deze links gaat een zee aan informatie schuil. Zodoende zijn de tabs aangepast - ze reageren nu op de muiscursor en zijn duidelijker gedefinieerd.

De oude productpagina:

en de nieuwe:

Gadgets

We noemden het al, we hebben op alle pagina's de gadgets langsgelopen om zoveel mogelijk de meest zinvolle extra informatie via deze weg op de juiste plaats te verstrekken. De 'voeg toe aan vergelijkingstabel' gadget is flink aangepast, waardoor de werking en het nut hiervan in één oogopslag duidelijk zijn - althans, dat is de bedoeling!

Om de gadgets extra onder de aandacht te brengen verschijnt een pijltje in de linkerkantlijn van de rechterkolom ter hoogte van de muiscursor, en de knoppen waarmee je iets kan doen met de geboden informatie lichten op zodra je over de betreffende gadget beweegt.

De geselecteerde gadget wordt met een pijltje gemarkeerd; de belangrijkste knoppen lichten op wanneer je de muiscursor over de betreffende gadget beweegt.

Twitter en Facebook

Hardware.Info was al actief op Twitter en Facebook, vanaf vandaag is het ook eenvoudiger geworden om producten of artikelen te delen met vrienden en volgers: op alle relevante pagina's zijn Facebook 'Recommend' ofwel 'Raad aan'-knoppen gekomen, naast 'Tweet this'-knoppen voor wie de voorkeur geeft aan Twitter. Via beide media delen mag uiteraard ook, graag zelfs!

Bij ieder nieuwsbericht, elke review en elke productpagina: Recommend en Tweet-knoppen.

Op geselecteerde pagina's is een gadget geplaatst waarin je in één oogopslag kan zien wie Hardware.Info op Facebook allemaal 'leuk' vinden en wanneer je bent ingelogd op Facebook zie je ook direct welke van je vrienden dat gedaan hebben.

Op geselecteerde pagina's zichtbaar: de Hardware.Info Facebook gadget.

Ten slotte is de Facebook-integratie van het forum geactiveerd, je kan vanaf heden je forum-account koppelen aan je Facebook-account.

Op naar de volgende stap

Uiteraard zijn de aanpassingen van vandaag niet de laatste stap in de ontwikkeling van Hardware.Info. Die staat nooit stil. Achter de schermen werken we hard aan nieuwe functionaliteit en verbetering van bestaande features. Vergelijkingstabellen, wensenlijsten, PC adviezen, maar ook de weergave van afbeeldingen en nog vele andere zaken staan op de rol voor verbetering - welke nieuwe mogelijkheden we gaan introduceren houden we nog even onder de pet, maar reken maar dat er nog heel wat op het programma staat voor dit jaar.

In ieder geval denken we met de aanpassingen en verbeteringen aan het ontwerp die we vandaag introduceren de juiste keuzes te hebben gemaakt om de site nog prettiger in het gebruik te maken. Vast en zeker zal het voor iedereen weer even wennen zijn - net nu je gewend was aan het felle blauw! - maar we hopen dat de meerderheid van onze bezoekers het onder de streep een verbetering vindt.

Natuurlijk zijn we erg benieuwd naar jullie bevinden en tips, suggesties en kritiek zijn welkom in de reacties - denk eraan, hoe duidelijker je het verwoordt, des te groter de kans dat we er iets mee kunnen doen!

0
*