Webbdesign

Utforma och layouta webbsidor.

Dela inte upp din webbtext på flera sidor

Om du har en lång artikel är det sällan en bra idé att dela upp den på flera sidor. Använd i stället en enda lång sida. Att skrolla är inte farligt.

På senare tid har en del webbplatser valt att dela upp långa artiklar på flera sidor, vilket kräver ett klick framåt. Tanken är förstås god, man vill inte skrämma iväg läsaren med för mycket text på en gång. Men det uppstår i stället ett annat problem, nämligen att man måste klicka sig fram och vänta på att sidan laddas klart innan man kan läsa nästa del, och man kan inte heller skaffa sig en enkel överblick. Jag har till och med sett skräckexempel där webbdesignern delat upp varje stycke på en ny sida, vilket innebär att man inte får något sammanhang i texten utan tvingas klicka fram och tillbaka varefter frustrationen ökar: ”Ge mig texten på en gång så bestämmer jag själv hur jag vill läsa den!”.

M3 – ett avskräckande exempel

Tidningen M3 delar regelbundet upp sina artiklar på olika sidor, som synes nedan i denna artikel som är drygt 1 000 ord och 5 800 tecken (lite mindre än två utskrivna A4-sidor text):

M3 har valt att lägga två stycken text på varje sida (med bild mellan styckena), vilket gör sidorna väldigt innehållsfattiga. Google vill i bästa fall ha minst 500 ord på en sida, så den här utformningen är dålig ur nästan alla aspekter.

Problemet bottnar ofta i en (van)föreställning att mycket text är jobbigt för läsaren, och att man bäst delar upp den i mindre bitar. Och det är förstås helt sant, men utförandet har tyvärr missuppfattats. Vad man ska göra är att använda mellanrubriker och andra typografiska element som delar upp texten i mindre bitar. Inte nya sidor. För även om vi traditionellt sett skannar webbtexter så blir internet mer och mer vårt primärmedium för att faktiskt läsa text av olika slag (av det enkla skälet att fler av texterna finns på nätet).

Användbarhetsexperten Jakob Nielsen ger dessutom följande tips när han pratar om Mini-IA: Structuring the Information About a Concept:

If you have a long article, it’s almost never good to simply chop it up into a linear sequence of pages. If the only navigation is a link saying ”continue” or ”next page,” then it’s typically better to stick it all on a single page and rely on scrolling instead of page-turning.

Ett undantag är iPad och andra tablets eftersom de har naturliga gester för att byta sidor. Dessutom bör man på en e-handelssida använda sig av olika sidor vid betalningen eftersom de följer logiskt efter varandra. Först granskar man innehållet i kundvagnen, sedan får man fylla i betalningsuppgifter på andra sidan och till slut, på tredje sidan, får man bekräfta sitt köp. (Man kan ju inte gå till sidan tre utan att först ha gått igenom de föregående.)

Wikipedia – ett inspirerande exempel

Många av Wikipedias texter är väldigt långa, som denna om Bipolär sjukdom, men har utomordentligt bra disposition så att man ändå enkelt kan hitta det man letar efter:

Artikeln har drygt 6 300 ord och 45 000 tecken som ger drygt 14 stycken A4-sidor text. Den är alltså mångdubbelt längre än M3:s webbtext, men ändå betydligt enklare att navigera i. Förvisso finns det ingen reklam på Wikipedia, vilket kan bidra till att den uppfattas som renare, men i det här fallet är vi endast intresserade av strukturen på själva webbtexten. Med ett konsistent val av mellanrubriker och underrubriker har Wikipedia grupperat informationen i logiska block som är enkla att hitta (innehållsförteckningen ligger dessutom överst i texten, inte underst som hos M3).

Jakob Nielsens tips är att dela upp innehållet i delar på detta sätt:

In many situations, the best alternative is to chunk information into individual content units, focusing on logical cohesiveness; you can then describe each unit accordingly and let users navigate directly to the unit that meets their needs. (Note: ”page 3 of 5” is neither descriptive nor deserving of its own page.)

Hur du bygger upp ditt textinnehåll handlar alltså mer om vanlig traditionell textbearbetning snarare än några tekniska finesser som paging (att bläddra mellan sidor). Läs gärna Konsten att formatera dina inlägg och artiklar för att lära dig mer.

Hur vi läser på nätet (och hur dina webbtexter bör se ut)

Objektorienterad CSS

CSS har varit en enkel sak i alla tider – det är ba å gör’t. Men här kommer en idé som omkullkastar hur jag arbetar med CSS: Objektorienterad CSS.

