52.17.3 Håll raka vänsterkanter
Råden i Välj rätt kontroller, sid 280 , måste vägas mot formgivningens behov. Det kan bli alltför rörigt att blanda många olika sorters kontroller på samma formulär.
Sträva efter att göra det enklare för ögat genom att hålla raka vänsterkanter på både etiketterna och kontrollerna.
Alternativet att istället ge etiketterna rak högerkant och kontrollerna rak vänster – så kallad julgranslayout – är möjligt, men mindre lyckat. Det ger visserligen en tydlig koppling mellan etikett och kontroll, men den ojämna vänsterkanten gör det svårare för ögat när det försöker hitta början på nästa etikett.
Betona hellre sambandet mellan etikett och kontroll med hjälp av luft eller linjer.
Texten ovan är ur Användbarhetsboken. Varje avsnitt har sin egen webbsida med rättelser, tillägg, blogginlägg och kommentarer. Några sidor (till exempel den du läser nu) har också hela bokens text. Varje dag publiceras ett nytt avsnitt här på webben.
Ur bloggen
Bästa placeringen av etiketter i formulär
Mycket intressant ögonkameraundersökning av vilken placering av etiketter som fungerar bäst.
Allra bäst fungerade att sätta etiketten vänsterställd alldeles ovanför sin kontroll. (Detta gör dock formuläret längre och kan ha nackdelen att användaren inte får överblick och tvingas rulla – en nackdel för användbarheten som inte vägts in i denna test.)
Näst bäst fungerade “julgranslayout”, att etiketterna sätts till vänster om kontrollen, men högerställs så att de hamnar så nära sin kontroll som möjligt. I Användbarhetsboken är jag kallsinnig till denna layout, men det verkar som att jag hade fel.
Intressant i testen är också att fetstil fungerade betydligt sämre än normalstil när etiketterna satt ovanför sin kontroll – förmodligen en effekt av att fetstilen kolliderar med den mörka överkanten på textfält.
Valboxar skiljde ut sig från de andra kontrollerna. De har mycket stor förmåga att dra till sig uppmärksamheten, och etiketten bör sättas inuti kontrollen, som den text som syns innan något är valt.
