SR erbjuder alltså i detta formulär alternativen:

• Kvinna
• Man
• Vill inte definiera

Webbplatsen staffanstorp.se anpassar sig till olika skärmstorlekar.

Johan Edlund — tidig skiss för staffanstorp.se

För att få en ökad förståelse för hur Responsive Web Design implementeras ringde jag upp Johan Edlund som ligger bakom hur webbplatsen staffanstorp.se beter sig i olika skärmstorlekar. Vi pratar framför allt om projektupplägg och olika utmaningar, men kommer också in på hur ett oväntat offentliggörande av Joakim Jardenberg ledde till en oplanerad testomgång.

Intervju med Johan Edlund om staffanstorp.se

Responsive Web Design — Intervju med Johan Edlund from axbom on Vimeo.

Samtalet med Johan börjar vid 04:20 i filmen om du vill skippa intron om Responsive Web Design.

Lär dig mer om Responsive Web Design

Om du vill få mer argument och tips kring hur du ska tänka när det gäller Responsive Web Design rekommenderar jag dessa två alldeles lysande presentationer:

Pragmatic Responsive Design

Why Mobile First isn’t enough

…och tillhörande video.

Videon är lite skakig rent tekniskt, men framförandet är sevärt. Nästa vecka fortsätter jag min intervjuserie med Kevin M Powell via Skype. Intervjun kommer publiceras i min engelska blogg som lanseras samtidigt. Damn straight!

Kontaktformuläret på axbom.se delar fyra välkända fält med tusentals andra kontaktformulär på webben: namn, e-post, telefonnummer och meddelanderuta. Men inte nödvändigtvis i den ordningen. Jag ser kontaktformulär som en dialog och i en dialog tycker jag det är viktigt att prata om själva ärendet innan vi börjar be varandra om privata uppgifter. Alltså ligger meddelanderutan högre upp.

Ett väluppfostrat kontaktformulär

De flesta kontaktformulär börjar trots allt med att be om ett namn. Men hör och häpna, sedan använder de inte namnet! Vad menar jag, jo att så fort personen du ”pratar” talar om sitt namn kan du faktiskt vara hövlig och använda det vid tilltal. I mitt formulär fungerar det nu så att när du skrivit ditt namn så används namnet i efterföljande frågor. Man kommer långt genom att vara lite trevlig.

Självklart så använder jag en personlig ton i mitt kontaktformulär som ger en bild av vem jag är, Och det kan jag göra med de fåtal raderna i ett kontaktformulär och texten på knappen. Miljontals andra tävlar om att vara så opersonliga som möjligt, med endast enstaviga rubriker och gärna en grå bakgrund. Vad tror du funkar bäst? Men skämt åsido, alla ogenomtänkta formulär på webben håller mig sysselsatt

Kontaktformulär med tillfredställelse

Handen på hjärtat så kan det ändå vara rätt trist att fylla i formulär. De flesta tror att det inte går att göra något åt. Min uppfattning är tvärtom: Nyckeln till en önskvärd upplevelse handlar om enkelhet och nytta men väldigt mycket också om, håll i dig: gillande. Och hur får vi människor att gilla kontaktformulär? Jo, självklart genom design och personlighet men också genom något oväntat som skapar en tillfredställelse eller helt enkelt som bara får offret att dra på mungipan. Ett formulär som ger glädje är ett formulär man kommer ihåg och rekommenderar till andra.

Mitt kontaktformulär har ett monster som berättar roliga historier.

Kontaktformulär är en dörr på glänt. Öppna den!

Är målet verkligen att besökaren ska fylla i ett kontaktformulär? Absolut inte. Kontakt är början på en relation och det är relationen vi vill åt. Relationen kan vi skapa på många olika sätt men ett av de effektivaste verktygen i min arsenal är nyhetsbrevet. Det kommer då och då (ja, jag vet hur sällan det är) och påminner om min verksamhet och bjuder på gratis mallar som sparar tid.

Nej, jag vill inte ha en kryssruta i formuläret för att också få mitt nyhetsbrev när man ändå fyller i kontaktformuläret. Det är oförskämt och stör personen som fyller i formuläret. Låt henne göra klart det hon kom för att göra. Det är en av de viktigaste lärdomarna efter 15 år i branschen: en aktivitet eller uppgift eller budskap per sida. Mer än ett budskap ställer till problem.

