Usarchy redesign: Interactie ontwerp

Interactie ontwerp voorbeeldHet redesign van dit weblog is niet geworden wat ik ervan had verwacht. De reden daarvoor is echter positief: ik werd na mijn beslissing zelfstandig verder te gaan, bedolven onder opdrachten. Terwijl het redesign o.a. bedoeld was om die zelfstandigheid beter onder de aandacht te brengen door mijn diensten aan te prijzen en ruimte te maken voor meer content.

Inmiddels doe ik het als adviseur/trainer wat rustiger aan, en ben ik een nieuw bedrijf begonnen. Die focus op diensten en andere content is nu dus minder nodig. Het halve interactie ontwerp dat ik had gemaakt is dus niet meer zo relevant, en moest weer versimpeld worden. Ondertussen was de designer wel al aan de slag, en stond de webdeveloper te trappelen.

Anyway, ik heb het interactie ontwerp weer quick & dirty aangepast, en ben benieuwd wat jullie ervan vinden. Het biedt meer ruimte voor wat er in de enquete als belangrijk werd bestempeld. Dus, here we go, per template met waar nodig wat commentaar:

Homepage

Usarchy interactie ontwerp homepage

  • De website wordt waarschijnlijk schaalbaar tussen een breedte van 800 en 1280 pixels. Op de laagste resolutie worden de rechterkolommen dus erg smal, maar dat is een offer dat ik wel wil maken.
  • Onthou dat dit geen visueel ontwerp is: hoe alle lettertypes, kaders, spatiering, kleuren, etc. eruit gaan zien laat ik helemaal aan de designer over. Verder wil ik over de templates niet teveel zeggen en juist kijken wat jullie reactie is.
  • Alle vierkanten met kruizen zijn plaatjes (of iconen) die door de designer of de content ingevuld worden.
  • De video op de homepage wordt met de hand gevuld met mijn laatste presentatie of screencast (ja, screencast!). De vacatures en kennisbank wijzigingen worden hopelijk automagisch gevuld (toch Joost? :)).

Artikel

Usarchy interactie ontwerp artikel pagina

Kennisbank

Interactie ontwerp kennisbank

  • De reviews worden d.m.v. een forum gedaan. Een gebruiker kan zijn website ter review aanbieden door een kort stukje te schrijven. Anderen kunnen vervolgens tips geven. Mijn voorbeeld in deze is Hallwaytesting.com (op dit moment down, ben er al een tijdje niet geweest), ben benieuwd of jullie dat een leuk idee vinden.
  • De tags zijn in eerste instantie gewoon tags die ik aan artikelen koppel. Later zal ik dat gaan uitbreiden met extra uitleg en misschien relevante bedrijven. Verder ben ik van plan de tags ook te gaan structureren, dus optimalisatie en adverteren onder zoekmachine marketing.
  • Voor de links hoop ik dat er een makkelijke WordPress plugin is, maar dat kan eventueel ook wel handmatig met de gewone WordPress pagina’s. Ik ga in ieder geval alleen links opnemen die ik echt de moeite waard vind, maar zal wel openstaan voor suggesties.

Vacatures

Hiervoor ga ik nog kijken of ik met een externe partner samenwerk, of dat ik met de hand vacatures zal plaatsen. Omdat ze extreem relevant moeten zijn (alleen usability en online marketing gerelateerd) denk ik at het op het laatste uitkomt. Uiteraard verschijnen vacatures niet als artikelen, maar slechts in de vorm van links op de homepage en evt. als gewone link naast artikelen.

Dus: kom maar op met je vragen, bedenkingen, ideeรซn en kritiek!

