Vorm vs. usability

Architectenwebsites zijn vaak heel mooi en stijlvol vormgegeven. Door een te artistiek design gaan ze echter wel eens gebukt onder een gebrekkige structuur, onduidelijke navigatie en slechte leesbaarheid. Ook op het vlak van SEO laat men heel wat kansen liggen.

In ons artikel geven we aan waar je moet op letten en wat je zeker moet vermijden. Onze conclusie: “Denk niet louter aan het design of de uitstraling van je website en besteed minstens evenveel aandacht aan gebruiksvriendelijkheid, leesbaarheid en toegankelijkheid en zeker ook vindbaarheid van je website.”

Een aantal vuistregels:

• Bouw je ontwerp rond een heldere structuur en navigatie.
• Toon met een heldere portfolio wat je doet en welke diensten je levert.
• Zorg dat mensen je kunnen contacteren of minstens je contactgegevens snel kunnen vinden.
• Vermijd Flash. Het maakt je site doorgaans moeilijker vindbaar en minder gebruiksvriendelijk.
• Optimaliseer je website voor zoekmachines, zowel op het vlak van de inhoud als technisch!

Het volledige artikel en meer tips^* kan je nalezen op architectura.be.

* uiteraard ook voor niet-architectenwebsites

Is de homepage nog belangrijk?

Alsmaar meer bezoekers komen op je website terecht via zoekmachines. Deze zoekmachines proberen bezoekers meteen door te sturen naar de pagina die voor hun zoekactie relevant is.

Je homepage krijgt hierdoor niet alleen minder bezoekers te verwerken, ze krijgt ook een andere functie. Nu bezoekers via vele manieren meteen op alle mogelijke webpagina’s kunnen terechtkomen, kan de homepage niet langer exclusief als ‘voordeur’ worden beschouwd. Elke pagina is nu een mogelijke voordeur. De homepage is meer een referentiepagina, die een algemene indruk moet geven van de kwaliteit en de sfeer van je organisatie.

Let op, een homepage moet door het lager aantal bezoekers daarom niet aan belang inboeten. Tenminste, als je rekening houdt met zijn gewijzigde functie.

Waarvoor dient de homepage dan nog?

Wanneer je zelf snel even naar de homepage van een website surft, doe je dat om in één oogopslag de sfeer van de website op te pikken, en snel te zien wat de website te bieden heeft. De kerntaken van de homepage zijn dus:

• Een goede eerste indruk geven. Kwaliteit uistralen.
  Een degelijk, overzichtelijk design zet meteen de toon van een website.  Kies voor een ontwerp dat ademt, en bezoekers de ruimte geeft om zelf keuzes te maken.
• Duidelijk maken waar de website over gaat.
  Vermijd gefrustreerde bezoekers, laat ze meteen evalueren of ze bij jou gaan vinden wat ze zoeken. Gebruik een goede tagline. Een tagline is een zin die beschrijft waar jullie website precies voor dient, wat jullie activiteit is als organisatie of bedrijf. Verval niet in verkoopstermen als ‘de beste of de goedkoopste’, maar communiceer echt de inhoud van je website. Maak van de kernwoorden in uw tagline een link naar een achterliggende pagina met meer informatie over die kernwoorden.
• Duidelijk maken wat je kan doen op de website.
  Als het mogelijk is om te kopen/reserveren/registreren op je website, laat dat dan weten. Plaats wegwijzers om bezoekers te brengen waar ze willen en moeten zijn. Plaats weinig, maar duidelijke wegwijzers.
  Heeft een bezoeker in één oogopslag niet gezien waar hij moet klikken, dan loopt hij waarschijnlijk weg. Plaats dus een aantal uitnodigende ‘Call To Actions’ (‘bestel nu’, ’schrijf je in’, ‘bekijk’, ‘reserveer’, etc. ) voor de meest uitgevoerde taken op je website. (En analyseer nadien ook hoe vaak er effectief op deze Call To Actions wordt geklikt.)
• Focus op de gebruiker.
  Een regel die geldt voor elke pagina van je website. Ontwerp je homepage met de wensen van de gebruikers in het achterhoofd. Wees niet te opdringerig.

Aan de slag

Wil je advies over het webdesign van jouw homepage? Je weet ons te vinden.

We worden nogmaals gelauwerd voor het ontwerp van onze corporate website. Dit keer is het InstantShift, de showcase/blog site voor webdesigners en webdevelopers, die een oplijsting maakte van de 45 meest inspiratievolle corporate websites. We zijn erg vereerd dat we als enige web bureau opgenomen werden in deze lijst. We hopen nu wel dat dit geen voorbode is van een nieuwe reeks rip-offs (cfr. Je bent pas succesvol als je gekopieerd wordt).