Konversationen är inte slut för att formuläret skickas – det är också en vanlig missuppfattning. Samtalet har precis börjat. Och möjligheterna finns för att fortsätta vara personlig. Så här ser det ut efter att du skickat mitt formulär: ett personligt tilltal och en inbjudan att prenumerera på nyhetsbrevet. E-postadressen har vi redan och sidan tjänar som en perfekt möjlighet för kontakttagaren att verifiera att hon matade in rätt e-postadress. En tacksam bonus, alltså!

Roliga historier om monster efterlyses

Just nu har dock mitt monster bara en (1) rolig historia som han berättar om och om igen. Det vore toppen om du ville skicka in  fler monsterhistorier till mig som jag kan fylla hans förråd med. Jag vet ett perfekt kontaktformulär du kan använda för att skicka in dem. Tack.

Se videon men mina nyvunna insikter. Tillhörande material finns nedanför. Kommentera gärna om det är något uppenbart jag missat! =)

Här kan du själv jämföra bilderna

• Originalbilderna i PNG-format: bild 1 (339 KB) | bild 2 (550 KB) | bild 3 (721 KB)
• Komprimerade i PNG-format: bild 1 (248 KB) | bild 2 (429 KB) | bild 3 (566 KB)
• Komprimerade i JPG-format (80%): bild 1 (29 KB) | bild 2 (55 KB) | bild 3 (63 KB)
• Uppdatering 23 sep – för att visa att det går att åstadkomma färgkvaliteten även i JPG-formatKomprimerade i JPG-format (90%): bild 1 (55 KB) | bild 2 (95 KB) | bild 3 (111 KB)

Jämförelse av bilder på Mio.se

I filmen minskar jag snabbt filstorleken på bilderna med 90%. Det är snabbt gjort med ett bra bildhanteringsprogram. Så ska det självklart inte vara.

När jag tittar på bilderna så här i efterhand efter att ha gjort videon kan jag villigt erkänna att jag ser några nyansskillnader (se nedan) som förmodligen beror på att det är olika bildformat (PNG vs JPG). Säkert går det att förbättra med lite större storlek på JPG-bilden. Men det finns inget som motiverar att bildens filstorlek ska vara mer än 900 % större. Dessutom kan jag skylla på att jag gjorde min optimering på 2 minuter – säkerligen kan en grafiker göra det aningen bättre. Uppdatering: Jag har nu lagt till JPEG-bilder med 90%-kvalitet; de bibehåller färgkvaliteten men är ändå 83% mindre i filstorlek.

Mio – bild på säng i originalformat som på mio.se (550 KB)

Mio – samma bild på säng i JPEG-format (55 KB)

Mio – bild på säng i originalformat som på mio.se (95 KB)

Jag håller med om att det är nyansskillnader i fotona när de är i olika format. Jag visar här samma bild i JPEG format med 90%-kvalitet. Den är på 95 KB och originalbilden ovan är alltså på 550KB. Här är skillnaderna betydligt mindre och bilden är fortfarande 83% mindre. Jag känner att mina argument håller även om vi kan dividera om de exakta procentsatserna.

Diagram från videon med optimering av bilder från Mio

Diagram som visar hur mycket Mio potentiellt skulle kunna spara i filstorlek (i princip över hela sajten) om de optimerar sina bilder. Förbättringspotentialen ligger på ungefär 76%.

Förbättringsförslagen i korthet

• Ett interaktivt formulär med en hög grad av visualiseringstekniker som också hela tiden uppdaterar antal objekt i resultatsidan.
• Sökning inom radie (5-50km) från en mittpunkt snarare än inom kommun/län.
• Spara i kalender-funktion (Google calendar, Outlook, mfl)
• Påminnelsefunktion inför visningen, med vägbeskrivning
• Möjlighet att värdera alla objekt man besöker enligt ett standardformulär (inklusive möjlighet att lägga till egna bilder)
• Information om objekt till salu i närheten av där man befinner sig (företrädesvis enligt sökparametrar som man själva angivit)

Bilderna från presentationen utan video

Skisser på Flickr

Vi passerar genom Stadium på väg till IKEA och jag triggar självklart på stora affischer och skyltar lite överallt där det står att jag ska checka in på Facebook för att få ett erbjudande. Jag hastar upp mobilen och checkar snabbt in på den första logiska butiken som dyker upp i Facebook-appen: Stadium Barkarby.

