Een gebruikerstest van het nieuwe TechCrunch design

Het nieuwe ontwerp van TechCrunch deed nogal wat stof opwaaien in de startup community. De site met nieuws over Silicon Valley kreeg kritiek te verduren die nog het meest aan de commentaren op Youtube doet denken: allemaal ongefundeerd, een hoop grammaticale fouten en persoonlijke beschuldigingen. TechCrunch stelde zelfs een hatemail template beschikbaar om tegemoet te komen aan gebruikers die zich gedroegen alsof iemand net stiekem hun huis verbouwd had.

Tijd om het nieuwe ontwerp van TechCrunch eens zelf te testen. Met een usability test op afstand heb ik mensen benaderd voor feedback, om zo een onafhankelijk beeld te neerzetten. Is de stortvloed aan negatieven representatief voor het nieuwe ontwerp?

Het ontwerp van de test

Ik heb een test gemaakt met een afbeelding van het nieuwe ontwerp, met drie opdrachten.

1. Click on the things that draw your attention the most.
2. Click on the elements you like on this page.
3. Mark the things that you think we should improve.

We hebben onze volgers op Twitter gevraagd om deel te nemen aan de test. Onze volgers zijn vooral klanten, ontwerpers en marketeers. TechCrunch wordt door een klein deel regelmatig gelezen. Er hebben uiteindelijke 137 mensen deel genomen aan de test.

Controversieel logo

Het nieuwe logo kreeg veel feedback. Het gepixelde ding met retro uitstraling is het meest opvallende element aan het nieuwe ontwerp.

Meer dan de helft van de deelnemers klikte op het logo bij de eerste vraag. De helft van de deelnemers vindt dat het logo verbeterd moet worden. Slechts 19 procent kan het nieuwe logo waarderen. Op de twee notities bij het logo staat “totally 80’s, but not really in a good way” and “#FAIL”.

Punten voor verbetering: Een goed logo is ontworpen om de branding van een product te verstevigen, moet origineel zijn en ‘blijven hangen’. Dat zijn geen dingen die we hier testen. Vanuit een usability oogpunt kan wel gezegd worden dat het logo afleidt van de navigatie elementen er omheen. Om dit te vermijden zou het logo iets minder prominent kunnen zijn.

Onduidelijke navigatie

Zoals je kan zien heeft TechCrunch gekozen voor een hoofdmenu aan de bovenkant en een tweede rij met ‘hot topics’ onder het logo. Deze tweedeling zorgde voor verwarring. Enkele notities:

• When I first saw these, I thought they were navigation rather than popular tags. The Hot Topics label isn’t different enough in color to register as a label.
• Second menu is unclear. Relation to top menu?
• Navigation a bit hard to notice.
• I have no idea what I’ll get from any of these menus. Why is ‘startups’ a menu item and not a ‘hot topic’?
• Make the navigation bar more apparent.
• The menu does not attract any attention.

De advertentie gebruikt een kleurenschema en lettertype dat moeilijk is te onderscheiden van de elementen eromheen. Verwarring alom:

• Really thought this menu was part of the ad below. Took awhile to realize it wasn’t.
• This ad is confusing. Didn’t realize it was an ad at first.
• Looks like advertising (and maybe is). But if so, its too much connected to the menu.
• Completely missed this nav because it blends into the ad.
• Green gets lost with the big black banner.

De distributie van de punten geven meer duidelijkheid over wat er mis is gegaan: 2 procent van de deelnemers vindt dat het onderste menu de aandacht grijpt en 33 procent vindt dat het voor verbetering vatbaar is. Het menu hieronder kan volgens 39 procent beter.

De banner kreeg flink op zijn kop, 54 procent vindt het een opmerkelijk element, 45 procent vind dat het beter kan.

Punten voor verbetering: De banner is waarschijnlijk in het oude ontwerp gebruikt, waar het waarschijnlijk niet zo verwarrend was als in het nieuwe ontwerp. TechCrunch moet zijn banners scannen die in dit gebied geplaatst worden (ik negeer hier de mogelijkheid dat de verwarring de bedoeling is om zo meer klikken te krijgen—in dat geval wens ik TechCrunch allerlei vervelende dingen toe). Een groen/zwart kleurenschema en witte tekst op een donkere achtergrond zouden taboe moeten zijn. Verder kan het label ‘hot topics’ meer afwijken van de topics ernaast, het lijkt nu zelf een knop.

Onder de navigatie

Er is ook een hoop feedback binnengekomen over het gebied onder het menu. De share knop valt op: ondanks dat 21 procent de knop kan bekoren en 27 procent er niet veel aan vindt, vindt slechts 12 procent dat het een opvallend element is. Een deelnemer merkte op dat de knop “somehow feels disconnected from what I am sharing”.

De titels van artikelen kreeg de aandacht van de helft van de deelnemers, met meer ‘like’ dan ‘to be improved’ punten. Een interessant punt van kritiek was dat de langere titels slecht te lezen zijn. “I just get tired before I get to the end”, merkte iemand op.

Er is een zijbalk op TechCrunch met een ‘tip’ knop, een banner en een lijst met populaire artikelen. De tip knop en de kop voor de populaire artikelen lijken veel op elkaar, getuige opmerkingen als “Looks the same as the ‘popular post’ title”, en “I’m assuming this is a button, but it looks exactly like the headline below”.

Punten voor verbetering: Omdat de share-knop geen gebruikelijk ontwerppatroon volgt, moet deze keuze in de loop der tijd worden getest zodat gemeten kan worden of gebruikers er aan kunnen wennen. De tip-knop is niet als knop herkenbaar. De oplossing is om de knop meer het uiterlijk van de share-knop te geven.

Conclusies

De reactie op een nieuw ontwerp van sites die dagelijks worden gebruikt volgt meestal een patroon: een lading ongezouten kritiek, gevolgd door een langzame, maar zekere aanpassing. Dit circus herhaalt zich bij een volgende ronde, waarin het ooit verguisde oude ontwerp als veel beter wordt aangemerkt. Je kan pas na een geruime tijd van gebruik testen hoe bezoekers zich hebben aangepast aan het nieuwe ontwerp.

Sommige pijnpunten worden echter niet beter naarmate de tijd verstrijkt. Deze kunnen met een snelle test als deze geïdentificeerd worden. In de eerste dagen of weken kunnen verbeteringen nog relatief makkelijk worden doorgevoerd omdat het nieuwe ontwerp nog niet ingedaald is.

Het is onmiddellijk duidelijk dat de navigatie van de site moeilijk te begrijpen en gebruiken is, zowel door gebruik te maken van twee menu’s met onduidelijke labels en een banner die moeilijk als zodanig te onderscheiden is. TechCrunch zal in de gaten moeten houden hoe de banners opgaan in de rest van de site.

De feedback die we hebben verzameld heeft de aandacht op een paar verwarrende elementen van het nieuwe ontwerp gericht. Sommige issues kunnen makkelijk worden opgelost, maar door deze test wordt ook duidelijk wat op een later tijdstip getest moet worden.

Heb je iets toe te voegen over de gebruiksvriendelijkheid van de nieuwe TechCrunch? Laat het me weten! Ook zal ik je graag willen uitnodigen om deel te nemen aan een test voor een toekomstige analyse. Het is eenzelfde soort test als die ik hier heb gebruikt.