Bekijk de volledige lijst op InstantShift.com (Glue staat op nummer 37 in de lijst)

“Iemand vraagt help op het EE forum voor zijn site… herken je ‘t een en ‘t ander? http://tinyurl.com/qhcv88”

Hmm… http://visualjelly.com/ heeft blijkbaar het design onze glue.be letterlijk overgenomen. Zelfs de teksten werden gekopieerd en lichtjes veranderd… Bij nader inzicht blijkt het eigenlijk de Heer Matt Abron http://www.mattabron.com/ te zijn die onze site klakkeloos overneemt voor het bedrijf Visual Jelly. Zelfs tot en met de kleinste visuele elementjes werden gekopieerd.

Dat een site inspirerend kan werken wisten we al… iedereen haalt zijn inspiratie ergens vandaan… zonder Paul Cezanne was er geen Picasso, en zonder Picasso zag de kunstwereld er totaal anders uit.. Iedere webdesigner of -bouwer van eender wat haalt de mosterd ergens. We inspireren ons allemaal ergens op… maar onverdund plagiaat zoals dit gaat ons wel wat te ver.. De sites die we bouwen, zijn gemaakt met liefde voor het design- en developersvak.

Dat Matt Abron echt wel schuldig is, blijkt op het ExpressionEngine forum http://expressionengine.com/forums/viewthread/121273/,…  Foei foei zeggen we hier bij Glue.. waar hou je je mee bezig? Heb je echt geen inspiratie? Kijk eens op http://www.templatemonster.com/. Voor wie wil reageren: matt@mattabron.com… Oh.. mr. Matt Abron.. bedankt voor de gratis reclame!! You dirty Ripper!! Maar blijkbaar ben je niet de enige die onze site geript heeft. Technominesolutions, xypnoss & perintis-services doen net hetzelfde. Zie meer voorbeelden op onze flickr-set.

Grappig detail: de mailto-link bij de contactgegevens op http://visualjelly.com/ verwijst nog altijd naar onze mailbox.

<p>e-mail: <a href=”mailto:info@glue.be”>matt@mattabron.com</a></p>

Een ding is overduidelijk het origineel is beter dan de copy.

Good night and good luck!

Door de vele vragen die we erover krijgen hebben we besloten om er een mini-blogpost aan te wijden. Op onze site en blog gebruiken we voor onze titels het font FF netto OT. FF staat voor fontfont en OT staat voor Open Type. Onze voorkeur ging aanvankelijk uit naar FF Dax maar door het overmatig gebruik van Dax op het internet, hebben we gezocht naar een font dat net als Dax  coporate en hedendaags oogt. Met FF Netto hebben we dat dus gevonden.  En dat het gesmaakt wordt, blijkt uit de vele vragen die we krijgen omtrent het fontje.

(*) Dit is een pangram van 51 letters

Sinds dit weekend stegen bezoekersaantallen op de Glue website exponentieel. De enorme stijging in de statistieken (Google Analytics) zijn te verklaren door de aandacht die CSSmania schonk aan onze website. CSSmania is een van de grootste CSS showcase websites ter wereld. CSS mania zet sites in de kijker die werden ontwikkeld met behulp van XHTML en CSS.

Een belangrijk argument om CSS of Cascading Style Sheets te gebruiken, is de standaardisering van webpagina’s. Webstandaarden zijn vandaag onmisbaar geworden bij het ontwikkelen van websites die goed scoren bij zoekmachines (én gebruikers). Deze standaarden worden gedefinieerd door het W3C (World Wide Web Consortium) en zorgen er voor dat webpagina’s op een consistente manier kunnen worden weergegeven in verschillende browsers, of het nu Internet Explorer, FireFox, Safari of Opera is. Valdid XHTML/CSS websites zijn ook geschikt om te raadplegen op bijvoorbeeld mobile devices (iPhone, Blackberry, …).

Onnodig gezegd dat we hier bij Glue houden van CSS en webstandaarden. Onze klanten zijn immers het meest gebaat bij gebruiksvriendelijke websites die vlot terug te vinden zijn in Google. En dat die websites er ook goed kunnen uitzien, bewijst deze erkenning.

Onlangs werden de CMS Awards voor de beste Europese websites uitgereikt. Drie van de vier, door Glue, ingezonden websites, vielen in de prijzen. Onze sites wonnen maar liefst goud, zilver en brons. De professionele jury* was bijzonder lovend.

Beka-cookware, triomfeerde in de categorie ‘design’. Nog steeds in de categorie webdesign, kaapten we met de Greenway website ook het zilver weg. Beide websites lieten letterlijk en figuurlijk het water in de mond komen, aldus de jury van de CMS Awards.

