Tegenwoordig zijn er steeds meer websites die de gebruiker ook verzoeken om het e-mailadres te herhalen, om fouten te voorkomen. Een logische stap, want een verkeerd e-mailadres in de database kan voor een hoop frustratie zorgen bij inloggen. Bovendien is het voor de website zelf belangrijk om correcte e-mailadressen te hebben.

Hoe moet het niet?

90 Percent of Everything schreef onlangs over het ‘email confirmation antipattern‘. Een website (ODEON in dit geval) verzoekt de gebruiker om twee keer een e-mailadres in te voeren, maar liet niet toe dat hij ging kopiëren en plakken. Een vieze foutmelding werd weergegeven. De foutmeldingen wees met de vinger naar de gebruiker en zei bestraffend You cannot paste text into this field. Zo hoort het dus niet. (Bekijk de betreffende sign up pagina).

Hoe kan het wel?

Op Infinity Plus One Consulting wordt echter geëxperimenteerd met een nieuw interessant patroon, in het artikel Solving the “repeat emailaddress” form issue. Steve Krug merkte namelijk in een discussie op dat de veel verkeerde e-mailadressen wellicht het gevolg zijn van de doorgaans kleine lettergrootte in de invulformulieren. Als je de gebruiker de kans geeft om even goed na te kijken, los je wellicht een groot deel van het probleem op, zonder dat hij het twee keer hoeft in te voeren.

Zie hier de experimenten van dit nieuwe design patroon:

• Repeat Email Address  Pattern 1
• Repeat Email Address  Pattern 2
• Repeat Email Address  Pattern 3
• Repeat Email Address  Pattern 4
• Repeat Email Address  Pattern 5

De experimenten laten de gebruiker eenmalig het e-mailadres invoeren, maar geven deze later onderin groot weer. Het verkleint de kans op verkeerde e-mailadressen aanzienlijk, vermoed ik (zonder kwantitatief onderzoek te hebben gedaan). Een interessant patroon, waarvan ik benieuwd ben hoe goed dit in de praktijk gaat werken.

Voor wie net iets verder wil dan deze 3-minuten durende uitleg, verwijs ik naar zijn Interaction Design Sketchbook (PDF). Bill Verplank dus.

The Paradox of choice

Psycholoog Barry Schwartz onderzoekt de link tussen economie en psychologie. Hij is de laatste jaren bekend geworden met zijn theorie: De paradox van de keuze (The paradox of choice uit 2004). In de zoektocht naar geluk, stuit men op een zoektocht naar meer vrijheid van keuze. Schwartz stelt dat deze zoektocht ons niet meer geluk of vrijheid heeft gegeven. Sterker nog: de vrijheid van keuze heeft een verlammend effect op ons.

Joshua Porter vertaalt deze theorie van Schwartz in zijn boek Designing for the Social Web naar het medialandschap waarin we leven en noemt daarbij het volgende concrete kleine voorbeeld.

“I remember a friend of mine was shopping for a digital camera several years ago, and decided to utilize several online price trackers to help him find the best model at the best price. He became paralyzed by the options. The paradox was realized: he ended up not getting a camera! He had to rationalize this by citing another reason (a change in financial situation) because on the surface not choosing due to too much information seems irrational.”

Less is less

Het is om die reden dat de uitspraak Less is more (of: Less is less – 37Signals) zo beroemd is, zeker onder designers. Het is niet omdat wij allemaal van minialistische websites houden. Het is niet omdat wij kleinere websites willen hebben. Het is om dezelfde reden dat wij Excel gebruiken voor tabellen en Words voor documenten. Het was ons empathisch vermogen dat ons deed vermoeden dat een chaos aan features niet zou werken, dat nu deels onderbouwt kan worden door de de conclusies uit onderzoeken van psycholoog Schwartz.

Een goed argument om in te brengen tijdens de volgende redactievergadering. Ja. We kunnen audio, video, tekst en animatie toevoegen aan de website. Ja. We kunnen een onderverdeling maken. Maar. Excelleren we op alle punten en komt de bezoeker daarvoor naar onze website? Verlammen wij hem niet met de hoeveelheid aan keuze die we hem geven?

Bekijk de presentatie van Barry Schwartz over The paradox of Choice op Ted.com

