Bästa placering och form på knappar i webbformulär

För att veta vilken modell av interaktionsdesign som kommer ge bäst resultat är det en bra ide att genomföra tester på olika förslag. Luke Wroblewski och Etre har gjort en sådan, där de undersöker hur man placerar primära och sekundära knappar i ett webbformulär få bästa sätt.

Man gjorde fem olika varianter som testpersoner fick i uppgift att lösa så fort som möjligt. Med hjälpt av Eye-tracking-teknik har man undersökt hur försökspersonernas blick rörde sig över skärmen.

Här under kan ni se en bild som vi har lånat från artikeln. Något jag är förvånad över är att alternativ B gick snabbast att för användarna att klara av. Eftersom knapparna har exakt samma form, och endast texten skiljer dem åt, så verkar det som att man inte behöver fundera på knapparnas innebörd lika länge.

Efter försöket säger många dock, att de anser att olika design på knapparna (som i exempel C där Cancel-knappen grå) är bättre, eftersom det motverkar att man klickar fel av misstag.

Submit Cancel Placement

InUseful har också skrivit bra reflektioner över testet på svenska.

By Jesper Lind

Små förändringar i webbformulär kan öka din omsättning enormt

Att lägga stor vikt på att utforma webbformulär är något som ofta förbises vid webbdesign. Man ser det inte så viktigt hur inloggningsformulär och och registreringssidor ser ut. Istället satsar man på virala reklam-jippon eller dyra Adwords-kampanjer för att få fler besökare och större intäkter på sina webbplatser.

Åtminstone har det varit så innan, den nya web2.0-filosofin är ju fokuserad på användaren och dess behov, så nu börjar webbutvecklare få upp ögonen för hur viktigt det är, att ha en användarvänlig design. Se bara på de där överdimensionerade inmatningsfälten som börjar bli så vanliga.

Genom att veta hur man designar ett formulär på bästa sätt, så kan man öka intresset för sin webbtjänst, eller öka försäljning om det handlar om en e-handelsajt. CSS-experten Eric Meyer berättar i en intervju att en handelsida ökade sin försäljning med hundra-tusentals dollars – bara genom att ändra på två inmatningsfält.

Då hade nog den sajten rätt stor omsättning innan, men den positiva effekten på en sån liten ändring är väldigt intressant och något varje webbplatsägare bör ägna en tanke på.

By Jesper Lind

RobotReplay - spelar in besökarnas interaktivitet från din sajt

Backend Media tipsar om en webbtjänst som heter RobotReplay och erbjuder inspelning av besökarnas musrörelser på dina egna sajter. Grundtjänsten är gratis att använda och kommer förbli det. De meddelar dock i sin FAQ att de kommer släppa en typ av premiumkonto i framtiden som kommer kosta pengar.

Vi har precis lagt in det på denna webbplatsen för att prova på det och det hela fungerar väldigt bra. Efter ha registrerat ett konto och lagt in en rad Javascript så börjar tjänsten att spela in besökarnas musrörelse med en gång. Det tar sedan 10 minuter för sessionerna att dyka upp i gränssnittet på RobotReplay.

Ett perfekt verktyg för att studera hur användarvänlig och lättförstålig din webbplats är.

Obs. Fungerar ej med Snap Preview Anywhere

När jag skulle kolla in den första sessionen så blev det någon bugg på återspelningen. Webbplatsens grafik syntes bara en liten stund och det hela hängde sig när uppspelningen skulle starta. Misstänkte att det hade att göra med en konfikt med något annat skript, och det visade sig stämma. Efter jag stängde av Snap Preview Anywhere fungerade återspelningen av sessionen.

By Jesper Lind

Användarvänliga url:er till bloggen med IIS7

http://www.codeodyssey.se/upload/resource/blog/iis7-request-model.jpg

Vi har pratat mycket om användarvänliga url:er här på bloggen. Ni som har hängt med på ämnet vet att Microsofts ASP.NET-teknik inte är så optimal för att göra användarvänliga länkar.

Scott Guthrie som är utvecklingschef på Microsoft gör sitt bästa för att hålla modet uppe för alla url-designande freaks där ute. Vi har väntat länge på en lösning och nu kommer den snart i form av Longhorn Server och IIS 7.0.

Scott gjorde i måndags en genomgång av nya finesser i webbservern IIS 7.0 och visar även ett diagram hur processmodellen skiljer sig från den tidigare IIS 6.0. Samtidigt klargörs ytterligare en gång att IIS 7 inte kommer att finnas tillgänglig på Windows 2003.

Så det är väl bara att vänta på det nya serveroperativet då och alla de förbättringar som det kommer att ge.

