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

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

Så placeras etiketter i formulär på bästa sätt

Det här är något som jag själv har funderat ganska mycket på, och då pratar vi om vart man ska placerar text-etiketterna, som beskriver vad man ska mata in i formulär på webben. Skönt att någon har gjort en ordentlig undersökning som man kan ta del av.

uxmatters.com sammanställs denna med bilder på resultat av den ögon-spårningsteknik de använt. De undersökte ögonrörelserna hos testpersoner och kunde urskilja vilka placeringar som ledde till bästa reaktionen med så lite förvirring som möjligt.

Man kom fram till att placeringen fungerar bäst över inmatningskontrollen och vänsterställt. Precis som på mina formulär i denna blogg. Jag har dock gjort misstaget att använda mig av fet stil på etiketterna, som enligt undersökningen förvirrar ögat. Normal formatering av texten fungerar bäst.

Via: Anvandbart.se - Bästa placeringen av etiketter i formulär

By Jesper Lind

Är 960 den ultimata bredden på webbsidor?

http://www.codeodyssey.se/upload/resource/blog/960grid_cropped.png

Genom en notis på användbarhet.se hittade jag en artikel som handlar om vilken är den ultimata bredden för sidor anpassade för 1024-skärmar. Man har länge anpassat bredden på webbsidor efter den lägre upplösningen 800x600 och så är även fallet med bloggen du läser just nu. (Med liten reservation att "nu" kan vara i framtiden, och jag har bytt format)

I artikeln skrivs det att fler och fler användare höjer upplösningen på sina skärmar och enligt W3C är den lägre upplösningens användande nere på 17%. 2007 kommer troligtvis bli året när fler och fler webbplatser breddar synfältet.

Artikeln bjuder på en hel del intressanta kommentarer och det är många som håller med att 960 pixlar är en bra bredd för att slippa det hemska fenomenet med rullning i sidled. Man får lagom med utrymme på sidorna för lite luft och 960 är även delbart med 3, 4, 5, 6, 8, 10, 12, 15, and 16, vilket ger intressanta möjligheter för att räkna ut rutnät.

Men vad händer då när folk börjar surfa på sina mobiler och andra små terminaler? Är vi tillbaks till ruta ett då? En lösning är ju att skapa speciellt utformade webbplatser för dessa mindre skärmar, eller så kan man börja forska i att göra flytande layouts, som anpassar sig efter användarens skärm. Författaren, Cameron Moll, går vidare i funderingarna och skriver uppföljaren, ska alla webbplatser vara flytande?

Sen skriver han ytterligare ett inlägg där han visar bildexempel på rutnät över en 960 pixlars layout. Perfekta att ha som bakgrund när man skissar på en webbplats.

Mer läsning finns även på 456bereastreet .

By Jesper Lind

Prototyp av 3D-skrivbord

http://www.codeodyssey.se/upload/resource/blog/3d-pdf.jpg

BumpTop - som är i utvecklingsfasen, ser rätt coolt ut. Man kan ta dokument och slänga runt dem på ett tredimensionellt skrivbord. När jag ser mitt oftast överfulla skrivbord på datorn, så längtar jag efter en sån här lösning.

Se video på YouTube

By Jesper Lind

Gör webbplatser tillgängliga för alla

Tillgänglighet på webben är ett aktuellt ämne just nu och har varit det ett bra tag. Att ta del av innehåll och läsa text på en skärm är mycket mer ansträngande än att läsa en hederlig gammal bok. Det är därför av största vikt att man gör det så lätt som möjligt för besökarna att ta del av innehållet man vill kommunicera. Annars är risken att de lämnar webbplatsen utan att ens gett den en chans. Sverige är ett land som är känd för relativt bra handikappsanpassning i största allmänhet. Men på webben får svenska sajter väldigt dåligt betyg enligt en undersökning som konsultföretaget Funka Nu har genomfört på uppdrag av Internet World. 

- Kunskapen bland Sveriges sajtägare om tillgänglighet är fortfarande oväntat låg, säger Internetworlds chefredaktör Magnus Höij. Den dåliga tillgängligheten gör att företagen väljer bort stora kundgrupper och därmed stora intäkter.

Cap&Design skrev för ett tag sen artikeln "Tio dödssynder i webbmakeri – och hur du undviker dem" där man skriver om några av de vanligaste fallgroparna vid designarbetet för webben. En av dödssynderna de nämner känner jag väl till, nämligen att använda för liten typsnittstorlek. Designers gillar liten text för det blir mycket snyggare textblock. Det har länge varit populärt att ange fontstorleken i 10px Verdana som resulterar i en stort sätt oläslig text. Som tur är går trenden mot att tänka mer på användarna. Jag menar de flesta vill ju bara kunna ta del av informationen på enklast möjliga sätt. Att sen några få designers surfar in och tänker, "oj vilken stor och klumpig font de använt" kan man väl stå ut med. 

– Det måste vara skönt att läsa texten, säger Paul Collins. Det bästa är att följa ett grundläggande typografiskt regelverk, precis som du gör i tryckta tidningar och magasin. På webben händer det ofta att en designer skapar en väldigt tilltalande visuell upplevelse, men så går det inte att läsa texten!

Egentligen skulle jag vilja citera hela paragrafen om typografi på webben från Cap&Design för den är så fruktansvärt bra. Men det blir lite för långt så tänkte bara nämna en sak till om valet av typsnitt. Som jag skrivit om tidigare så finns det inte så många typsnitt som man kan använda på webben. Detta leder till att designers vill göra om stor del av texterna till gif-bilder så att de ska kunna använda sina favorittypsnitt. Visst är det tråkigt att man är så begränsad men det är fortfarande smartare att använda html-text i största utsträckning. Här kommer ett sista citat: 

– Frustrationerna över att det finns så få typsnitt att välja mellan på webben leder till exempel till att alldeles för mycket text görs som gif-bilder. Det är tidsödande för den som ska jobba med sajten, och dåligt för besökarna och tillgängligheten.

 För den som vill läsa mer om tillgänglighet kan jag rekommendera Anvandbart.se. Via den sidan hittade jag den här intressanta artikeln om hur en redesign gav 20% mer försäljning för en e-handelsajt. Något att tänka på för alla er som driver webbshoppar där ute på nätet.

By Jesper Lind
1