De voorbije dagen versleet ik de seat of my pants op UX London, een conference die, zoals de meeste dezer dagen, de klassieke ex cathedra combineert met workshops. Ik vind het niet echt nuttig om alle inhoud hier over te nemen — het zou ook heel wat tijd kosten — dus doe ik het zoals bij vorige conferenties: een willekeurige lijst quotes, links en termen.
The Grimace Project: Scott McCloud, bekend van de Google Chrome strip, gaf aan dat gelaatsuitdrukkingen allemaal een combinatie zijn van één of meer van deze 6: blij, verrast, bang, triest, afschuw, boos. En dat heeft iemand in een kleine tool gestopt: The Grimace Project.
Jeremy Rifkin voor The RSA:
Tufte: Het begint stilaan cliché te worden, dat PowerPoint bashing, maar nog eentje voor onderweg:
Mirrors edge:Dit spel is na de eerste demo’s veel vereenvoudigd. Niemand kon het spelen zonder regelmatig boven de pot te hangen:
The Fun Theory: let op hoe niemand de trap gebruikt aan het begin van het filmpje:
What is Information Architecture? Of beter: What is Information en What is Architecture. Hier.
“Just do something, so we can change it!“ Uitspraak, tijdens een vergadering bij Pixar, waar iemand niet volledig vast zat en niet meer wist wat te doen.
Hieronder enkele belangrijke punten die ik meebracht vanuit Londen
Designing effective mobile interfaces
Met enkele cijfers toonde Megan Fischer (SimpleBits) aan dat mobiel internet aan een sterke opmars bezig is. Globaal is er een groei van 15 tot 20 % per maand, wat 8 X zo snel is als desktop internet toegang. De kans is dus groot dat je in de nabije toekomst geconfronteerd wordt met mobiel internet. Op het eerste moment lijkt ontwikkeling voor de mobiele markt een echte uitdaging. Er zijn enorm veel verschillende toestellen elk met hun eigen niveau van css ondersteuning en schermresolutie. Gelukkig zijn er al voldoende bronnen die je op weg kunnen helpen: bijvoorbeeld het boek Mobile Web Design door Cameron Moll.
niveau van ondersteuning
Naked: Gebruiker doorverwijzen naar een mobiele versie waarvan de css en beelden verwijderd zijn. Dit zorgt voor snelle laadtijden. Door het ontbreken van extra bestanden is deze versie zeer onderhoudsvriendelijk. Pure html zorgt natuurlijk wel voor een saaie gebruikerservaring.
Some style: Mobiel stylesheet zorgt voor een minimum aan stijl. Een header met logo en een basis pallet aan kleuren versterken in dit geval de branding van de site. Hierbij is het wel aan te raden om de grootte van beelden te beperken.
Deck it out: Afzonderlijke website specifiek voor mobiel gebruik. Herschreven mark-up die aangepast is aan de noden van een mobiel gebruiker.
Typography on the web
opening the floodgates with @fontface
Het beperkte gamma aan fonts bij webdesign lijkt op het eerste moment een beperking. Met de komst van @fontface zou een einde komen aan dit tijdperk. Mark Bolton had hierbij enkele bedenkingen. Op technisch vlak zijn er nog problemen, browsers zijn het nog niet eens over de implementatie en rendering. Ontwerpers van lettertypes maken zich ernstig zorgen over licenties en copyrights. Maar er zijn nog enkele andere knelpunten:
Meeste lettertypes zijn niet ontworpen voor schermweergave. “Times New Roman” werd bijvoorbeeld ontworpen voor krantendruk. De smalle schreven zetten uit tijdens het drukken door de snelheid van het drukprocédé en de lage kwaliteit van het papier. Op het scherm daarintegen werkt dit niet, bij kleine fontgrootte zijn de schreven amper zichtbaar.
lettertypes zijn ontworpen voor een bepaald doel of sfeer. “Comic Sans” is technisch en estetisch gezien geen slecht lettertype, maar het is wel 9 op de 10 keer het verkeerde lettertype voor de opdracht.
making good design decisions
Studies hebben uitgewezen dat de verkoop van een product daalt naarmate het aantal varianten toeneemt. Mark Bolton gaf het voorbeeld van een experiment in een warenhuis. Klanten kregen een waardebon om een pot confituur af te halen. Wanneer 24 verschillende soorten tentoongesteld stonden ging slechts 3% over tot een aankoop. Toen het aanbod naar 6 soorten werd teruggebracht liep 30 % van de klanten met een pot confituur de winkel buiten. Hiermee werd aangegeven dat teveel keuze hinderlijk is voor een beslissingsproces.
Hetzelfde principe is van toepassing op webdesign. Een mooi voorbeeld hiervan is de interface van een rich text editor zoals TinyMCE. De gebruiker wordt een arsenaal aan verschillende opmaak mogelijkheden aangeboden waarvan niet alle combinaties even estetisch verantwoord zijn. Misschien is het beter om het aantal keuzes te beperken, bijvoorbeeld enkel fonten en kleuren aanbieden die binnen de branding vallen. De term “cascading style decisions” werd gebruik als een mogelijke oplossing. In plaats van alle mogelijkheden op een dienblad aan te bieden kan je stapsgewijs werken. Het lettertype kan je laten kiezen op basis van de sfeer die uitgestraald moet worden. Zakelijk, modern, speels zijn termen die meer aanspreken dan “Georgia”, “Arial”, “Comic Sans”. Kleuren kunnen op dezelfde wijze aangeboden worden.
Keuze is belangrijk, maar begeleiding in het proces is dus cruciaal om tot goede (design) beslissingen te komen.
Rock staat voor de basisprincipe van standaarden. Voor iedereen, overal beschikbaar, sociaal, gebruiksvriendelijk, … Dit hadden Tim Berners-Lee en zijn collega’s voor ogen toen ze de aanzet gaven voor het World Wide Web. Klinkt goed, maar dit is niet het internet dat we vandaag hebben. Net zoals de Amerikaanse grondwet zijn de beginselen idealistisch, maar de manier waarop ze toegepast worden minder mooi.
Paper
Het woord “markup” of opmaaktaal komt oorspronkelijk uit de uitgeverswereld, waar boeken met instructies voor de drukker werden voorzien. Het is geen nieuwe technologie, enkel gedigitaliseerd.
Momenteel zijn verschillende versies in gebruik: HTML 4.01, XHTML 1.0, XHTML 1.1, XHTML 2 en HTML 5. Aangezien XML niet ondersteund wordt in de MIME type van een belangrijke browser. XHTML heeft dus momenteel geen meerwaarde buiten de strengheid bij het schrijven van code (hoofdletters, onderkast,…). Rond HTML 5 is een misverstand dat het pas tegen 2020 zou afgewerkt zijn. Neem het voorbeeld van CSS 2.1 waar het voorstel in 1998 werd uitgewerkt en tot op vandaag nog geen definitieve versie beschikbaar is. De geïmplementeerde standaard wordt dus de “echte” standaard. Het wordt dus echt de moeite waard om de evolutie en mogelijkheden van HTML 5 te volgen.
Scissors (cut it out)
Er is een enorme evolutie in browsers, Internet Explorer inbegrepen. IE8 in standard mode is een goede browser met uitstekende css ondersteuning. Maar het loopt mis door de verschillende versies, IE8 kan een webpagina op verschillende manieren verwerken (Quirks Mode, Standards Mode, IE7 Compatibility Mode) wat voor webdevelopers die nog steeds met IE6 geconfronteerd worden een hindernis is. Versionering staat loodrecht tegenover de beginselen van standaarden.
Lizzard (get on with it)
Technologieën zoals SVG, SMIL en bijvoorbeeld Microformats zijn al jaren beschikbaar en worden nog te weinig toegepast.
Spock (futureproof)
Het uiteindelijke doel is “Open Web Stack”, open source op alle levels.
Onder het motto beter laat dan nooit volgen hier enkele woorden over FOWD 2008
Finding inspiration for design
Waar vind je inspiratie en hoe ga je er mee om? Volgens Patrick McNeil is het een eindeloos proces dat oefening vergt. Er zijn talloze inspiratiebronnen te vinden en die hoeven niet noodzakelijk verbonden te zijn aan webdesign. Leer vooral zelf deze bronnen interpreteren en maak er iets nieuws van, zomaar kopiëren kan natuurlijk niet.
User experience versus brand experience
Er is geen sprake van “versus”. Beide termen zijn aan elkaar verbonden. Door middel van enkele leuke illustraties toont Steve Pearce aan dat user experience als een ijsberg kan omschreven worden. Een visueel deel en een veel groter interactief stuk dat onder de waterspiegel verborgen ligt. De top van de ijsberg polijsten helpt niet als het onderliggende deel een warboel is. Het visuele aspect brengt namelijk enkel een eerste indruk terwijl de onderliggende gebruiksvriendelijkheid ervoor zorgt dat de bezoeker een goede “feel” aan de site overhoudt. Een goed gevoel dat hij dan ook wil delen met anderen.
Andy Clarke maakte gebruik van klassieke Britse Comedy duo Morecambe and Wise om zijn standpunt rond brand experience te verduidelijken. De “christmas special” die eind de jaren 70 werd vertoond op BCC is nu nog altijd een van de meest bekeken shows ooit. Dit komt doordat het aanbod in die tijd veel beperkter was. Vandaag beschikken we over een veel groter aanbod aan tv-zenders en andere mediakanalen. Het is dan ook een stuk moeilijker geworden om een grote groep mensen te bereiken. Een aantal quotes van Seth Godin verduidelijken dat een merk vooral gaat over mensen die met elkaar praten en zo naambekendheid verspreiden als een virus. Een merk is dus niet wat er op een billboard staat, maar veel meer een emotionele betrokkenheid.
Designing the User Experience Curve
Met een kort verhaal over een aangenaam verblijf in een hotel bracht Andy Budd aan wat de user experience curve is. Iedere ervaring heeft zijn goeie en mindere punten, belangrijk is de som van deze afzonderlijke momenten positief is.
Eerste ervaring telt dubbel, dit zet de toon voor alle volgende handelingen. De game-industrie is een goed voorbeeld. In de meeste games wordt en basis training level aangeboden waarbij de speler alle nodige vaardigheden kan aanleren in een echte omgeving. Dit maakt voor een veel betere ervaring dan het lezen van de handleiding.
Personalisatie brengt een meerwaarde aan de ervaring. Een gebruiker die zich verbonden voelt met het product of dienst zal minder geneigt zijn om iets anders te proberen.
Aandacht voor detail is een niet te onderschatten gegeven. Het zijn vaak de kleinste zaken die de grootste invloed hebben op de gebruiker.
Feedback zorgt voor motivatie en zet aan tot verder acties.
Zorg dat het leuk is. Gebruikers houden van spelletjes, ze worden ook graag beloond voor hun inspanningen. Hou hierbij ook rekening dat het spelelement ook negatief kan werken. De top 100 diggers werd van de Digg site verwijderd omdat de kwaliteit van de content er onder begon te lijden.
Getting your designs approved: 12 Simple Rules
Design is een subjectief gegeven, iedereen heeft een eigen mening. Dit maakt het moeilijk om tot een consensus te komen. Aan de hand van 12 eenvoudige regels wil Larissa Meek het ons makkelijker maken om goedkeuring te krijgen op een design.
Zorg voor een goeie relatie met de klant:
een goeie band zorgt voor een beter communicatie.
Stel vragen:
Wat wil de klant bereiken met deze website? Waarvoor staat het product?
Stel meer vragen:
Wat is de doelgroep? Wanneer wordt het product gebruikt?
Gebruik wireframes:
Geven ruw aan welke elementen op de pagina’s komen, licht afwijken tijdens design mag.
Spreek over design voor je in photoshop begint te werken:
Probeer te achterhalen welke stijl toepasselijk is, dit kan bijvoorbeeld door een kleurpallet of “moodboard” aan de klant voor te leggen.
Eén design richting volstaat:
Meerdere designs zullen ervoor zorgen dat elementen uit beide gekozen worden. Dit zorgt voor
Problemen met consistentie in het algemene design.
Presenteer je design in een browservenster:
Zorg ervoor dat het design in optimale omstandigheden wordt beoordeeld.
Maak een prototype indien nodig:
Sommige zaken zijn voor een klant moeilijk te vatten, een protoype kan verduidelijking brengen.
Vraag om de feedback te verzamelen en beperk zo het aantal correctie rondes:
Dit vermijdt ook dat er tegenstrijdige reacties komen van verschillende mensen.
Heb vertrouwen in je ontwerp:
Een klant zal zelf twijfelen als je niet volledig achter je ontwerp staat.
Tijd maak het proces makelijker:
na verloop van tijd krijgt de klant inzicht in het proces, wat het goedkeuren makkelijker maakt.
Maak het beste van een moeilijke situatie:
Goedkeuring krijgen om een design is geen exacte wetenschap, iedere opdracht is verschillend
Unconventional ways to promote your site
SEO, blogging, Adwords zijn klassiekers als het over promoten van websites gaat. Paul Farnell brengt in zijn presentatie enkele alternatieve manieren naar voor. Het ontwikkelen van kleine, gratis tools die de website aanvullen kan de naambekendheid sterk vergroten. Deze zogenaamde “satellites” hebben de neiging om zich snel over het web te verspreiden. Een bepaalde waarde aan de content verbinden is een ander piste. Zo kan je bijvoorbeeld de eerste twee weken na de lancering het downloaden gratis maken, dit zorgt voor een bepaalde drang bij de gebruikers om het nieuws sneller te verspreiden. Wat geld kost wordt in mindere mate geconsumeerd, opletten dus bij het toepassen van deze manier van promotie. Verder komt het menselijke aspect sterk naar voor. Sluit je aan bij gerelateerde communities en geef constructieve feedback aan derden.
Door zelf enthousiast en hulpvaardig te zijn wordt een vertrouwensband gevormd die ook overgedragen wordt naar de website waar je achter staat.
Buzzwords waren er niet te rapen. Over trends werd met geen woord gerept. Het ging hem om nuttige, praktijkgerichte informatie en inzichten. Ideaal voor down-to-earth mensen als wij.
Zoals steeds als iemand van Marlon naar een conferentie gaat, delen we alles wat we gehoord en gezien hebben met het hele team. Davy en ik voegen later op deze blog nog een paar concrete artikels toe. Maar eerst is het tijd voor pure willekeur.
The MegaPenny Project
The MegaPenny Project werd aangebracht door Jeffrey Veen (ex-Adaptive Path, ex-Google). Hij sprak in zijn keynote op dag één over het visualiseren van data. Hij gaf een paar klassieke voorbeelden, zoals Edward Tufte’s voorstelling van gegevens die tot de ramp met de Challenger Space Shuttle hebben geleid, hoe John Snow halfweg de 19e eeuw de door Cholera veroorzaakte sterftes in Londen in kaart bracht, en zo verder.
The MegaPenny Project heeft als eenvoudig doel een groot getal te visualiseren, vertrekkend van een alledaags voorwerp, zoals een pennie (een muntstuk). Zo antwoordt de website dus op de treffende vraag: Hoe zien één miljard pennies er uit?
Jeffrey Veen had het verder ook over Chris Jordan, een fotograaf die statistieken weergeeft; en over Cabspotting, (…) traces San Francisco’s taxi cabs as they travel throughout the Bay Area
Avoiding Mass Extinctions Engine
AMEE (uit te spreken als Amy) is een API die in meer dan één presentatie werd aangehaald. De API wordt vandaag gebruikt door o.a. dopplr en edenbee. To quote:
AMEE is designed as a neutral platform to aggregate and distribute all the CO2 data in the world. It combines measurement, profiling and transactional systems to enable this.
Op flickr bestaat er een pool over het onderwerp: een term die wijst op paden die niet ontworpen zijn, maar ontstaan doordat mensen een niet vooraf aangelegde weg volgen.
Het is een metafoor die vrij kan toegepast worden tijdens conversaties, of gebruikt kan worden in verder volledig nutteloze Motivational Posters.
Designers en ontwikkelaars ontdekken desired paths wanneer ze de eindgebruiker in levensechte actie zien.
Vorige week waren 