Copy/Paste op The New Yorker

The New Yorker heeft echter een interessante feature, die juist weer tegen deze dalende trend ingaat. Als je een stukje tekst van hun website kopieert en op een andere plek plakt, verschijnt er plotseling de tekst:

Read more: http://www.newyorker.com/#ixzz0c785JfRZ

Boem. Ongevraagd plaatst The New Yorker een handige link in jouw nieuwe document. Handig? Ja, vooral voor hun.

Ik vermoed dat voor eind 2010 de meeste websites dit trucje heeft overgenomen. Wellicht een combinatie met handige ‘copy/paste’ statistieken, die Tynt weer voor een paar euro aanbiedt. Marketingmanagers zullen kicken op een oplossing als deze. Het is schattig, snel, goedkoop en effectief. Bovendien, zoveel kwaad kan het toch niet?

Maar is het wenselijk gedrag?

Ik vraag me hardop af of het wenselijk gedrag is. Het druist in tegen het basisprincipe van kopiëren en plakken, maar kan voordelen voor de gebruiker bieden. Echter, hoe vervelend is het als je een aantal zinnen wil kopieren en constant vreemde linkjes erbij krijgt? Houdt deze techniek lang stand, of zal het voor eind 2011 alweer verdwenen zijn? Ik ben benieuwd naar jullie mening.

Links bij dit artikel:

• The New Yorker
• Tynt
• Smart copy/pasting on 37Signals

Google is goed bezig met haar Google Reader. De afgelopen maanden zijn er steeds kleine tweaks doorgevoerd, waarmee de RSS lezer steeds een stukje beter wordt. Vandaag stuitte ik op een hele kleine tekst die wordt getoond op het moment dat je een aanbevolen feed bekijkt. Een goed voorbeeld van hoe een klein stukje tekst en data voor een betere experience kan zorgen.

In Google Reader worden artikelen uit verschillende bronnen verzameld. Deze kunnen worden opgedeeld in mappen, maar ook in een overzicht bekeken worden. Bij het selecteren van een feed zal de gebruiker natuurlijk letten op de volgende data die gekoppeld is aan een feed:

• De kwaliteit en relevantie voor de gebruiker van de artikelen uit de bron.
• Hoeveel lezers zijn erop geabonneerd.

De ervaring leerde mij dat ik vaak aanbevelen feeds importeer, om er daarna achter te komen dat ze veel te weinig of veel te weinig nieuwe artikelen schrijven op dagelijkse basis. De bronnen gingen vaak te snel, waardoor hun aandeel in mijn overzicht groter was, dan ik eigenlijk zou willen. Dutchcowboys schrijft iedere vijf minuten een artikel, maar ik lees veel liever 2 keer per maand een goed artikel van Wolfs Little Store. Toch krijgen de cowboys een veel te groot podium in mijn reader, met als gevolg: ik verwijder de Dutchcoyboys, omdat het teveel ruis veroorzaakt

De jongens bij Google zijn kennelijk tegen hetzelfde probleem aangelopen en geven nu het volgende weer bij het toevoegen van een feed;

Voordat ik de feed aan mijn lezer toevoeg, weet ik dus al hoeveel er gemiddeld geschreven wordt. Een slimme tekst, die mij enorm helpt. Ik durf te wedden dat deze feature niet vooraf bedacht had kunnen worden. Het is typisch een voorbeeld van een feature die bedacht is door mensen die het product gebruiken en ervaring hadden met het probleem.

Samenvattend. Een blij gezicht wordt niet altijd verkregen door mooie fancy dingen, maar zit hem vaak juist in de detail. En deze details zijn juist zo moeilijk om te vinden, vast te leggen en op de goede plekken weer te geven. Maar voor nu is dit een prima case van een goede evolutie van een mooi product. Wat jij?

Vanavond lees ik een interview (The way I work: Jason Fried of 37Signals) met een van de krachten achter dit bedrijf, Jason Fried. En. De uitgesproken mening van het bedrijf komt niet uit het niets. Een kleurrijk figuur, met bijzondere – en vooral ook oh-zo-herkenbare- uitspraken.

You could sum up Jason Fried’s philosophy as “less is more.” Except that he hates that expression, because, he says, it still “implies that more is better.” Fried prefers “less is less.”

