Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving
Hoe kunnen we online identiteitscontrole gebruiksvriendelijker maken?
17 Dec 2008•Het online amalgaam van registratie en identiteitscontrole is sinds jaar en dag één grote knoeiboel. Elke website heeft zijn eigen variant op het systeem van persoonlijke identificatie en het aantal gebruikersnamen en wachtwoorden dat ik ondertussen moet onthouden is niet meer op de handen van een gemiddeld Belgisch gezin te tellen. Toen ik enkele weken terug een doordeweekse internetgebruiker versuft zag kijken naar haar scherm tijdens het registreren voor een Gmail e-mailadres kreeg ik alleen maar een bevestiging van het gevoel van verwarring.
Hoe kunnen we online identiteitscontrole gebruiksvriendelijker maken?
De situatie nu
Elke website volgt momenteel een eigen logica, de één al gestroomlijnder dan de ander. Die verschillen tussen websites onderling maken het er natuurlijk niet makkelijker op. De ene site laat je een herinneringsvraag invullen, de andere verwacht dat je klikt op een activeringslink in een e-mail, weer andere laten je inloggen via je e-mailadres en nog andere verwachten gewoon een gebruikersnaam en wachtwoord…
Gelukkig snellen de browsers ons te hulp tijdens het inloggen. Ze gaan heel vaak de gebruikersnaam en het wachtwoord per website gaan opslaan. En als de browser die onthoudt dan hoef ik het niet meer te doen! Dat is handig.
OpenID: een stap in de goeie richting
Enkele jaren geleden is OpenID in het leven geroepen. Dat was een grote stap voorwaarts want je hoeft nu maar 1 gebruikersnaam en wachtwoord meer te onthouden waarmee je inlogt in je OpenID identiteit. En met die OpenID identiteit kan je je dan aanmelden op alle websites die OpenID ondersteunen. Eén gebruikersnaam en wachtwoord voor heel veel websites dus.