Det som är bra är att man i alla fall får ordentligt med tid på att tänka igenom exakt hur man vill ha sina url:er när möjligheten finns att förbättra dem. Jag har tidigare spånat lite på hur jag vill ha urler:na till denna bloggen i kommentarerna till en tidigare tråd på ämnet.

Som ett exempel har just detta inlägget du läser just nu adressen:

http://codeodyssey.se/blog.aspx?id=270

Det säger ingenting om innehållet av artikeln för en besökare och det är det jag vill förbättra i första hand. Istället tycker jag att detta skulle vara en snyggare och mer tillgänglig adress.

http://codeodyssey.se/blog/Anvandarvanliga-urler-till-bloggen-med-iis7/

Jag har fortfarande inte bestämt mig helt hur jag ska hantera alla specialtecken som inte stödjs i url:formatet. En som har funderat mer på dessa är Scott Hanselman och han bjuder idag på riktigt intressant läsning i sin artikel "Are Blog URLs important". Scotts blogg har rätt sjyssta url:er men dras fortfarande dras med .ASPX-ändelsen.

Det finns ju några genvägar mot snyggare adresser men vi känner att det bästa skulle vara att vänta tills IIS 7.0 kommer och man kan få till adresserna precis som man vill ha dem med en gång.Adresserna bör ju aldrig ändras så att göra några halvmessyer känns inte aktuellt.

Men för er som länkar till oss kan vara lugna. De url:er vi har just nu, kommer fortsätta att fungerar, även när vi lanserar de mer besökarvänliga varianterna. Trasiga länkar är inget kul.

By Jesper Lind

Tips hur man designar urler till ASP.NET

Som ni vet väntar vi ivrigt på att IIS7 ska kunna gå att använda i produktions miljö. Där kommer det finns bättre stöd för att "skriva om" urler. De nuvarande alternativen är inte så vidare bra och saknaden av en standardiserad modell är jobbig.

Scott Guthrie ger oss dock några bra knep. En genomgång av de ISAPI-filter finns tillgängliga för IIS6. Även andra trix, bland annat Request.PathInfo som jag inte använt tidigare. Då kan man göra urler som ser ut så här.

http://www.webstore.com/products.aspx/Posters
http://www.webstore.com/products.aspx/DVDs
http://www.webstore.com/products.aspx/CD

Ändelsen ".aspx" är helt onödig och den tillför absolut ingenting för besökarens upplevelse. Okej vi som är utvecklare får snabbt reda på vilken teknik som körs, men hur väsentligt är det?

Ett snyggare och mer lättillgängligt variant skulle vara som i nästa exempel.

http://www.webstore.com/products/Posters
http://www.webstore.com/products/DVDs
http://www.webstore.com/products/CD

Men för att ange en sådan struktur måste man alltså använda ett ASAPI ISAPI-filter. Och det är inte alla webbhotell som erbjuder. Man kan ju givetvis skapa fysiska mappar och lägga en Default.aspx fil i varje. Men det orkar man inte..

By Jesper Lind

Utvärdering av textarea-editorer

Läste nyligen hos media:screen att Peter Kranz har gjort en utvärdering av textarea-editorer och rangordnat dem enligt hur bra de klarar av att formatera giltig HTML. Totalt åtta olika editorer finns med i testen, sju av dem är så kallade WYSIWYG-editorer och en av dem är en WYSIWYM-editor.

Den senare beteckningen (What You See Is What You Mean) var något nytt för mig men låter definitivt som något att kolla vidare på. Om jag har förstått det rätt så ska denna nya typ av editor generera XHTML och separera innehåll från formatering i större mån. Läs mer om den nya typen av editor eller testa en demo-version av WYMeditor som hör till denna kategori.

Med på Peters test finns TinyMCE som jag installerade i mitt blogg-system nyligen. Den kom bara på tredje plats i testen pga inkorrekt nästlade listor, inget stöd för tabellcaptions och avsaknad av lang-attributet. I nästa version av editor (2.1) kommer dock dessa problem vara lösta meddelar utvecklarna på Moxiecode i en kommentar till testet.

By Jesper Lind

Flash - som man bäddar får man ligga

Det har nyligen blivit krångligare att embedda flash i sina projekt. I alla fall om man vill följa webbstandarder och få det att funka i alla webbläsare.

En käpp i hjulet var Eolas stämning mot Microsoft som ledde till att mjukvarujätten beslutade sig för att ta bort viss funktionalitet ur IE. Som tur var gick det att hacka runt det och vi har skrivit om en lösning hur man fixar autostart på ActiveX-objekt tidigare.

En annan gång råkade vi i trubbel när vi på den här bloggen hade en flash-fil som vägrade att validera som XHTML. Då sökte vi hjälp hos en artikel hos suveräna "A List Apart".