Even twee keer nadenken en ja. Hij klopt. Hij mag zo op de kalender, maar het is slechts een introductie. Later in het artikel schuift hij zijn mening over ‘grote communities en de waarde die mensen aan het bezoekersaantal hechten ook niet onder banken of stoelen.

Our blog has more than 100,000 readers, but I don’t post every day. I write when I have something specific to say. I recently wrote a scathing piece on the tech media. It really bothers me that the definition of success has changed from profits to followers, friends, and feed count. This crap doesn’t mean anything. Kids are coming out of school thinking, I want to start the next YouTube or Facebook. If a restaurant served more food than everybody else but lost money on every diner, would it be successful? No. But on the Internet, for some reason, if you have more users than everyone else, you’re successful. No, you’re not.

Er zijn honderden designers die klagen, zeiken en fouten benoemen. Ik ook. Jason Fried benoemt niet alleen zijn irritaties, maar brengt de oplossingen ook in de praktijk. Zijn bedrijf zoekt oplossingen die werken voor zichzelf en – als de kracht is bewezen – wordt het in de praktijk gebracht. Kortom. Lees: the Way I Work: Jason Fried of 37Signals.

Zal de politieagent in dit filmpje toen hij een opleiding tot politieagent deed ooit als doel hebben gehad in de struiken te liggen om bonnen aan fietsers uit te delen? Denk het niet. Dit artikel gaat over taken en persoonlijke doelen, zoals Alan Cooper deze beschrijft in het boek About Face 3: Goal-Directed design (een absolute aanrader). Waarom is het belangrijk voor een user interface designer om rekening te houden met persoonlijke doelen?

Bij het ontwikkelen van webapplicaties wordt vaak goed gekeken naar de taken en activiteiten van potentiële gebruikers. Meerdere usability guru’s hebben ons dit de laatste jaren geleerd. En terecht. De taken en activiteiten van de gebruiker vormen de kern van de applicatie. Als de kern van de applicaties is om to-do lijsten aan te maken, dan moet dit ook zonder ruis kunnen gebeuren. Een hoop webapplicaties slagen daar tegenwoordig voldoende in. En dat is goed nieuws.

Van usability naar persoonlijke doelen. Beleving.

Tijd om het een niveau omhoog proberen te tillen. Boven de taken en activiteiten heeft de gebruiker namelijk ook een doel. Een hoger doel. Dit doel heeft alles te maken met zijn persoonlijke leefomgeving en veel minder te maken met de doelen van zijn baas, of vriendin.
Een voorbeeld. Als een medewerker van een financiele instelling binnen een webapplicatie zijn urenschema bijhoudt, zijn er een aantal doelen die spelen:

1. Efficiënt en snel invullen van urenschema
2. Een uitdagende baan behouden, terwijl hij weet dat zijn baan bestaat uit veel herhaling

De eerste klinkt als een logisch doel van de medewerker, maar is in feite meer een doel van zijn baas. Voor de medewerker zelf is het waarschijnlijk veel belangrijker dat zijn baan leuk blijft – ondanks de vele herhaaldelijke handelingen die hij dagelijks moet verrichten, dat hij uitgedaagd wordt, of eventueel dat hij een promotie krijg.

Persoonlijke doelen hebben te maken met levensgeluk en ambitie. Het is aan ons, interactie ontwerpers, om, behalve een usability-technisch sluitend product op te leveren, ook mee te denken aan de beleving van de gebruiker. Hoe zorgen we ervoor dat de gebruiker zijn persoonlijke doelen kan nastreven? Het antwoord zit hem vaak in het detail van een applicatie. Key is, zoals Alan Cooper schreef: Provide an engaging or enjoyable experience.

Voorbeelden

Twee voorbeelden van webapplicaties: Joomla en Basecamp. Beide applicaties worden veelvuldig ingezet in een werkomgeving. De systemen zijn beide niet perse slecht op het gebied van usability, maar hebben wel een verschillende kijk op het creëren van een beleving.

Joomla