Ett exempel är att man inte ska använda ID i selectors, det vill säga skriva så här:

#post {width: 400px}

I stället ska man bygga modulbaserade komponentbibliotek, vilket kanske låter komplicerat men det handlar om legoblock som appliceras på innehållet.

Man kan fråga sig vad vitsen är med att skriva CSS på det här viset, men uppenbarligen ska det ge snabbare rendering i webbläsaren. I den här videon berättar Nicole Sullivan, som tidigare arbetat med Yslow, mer om hur det fungerar:

Hon har även tillsammans med en kollega gjort verktyget CSS Lint som är ett väldigt strikt valideringsverktyg för CSS.

Vill du börja med objektorienterad CSS kan https://github.com/stubbornella/oocss/wiki vara av intresse för dig.

(Via ReadWriteWeb)

Så hittar du gratis kvalitetsbilder till din webbplats

Behöver du gratis bilder av hög kvalitet? Vill du hålla dig på rätt sida av lagen? Här får du en guide med 9 sajter där du hittar bilder du kan använda utan att behöva titta i plånboken.


(Foto: GeorgesNijs)

När jag letar efter bilder är dessa fyra mina givna startpunkter:

  • Flickr är helt klart min favorit. Där finns flera miljarder bilder från hela världen. Se till att kryssa i rutan ”Creative Commons” när du söker så kan du hitta bilder som du får använda kommersiellt och till och med ändra.
  • EveryStockPhoto indexerar de flesta bildleverantörer som erbjuder gratisbilder (tänk dig Google Images på steroider). Det innebär att det är enkelt att hitta mängder med bra bilder.
  • Wikimedia Commons har över åtta miljoner mediafiler (och mycket bilder) som du kan använda, där många även får användas kommersiellt.
  • Creative Commons är en licensform med generös upphovsrätt, men på deras hemsida finns dessutom en sökfunktion som kan söka igenom flera olika källor på en gång. Och givetvis är den anpassad till att söka efter bilder som lyder under Creative Commons!

Stock photo

Det finns också speciella bildleverantörer som säljer bilder som om det vore lösgodis. Några av dem har dessutom en del gratisbilder också:

  • SXC.HU har en stor samling bilder med bra sökfunktion och kategorisering av bilder. Perfekt för ditt nya projekt som kräver kvalitetsbilder.
  • Free Digital Photos organiserar royalty-fria bilder som finns i olika storlekar. Det är den minsta bilden som är gratis och vill du har större får du betala.
  • Free Foto säger sig vara den största samlingen av fotografier online. Vill du använda foton måste du dock länka tillbaks till deras sajt.
  • FreeLargePhotos har som namnet säger större bilder. Enkel sida med tydliga kategorier där du måste länka tillbaka om du vill använda bilden.
  • Fotoakuten är en svensk sida som har åtta tusen gratisbilder i hög kvalitet.

Så ska ett inloggningsformulär se ut

Trots att inloggningsformulär har funnits i över tio år verkar det fortfarande finnas företag som har problem att utforma dem. Eller så tycker de att de gör smarta lösningar med egna påhitt. Oavsett vilket ställer det till problem, och jag ska belysa några av de problem som kan uppstå genom tre exempel.

Binero vecklar in det enkla

Det första gäller webbhotellet Binero som har ett tämligen invecklat inloggningsformulär.

Förutom de sedvanliga fälten för användarnamn (i det här fallet kundnummer) och lösenord, så får man även välja om man vill spara användarnamnet, både användarnamnet och lösenordet eller inget av dem.

Dessa tre val är ett typiskt resultat av att överarbeta och lösa ett simpelt problem genom att ge användaren en massa alternativ. Det räcker med en enda knapp. ”Kom ihåg mig”. Vi är vana vid att se den och den fyller en mycket viktig funktion, på ett enkelt sätt.

Om man sparar användarnamn och lösenord i formulärfältet, i klartext, är det ju värre än om de ligger i en cookie där de kan ligga krypterat. Således finns det en mängd brister med detta tillvägagångssätt. I Bineros fall lyckas heller inte cookien fastna på min dator, så man tvingas ändå skriva in uppgifterna gång efter annan.

Nationalencyklopedin får brottas med Firefox

Omgjorda Nationalencyklopedin har även de gjort om sin webbplats. Inloggningsformuläret är inget undantag.

Här har vi ett annat problem, de har valt att göra rutorna till inloggningsformuläret i svart, och lägga etiketten för respektive ruta (det vill säga användarnamn och lösenord) innuti rutan med grå text. Kontrasten blir alldeles för liten och gör det svårt att läsa.