Det kommer inte upp något erbjudande. Jag väntar…kollar mobilen var 10:e sekund vilket givetvis retar familjen. Jag ser inget erbjudande.

Här hade nog de flesta människor avfärdat, suckat och gått vidare men jag ville självklart följa upp och förstå vad som pågick. Så jag gick upp till en expedit och förklarade att jag minsann checkat in men att det inte kom upp något erbjudande. Först säger hon att jag inte behöver checka in (nähä?) – jag kan få erbjudandet ändå (jaha?) – och sedan kommer hon på: det är förresten Stadium Barkarby 2 du ska checka in på. Stadium Barkarby är den andra Stadium-butiken i outlet-delen av Barkarby(!)

Jag tackar vänligt men webbstrategen i mig skriker. Har jag missat något? Nej, det finns inget i affischer eller skyltar som talar om att det är Stadium Barkarby 2 jag ska checka in på.

Återigen tar jag mig över en tröskel för att verkligen fullfölja det hela, något som gemene man inte gör: Jag tar fram telefonen igen, letar aktivt upp och checkar in på Stadium Barkarby 2.

Dels retar det mig att jag checkat in på fel ställe eftersom jag nu bevisligen inte var på Stadium Barkarby men jag förundras förstås över det genialiska i att Stadium Barkarby 2 är som ett sandpapper för kundförståelsen (skapat för maximal friktion). Ett namn som Stadium Barkarby Ikeahuset hade förstås gjort att jag hittat rätt direkt utan hinder men det ligger väl ändå inte i butikens intresse?

I alla fall: nu ser jag kupongen – 99 kronor för ett par Race Marine sneakers. Strålande.

Jag ignorerar det faktum att det är junior- och damstorlekar som kupongen avser och söker upp skorna eftersom jag är nyfiken på hur stort mitt kap skulle kunna vara om jag verkligen hade det minsta intresse av produkten. Vad tjänar jag på att checka in?

0 kr.

Då tackar jag alldeles särskilt för det Stadium Barkarby 2. Samma pris utan kupong som med kupong. Nu ger till och med jag upp och promenerar raskt ut ur butiken medan jag spyr lite okvädesord i flödet.

2 råd till Stadium Barkarby 2 för att slippa misslyckas så hårt

1. Testa. Det tar 3 minuter att förstå att det är mycket på tok med den här kampanjen. Gå igenom processen så som du tror att kunden skulle gå igenom den så blir det snabbt uppenbart varför den gör mer skada än nytta. Det blir annars pinsamt uppenbart att en reklambyrå utan helhetsperspektiv ligger bakom.
2. Involvera personalen. Det är väldigt uppenbart att personalen inte bryr sig särskilt mycket om kampanjen. De är säkert inte ens informerade och inte tillfrågade om kampanjens lämplighet. De får bara dumma frågor av sådana som mig. Om inte alla är med på tåget så blir det alltid en tafflig upplevelse och dåligt genomförande. Som rabatten som inte blev någon rabatt.

2 råd till Stadium Barkarby 2 innan ni gör om något liknande

1. Köp inte era kunder. Hitta de som verkligen gillar er redan och ge dem verktyg för att bli ambassadörer och sprida budskapet om hur mycket de gillar er. Det kräver lite mer arbete än att bara öppna plånboken och beställa en kampanj, men det blir äkta och trovärdigt. Och det funkar.
2. Gör en upplevelsekartläggning (experience map) där ni dokumenterar sinnesstämningen genom hela processen från att man åker hemifrån, går in i butiken och kommer hem igen. Identifiera möjligheter till förbättringar och genomför dem. Ge en wow-upplevelse när kunden minst förväntar det. Se till att köpprocessen alltid avslutas på toppen av humörkurvan, ge något extra till de som faktiskt köper och är nöjda.

I grund och botten handlar det om att faktiskt bry sig om kunden och alltid försöka göra bra grejer för dem. Men checkar in på Stadium Barkarby 2 gör jag nog aldrig igen. Utom kanske på pin kiv

Snabb analys av Axbom vs Barack Obama

Den här infografiken är förstås bara en ganska tanklös lek med siffror och ett smart marknadsföringsknep från visual.ly, men jag nappade.

