Usarchy redesign: de vorm krijgt vorm

Klik hier om alle ontwerpen te bekijken!Tijd voor stap 9 in het Usarchy redesign project. Er is wat leuke feedback op het interactie ontwerp gekomen, maar nog geen dingen waarvoor het omgegooid moet worden. Wel vaker gehoord was de kwestie van de 4 blokjes die wat druk zouden overkomen. We gaan nu kijken of de vormgever dat probleem ook ziet, of dat het uiteindelijk wel meevalt.

De vormgever heeft een paar maanden geleden al wat designs gemaakt gebaseerd op eerste interactie ontwerpen. Zoals verteld zijn daar nogal wat wijzigingen in gekomen, en op basis daarvan heeft hij nu weer nieuwe ontwerpen gemaakt. Kijk en oordeel zelf:

De eerste versies: wat vinden jullie van de stijl?

Versie 1a: blauw met tabjes
Versie 1a: blauw met tabjes.
Versie 1b: Blauwzwart, harde kleuren in rechterbalk
Versie 1b: Blauwzwart, harde kleuren in rechterbalk
Versie 1c: Alles wat lichter en oranje als steunkleur
Versie 1c: Alles wat lichter en oranje als steunkleur
Versie 1d: Alles wat lichter en groen als steunkleur
Versie 1d: Alles wat lichter en groen als steunkleur

De tweede versie: dit zou hem zo’n beetje moeten worden

Versie 2a: nieuwe interactie ontwerp: veel wit en lichte kleuren
Versie 2a: nieuwe interactie ontwerp: veel wit en lichte kleuren
Versie 2: nieuwe interactie ontwerp met groen blok als intro
Versie 2b: nieuwe interactie ontwerp met groen blok als intro

Kom maar op!

Paul en ik zijn erg benieuwd wat jullie van de ontwerpen vinden. Bij de eerste versies gaat het vooral om de stijl, minder om de plek van functionaliteiten, want die zijn al veranderd in het interactie ontwerp.

Welke onderdelen vinden jullie aantrekkelijk? Welke manier van tekst presenteren is het lekkerst om te scannen, en te lezen? Wat vind je het beste bij mij en bij Usarchy passen? Wat moet er absoluut uit het ontwerp verwijderd worden, wat moet er zeker in blijven?

