Arkiv | Interaktionsdesign RSS-flöde för detta ämne
Wikipedia och galningarna

Wikipedia och galningarna

Läs med webReader

En oerhört värdefull bidragsgivare till Oxford English Dictionary var William Chester Minor som i över 30 års tid arbetade med ordboken; han läste, citerade, definierade och brevväxlade med huvudredaktören James Murray om utmaningarna i lexikografin. Först 1896 när redaktör Murray på eget bevåg sökte upp Minor efter 20 års vänskap blev han varse att Minor [...]

Läs hela inlägget
Clicktales konverteringsgrad efter ändring i formuläret

Konsten att optimera webbformulär med ett ynka ord

Läs med webReader

Webbanalys-företaget Clicktale redovisar i sin blogg ett grymt bra exempel på optimering av webbformulär som jag återger delar av här. Det är svårt att få ett tydligare prov på hur stor skillnad disciplinerna interaktionsdesign och användbarhet kan göra för affärsnyttan hos webbformulär. Clicktale mäter konverteringsgrad för formulär på ett snillrikt sätt. De ser bland annat: [...]

Läs hela inlägget
Lorem shitsum: en text som luktar illa

Lorem shitsum: en text som luktar illa

Läs med webReader

Lorem ipsum dolor sit amet är bland de mest missbrukade orden i designvärlden. De ingår i en nonsentext (en form av remixad Latin) som används för att fylla ut textytor i wireframes, designskisser och prototyper. Just nu håller jag en kurs i webbcopy och argumenterar för att denna nonsenstext förstör syftet med en design: att faktiskt [...]

Läs hela inlägget
Mataffären fattar hur människor köper mat

Mataffären fattar hur människor köper mat

Läs med webReader

Jag har börjat veckohandla på mataffaren.se – en matvarubutik med hemkörning. Vid första anblick skiljer sig butiken inte från de övriga jag provat genom åren – och det är alltid ett pyssel att söka upp en matvara, lägga den i korgen, söka upp nästa matvara, och så vidare; men för några veckor sedan upptäckte jag [...]

Läs hela inlägget
SEB i underlandet

SEB i underlandet

Läs med webReader

I Lewis Carroll’s klassiker Alice i underlandet upptäcker Alice en liten flaska med den uppmanande texten Drick mig. Nyfikenheten tar överhanden, Alice tar en slurk, och vips! så blir hon liten nog att komma igenom en dörr på sin jakt efter den vita kaninen.

Lika fantasieggande är det för besökare till SEB:s webbplats med ”för små” webbläsare som upptäcker den uppmanande texten Rulla åt höger. En nyfiken användare dristar sig säkert till att klicka och vips! så rör sig skärmen åt höger. Men varför då? Jo, följ med på jakt efter en vit meny hos SEB.

En oförklarlig nyhet låter först bra…

Sagan tar sin början i april 2009 när jag gick in på SEB:s startsida och verkligen inte förstod någonting av nyheten på sidan. Så jag tog en skärmdump och tänkte att det där måste jag återvända till någon gång. Så här stod det nämligen i nyheten:

Läs hela inlägget
Tjäna pengar på Twitter

Tjäna pengar på Twitter

Läs med webReader

Twitter birdFunderar du också på hur du ska använda Twitter på företaget? Är det bara en tidstjuv eller kan det generera nytta, rentav pengar, för ditt företag? Om du väl har kommit igång med att använda Twitter och nu vill lägga upp en strategi för företagets twittrande bör du känna till en del om den mångfald av möjligheter som öppnar sig på den sociala arenan. Då kan du nämligen lättare räkna på investeringsvinster (ROI) för den tid du lägger ner.

Låt säga att 40 000 svenskar använder Twitter aktivt och den siffran ökar (källa: Sysomos [PDF] via Digital Kommunikation via @glvstn). Av dessa 40 000 kan vi anta att många Twitter-pionjärer har egna bloggar, med en hyfsad läsekrets på i genomsnitt 4 000 unika besökare i månaden. Jag räknar lågt och säger att 2 000 aktiva twittrare (5%) har egna bloggar – det är nämligen så att 5% av den svenska befolkningen över 16 år, eller 350 000 människor, skriver egna bloggar (källa: WII – Svenskar och internet). Och bloggare citerar bloggare. Som du strax förstår skulle det potentiellt ge en räckvidd på flera miljoner människor.