Barack Obama är ju en superstar (av självklara skäl) och även om jag twittrat under längre tid och har genererat fler Twitter-meddelanden så är hans räckvidd förstås vida överlägsen. På ett par områden piskar jag dock stjärt: jag är långt mer social än Obama och jag skapar väldigt mycket mer retweets. Kanske kan Obama lära sig ett och annat nu när han ska börja Twittra personligen istället för bara hans stab.

Jag tycker det är väldigt roligt att Baracks och mina gemensamma intressen utgörs av bland annat människor och innovation, orden ”take, everything” antar jag betyder att vi båda vill ta över världen. Det går också att utläsa att vi båda ses som positiva politiker!

I övrigt har förstås verktyget, som så många amerikanska verktyg, lite kvar när det gäller att sortera bort svenska ord utan betydelse, som ”jag, det, och, inte, att”. Men jag är mäkta imponerad av dess design!

Vem ska du ta upp kampen med i din egen Twitter-infografik?

PS Varför jag valde Obama? Jag hoppas förstås locka honom till Sweden Social Web Camp

Det finurliga med den här bilden är att jag redan skickat iväg formuläret. Men det förstod inte jag. Kan du hitta bekräftelsen? Jag kunde! Till slut…

Sjävklart borde producenten av detta webbformulär ha begrundat minst 2 saker några fler gånger om:

1. Var ligger användarens blick när hon fyllt i formuläret och klickat på skicka… och
2. Bör formuläret ligga kvar redigerbart på bekräftelsesidan?

På 1 svarar jag ”på samma ställe där den just var, på knappen” och på 2 svarar jag ”självklart inte.”

Och det faktum att jag inte fått minsta tillstymmelse till svar ännu efter en vecka gör att jag gissar att det finns fler fel i ledet fram till en fungerande kommunikation med Solna stad. Eller vad tror du?

På tal om en helt annan sak så är det här första blogginlägget som jag skriver på min iPad. Äntligen finns det en applikation som gör bloggandet till en rimlig aktivitet på paddan. Om du vill prova heter det Blogsy.

De här förhållningssätten hjälper mig göra mina kunder mer framgångsrika och konkurrenskraftiga.

1. Tänk digitalt. Agera analogt.
   Ja mina lösningar må vara digitala men de används alltid i ett analogt sammanhang, av vanliga människor. Jag kommer alltid se människorna.
2. Utmana problemet.
   Jag kommer inte att  jaga en lösning utan att förstå vad problemet är. Vad det verkligen är. Jag kommer alltid utmana din uppfattning av problemet.
3. Experimentera. Med mänskliga objekt.
   Ett problem kan betraktas ur många vinklar, pillas på och formas i många gestalter och storlekar. Jag kommer generera idéer, experimentera och dra slutsatser. Och jag testar helst på mänskliga objekt i verkliga situationer.
4. Bind inte fast lösningen.
   Oavsett hur färdiga du och jag känner oss så kommer lösningen alltid att fortsätta i konversationer och måste ständigt vara redo att transformeras. Jag kommer vara redo för föränderliga miljöer.
5. Succé är inte en känsla. Bevisföremål A tack.
   Det är inte en succé förrän problemet är löst. Jag kommer motivera lösningar med verklig data och bevisföring.
6. Kritisera inte. Överträffa.
   Vilken lösning som helst, oavsett hur illa den jag tycker den är, är ändå oändligt bättre än ingen lösning eftersom vi lär oss något. Om jag misslyckas eller ser brister kommer jag inte stå och prata om det. Jag kommer göra bättre.
7. Alla andra vet mer.
   I den sanna andan av crowdsourcing kommer jag använda så många människor som möjligt för att utveckla förädlade idéer och lösningar.
8. Dela allt.
   Stjäl mitt arbete och gör det bättre. Jag är ödmjuk inför din uppmärksamhet och stjäl gladeligen tillbaka det förbättrade omarbetet.
9. Använd illustrationer i kommunikation.
   Illustrationer är universella och mäktigare än ren text. Jag kommer använda illustrationer för att människor lättare ska förstå. Och för att locka din uppmärksamhet.
10. Konkret är grunden för framgång.
    Jag kommer aldrig säga ”Vi kan prata med målgruppen”. Jag kommer säga ”De här tio personerna nämnde ert varumärke i sociala medier förra veckan. Jag har deras adresser. Låt oss gå och prata med dem i 2 timmar; det kommer kosta 20 000 kr.”