Het nadeel is de vaak onduidelijke doorverwijzing van de website waar je wil inloggen naar de OpenID website. Het haalt je ook een beetje weg uit de navigatielogica en algemene look and feel van de website waarop je wil inloggen en kan in die zin verwarrend werken. En hoewel de lijst dag na dag groeit, zijn er nog altijd niet zoveel websites die OpenID ondersteunen.
Je identiteit koppelen aan de browser?
Waarom hangen we dan geen identiteit vast aan een browsersessie? Via een knop in de browser kan je jezelf aanmelden en sites kunnen dan gebruik maken van die browseridentiteit als je ze de toestemming geeft. Een simpele ‘Log in’ knop is dan voldoende op websites. Die knop stuurt een signaal naar de browser die reageert met de vraag of je je identiteit wil gebruiken op deze website. Jij geeft dan je toestemming waarop de browser de nodige informatie uit je browserprofiel doorstuurt naar de site.
Het voordeel: je beheert je profiel centraal op 1 plaats (lokaal op je computer of op een server zoals die van OpenID). Je hoeft dus geen 30 sites af te lopen wanneer je e-mailadres wijzigt. Maar ook aanmelden en registeren gebeurt altijd op dezelfde manier: via de browser. Het lijkt me een eenvoudig maar perfect realiseerbaar idee dat het proces van online identiteitscontrole toch een pak gestroomlijnder kan maken. Of stel ik het me een beetje te simplistisch voor?
Update: de Flock browser blijkt sinds kort via een extensie de mogelijkheid aan te bieden om via de browser zelf in te loggen op je OpenID identiteit. Die identiteit kan je dan gebruiken op alle sites die OpenID ondersteunen (zonder dat je dus doorverwezen wordt naar de site van je OpenID provider). Hoewel de grafische gebruikersinterface van de Flock extensie er nogal onhandig uitziet (Check deze video op de Flock blog maar even), is dit natuurlijk wel een hele grote stap in de goede richting.
Categorieën: Opinies, Webomgeving,
Waarom ik koos voor ExpressionEngine als cms voor mezelf en mijn klanten
10 Nov 2008•In een vorige blogpost had ik het over de reden waarom ik destijds gestopt ben met het ontwikkelen van mijn eigen handgecodeerd contentmanagementsysteem (cms) voor klanten. Vandaag wil ik je vertellen waarom ik uiteindelijk voor ExpressonEngine heb gekozen als vervangend cms.
Ontwerpen in alle vrijheid
ExpressionEngine laat me websites ontwerpen in alle vrijheid. Het systeem is zo flexibel dat het me de vrijheid geeft te ontwerpen en coderen op exact dezelfde manier waarop ik het altijd al heb gedaan. En dat is heel belangrijk voor mij. Pas wanneer de front-end perfect werkt zoals ik het wil, begin ik met de implementatie van ExpressionEngine als back-end. Het cms legt me dankzij het ingenieuze gebruik van templates, velden en tags geen enkele beperking op op het vlak van vormgeving of technische functionaliteit.
Krachtig genoeg voor de meeste websites
ExpressionEngine is heel krachtig en aanpasbaar zodat 95% van de websites die ik ontwikkel uitgewerkt kunnen worden met ExpressionEngine als back-end. Geen enkele websitestructuur bleek tot nu toe niet te passen in het EE plaatje. Daarenboven laat ExpressionEngine me toe om veel sneller de meestgevraagde websitefuncties (ik denk aan contactformulieren, weblogs of fotogalerijen) aan mijn klanten aan te bieden, én is het uiterst zoekmachinevriendelijk.
Eenvoudig aan te leren
ExpressionEngine werkt heel intuïtief en was voor mezelf heel eenvoudig om aan te leren. Ik lieg niet wanneer ik je vertel dat ik in één dag in staat was om een eenvoudige bestaande website gebruiksklaar en updatebaar te maken via ExpressionEngine. Hoewel de broncode van EE vrij beschikbaar en aanpasbaar is, is het cms niet gratis te gebruiken in een commerciële omgeving. Dat hoeft in mijn ogen niet meteen een nadeel te zijn: als wederdienst kan je rekenen op hun uitstekende uitgebreide documentatie en de technische ondersteuning die je als EE klant krijgt is tot nu toe ongelooflijk snel en to the point gebleken.
Gebruiksvriendelijk voor mijn klanten
Op het eerste zicht leek de back-end mij klantonvriendelijk en dat is en was dan ook het grootste minpunt aan Expression Engine. Het is vaak wat zoeken naar de meest banale opties en onderdelen. Maar gelukkig kan je het cms vrij goed aanpassen via een uitgebreid rechtensysteem zodat mijn klanten toch op een overzichtelijke en duidelijke manier hun weg vinden in het updategedeelte van hun websites. Dit is essentieel in mijn ogen. Ik wilde een cms dat ook voor computerleken eenvoudig te gebruiken is.
Ik kan nog een tijdje doorgaan maar de bovenstaande punten zijn voor mij de meest belangrijke. Ter informatie geef ik je nog een lijstje mee van andere contentmanagementsystemen die ik meer of minder uitgebreid heb getest: CMS Made Simple, Modx, Wordpress, Joomla!, Textpattern, Plone en Drupal. Om één of meerdere van bovenstaande redenen hebben deze het echter niet gehaald.
Categorieën: ExpressionEngine, Opinies, Webomgeving,
Zwarte tekst op een witte achtergrond
2 Nov 2008•Als je even snel honderden jaren boekdrukkunst en typografie overloopt, dan merk je gauw dat het gros van de gedrukte boeken bestaat uit zwarte tekst op wit papier. Dat duidelijke contrast tussen de letterkleur en de achtergrondkleur zorgt er natuurlijk voor dat we aangenaam kunnen lezen.
Ook de letterkleur van tekst die op schermen gelezen wordt, contrasteert best sterk met de achtergrondkleur om makkelijk leesbaar te zijn. Maar is zwarte tekst op een witte achtergrond ook hier de heilige graal? Mogen we met andere woorden deze typografische waarheid van honderden jaren boekdrukkunst zomaar overnemen op het web? Als we de websites van het gros van de Belgische kranten bekijken, dan lijkt dat zo te zijn.
DE PROEF OP DE SOM
Maar laat ons toch maar even op onderzoek uitgaan. Hier vind je een webpagina waarop tweemaal dezelfde tekst te lezen is. Aan de linkerkant zie je zwarte tekst (#000 voor de techneuten onder ons) op een witte achtergrond, aan de rechterkant donkergrijze tekst (#444) op een witte achtergrond. Welke vind jij het aangenaamst lezen?
Mijn gevoel neigt alvast naar de rechterkant. In het linker stuk lijkt het contrast tussen letter en achtergrond té drastisch. De rechter tekst staat zachter en leest naar mijn mening een stuk comfortabeler.
WAAR ZIT DAN HET VERSCHIL?
Wat in de wereld van drukwerk een bewezen waarheid is, lijkt op het web niet te werken. Een wit blad papier kan je nu eenmaal niet vergelijken met een wit vlak op een computerscherm. Als je even de gordijnen dicht doet en het licht uitlaat dan snap je wel wat ik bedoel: een scherm straalt licht uit; opdringerig licht.
Dat licht zorgt er voor dat het contrast tussen schermwit en schermzwart groter is dan dat tussen papierwit en drukzwart. En téveel contrast blijkt de leesbaarheid niet te bevorderen.
Conclusie
Webteksten laten we best niet té fel laten contrasteren met de achtergrond. We kiezen dus beter voor grijs-wit ten nadele van zwart-wit. Uiteraard werkt om het even welke andere kleurcombinatie die een aanvaardbaar contrast oplevert even goed. Hier zijn enkele goede online voorbeelden in verschillende kleurcombinaties. Ook eervolle vermeldingen voor onder andere deze Belgische dagbladen: De TIjd, Het Belang Van Limburg en Le Soir.
Niet geheel terzijde: alles hangt natuurlijk in grote mate af van de lichtomstandigheden van zowel het scherm (de meeste schermen kan je dimmen) als de omgeving. Als de zon op je scherm invalt, dan lijkt een zwart-wit scenario altijd beter leesbaar dan wanneer je in het donker op je computerscherm staart.
Wat vertelt jouw gevoel en je persoonlijke leeservaring op het web over deze typografische kwestie? Ik hoor graag je mening.
Categorieën: Ontwerp, Typografie, Opinies, Webomgeving,
Online productvideo’s: tips en voorbeelden
15 Oct 2008•Video op het web is hot. YouTube maakte het medium enkele jaren geleden ongemeen populair en is tot op de dag van vandaag een van de meest bezochte websites wereldwijd.
Maar ook steeds meer bedrijven gebruiken videofilmpjes om hun producten online voor te stellen. Op het Belgische internet is er nog niets van te merken, maar in Noord-Amerika is het een duidelijke trend. Vooral softwarefirma’s lijken ervoor te vallen.
Hieronder zie je een still uit een promotiefilmpje voor de iPod Touch van Apple, waarin een vriendelijke dame je kernachtig alle uitleg verschaft over het toestel.
Hoewel de meeste van die filmpjes vaak eenvoudig in elkaar zitten, zijn ze heel effectief. In een mum van tijd kunnen ze een potentiële klant overtuigen van de kracht van het aangeboden product. De klant zelf kan zien hoe het product werkt en aanvoelt, en hoeft daar niet eens zijn stoel voor uit.
Hieronder vind je enkele bijkomende voorbeelden samen met wat tips voor de ondernemers onder jullie die een testrit op hun eigen website wel zien zitten.
1. Hou het kort en krachtig
De aandacht van bezoekers verslapt snel. Grijp ze dus bij de keel voor ze wegklikken. Lange inleidingen en uitweidingen zijn uit den boze. Kom meteen ter zake. Niet alles over je product moet aan bod komen, enkel de echte verkoopsargumenten die twijfelaars over de streep kunnen trekken.
Hoewel Apples iPod Touchfilmpje (screenshot hierboven) professioneel overkomt, duurt het volgens mij té lang om de aandacht vast te houden.
In dat opzicht levert Vara Software beter werk. Op de productpagina van ScreenFlow krijg je een uitstekend introductiefilmpje te zien. In een minuutje tijd krijg je van de presentator alle belangrijke productinformatie te horen en kan je je een idee vormen van hoe de software werkt.
2. Zorg voor een alternatief voor je filmpje
Campaign Monitor (screenshot hieronder) overloopt gevat de belangrijkste kenmerken van zijn software meteen op de homepagina aan de hand van tekst en foto’s. Daarnaast vind je een link naar een introductievideo als aanvulling op de tekstuele presentatie van het product. Niet iedereen wil jouw video zien, zorg dan ook altijd voor een alternatief.
3. Niet te opdringerig als het even kan
Laat je bezoekers zelf beslissen of ze je filmpje willen zien of niet. Start daarom de beelden niet automatisch wanneer je webpagina geladen wordt maar voorzie een duidelijke knop: ‘Bekijk het voorstellingsfilmpje’. Dat is ook wat DropBox heeft gedaan, zoals je kan zien in onderstaande screenshot. Nu kan de bezoeker zich voorbereiden op dat filmpje: volume aanpassen, radio wat stiller, even checken of de baas niet in de buurt is…
4. Integreer het filmpje in je bestaande website
37signals toont helemaal bovenaan op de introductiepagina van hun product HighRise (screenshot hieronder) een foto van de werkruimte van het programma. Die foto verandert in een filmpje wanneer je erop klikt. Lekker makkelijk.
5. Verzacht de downloadtijd
Maar bovenstaande integratie heeft ook nog een ander niet te onderschatten voordeel op het vlak van gebruiksvriendelijkheid: je geeft je bezoeker iets te lezen terwijl het filmpje laadt. Ook tijdens minder interessante videopassages valt er altijd wat op te pikken van de tekst rondom het filmpje.
Ook Vara Software past die techniek toe, bewust of onbewust. Onder hun ScreenFlowfilmpje kan je wat bijkomende informatie over het programma lezen. Zo ben je minder snel geneigd weg te klikken terwijl het filmpje laadt.
Wat zijn jullie ervaringen met productvideo’s op het web. Kijk je ernaar of vind je ze overbodig? Vind je het een vervelende trend of net heel bruikbaar? Zou je het overwegen zo’n filmpje op je eigen website te plaatsen? Ik ben benieuwd naar jullie reacties!
Categorieën: Marketing, Opinies, Webomgeving,
Een website moet duidelijk zijn
26 Sep 2008•Warenhuisketen Delhaize heeft begrepen dat de meeste van hun websitebezoekers op zoek zijn naar informatie over het dichtstbijzijnde supermarktfiliaal. Dus plaatsen ze hun winkelzoekfunctie duidelijk in het zicht en helemaal bovenaan. Perfect!
Maar dan krijg je plots de volgende vreemde vraag voorgeschoteld:

Wat een vraag! Natuurlijk ben ik op zoek naar een winkel in mijn buurt. Moet ik hier dan “ja” invullen? Of toch maar de naam van mijn gemeente? Maar hoe vind ik dan de dichtstbijzijnde winkel die open is op zondag?
Categorieën: Marketing, Opinies, Webomgeving,
Chrome: wat telt is het web, niet de browser
13 Sep 2008•Als je het multimediawereldje een beetje volgt, dan weet je het ongetwijfeld al: Google heeft vorige week zijn eigen browser op de wereld losgelaten. Het programma heet Google Chrome en is gratis beschikbaar.
Ik hou van het minimalistische ontwerp van Chrome. Als je surft op het web, dan zijn de webpagina’s belangrijk en niet de browser waarmee je surft. En hoe minder toeters en bellen er aanwezig zijn, des te gebruiksvriendelijker het programma is.

Hoewel Chrome op zich een vrij klassieke browser is, merk je toch al snel dat Google enkele basisfuncties van een browser heruitgevonden heeft. De meeste daarvan zijn gericht op gebruiksvriendelijkheid. En maar goed ook. Hier zijn alvast drie kenmerken van het programma die ik in dat opzicht opvallend vind.
1. De statusbalk
De statusbalk pikt in de meeste browsers een tiental pixels van je schermruimte in. Dat is vrij opdringering als je bedenkt dat er eigenlijk maar op twee momenten belangrijke informatie in te zien is: wanneer je met je muis over een link beweegt en wanneer je een nieuwe webpagina inlaadt.
In het eerste geval toont de statusbalk je de url waarheen je doorverwezen wordt als je op de link klikt. In het andere geval kan je zien of de webpagina volledig geladen is of niet, en of er überhaupt browseractiviteit is. (Dat is in vele gevallen interessant: soms klik je op een link of een knop en lijkt het alsof er niets gebeurt. In de statusbalk van de browser kan je zien of dat wel degelijk zo is.)
Chrome heeft geen statusbalk. Alleen in de twee bovenstaande gevallen verschijnt en verdwijnt ze automatisch. Ze is er dus enkel wanneer je ze nodig hebt. Op die manier is er meer plaats voor wat echt telt: de website.

2. De adresbalk
Chrome werkt heel functioneel en intuïtief. Een voorbeeldje: de meeste browsers hebben bovenaan een adresbalk en een zoekbalk. In de adresbalk vul je een url in en in de zoekbalk een zoekterm om op het internet naar websites te gaan zoeken. De afbeelding hieronder demonstreert dat: een screenshot van Internet Explorer 7. (Let ook op al die verwarrende knoppen, balken en opties. In vergelijking met IE7 is Chrome grafisch wel tien keer duidelijker!)

In Chrome is de adresbalk tegelijk de zoekbalk. Typ “fietswinkel gent” in en je krijgt meteen de Google zoekresultaten te zien. Typ “gent.be” in en je komt meteen op de website terecht van stad Gent. Minder balken en knoppen betekent minder verwarring.

3. Popupvensters
Zowat alle browsers hebben een ingebouwde functie die vervelende reclame en popups automatisch tegenhoudt. Fantastisch natuurlijk, maar niet elke popup is slecht en op die manier krijgen we nooit de popupvensters te zien die we misschien wel willen zien.
Als Chrome een popup blokkeert, dan verschijnt er onderaan een balkje met de titel van de popuppagina. Je kan het kleinood vastnemen en verslepen om de popup te zien te krijgen. De gebruiker beslist dus of hij een popup wil zien of niet, en niet de browser.

Google Chrome legt dus duidelijk de nadruk op gebruiksvriendelijkheid met een intuïtief minimalistisch ontwerp. Heb jij Google Chrome al eens uitgetest? Wat zijn jouw bevindingen?
Categorieën: Ontwerp, Opinies, Webomgeving,
Hoe lok je nieuwe klanten?
2 Sep 2008•Schotel ze een herkenbare vervelende situatie voor! Ik weet niet of het al lang op hun website te vinden is, maar 37signals heeft me zonet wel kunnen overtuigen met een knap staaltje marketing. Heel eenvoudig nochtans: op de startpagina van hun website vind je ergens onderstaande, toch vrij herkenbare afbeelding:

En wat als je klikt op de link? Dan verhuis je gewoon naar een pagina waar ze Backpack promoten, hun software die je helpt orde op zaken te stellen in een wereld van gele post-its, volgekladde kalenders en oeverloos heen-en-weer gemail… Nice!
Categorieën: Marketing, Opinies, Webomgeving,
Over
TheHotSeat is Thomas Byttebier, freelance webdesigner en user interface designer.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij. @bytte op Twitter.
RSS Feed TheHotSeatLaatste blog posts
- Responsive web design
- Designer meetup Gent part 2
- Mobile first ontwerpen
- Sleepstreet: mijn eerste responsive ontwerp
- Ontwerpen zonder bladspiegel
Laatste reacties
- Maartje op Links op Twitter
- Stuart op Responsive web design
- Ton van Leest op Responsive web design
- Jeroen op Responsive web design
- Mindmap maken op Designer meetup Gent…
Categorieën
Alle • ExpressionEngine • iPhone • Transistor • Marketing • SEO • Ontwerp • Typografie • Ontwikkeling • jQuery • PHP • Zend Framework • Opinies • Overige • Photoshop • Webomgeving