36 gedachten over “Usarchy redesign: de vorm krijgt vorm

  1. Wouter

    Ik vind versie 2a het beste, bij 2b vind ik het groene vlak net wat teveel in het oog springen voor iets wat waarschijnlijk alleen voor een nieuwe bezoeker interessant / nieuw is.

    Het design zelf vind ik erg netjes, goede kleuren en natuurlijk het behoud van de aap :). Ben benieuwd naar volgende iteraties!

    Like

  2. Robert Gaal

    In 1b/c en soms ook ik 1d vind ik de effectjes nogal storen. Leuk hoor die shading en gradient tool, maar in 1a is het overzicht veel beter en gaat je oog direct naar de content of navigatie. Daar gaat het om niet waar? Dat is althans 1 van de eerste dingen die we hebben geleerd bij de redesign van Wakoopa: hou het simpel. Ook qua lettertype trouwens.

    De structuur in 2 vind ik zeker een grote verbetering, alhoewel ik qua kleur toch meer groen/wit zou doen en bruin gebruiken als accent. Helaas zijn de grote beschrijvende knoppen ook weg die ik in 1a wel sterk vond, maar die worden weer na de 1e post uitgelicht dus geen ramp. Erg hip ook om de 1e post eruit te laten steken, zie oa. gigaom.com.

    Hele verbetering, dat zeker!

    Like

  3. Wouter

    Joost, je hebt natuurlijk al snel dat weblogdesigns op elkaar lijken. Het format is immers vrijwel hetzelfde. Wat er bij Usarchy bijkomt is het persoonlijke deel van Ruben, wat opzich leuk gedaan is met de blokken in het midden en de tabjes bovenin.

    Like

  4. Robin

    Ziet er goed! Leuk om eindelijk wat te kunnen zien. De tweede versie geeft je meer de ruimte om andere content te plaatsen en dat maakt het wat levendiger.

    Het ‘huur mij in’ komt al boven in je site aanbod. De tweede vermelding naast het filmpje is een beetje te veel van het goede. Deze zou ik vervangen door een kalender. Ben benieuwd wat de anderen vinden.

    Gr. Robin

    Like

  5. Michel

    Versie 2a vind ik mooi. Wellicht handig om de ontwerper de tekst eens van Sharp te halen en kijken hoe het dan wordt. dan zien we ook hoe we het ‘echt’ gaan zien (als we geen IE7 gebruiken)

    Like

  6. Jeroen

    Van de interactieontwerpen was ik wat geschrokken, ik vond al die blokken met informatie wat druk overkomen. Echter heb ik dit gevoel nu totaal niet meer. Ontwerp 2a geniet mijn voorkeur, in ontwerp 2b vind ik het groene blok te veel in het oog springen. Je hebt tot aan de ‘vouw’ alle recente informatie in beeld, wat ik jammer vind is dat de ‘complete blogs’ pas onder de vouw aan bod komen. Mede door de kleur en bovenstaande mening prefereer ik persoonlijk ontwerp 1a. De kleur is een persoonlijke keuze, maar alle recente gegevens boven de vouw presenteren of direct met de ‘complete blogs’ beginnen zou ik nog wel even testen!

    Like

  7. Ton Wesseling

    2a doen en klaar (http://www.usarchy.com/wp-content/homepage_usarchy_4.png). Daarna gewoon meten en en dan nog wat schuiven op basis van de cijfers, maar de basis daar is goed en lijkt nog steeds op wat het eerst was, maar is in 1 keer van deze tijd. Benieuwd naar de andere tabbladen (met name kennisdeling). Punt van kritiek kan zijn dat ik de nieuwsbrief box verwarde met de zoekbox (en ‘m toen niet automatisch rechtsboven ging zoeken), lijkt wat te verstopt? Enne, ga je geen tags gebruiken en alleen categori?Β΄n? Nee toch?

    Like

  8. Matthijs

    Hm, ik zie toch dat je toch wat dingetjes toepast waar je anderen voor waarschuwt:

    – Er zit weinig hi?Β΄rarchie in fontgebruik. Ik zou relevante blokken ook minder groot tonen.

    – Erg veel tekst, erg weinig whitespace (ik weet niet of dit wat jullie betreft onder stijl valt, maar omdat je het zo presenteert reageer ik er toch maar op). Je weet het: users scrollen wel. Dus waarom zoveel bij elkaar zetten? Het oogt druk.

    – Kopjes scannen wel extreem lekker (door de grootte). Ik zou dit meer toepassen, ook bij de headers van de blokken bijvoorbeeld.

    – Mij interesseert het persoonlijk niet zo in welke categorie dingen vallen (content-dingetje natuurlijk, geen stijl). Nu ben ik geen frequente lezer van je website, maar ik wil eigenlijk maar 1 ding zien: Waar babbel je over. En dan heb ik eigenlijk aan kopjes, eventueel met 1 subheadertje genoeg. Als je alle rand-informatie weglaat (of sterk contrasteert tegenover de belangrijke content), verandert dat je stijl enorm.

    Keep up the good work!

    Like

  9. David Hoogendam

    Vind ontwerp 1a eigenlijk nog het allermooiste. Moet daar wel aan toevoegen dat het kleurgebruik een veel gebruikte “kleurcombinatie” is voor het web. Ontwerp 2a heeft een eigenzinnig smaakje..deze kleuren geven meer gevoel en een beetje lef.

    Zou heel graag wellis de structuur van ontwerp 1a willen zien in het kleurgebruik van 2a.

    Verder vind ik het er goed uitzien! πŸ˜‰

    Like

  10. Ruben Timmerman Berichtauteur

    Woohoo, thanks voor alle feedback, mensen!
    Robin:Kalender vind ik een cool idee, ga kijken of ik daar wat mee kan.
    Ellen: Simplebits is inderdaad een van de sites die ik heb genoemd in mijn briefing, als zijnde “cool, wil ik ook!”.
    Ton: Er komen ook tags, die kun je in het interactie ontwerp ook zien. De categorieen verdwijnen naar de achtergrond, en de kennisbank is juist weer op basis van tags, waaraan ik extra info ga toevoegen.

    Matthijs: Goede punten, met name over het onderscheid en hierarchie, die contrasten zijn niet zo groot inderdaad. Kijken of daar iets in te winnen is…. Categorieen zijn inderdaad niet belangrijk in mijn ervaring, die wil ik er eigenlijk helemaal uitfaseren, denk dat ze van de homepage sowieso af kunnen.

    David: de structuur staat eigenlijk los van de vraag over de stijl. Ik ben in v2 wat meer “los” gegaan door die blokjes ertussen te zetten, om de homepage iets meer ruimte te geven voor andere typen content dan blogposts. Heb je een idee hoe ik dat op een andere manier kan doen?

    Iedereen: Wel veel voorkeuren voor de stijl van versie 1, zo te zien vinden jullie blauw toch cool. Kijken of we iets meer die kant op kunnen, al vind ik de rustigere kleuren toch ook wel erg lekker πŸ™‚ En het “aparte”, dat vind ik stiekem ook wel een beetje belangrijk, al mag usability daar natuurlijk absoluut niet onder lijden…

    Like

  11. Yvonne van Laarhoven

    scanable en overzichtelijk (goed gebruik Gestalt principes), daar houden wij usability engineers van πŸ˜‰
    @Jeroen: Ik vind het groene vlak in 2b juist goed, maakt het wat overzichtelijker. Duidelijk onderscheidend van inhoudelijke deel (niet dat je inhoudloos bent Ruben), maar misschien dat mensen je gaan negeren omdat het groene vlak op een banner lijkt. Maar daarentegen trekken foto’s van mensen de aandacht, dus kan het meevallen ;-).

    Vond de tabs van 1a wel erg overzichtelijk. Door kort onder de menu items te zetten wat je er kunt vinden is het doel (label) herkenbaar. Bezoeker weet waar hij/zij terechtkomt en wat hij/zij daar kan doen.

    Ik zou een combi van 1a en 2b doen. De menustructuur/weergave van 1a gebruiken in 2b.

    Succes ermee en ik ben benieuwd naar het resultaat!

    Like

  12. David Hoogendam

    Hoi Ruben,

    Bedankt voor je reactie..

    Misschien is het een idee om andere content dan de blogposts bijv. “kennisbank” en “vacatures” in de rechterkolom te plaatsen, maar deze door bijvoorbeeld achtergrondkleuren iets meer accent of aandacht te geven. In ontwerp 1a is deze kolom heel “plain”, wat wel de leesbaarheid verbeterd.

    Als dit gebeurt is het scannen van de posts ook optimaal want er staan geen losse bodyteksten tussen. Een geoefend oog zal hier langs heen kijken maar de meeste lezers denk ik niet. Ook blijft er een “grid” bestaan want je kan de site dan nog steeds in duidelijk kolommen verdelen.

    Hoop dat je er iets mee kunt πŸ˜‰

    Like

  13. Carlo

    Hoi Ruben, ik ga voor 2a.

    – Ik stel wel voor om je logo wat visueel aantrekkelijker te maken, misschien meer 1 geheel iets meer kleur, fancy-er, eigentijds.
    – Daarnaast zou ik de hoofdnavigatie (tabs) wat meer laten opvallen door tab- of lettertype kleuren. Anders oogt je site te flets denk ik. Wat je ook kan doen is het laatst toegevoegde artikel nog wat meer laten opvallen (kijk naar bright.nl of de ubergladde site van barack obama :-))
    – Ik zou nog even goed kijken wat je in die 4 blokken zet. Kennisbank mag wat mij betreft weg en bv vervangen worden door de eerder genoemde kalender. Ik zou deze blokken ook wat minder hoog maken, zodat de rest eerder in beeld komt.

    Het ziet er mooi uit, je gaat er op vooruit! Ga je ook nog usertests doen? πŸ™‚

    Like

  14. Arjan

    Ok?Β©, dit gaat een lange comment worden. En dan blijkt maar weer dat je huidige textarea veel te klein is, wat denk ik een goede reden voor Joost is om bij de nieuwe site een klein JavaScriptje te gebruiken om het veld wat groter te kunnen maken. (Ik weet het, zit standaard in Safari.)

    Maar goed, mij lijkt versie 2B het mooiste. Je ‘over mij’ blok komt goed naar voren, je wilt je tenslotte verkopen en het lijkt me precies goed. Wel zou ik de lichtgroene tekstkleur iets witter maken, de contrast is net iets te laag. Het ezelsoor is goed gevonden en ik denk ook wel erg gebruikersvriendelijk.

    Je menubalk met ‘contact’ t/m het zoekveld lijken me een beetje te zweven. Ik zie dat hij precies verticaal is uitgelijnd (lijkt me overigens lastig te implementeren als je de tekst ook wilt kunnen laten vergroten met een schaalbare lettergrootte), maar voor mijn gevoel staat hij daar verkeerd. Wellicht dat beter past in die bruine balk bovenaan, al staan ze dan boven het logo en dat is ook niet altijd wenselijk.

    Over die balk gesproken, ik vat die link naar ‘home’ niet. Wordt dat een kruimelpad? Zo ja, dan staat hij op de verkeerde plaats (moet in het witte veld onder het logo). Zo nee, dan is hij overbodig, want het logo en het tabblad linken ook al naar home.

    De link voor je RSS feeds (onder de nieuwsbrief) lijken me een beetje raar. Wat linkt waar naartoe? Het lijkt nu net een grote link. Linkt het naar de feed, of naar de uitleg over de feed? Een mogelijke oplossing zou zijn: het verkleinen van de tekst van de link naar de uitleg, maar dat maakt hem weer wat lastiger leesbaar. Wellicht dat je zelf een betere oplossing hebt.

    Het logo heeft twee ondertitels. Dat lijkt me er een te veel. Daarnaast is een daarvan erg onleesbaar op een laptopscherm of voor iemand die gewoonweg meer contrast nodig heeft.

    Je hoofdmenu (met de tabs) ziet er erg goed uit. Een mierenneukerig detail wellicht, je zou het nog wat extra benadrukking kunnen geven door een iets donkerdere schaduw achter het actieve tabblad te plaatsen.

    De blogposts zien er vrij goed uit. Datum is goed. Grootte van de titel is goed (underline als je er met de muis over gaat of er naartoe tabt?). De ‘lees verder’ link vind ik zelf lelijk en overbodig, gewoon weglaten zou ik zelf doen (daar heb je de titel van de blogpost voor, maar het ligt ook wat aan je doelgroep: en die lijken me nu net wel op de hoogte van klikbare titels). Categorie?Β΄n maken het wat onoverzichtelijk, ikzelf ga ze in een volgende versie van mijn eigen weblog van de homepage schrappen. De lezer heeft veel meer aan ‘gerelateerde blogposts’ op de artikelpagina. ‘Reacties’ en ‘beoordeling’ zien er goed uit, wellicht dat het textbalonnetje helemaal vooraan geplaatst moet worden.

    Je ‘vlakkenbalk’ snap ik echt niet.

    Bij ‘laatste video’ lijkt het of je er op kan klikken, zodat de video gaat spelen. Ik denk echter dat het gewoon een afbeelding is met een link naar de pagina waar de video op staat. Een en ander lijkt me erg verwarrend voor onervaren gebruikers, maar hier weet ik zelf niet veel zinnigs over te vertellen. Ik zie het veel vaker her en der op het internet, en volgens mij verdient het wel een usability onderzoek. Ideetje?

    Je kennisbank ziet er erg onoverzichtelijk uit, ik snap er geen hout van. Een ontwerp behoeft geen uitleg, maar deze zeker. Wat is hiervan de achterliggende gedachte?

    Onder ‘huur Ruben in’ zie ik een logo van Hyves. Wat doet dat daar?

    ‘Vacatures en stages’ is wel goed, maar een link naar ‘meer vacatures’ zou niet misstaan. Het is tenslotte wat minder gebruikelijk om de titels daar klikbaar te maken. (Hetzelfde geld voor de video’s overigens, behoeft ook een ‘andere video’s’-link.)

    Bij je artikelen in de zijbalk, zie ik ‘top 10’ en ‘klassiekers’ staan. Beiden zijn een opsomming van goede of interessante artikelen, lijkt me dus wat dubbelop. Daarnaast is het ontwerp met het tabblad niet duidelijk genoeg. Ik zou de tekst van de actieve tab vet maken, en er eventueel een subtiele schaduw achter zetten. (Zie ook de huidige website van de Postbank.) Ook zijn de tab-teksten niet op dezelfde hoogte uitgelijnd.

    (Noot voor Joost, maak jij van dat tabs-gebeuren een mooi, toegankelijk JavaScriptje? Oftewel dat als je zonder JS aan nog steeds alle links kan bezoeken? Zou een mooie showcase =)

    ‘Laatste reacties’ ziet er erg interessant uit. Is het de bedoeling dat van de laatste twee artikelen de laatste twee reacties wordt getoont? Overigens, het getal met het aantal reacties staat niet op dezelfde plaats voor beide blogposts.

    Jammer dat je aan blogvervuiling doet met die ?ΒΊbergrote en lelijke badges van Feedburner, de Marcom top 100 en Creative Commons.

    De footer is mooi, al snap ik de vage vlakken voor de namen van Paul en Joost niet.

    Oh ja, het valt me op dat alles recht gelijnd is, behalve een foto van jouw, en je logo.

    Voor de rest een degelijk ontwerp, ik ben benieuwd naar het uiteindelijke resultaat!

    Like

  15. Laurens

    Heb helaas beetje weinig tijd hier om beetje fatsoenlijk te reageren. Maar in het kort: het ziet er al degelijke uit! De lichte kleuren van 1a en 1c spreken me aan. Maar ik vind zelf dat er wel wat contrast en durf in mag zitten en daardoor vind ik die limegroen in 1d en 2b wel mooi.

    de kleurencombinaties komen er nog niet helemaal goed uit soms vind ik. Het moet vooral goed leesbaar zijn natuurlijk (ben het eens met die lichtgroene tekst in groene blok comment, en zo zijn er nog een paar voorbeelden). Het logo zwart vind ik niet heel mooi bv. En de foto van de aap (hoe leuk ook)..ik blijf toch voor een mooi gestyled abstract aapje in de steunkleur. Dat kan er lekker uitspringen samen met het logo. “wereldverbeteraar” vind ik leuk (en geloof het ook wel), maar lijkt me overbodig toch? Maakt het allemaal zo druk ..je hebt al een tagline onder je logo immers. Ik blijf erbij dat ik home&weblog onnodig vind. Gewoon home noemen. En de uitleg onder de knoppen ben ik zelf niet zo voor. Dat spreekt toch voor zich en je kan het in een tooltip doen evt? (bij home kun je “weblog” dan ook als tooltip doen.)

    foto van jezelf in het “over blok” vind ik absoluut een goed idee. Maakt het stuk persoonlijker en voor design ook leuk (alleen niet in die bladzijde variant!). Die bladzijde omslag is wel okay maar kan misschien iets kleiner en misschien in strakkere variant?

    Al met al (alles nog eens bekeken) vind ik 2b toch het mooiste geloof ik. Maar dan denk ik met een lichtere (verloop bv) of misschien wel compleet witte achtergrond. En nog even goed kijken naar de kleuren.

    Ben benieuwd naar vervolg!

    Like

  16. Mark

    Lol, er staat heel groot usabilitty in de titel. Het gaat natuurlijk om de layout, maar het leidt een beetje af πŸ™‚

    Verder vind ik deze het beste en mooiste. Leest goed weg, met die rustige contrasten.

    Like

  17. Ruben Timmerman Berichtauteur

    Arjan: Hier de reply by bullet πŸ™‚
    Textarea wordt groter en krijgt een hele simpele richt text editor (bold, link, bullet).

    Home moet eigenlijk “Direct naar de inhoud” zijn, slordigheidje van designer. Breadcrumb komt er niet, maar had wat mij betreft best daar gekund, al is het niet de standaardplek.

    Categorieen verdwijnen van homepage. Ik twijfel over lees meer, ik denk dat het wel nodig is voor nieuwe lezers om aan te geven dat het verhaal nog verder gaat, want er zijn zat blogs die complete stories op homepage zetten.

    Video wordt inderdaad nepklikbaar, maar ik denk dat ik er neit zo’n standaard play icoon inzit, maar een soort button met “video bekijken >>”
    Kennisbank behoeft wel uitleg, staat in mijn eerdere comment en in het interactie ontwerp al een beetje. Het zijn in ieder geval updates van een aantal typen content, die duidelijker worden bij de launch.

    Hyves logo is een roulerend gifje met logo’s van mijn klanten. Heeft niks met Hyves te maken, behalve dat Hyves een klant van mij is.

    Tabjes vind ik wel duidelijk genoeg, je zit te mierenneuken πŸ™‚ Verschil top 10 en klassiekers is gewoon verschil tussen wat ik graag wil pushen, en wat populair is. Vooral dus om meer dan 10 artikelen onder de aandacht te brengen πŸ™‚

    Laatste reacties worden getoond op basis van recentheid, dus als de meest recente 5 reacties op 1 artikel zijn, zie je maar 1 artikel met daaronder reacties. Kan lelijk worden maar neem ik op de koop toe voor het experiment πŸ™‚

    Lege vlakken in footer moeten logo’s worden denk ik.

    Laurens: Nuttige feedback, maar ik ga voor de durf van Home & Weblog πŸ˜‰ Logo is tricky, op zich vind ik hem stylish nu en dat wereldverbeteraar is misschien wat overdereven inderdaad (het staat op mijn kaartje, daarom had Paul het erbij gezet).

    Iedereen:
    Al met al is mijn idee om iets meer met harde contrasten te spelen met als basis 2a, en wat clutter weg te halen. Verder de 4 blokjes iets meer inhoudelijk uitwerken, maar ik ga ze wel laten staan. Met name de lichtgroen op lichtbruin moet iets harder en aanklikbaarder (denk dat ik racquo’tjes toevoeg aan de koppen)

    Like

  18. Sander

    Hoewel ik geen fan ben van krullende hoekjes toch absoluut 2b. Het groene vlak geeft net wat meer smoel aan de pagina. 2a mist dat vind ik. Daar komen de accenten meer op de foto’s te liggen (op zich goed natuurlijk), maar die zullen niet altijd zo mooi aansluiten bij de kleurstelling als in deze Paul-approved versies πŸ˜‰

    Leuke detail daarbij is dat je aap natuurlijk ook voor een groene achtergrond poseert πŸ˜‰

    De gekleurde achtergrond haalt dat out-of-the-box weblog gevoel weg wat bij de eerste serie nog wel terugkomt. De menu’s bovenin zouden misschien nog wel net iets meer contrast/scherpte mogen hebben.

    Like

  19. Arjan

    Het ‘lees meer’ geval zou ik dan in ieder geval anders maken. Wellicht gewoon een link met een pijl of hellip in een bepaalde kleur die opvalt.

    Dat van die tabje was inderdaad wat mierenneuken πŸ˜‰

    Lijkt me een geinig experiment van je laatste comments.

    Like

  20. Hummerbie

    Voor mij zeker 2b, je moet jezelf en je diensten verkopen dus daar mag je best wat meer aandacht voor vragen.

    Of groen dan de juiste kleur is? kwestie van smaak denk ik.
    Voor de rest zou ik de jaar archieven achterwege laten, wie zoekt daar nu in, heb je daar cijfers over?

    Like

  21. Bowie Derwort

    Het ziet er allemaal goed uit, maar gewoon goed is natuurlijk niet goed genoeg πŸ˜‰ Ik zie de juiste er dus toch nog niet tussenstaan.

    1a is rustig en overzichtelijk. Een prettig contrast en het menu staat onder de zoekbalk wat ik ook een goeie vind. Maar wat hem vooral overzichtelijk maakt is de titels helemaal naar links uitgelijnd (dus niet zo’n kalendericoontje ervoor) en de rechterbalk in gescheidde blokjes met wederom duidelijke kopjes erboven.

    Ik zou 2b als uitgangspunt nemen, daar in de rechterbalk blokjes terugbrengen. En de artikeltitels helemaal links laten beginnen en dat kalendericoontje op een andere plek zetten.

    Like

  22. Astrid Plekker

    Wat leuk dat je de bezoekers laat meewerken aan een nieuwe vormgeving.
    Ik vind 2b mooi, maar zou wat meer achtergrondkleur kiezen zoals bij 1b.
    Dat geeft een prettige pagina-indeling en wat meer contrast.

    Veel succes.

    Like

Plaats een reactie