Dessutom är det alltid ett problem med att skriva etiketter i själva rutorna. Dels eftersom texten ibland inte tas bort när man sätter markören i rutan, och dels ibland för att texten faktiskt tas bort, men också tar bort användarnamnet man just skrivit in när man flyttar textmarkören genom att klicka i rutan.

En till sak är värt att nämna, som däremot endast framkommer när man använder webbplatsen, och det är att inloggningsrutan lägger sig som ett eget lager över sidan. Då döljs bakgrunden med lägre opacitet så att man lägger all fokus på inloggningen. Det är bra och smidigt, men introducerar ett nytt problem. Webbläsaren Firefox, som jag använder, frågar inte om jag vill spara lösenordet när jag trycker på Logga in. På grund av det överliggande lagret så tappar jag denna funktion, vilket är väldigt retligt. Speciellt eftersom inte heller Nationalencyklopedin vill hålla mig inloggad mer än ett par timmar, innan jag tvingas logga in igen. När man använder lexikon och uppslagsverk flera gånger dagligen höjer det irritationen.

Enkel och välfungerande inloggning på komplett.se

Sist, men inte minst, har vi nätbutiken Komplett. De lyckas göra en inloggningsruta som fungerar utomordentligt.

Det som gör den här rutan bra är dess enkelhet. Användarnamn och lösenord skrivs in, tryck på logga in och lösenordet sparas av Firefox utan problem.

Här har vi däremot ingen Kom ihåg mig-ruta, men jag bedömer det inte nödvändigt på en nätbutik av detta slag. Det är endast när man behöver lägga en order som inloggningen är oundviklig. Däremot skulle det inte skada, utan skulle höja användarvänligheten ytterligare. Speciellt om det är så att frakten måste räknas ut beroende på var du bor – då skulle ”Kom ihåg mig” sannerligen behövas.

Nackdelen med Kompletts lösning är däremot att man måste klicka på en länk för att komma till inloggningssidan. Den borde vara synlig direkt på startsidan. Binero har samma problem, men har en egen lösning som ligger i ett eget lager precis som Nationalencyklopedin, och den fungerar lika illa.

Fyra tips för dina inloggningsformulär

  • Gör det enkelt, det räcker med användarnamn och lösenord plus en logga in-knapp.
  • ”Kom ihåg mig” är det enklaste sättet att låta en cookie spara sessionen. Om du inte vill äventyra användarens säkerhet (på grund av att datorn står på ett bibliotek) eller liknande, bör du inte erbjuda denna funktion alls.
  • ”Glömt lösenordet?” är en bra funktion och du behöver inte beskriva den mer än så. Vi har vant oss vid den.
  • Kontrollera att webbläsarna kan spara användarnamnet och lösenordet utan problem.
  • Lägg inloggningsformuläret på en plats som är väl synlig.

I vilken ordning placeras knapparna ”OK” samt ”Avbryt”?

OK/Avbryt

Ska man placera OK-knappen före Avbryt eller vice versa? Det är en fråga jag har undrat över många gånger när jag utformat webbformulär. Det har alltid slutat med att jag tittat på hur andra har gjort, och i synnerhet hur det ser ut i operativsystemet.

Jakob Nielsen har testat knapparnas placering och kommit fram till att det egentligen inte spelar någon roll. Det är betydligt mer viktigt att följa de konventioner som finns på plattformen, det vill säga applikationen eller operativsystemet.

Alltså: OK och sedan Avbryt, eller Spara och sedan Förhandsgranska etc.

De fyra värsta misstagen inom webbdesign

Det finns många saker att störa sig på när det gäller webbdesign. Men det finns fyra saker som är de värsta av de värsta. Fyra dödssynder anno 2007.

1. Ladda om sidan när du minst anar det

På nätet gäller det att vara först med nyheter. Allra först. Gärna så ”först” att det innebär att sidan måste laddas om under tiden du läser, i händelse av att det kommit en ny extravagant nyhet som du bara måste läsa.

Att lägga läsaransvaret på läsaren går naturligtvis inte. Ladda gärna om sidan var tionde minut, helst när användaren läst halva stycket efter att återvänt till datorn efter en vända på toaletten. Omotiverade sidladdningar ger bättre statistik för annonsörerna också.

Syndare: dn.se, svd.se (laddas om var tionde minut)

2. Förläng laddningstiden och frys webbläsaren