In de categorie navigatie scoorde pijnstiller.be met brons. Een mooi bewijs dat we erin geslaagd zijn om een site met gigantisch veel content zeer gebruiksvriendelijk te maken. Je kan zeer vlot en duidelijk navigeren naar de onderwerpen die je interesseren, zonder de weg kwijt te geraken.

We zijn erg trots op deze professionele erkenning. Het is een hele eer voor het ganse Glue team. Dankzij hun webdesign, webdevelopment, usability en CMS expertise konden we deze mooie resultaten behalen. Thanks guys!

Daarnaast mogen we ook EllisLab, de bedenkers van Expression Engine niet vergeten te bedanken. Elke ingezonden website diende immers te beschikken over een gebruiksvriendelijk content management systeem om aan deze competitie te kunnen deelnemen.

Aan die voorwaarde voldoen alle Glue websites. Expression Engine, ons CMS systeem dat eerder al uitgebreid op deze blog aan bod kwam, is werkelijk een droom op vlak van usability.

A big shout out to the EllisLab team! Thank you Rick, Leslie, Derek, Lisa, Derek, Robin, Sue, Ingmar, Greg and Pascal!! We are proud to work with you guys! Keep up the good work!

Oooops, en ik zou het bijna nog vergeten. De belangrijkste spelers in dit verhaal. Onze klanten. Dankzij hun vertrouwen konden we dit succes realiseren. Bedankt, Marc, Veerle, Delphine en Adelheid van Beka! Bedankt, Paul ‘Greenway‘ Florizoone! Bedankt, Sophie en McLee van McNeil!

(*) De jury was samengesteld uit de volgende experten: Robin Wauters, Lieven Raes, Bart Van Herreweghe, Bart Nelis, Karine Blommaert, Sigrid Vandenweghe en Christian Daems.

Het uittekenen van kan al snel een tijdrovend en repetitief werkje worden, en als je je layout enkele keren herbegint, mag je ook telkens de componenten gaan hertekenen.
Met Balsamiq Mockups kan je nu in een mum van tijd op een intuïtieve manier een interface samenstellen.

Voor het ontwerpen beschik je over een uitgebreide reeks van meer dan 60 drag-n-drop controls gaande van buttons, tekstveldjes, datagrids tot charts. Je kan zelfs een browservenster op je desktop slepen. Op deze manier is het echt kinderspel om je layout samen te stellen.

Wat nog een handige feature zou zijn is dat je je ontwerp rechtstreeks zou kunnen exporteren naar flex. Of de mogelijkheid om andere stijlen te kunnen toepassen op je layout.

Er is een youtube filmpje waar je Balsamiq Mockups in actie kan zien.

Bouw je zelf applicaties of websites dan moet je zeker de online versie eens uitproberen. Je kan ook de AIR demo downloaden, de enige beperking hierbij zijn de herhaaldelijke meldingen dat je in een demoversie aan het werken bent. Bovendien kan je je ontwerp niet exporteren -enkel in de demoversie natuurlijk.

Lijkt me net iets teveel werk maar Edushi is er alleszins in geslaagd om delen van China voor hun rekening te nemen. Heel Hong-Kong in Pixel-Art met gelijkaardige functionalteiten als in Google Maps! Mooi gedaan. Ze hebben zelfs voor bijna elk gebouw, bushalte of graspleintje een bijhorende foto. Ze blijven ons verbazen!

Vind je het jammer dat je er niet bij kan zijn op de Olympische Spelen in Beijing? Op Edushi zie je nog veel meer van de pas vernieuwde stad.

Binnen een kleine maand gaat in San Francisco het Flashforward event terug van start. Naast een indrukwekkend programma van speakers heb je ook elk jaar de awarduitreiking aan de beste flash applicaties/animaties/creaties uit het wereldwijde interweb.

Ook dit jaar zijn er terug 50 finalisten gekozen, 5 per categorie. En het ziet er naar uit dat de juryleden het -alweer- lastig zullen krijgen.

Enkele van mijn favorieten
Indrukwekkende applicatie met allerlei filters en effecten voor het bewerken van beeldmateriaal. Je kan daarna zelfs je filmpje exporteren.
flashfilterlab.com

Als je houdt van ‘click and point’ games dan ga je dit zeker kunnen waarderen.
Bow street runner

Experimenteel denkspelletje waar je geconfronteerd wordt met de natuurkrachten.
Launchball

Enkele audiotools die zijn nagebouwd in flash waarmee je zelf muziek kan maken.
Hobnox Audiotool

Neem zeker de tijd om de andere finalisten te bekijken, het is meer dan de moeite waard.