Läs hela inlägget
En fulsnygg strategi från Blocket

En fulsnygg strategi från Blocket

Läs med webReader

En medveten strategi handlar väldigt mycket om att differentiera sig från sina konkurrenter och skapa ett tydligt erbjudande till sina kunder. I mina föreläsningar nämner jag ibland Blocket som exempel på en strategi som faller väl ut. Exemplet är tacksamt eftersom många tycker att Blocket ser förskräckligt ut och inte förstår varför Blocket fortsätter att växa.

Jag jobbar mycket med värdekurvor för att påvisa hur en produkt eller tjänst särskiljer sig från liknande tjänster. Värdekurvan som verktyg har sitt ursprung i angreppssättet Blue Ocean Strategy (som också är en bok). Tanken är att man undviker de blodiga, konkurrensfyllda haven och istället övertar de blå haven där konkurrensen är obefintlig.

Några mer kända exempel på värdekurvor är denna för Nintendo Wii och denna för flickr.

Jag har ritat följande värdekurva för Blocket, som på intet sätt är heltäckande, men ger en överskådlig bild av hur Blocket undviker att konkurrera på vissa områden och tar större plats på andra, mer konkurrensfria områden.


Jag har förstås tydliggjort här att något som Blocket inte satsar på är grafisk design. Andra områden som Blocket håller sig avvaktande på är krav på registrering (man behöver alltså inte komma ihåg ett lösenord för att lägga upp annonser) och betalningsalternativ (genom att begränsa sätten man kan betala på håller man sajten enkel och kostnadseffektiv). Det man gjorde var dock att välja ”rätt” betalninsalternativ från början – det vill säga möjligheten att betala genom ett telefonsamtal.

Läs hela inlägget
Fuglesang talar direkt till dig, inte till media

Fuglesang talar direkt till dig, inte till media

Läs med webReader

Christer Fuglesang

Natten mot onsdagen den 26 augusti 2009, strax efter midnatt svensk tid, skriver Christer Fuglesang så här på Twitter:

Just got the news that we are scrubbing again, due to technical problem. Bad luck again, but maybe we can have dinner with the families.

På morgonen den 26 augusti när jag plockar upp papperstidningen Svenska Dagbladet från hallgolvet så står det på förstasidan: ”Kom Fuglesang iväg? SvD.se sänder starten på Christer Fuglesangs andra rymdresa kl 7.11 idag.” Inne i tidningen skriver Karin Henriksson, på plats i Florida:

Så här meddelade han själv: ”Tillbaka på rummet efter 4 tim på rygg i skytteln. Gör lite ont. Hungrig. Otur, men inte speciellt besviken. Senare återkom han med: Imorgon blir bättre.”

Allt detta skriver Christer på Twitter för hela världen att se. Med en reporter på plats i Florida så blir det ironiskt att behöva läsa citat från Christers gamla Twitter-meddelanden i tidningen. Nyare meddelanden från Christer hade ju till exempel många timmar tidigare också nämnt att starten inte blev av nu heller.

Läs hela inlägget
Wired använde min bild från Flickr

Wired använde min bild från Flickr

Läs med webReader

I morse hade jag mejl från Google Alerts, som jag använder för att bevaka när utvalda varumärken och namn nämns på nätet, inklusive mitt eget. Länken gick till Wired, som använder ett kort jag tog förra lördagen för att illustrera ett blogginlägg om att svenska Piratpartiet har fördubblat sitt medlemsantal efter domen mot The Pirate Bay.

Stöd för Pirate Bay vid Piratpartiet-demonstration

Bilden föreställer en pensionär i rullstol med piratflagga och ögonlapp, sittandes bland den folkmassa som närvarade vid en demonstration mot TPB-domen. I slutet av artikeln länkar man tillbaka till mitt Flickr-konto, även om jag förstås gärna sett en länk till min blogg som @erkstam påpekar.

Nyttan och vinsten med medborgarfoton