Post- och telestyrelsen lovar bredband åt alla hushåll 2010. Fiber kan byggas ut ganska enkelt varefter tekniken utvecklas och det senaste lovordet är en gigabit per sekund. Men även om man i nuläget sitter med en lina på hundra megabit per sekund kan det gå sakta. Laddningstiden på de enskilda servrarna blir lidande, eller andra flaskhalsar någon annanstans i det enorma nätverket. Att ladda en sida ska gå snabbt. Så enkelt är det bara.

Lång laddningstid är inte enbart beroende på servern. En snabb server som kastar ur sig flera megabyte av javascript (läs skräp) måste först tolkas och köras av den mottagande datorn. Det är först när sidan laddat klart i webbläsaren som laddningstiden är avslutad.

Syndare: prisjakt.nu (med javascript lika svällande som en brunstig tonårspojke)

3. Visa kommentarerna i omvänd kronologisk ordning

Bloggar visar senaste inlägget överst, precis som nyhetssajter. Man gör detta eftersom varje artikel i regel är oberoende av den föregående och för att få det senaste levererat först.

Men en del gör dock samma sak med kommentarer, vilket blir konstigt eftersom man då måste läsa nedifrån och upp. I en diskussion är kronologi den viktigaste komponenten och det blir näst intill omöjligt att skapa ett sammanhang utan korrekt ordning. Det är som att läsa en roman en sida i taget. Baklänges.

Syndare: idg.se (som dock tog sitt förnuft till fånga och rättade till problemet)

4. Spela upp videoklipp så fort sidan öppnas

Det här är den absoluta dödssynden som leder till omedelbar hjärtsvikt med en fatal utgång som följd.

När jag går igenom mina nyhetsflöden öppnar jag dem oftast i nya tabbar för att läsa senare. Eftersom jag arbetar med film innebär det en del videotittande. Det värsta är när jag sitter på kvällskvisten, med svag musik och dämpad belysning, och går in för att bli totalt överrumplad av att webbsidan startar musiken omedelbart. På högsta volym såklart.

En annan lika jobbig variant är när de tar ett videoklipp med låg volym och lägger in en musikvinjett i början som inte riktigt är anpassad för klippets totala dynamik. Följden blir att när klippet repeteras, spränger det nästan högtalarna – för att inte tala om de före detta trumhinnorna. (Eftersom man höjt volymen för att höra dialogen.)

Men YouTube spelar upp videoklipp direkt? Nej, det gör de inte. Endast när man aktivt väljer att gå in på en videosida spelar de upp videoklippet. Inte när man går till huvudsidan, eller när man bäddar in videoklippet på en blogg.

Syndare: kristallen.tv (har lyckligtvis rättat till det), ted.com (vinjetten spränger trumhinnan, liksom kontraktet med hyresvärden)

Så gör du en bra presentation av din webbplats

En ny webbdesign innebär ändlösa nätter framför Photoshop, eller hur? Då är du fel ute.

Webben är i första hand ett funktionellt medium och i andra hand estetiskt. Vill man titta på konst går man till ett museum.

Sydsvenskan ska göra om sin webbplats och begär bidrag från besökarna. Du kan se de redan inskickade tävlingsbidragen och lära dig mer om hur du själv skickar in ett tävlingsbidrag.

De flesta bidrag är skräp, men ett bidrag sticker ut. I stället för att koncentrera sig på vilken färg och form den nya kostymen ska uppbära, har Tomas Wennström och Kristin Heinonen lagt fokus på informationsarkitekturen och sidans uppbyggnad. Funktion före form alltså.

Tomas och Kristin visar hur de har tänkt:

Enkelt, pedagogiskt och inriktning mot att beskriva hur det ska fungera, snarare än hur det ska se ut. Så borde alla presentationer av innehållsrika webbplatser göras. Bildonani á la Photoshop är ingen behjälpt av, mer än att visa designkreatörens grava hybris.

(Källa: What’s Next)

Splashup – seriös bildbehandling på nätet

Splashup är en flashbaserad bildbearbetningsapplikation. Förutom det vanliga med att beskära och ändra storlek kan du lägga till lager, använda olika slags penslar, opacitet och mycket mer. Photoshop på nätet kort sagt.

Det går även enkelt att dela med sig av bilderna via Flickr, Facebook och andra liknande sajter.

Riktigt fräckt.

45 utmärkta bloggdesginer

Tidigare tipsade jag om 60 eleganta och tilltalande webbdesigner. Nu har Smashing Magazine återigen sammanställt fördelaktigt snygga och inspirerande layouter att känna avund över.

Ta en titt på 45 Excellent Blog Designs.

Not every blogger wants his or her site to look exactly like hundreds of other ones. In fact, there is a small bunch of creative, outstanding and individually designed from scratch blogs.