11. Var mänsklig och jordnära.
    Jag kommer alltid vara ädelsinnad i min konversation och berömma de som berömmas bör. Det vore också underbart att få luncha med dig. Du har ju orkat läsa så här långt.
12. Var inte tråkig.
    Det går att göra ett bra jobb enligt regelboken. Men det går alltid att göra ett bättre jobb om man samtidigt har roligt och stimulerar alla sinnen. Jag vågar ha roligt och vill att du har roligt med mig.

Allt annat vore tjänstefel.

När jag skriver in ett lösenord på webben så maskeras det med asterisker eller punkter så att jag inte ser vad jag skriver. Det är så fält av typen ”password” uppför sig. Men är det egentligen inte urbota dumt och skapar onödiga problem för både användaren och organisationen? Och än mer befängt blir det faktiskt när vi tvingas till samma frustrerande upplevelse på mobilen.

Det finns en tro på att vi alltid måste se upp med människor som står bakom oss och kollar vad vi skriver in. Har du också alltid en okänd man som dyker upp bakom din rygg när du ska skriva in lösenord? I många fall så skapar asteriskerna dock mer problem än de gör nytta.

1. Vi tvingar människor att skriva lösenordet flera gånger när de registrerar sig för att de tycks ha en tendens att skriva fel.
   1. Kan det händelsevis vara så att de skriver fel för att de inte ser lösenordet?
2. Samtidigt som vi döljer lösenorden bakom asterisker uppmuntrar vi människor att välja extra krångliga lösenord genom att presentera mätare med värdena weak, medium och strong.
   1. När användare uppmuntras skriva extra krångliga lösenord (ofta onödigt krångliga) samtidigt som de inte syns så kommer de inte ihåg dem.
   2. När användare inser att de inte kommer ihåg lösenord så skriver de upp dem på väl synliga lappar av typen Post-It.
3. På mobilen är det extra svårt att skriva med diverse små tangentbord. Vi skriver fel lösenord.
   1. Om nu någon mot förmodan står bakom mig, menar man att jag inte kan vrida på mobiltelefon så att de inte ser lösenordet jag skriver in?

Jag blir ledsen i ögat när jag ser designmönster från gamla stordatorsystem överföras till webben, men ännu mer gråtfärdig blir jag när de fortsätter att föras över till mobiltelefoner, som har en helt annan kontextuell användning, andra fysiska möjligheter och begränsade inmatningsmöjligheter.

Låt användaren välja visning av lösenord

Lösningen är inte ny, den dyker upp lite här och var, men tyvärr alltför sällan. Så här kan det se ut:

Genom att erbjuda en möjlighet för användaren at visa lösenordet kan hon själv (ja, hon kan faktiskt tänka själv!) välja att visa lösenordet för att underlätta inmatning. Huruvida det ska vara förvalt att lösenordet är synligt eller inte får sammanhanget och typen av tjänst avgöra, men förmodligen är det dolt från start. Jag vet att jag själv skriver in lösenord på storskärm när jag är ute på talaruppdrag.

Andreas Lagerkvist har skrivit ett jQuery-plugin som lägger till möjligheten att växla visningsläge på lösenordsfält. Bara att tuta och köra.

Välj ett bergsäkert lösenord som är lätt att komma ihåg

Lösenord skapar många andra kostsamma bekymmer också: till exempel efter varje semester när supporten på storföretag blir nerringda av anställda som glömt bort sina ”säkra” lösenord. För dig som vill ha ett enkelt lösenord som är svårt att knäcka så har Baekdal har skrivit en lysande artikel om hur du skapar användbara lösenord. Lägg märke till att artikeln beskriver det vanligaste sättet att tillskansa sig lösenord som varandes att helt enkelt fråga efter dem!

Vågar du ta första steget mot en ny standard för hantering av synliga lösenord? Eller kommer du hålla hårt i och kämpa för den ”gömda” varianten? Kanske finns det fler innovativa lösningar på problemen. Tipsa gärna!

Och ja jag vet att guru Nielsen skrev om problem med maskerade lösenord redan 2009. Men han visade inte den här lösningen och jag tycker att det är dags att debattera klart i frågan