Vad vinner då Wired på att använda min bild, som jag tillgängliggjort gratis via en Creative Commons-licens? Jo, som jag fick tillfälle att nämna på ett seminarium i morse så är det väldigt enkelt:

  1. Man behöver inte lägga pengar på en fotograf och slipper kostsam administration (sparar pengar)
  2. Man hittar bilden snabbare via Flickrs bildsök (effektivitet)
  3. Man anammar den deltagarkultur som så många internet-entusiaster strävar efter och förespråkar, och får således uppmärksamhet (varumärke)
  4. Man lånar bilden från en person som skriver i Twitter om det och bloggar om det – och får massor av fler inlänkar (marknadsföring)
Läs hela inlägget
Hemmablind design av länklistor

Hemmablind design av länklistor

Läs med webReader

Två olika utformningar av länklistor med nyheter
Jag stöter på tafatta försök till länklistor (se exempel i Figur 1 ovan) i ökande omfattning på svenska webbplatser och känner att jag vill dra i nödbromsen. Det är inte ok att bara slänga upp en lista med länkar och tro att människor ser dem.

Det viktigaste i en länklista är, trots allt, själva länken. Om man tycker att länken är viktig så kommer här ett hett tips: välj inte en minimal storlek på typsnittet och strunta för all del inte i att signalera att det är en länk.

Läs mer

Trots att bägge grupperna tillgänglighetsexperter och sökoptimeringskonsulter länge varnat för länken ”Läs mer” så dyker den upp titt som tätt. Sluta med det, den ger inte mervärde för någon. Länka det som betyder något, i exemplet ovan alltså själva rubriken på nyheten.

Rubriksättning

Rubriken på en länklista är inte oviktig. I mitt exempel i figur 1 ovan har jag medvetet valt Pressmeddelanden eftersom det ofta är ett irrelevant begrepp. Pressmeddelanden används internt på företagen som i ”skicka ett pressmeddelande” och av nyhetsbyråer: ”nu har det kommit ett pressmeddelande”.

Men pressmeddelandet är en nyhet och jag lovar att en vanlig besökare inte riskerar att stamma sig över begreppet nyheter på samma sätt som man kanske undrar varför det är viktigt att poängtera att det är ett pressmeddelande (betyder det att det är mer viktigt än en nyhet, eller bara att det faxats till en massa nyhetsbyråer, eller vad menar man egentligen?). Om det faktiskt är mer viktigt än någon annan nyhet finns det massor av sätt att visualisera det på.

Signalera länk

Visst, man kan argumentera för att understrykningen av länkar i långa listor kan vara ansträngande för ögat. Men fortfarande måste det vara tydligt att det är en länk; det räcker inte med att man måste leta med musen och upptäcka att något ändrar färg eller får en understrykning. Ett vanligt förekommande sätt är en symbol, stiliserad pil, som i Figur 2 ovan.

Textstorlek och kontrast

Större skärmar med högre upplösning innebär att ett typsnitt ser mindre ut än i lägre upplösningar. Fler människor med synfel surfar på nätet. Och allvarligt, vill du fylla upp en skärm med innehåll är det bättre att förstora den relevanta texten du har på plats än att försöka hitta på fler lådor med innehåll.

Hemligheten: Stor text är lättare att läsa.

Blå text mot blå bakgrund är sällan rätt och att blanda för många ljusa och mörka ytor nära varandra kan verka störande. Människor med nedsatt syn, färgblindhet och kognitiva handikapp uppskattar när det är skarpa raka linjer och du står för vad du säger. Ingen idé att göra det suddigt.

Metadata (exempelvis datum, författare, m.m.)

Om vi bestämmer oss för att länken är det viktiga, sätt då länken först. Om länken fångar intresset, så ska det mest relevanta metadatat förmodligen finnas tillgängligt (i mitt exempel datumet) – och resterande metadata finns när man klickar på länken.

Sida vid sida förtydligar

Du kanske inte hann uppfatta alla detaljskillnader mellan figur 1 och figur 2 i bilden ovan, men jag misstänker att du snabbt insåg värdet av figur 2. Att ställa två designförslag sida vid sida är ofta ett bra sätt att visualisera och identifiera brister. Med miljarder webbsajter därute är det inte ont om designförslag att jämföra sig mot.

Eller fråga mig, jag brukar ha en åsikt ;)

Läs hela inlägget
Clicky Web Analytics