14 gedachten over “Usarchy redesign: Interactie ontwerp

  1. Roy

    Hmm, ik vind wel grappig dat je heel veel aandacht aan lezen en intern vinden hebt besteed en in verhouding niets, tot weinig aan de interactie met de gebruikers. Iets waar juist jij op in zou moeten spelen naar mijn idee.

    Het reactie formulier zo gebruiksvriendelijk mogelijk maken, WYSIWYG, zoveel mogelijk triggeren en aansporen tot de dialoog. Ik zou verwacht hebben dat je daar meer mee zou doen.

    Like

  2. Ruben Timmerman Berichtauteur

    Roy, ik weet eerlijk gezegd niet hoe ik nog meer interactie zou moeten krijgen dan nu. Er zijn altijd behoorlijk veel reacties, en uit de enquete bleek dat een forum niet hoog op het verlanglijst staat.
    In het algemeen vind ik de roep om interactie vaak geforceerd, maar ik ben benieuwd wat jij nog zou verbeteren in bijv zoiets simpels als een reactieformulier ๐Ÿ™‚ Aansporen tot dialoog hangt denk ik vooral af van de content, daarin zie je ook grote verschillen in mijn stukken, dus daar zou ik dat uit moeten halen denk ik.

    Like

  3. Roy

    Hmm een forum lijkt mij ook niet iets wat je nodig hebt, maar juist gezonde discussie op basis van een artikel waar jij de voorzet mee geeft lijkt me leuk om te lezen. Anderzijds, ik ken je doelstellingen voor usarchy niet, en hierin staat natuurlijk ook niet wat en hoe je dingen wilt gaan testen, net zoals het ontbreken van een harde KPI wat het succes gaat bepalen.

    Ik ging er vanuit dat veel van die ‘softe’ conversie KPI’s juist de dingen waren waarop je ging letten en deze wilde verbeteren.

    De wireframes zien er vrij hetzelfde uit als wat ik meestal bouw voor mijn eigen site, of hoe ik mijn klanten graag iets zou zien bouwen voor hun blog, dus voor mij gaat dit wireframe zeker werken.

    Like

  4. Sander

    Ik zie dat je je in je wireframes afvraagt of je voor de bijschriften bij afbeeldingen dezelfde tekst moet gebruiken als voor de ALT-tekst. Niet doen zou ik zeggen. Als je gebruik wilt maken van bijschriften zou ik geen ALT-tekst opgeven (of beter: een lege), tenzij ze beiden iets anders te melden hebben, bv. ALT-tekst: beschrijving afbeelding en bijschrift: beschrijving context of anekdote behorende bij het kiekje.

    Like

  5. Ruben Timmerman Berichtauteur

    Roy: doelstellingen en doelgroepen staan in eerdere posts over het redesign (Stap 1, 2 & 3, 4, 5), al heb ik ze niet heel erg hard gemaakt. Constante groei in bezoekers en reacties is het enige dat in een KPI gevangen kan worden, verder geldt vooral mijn gevoel over de site door feedback die ik on- en offline krijg ๐Ÿ™‚

    Sander: OK, denk dat ik ze wel allebei wil invullen, ook voor SEO. Thanks ๐Ÿ™‚

    Jeroen van IJzendoorn: Nee, ik gebruik Microsoft Visio (2007) onder Windows XP onder Parallels op m’n MacBook (een zwarte snelle! ;)). De templates zijn van GUUUI.com, gratis en pretty handy.
    De link naar de content is voor toegankelijkheid; mensen met een screenreader kunnen die interne hyperlink volgen om alle navigatie over te slaan en direct de content te “lezen”. Via Google vind je wat goede uitleg over dit soort links.

    Like

  6. Laurens

    Ziet er goed uit Ruben. Niet bepaald verassend, maar dat hoeft ook niet. Het design kan het verschil maken. Vind “home en weblog” beetje vreemde button qua naamgeving, maar misscihen moet ik daar nog niet naar kijken. Forum lijkt mij ook niet nodig. Misschien de rss button nog wat meer in de spotlight?

    Die gerelateerde artikelen staan er twee keer in nu he. Is daar nog een speciale reden voor? Weet zo niet of ik dat zelf een goed idee vind in ieder geval. En ze staan dan samen met kennisbank tags in 1 blok, ik zie zelf niet direct de relatie tussen het artikel zelf en die tags en gerelateerde artikelen op die plaats geloof ik. Snap het natuurlijk wel, maar dat kan eventueel nog anders.

    Like

  7. Hans van Veen

    Ruben, Ik heb in hoofdlijnen 2 vraagtekens, met name bij de homepage. Ik vind de ‘brede’ layout redelijk ambitieus. Zeker met de verspringende 2, 4 koloms lay out, die wat onrustig over komt. Een test zal mijn (on)gelijk moeten bevestigen…;-) Tot slot een vraag: wat biedt de kennisbank van Usarchy mij in relatie tot de artikelen – die ook al bol staan van de kennis – ?

    Like

  8. Bowie Derwort

    Als ik als vormgever naar je ontwerp kijk komt vooral de homepage wat onrustig op mij over. Stap 2 is dan om te kijken waar dit door komt.

    Om veel informatie makkelijk in een oogopslag te kunnen scheiden moet je de bezoeker daar een handje bij helpen. Je gebruikt nu subtiele lijntjes en hele lichte grijze vakken. Dit kan denk ik nog wat beter…

    Wat mij betreft (want over smaak valt niet te twisten) kan er nog wat meer durf in. Maak de zijbalk een andere kleur of een stuk donkerder grijs zodat de tekst in het wit moet. En let ook op het lijnenspel in het ontwerp, laat kolommen zoveel mogelijk op elkaar aansluiten.

    Like

  9. Ruben Timmerman Berichtauteur

    Laurens: Home & weblog is idd een beetje vreemd, maar wel wat het is. Ik kan er ook alleen Home of alleen Weblog van maken, vind je dat nuttiger?
    RSS mag van mij wel stevig in het design inderdaad.

    Gerelateerd is inderdaad dubbel, dat is een belangrijke conversie (pageviews!) driver. Maar wellicht wel overdereven, ik weet niet zeker of je door gerelateerde artikelen ook impulsklikken doet, of dat je daar wel even naartoe wil scrollen als ze bijv alleen rechts staan…

    De kennisbank tags zijn “gewoon” tags zoals je ze vaker ziet, dus gerelateerd aan de blogpost. Het idee is dat de tags later worden uitgewerkt tot content pagina’s waar ik niet alleen naar mijn posts verwijs, maar ook extra uitleg en externe links plaats. Eventueel aangevuld met bijv gespecialiseerde bedrijven die passen bij een tag.

    Hans: Makes sense, ik vraag me af of lezers de layout ook als onrustig zien, of dat zij gewoon de pagina scannen op zoek naar iets om op te klikken. In dat laatste geloof ik, en door de “onrust” wordt het moeilijker content te negeren, hoop ik. Als je zo’n rechterkolom hebt, zoals veel blogs, wordt die al snel genegeerd is mijn gevoel.

    Ik moet er wel bijzeggen dat ik bewust wat “anders” doe, om ermee te experimenteren. Als ik advies aan mezelf zou geven zou ik conservatiever zijn en gewoon een rechter en linkerkolom maken…

    De kennisbank biedt twee dingen:
    – Orde en relaties/hierarchie, je kunt dus binnen de kennisbank naar gerelateerde onderwerpen navigeren.
    – Extra content, zie hierboven.
    De kennisbank moet vooral een aanvulling zijn voor iemand die over 1 onderwerp direct meer resources wil.

    Verder komen er ook links in de kennisbank, en wil ik er website reviews plaatsen waar gebruikers ook aan mee kunnen doen. In de geest van Hallwaytesting.com, die helaas overleden lijkt te zijn ๐Ÿ˜ฆ

    Resources en links kwamen als populairste nieuwe feature in de enquete naar voren, dus ik verwacht dat een gevulde kennisbank, gerelateerd aan mijn artikelen, mijn lezers happier maakt.

    Bowie: Dank voor je commentaar en welkom hier! Just to be sure: dit is geen visueel ontwerp. Of iets een kader, kleur, achtergrond of wat dan ook krijgt, hangt af van de vormgever.

    Er zijn al wat testontwerpen gemaakt, en ik beloof je dat daar veel durf in zit… Ook hier geldt dat ik gewoon lekker los ga en me zelfs minder van mijn eigen adviezen aantrek dan ik misschien zou moeten ๐Ÿ˜‰

    Like

  10. Pingback: Favorieten en bookmarks voor 15th januari tot 17th januari | Cafe del Marketing

  11. paul van oosterhout

    Ik ben het eens met Bowie. Het wordt wel wat onrustig door de hoeveelheid die je op de homepage presenteert. Dan moet de designer daar rekening mee houden door bijvoorbeeld links, fonts een puntgroottes uniform te maken. Zo kun je een hele hoop afvangen. Vlakken en lijnen etc dat is idd afwachten.

    Wat ik trouwens helemaal voor jouw site perfect zou vinden:
    een zelf in te richten homepage. Nu je toch met ” blokken” gaat werken moet je kijken of die niet zelf te verschuiven en in te richten zijn voor je bezoeker.

    Vergelijk naar een jaar de varianten….of laat het zo….practice what you preach!

    Het feit dat de homepage ook een weblog is vind ik juist goed. Waarom? Daar is usarchy van bekend. Dat is wellicht juist de kracht. Dus meteen aanbieden!

    Like

  12. Klaas Dolman

    De mogelijkheid om sites te ( laten) revieuwen vindt ik een goed idee. Dit niet alleen voor de pro’s maar juist ook voor de bezoekers van een site. Ik denk dat dit voor wat betreft usability de nodige verbeteringen op kunnen leveren. En op deze manier kan je ook een meer gedetailleerd inzicht krijgen in de doelgroep c.q. bezoeker van een site. En ja commentaar leveren ,dat doen we maar al te graag ๐Ÿ˜‰

    Like

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit /  Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit /  Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit /  Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit /  Bijwerken )

Verbinden met %s