Dit is het scherm dat een redacteur te zijn zal krijgen als hij een nieuw artikel schrijft. Aan de linkerkant een gebruikelijk, maar niet bijzonder WYSIWYG tekst editor. Aan de rechterkant een hoop extra opties, genaamd parameters, waarvan ik vermoed dat deze term door programmeurs bedacht is. Naast vreemde terminologie en een weinig semantische opmaak doet dit beeld ook weinig goed aan een uitdagende omgeving. Ik kan me goed voorstellen dat een redacteur bij herhaaldelijk gebruik behoorlijk gefrustreerd kan raken. Weinig uitdaging. Weinig beleving.

De tone-of-voice is niet vriendelijk of boos. Je zou kunnen zeggen dat het vlak is. Slechts termen, gevolgd door een dubbele punt. Er is dus op geen enkel moment een directe koppeling van de applicatie naar de gebruiker toe. De afstand blijft kilometers groot.

Basecamp

Dit het scherm dat een projectlid krijgt te zien als hij een nieuw bericht op Basecamp wil plaatsen. Zo simpel kan het zijn. Net wat je nodig hebt, maar ook uitnodiging tot verdieping, zoals bijvoorbeeld de ‘Show extended message body‘. Weinig ruis, zeer semantisch opgemaakt en verschillende velden die uitdagen tot onderzoek. Zo is het mogelijk om een bericht koppelen aan een milestone.

Het mooiste voorbeeld van een goede tone-of-voice komt naar voren op het moment dat er een koppeling gelegd wordt tussen het bericht en een milestone. Waar negen van de tien applicaties de term Related Milestone zou hebben gebruikt, kiezen ze er bij 37Signals voor om een vraag te stellen. Does this message relate to a milestone? Merk je het verschil? De afstand tussen systeem en gebruiker wordt direct kleiner, wat een enorm positieve invloed heeft op de beleving van de gebruiker.

Samenvattend

Dankzij de bekende guru’s is usability op het internet in een stroomversnelling geraakt. Met de webapplicaties die als paddenstoelen uit de lucht schieten, zal het steeds belangrijker worden om niet alleen onderscheidend te zijn in usability, maar ook in beleving. Nodig gebruikers uit tot onderzoek in de applicatie. Laat tipjes van de sluier zien, maar gooi niet alle opties en mogelijkheden direct in zijn gezicht. Blijf niet vlak in de tone-of-voice en wees niet bang de afstand naar de gebruiker toe te verkleinen.

Een infographic wordt op Wikipedia gedefinieerd als “Een informatieve weergave van verschillende objecten met een combinatie van tekst en beeld.” In de offline wereld worden ze regelmatig ingezet bij bewegwijzering of wegsignalering. In de online wereld zijn het vaak metaforen die verwijzen naar de offline wereld. Denk aan de interactieve geografische kaart,  de kalender view, of een combinatie van beide.

Het grote voordeel van een infographic – zoals Google Maps – is dat het visueel aansprekend is. Het zegt meteen iets. Kijk, dit is een kaart, met geografische informatie. Of in het geval van een kalenderview: Kijk, hier worden data getoond. De bezoeker weet meteen wat voor soort informatie het is en bovendien ziet het er goed uit. Dat laatste is meestal doorslaggevend als het gaat om de keuze voor een infographic.

Is een infographic wel zo bruikbaar voor de bezoeker? Vaak niet. Ik wil graag het volgende voorbeeld van een kalenderview voorleggen.

Hoe de kalenderview transformeert in een agenda

Een opdrachtgever wilde graag een eventkalender op zijn website. In deze kalender worden events gezet waarvoor bezoekers zich kunnen inschrijven. De evenementen verschillen enorm van elkaar. In de eerste mock-ups heb ik dan ook aangegeven dat ik graag een lijst wilde plaatsen met daarin upcoming evenementen. Waarom?

De kalender view, zoals hierboven aangegeven, komt voort uit de kalender die we allemaal boven de wc-pot hebben hangen. Door het gebruik aan ruimte is het onmogelijk om bij iedere dag namen te schrijven, en dus moet er met twee schermen worden gewerkt. Hierdoor krijgt de kalender niet de eigenschappen van een kalender, maar van een agenda. Het gevolg is namelijk dit het proces wordt:

1. Kies een datum
2. Bekijk de evenementen op die dag

Er is geen direct overzicht tussen dagen en evenementen. Dit is vergelijkbaar met de agenda, waar je precies hetzelfde doet. Het grote voordeel van de kalender is nu dus helemaal kwijt.

