Inlägg i kategorin webbdesign

Designproblem med litteraturmagazinet

För ett tag sedan flyttade Enligt O över till Litteraturmagazinet. Jag tänkte följa efter och fortsätta läsa henne där, men det . gick. fan. inte. Ju mer jag försökte ju mer irriterad blev jag, och igår jag satt i min indignation och listade upp alla designfel (både varegäller grafisk design och informationdesign). Sen fixade de två! Yay. Men större delen av listan kvarstår, och eftersom jag chockar mig själv varje gång jag inser att jag faktiskt kan webbdesign (-steori iallafall) blir det i en liten minilektion.

1) Namnigenkänning

Problem: Googlar jag på vad jag tror sajten heter kommer jag inte fram. Varför? Well, ordet magasin stavas så på svenska. Med s. Inte z. Inget fel med det, men att först heta ett felstavat ord och sen inte poängtera det på något sätt är inte jättesmart.

Lösning: Jag tänker mig ett stort z i logot, ett z in ikonen… eller ett logo öht som inte bara är sajtnamnet.

2) Tidningslayouten passar inte en sajt som inte är en nyhetstidningssajt

Litteraturmagazinets design och layout vill uppenbarligen se ut som en tidningssajt. Med relativt smala kolumner med svart text på vit botten, tredubbla menyrader, bylines på bloggar och sparsam typografi är det uppenbart att man försökt efterlikna en tidningsajt. Problemet? Innehållet passar inte. Tidningssajtslayouter ser ut som de gör för att de är baserade på papperstidningar begränsande format, och för att de måste innehålla örtitusen konstant uppdaterade nyhetsartiklar. Det finns ingen anledning att bergränsa en tidskrifssajt, och eftersom innehållet inte cirkulerar varje dygn drabbas alla sidor av innehållsöverskott och tröttar ut användaren.

Lösning: Det finns ingen lätt lösning, men i nästa omdesign, leta efter tidskriftssajter ni gillar, hyr in en bra AI (information architecture) designer och använd tidningslayout som en designmetafor istället för en mall (alltså: ha små grejer som får en att tänka på tidningar istället för att försöka se ut som en tidning.) Och in med ännu mera whitespace!

3) Hemsidan lider av MYCKET svår information bloat

hemsidanJag orkade först inte räkna hur många innehållsområden (artiklar, bildlänkar och faktarutor), men när jag försökte hamnar jag över femtio. Femtio. Sidan för alltså inte bara över fold (fold är termen för gränsen nedåt efter den första hela skärmen, alltså allt man inte måste scrolla för att se) utan är c:a tjugo skärmar lång. Tjugo. Det är inte rimligt på ett enda ställe. Man får ingen överblick alls. Mycket är gammalt. Inte ens dn.se har en hemsida så lång, och de uppdaterar varje kvart minst. Det gäller förresten varje sida; ta bort allt irrelevant tjafs. Det bara stökar till, alla sidorna är alldeles för långa, det gör dem dessutom tungladdade. Rensa både i innehållet och layoutmallarna.

Lösning: ta bort, ta bort, ta bort! 70% veck! Behåll de femton, max! viktigaste. Färre än fem skulle se för lite ut. Mer än femton med nuvarande layouten och användaren tappar bort sig.

 

 

 

 

 

 

 

 

 

 

4) Layouten är statisk och anpassad för en lite för stor skärm.

width

Jag sitter på en 13-tum macbook pro med skärmupplösningen 1280×800 px – knappast jättestor, men inte pytteliten heller, och ganska vanlig – och 100 pixlar hamnar utanför min skärm. En 1024 px ipad kan inte vara jättekul?

Lösning: responsiv layout! Yay! Det bästa som hänt webbdesign sedan den uppfanns, cirka. Det innebär att man kan ha exakt samma innehåll (alltså inte separata sajter) och olika layout beroende på skärmstorlek. En femkolumnare på en stor skärm, tre kolumner på en ipad och en ensam kolumn på mobil. Som magi. Användarvänlig magi. Smashing Magazine är ett ypperligt exempel.

5) Otydlig informationshierarki

information Och vad betyder det? Att det är otydligt vilket innehåll som är viktigare än annat innehåll. Se t.ex. hemsidan igen. Om vi suddar vad som faktiskt står, kan vi ens se vad som är viktigt? Ibland. Bra bruk av rubriker och bilder i artiklar, applåd på det! Men sedan tar det stopp, mest för att det är för mycket innehåll. Igen. Men också för att reklamen och serien är det mest utstående materialet på sidan. Serien kan bli en thumbnail, men reklamen kan man såklart inte göra något åt. Istället borde det finnas en tydligen färgpalett att använda för att indikera vikt och featureområden. Som det är nu är finns det ett gäng röriga gråa, rosa, röda och gröna områden där färgen verkar betyda… inget?

Lösning: Tre huvudfärger och fem kontrastfärger som alla är komplimentära, featureområden som faktiskt används, thumnails där det behövs istället för hela serier på hemsidan. Mindre innehåll. På hemsidan ska det finnas översikt. Skilj på nytt och äldre innehåll. Skilj på bloggar och nyheter och intervjuer. Plocka bort gammalt. Städa städa städa!