Nu har samma sajt (AAL) skrivit en uppföljare med ny genomgång av flash-trasslet. Har inte läst hela men man diskuterar bland annat taggarna embed och object plats ibland webbstandarderna. Denna kommer jag återvända till nästa gång jag känner för att försöka använda flash och samtidigt ha en XHTML-kompatibel hemsida.

Uppdatering: Tyckte jag läst nåt annat om det här nyligen, Robert Nymans inlägg om XHTML med Flash är något att kolla vidare på.

By Jesper Lind

Useless Account - ännu en helt meningslös inloggning

http://www.codeodyssey.se/upload/resource/blog/ua_big_signup.png

Oj oj, vi är på skämthumör så här mitt i natten. Höll på att nästan lägga till en nördhumor-kategori här på sajten. Men riktigt så roligt ska vi inte ha just nu.

Hittade en länk till Useless Account – en sida med bara en endaste funktion på, att skapa och uppdatera sitt medlemskap. Inget annat. Det är ju givetvis en drift med alla de startups som vi hela tiden lockas att testa i dessa webb2.0-tider.

Hur många inloggningar har du på liknande sajter? Rätt många kan jag tippa. Tillhör du en av de våghalsiga som kör samma lösenord på alla? Eller är du tillräckligt smart att ha olika. Ett tips är att inte köra samma överallt, det kan gå riktigt illa...

Själva så skapar vi rätt många inloggnings-funktioner och ser detta som ett tillfälle att analysera hur en sådan funktion ser ut på dagens webb. På UA har man givetvis överdimensionerade inmatningsfält – för maximal tillgänglighet. En rätt het trend, du har väl sett alla feta sökrutor?

Man har även placerat etiketterna som hör till varje fält på exakt den position som är vetenskapligt bevisat att det är enklast för användaren. Man har inte heller gjort misstaget att använda fet stil. Bra och helt i linje med tidigare studier som du kan läsa om hos oss.

Kul ide och denna sajt kommer nog sprida sig som en löpeld genom bloggarna. Speciellt eftersom det just uppmärksammades på TechCrunch – tungviktaren inom recensioner av nya startups (hjälp mig med svenskt ord). Under tiden jag skrev detta har 30 användare skapat sina konton. Givetvis har man redan skapat en antal banners för att göra det enkelt för bloggare att sprida skämtet.

Roligt, viralt och komplett oanvändbart.

By Jesper Lind

Typsnitten du kommer stirra på i 10 år

http://www.codeodyssey.se/upload/resource/blog/new-web-fonts.jpg

De typsnitt som man kan använda för html-text på webben är ju minst sagt begränsade, det känns ofta som man designar för kantig text-tv. Om du vill se en sammanfattning på de vanligaste – kolla in på ett tidigare inlägg om webbsäkra fonter.

Problemet är ju att det finns olika operativsystem som t ex Windows, OS X och Linux. Det gäller alltså att välja de typsnitt som finns tillgängliga på alla, för att få en enhetlig design oavsett system.

Eftersom Windows länge har varit vanligast och antagligen kommer vara det ett bra tag till, så har deras fontsamlingar länge styrt vad man kan välja. I och med lanseringen av Vista har Microsoft utvecklat en serie nya typsnitt, speciellt anpassade för att vara lättläsliga på skärmar.

Lite lustigt är det att alla börjar på bokstaven C. Det var säkert en smart utveckare som tänkte att de är perfekt att ha alla de nya samlade på samma ställe i typsnittslistan. Nykomlingarna är: Calibri, Cambria, Candara, Consolas, Constantia och Corbel.

Läs mer hos media:screen där jag såg det först. Mer info och bildexempel av typsnitten finns på Modern Life och Poynter.

Sitter du på en PC kan och kör XP kan du installera dem redan nu, genom att ladda hem Microsoft Office Compatibility Pack.

Tyvärr kommer det väl dröja ett tag innan man kan börja använda dem i produktion, de måste ju bli väl spridda först. Men lita på att de kommer bli vanliga, och att vi kommer se dem överallt under många år. Ända tills nästa version av Windows kan man tänka sig.

By Jesper Lind

Ha konsekvens på dina länkar

Jag läste en notis på Användbarhet.se som jag instämmer med. Man utforma sina länkar konsekvent och inte blanda understrukna och icke-understrukna länkar. Detta lägger ett alltför tungt tolkningsjobb på användaren.

Menyer och länkar bör vara intuitiva och man ska förstå vad som går att klicka på utan att behöva testa allt. Understrykningar är ett bra sätt eftersom vi är så vana med att länkar ser ut så. Annars är ett annat bra sätt att ange länkar i en speciell utstickande färg.

By Jesper Lind