De kalenderview die een agenda eigenschappen krijgt. In bepaalde situaties is het helemaal niet verkeerd. Volgens mij zijn daarbij de volgende criteria te volgen:

1. Wil de bezoeker weten wat er te doen is op een bepaalde dag -> Kalenderview met agenda eigenschappen
   of
2. Wil de bezoeker weten wat er te doen is? (En daarna kijken op welke dag) -> Lijst, of kalenderview met de content erin

Iemand die wil weten wat er deze maand allemaal te doen is, wil niet op iedere dag moeten klikken om een lijstje te zien. Hij wil een lijst zien en daarna kijken op welke dag het is.

Andere infographics

Het klinkt vrij logisch, maar toch is het verleidelijk om die denkfout te maken. Data, agenda, kalender. Het lijken allemaal goede manieren om hetzelfde te doen, maar er zit wel degelijk een groot verschil tussen. Een kalender met een agendafunctie gaat geheid niet werken.

Google Maps is vaak ook niet de meest logische oplossing om plaatsen weer te geven. Is het tenslotte niet zo dat we met de TomTom juist proberen af te komen van het kaartlezen? Waarom leest deze anders de aanwijzigingen voor? Zaken om over na te denken, voordat je zomaar zo’n trendy kaartje implementeert.

Volgens mij is het zaak dat wij – als IA-ontwerpers – kritisch blijven kijken naar alle nieuwe trends en hypes en de context waarbij we deze gaan gebruiken.

Ik ben benieuwd of jullie nog voorbeelden hebben van hypes/trends/infographics of metaforen die in bepaalde contexten niet werken!

Wireframes hebben over het algemeen meerdere doelen. Ikzelf maak voornamelijk wireframes om de volgende redenen:

• Het wordt snel inzichtelijk welke functionaliteiten een website krijgt. (Functioneel ontwerp doel)
• Je kan in een vroeg stadium al usability testing doen
• De communicatie tussen opdrachtgever / designer / techniek wordt helderder, doordat elementen zichtbaar zijn

Het doel van een wireframe is vaak niet dat je vastlegt op welke positie alles komt te staan. Dat is aan de ontwerper en komt pas in een latere schets aan de orde. De wireframe moet leiden tot discussies en problemen opsporen en uiteindelijk een oplossing bieden. Het is een dynamisch plaatje dat aan moet voelen alsof er nog dingen aan kunnen veranderen.

Je merkt al dat de lijn tussen wireframing en visueel ontwerper vaak niet zo dik is. Het is lastig om het onderscheid te houden en het gevaar loert altijd dat het wireframe een non-discussie oproept. (Denk maar aan die keer dat ze tegen je zeiden dat het logo in de wireframe te klein was).
Het is om die reden dat ik vandaag aan de slag ging met de lichtgewicht wireframe applicatie Balsamiq. Balsamiq is een Adobe AIR applicatie. Het is zowel online als offline te gebruiken. Het niet mogelijk om daadwerkelijk pagina’s te linken, maar biedt wel een ander groot voordeel: alles voelt aan alsof je aan het schetsen bent.

Doordat alles aanvoelt alsof je aan het schetsen bent, ben je ook als het ware aan het schetsen. Je hoeft geen oplossing te bedenken, maar kan meerdere oplossingen aandragen. Het genegeerd een prettig beeld voor de opdrachtgever. Een beeld dat zegt: hier wordt nog aan gesleuteld, wat vind jij? Tegelijkertijd kan je in het beeld oplossingen aandragen en de ruimte bieden om mee te denken.

Dit is ook 1 van de redenen waarom Doug Gapinski Paper Wireframing methode bedacht: samenwerken binnen een wireframe. (Lees Pwireframing: Paper Wireframing). Een methode waarbij knippen, plakken, tekenen en samenwerken centraal staat.

Ik ben erg te spreken over de schetsstijl in dit programma. Het is minder tijdrovend – en bepalend – dan echt schetsen, maar het voelt net zo vrij aan. Tegelijkertijd realiseer ik me dat zwaardere prototyping tools, zoals Axure RP, nog wel degelijk nodig kunnen zijn verder in het proces, als er daadwerkelijk schermen aan elkaar gekoppeld moeten worden.

• Gebruik Balsamiq op www.balsamiq.com