Grid of Equals
Vad är det?
När man ska strukturera och organisera innehåll på en sida kan man använda sig av metoden Grid of equals. Denna metod härstammar från när man skulle skapa olika tryck material till tidningar, men idag används det flitigt vid webb- och appdesign.
Grid of equals används till fördel när man ska strukturera innehåll som ser snarlikt ut och är av samma vikt. Grid of equals ger användaren möjligheten att kunna få en förhandsvisning av det innehåll som kommer sen för användaren.
Grid of equals bygger på att genom organisera element på sidan, i förhållande till varandra och i förhållande till andra element t.ex kolumner och rader som ser likadana ut grafiskt och innehållsmässigt kunna kapa en upplevelse av att sidan är konsekvent men ger också ett harmoniskt intryck.
Grid of equals innebär att denna metod kan användas för att ge innehållet av sidan en uppfattning av lika värde. Detta genom att organisera element på sidan, i förhållande varandra och i förhållande till andra element.
När används det?
Grid används när vi vill skapa struktur och organisera innehåll för att skapa en bättre användarupplevelse men även när du vill få en konsekvent upplevelse av t.ex. en hel webbsida. Detta stödjer även till responsiv design, hjälper dig att skapa en konsekvent upplevelse på olika enheter med olika skärmstorlek.
Några exempel på när denna metod är bra att tillämpa är vid:
- Nyhetsartiklar
- Bloggar
- Visa upp produkter
- Menyer
Grid of equals används för att ge lika värde för elementen. Skulle något element avvika och vara exempelvis större så kan detta dra till sig uppmärksamheten och skapa en upplevelse hos användaren att detta element är viktigare.
Hur används det?
Grid of equals bygger på att man organiserar innehållet i kolumner och rader eller både delar. Detta genom att organisera innehållet i geometrisk form i förhållande till varandra och i förhållande till andra element. Oftast gör man det med hjälp av linjer,rektanglar och kvadrater för att placera in sitt innehåll som text, bild eller funktioner.
Eget exempel – Best practise
Titled Sections
Vad är det?
Titled Sections innebär att definiera och separera sektioner eller områden genom att ge dessa en stark titel samt en visuell uppdelning gentemot annat innehåll. Detta bidrar även till struktur och organisering av sektioner.
Om en sida innehåller mycket information är det lätt att bli överväldigad när allt visas på samma gång. Genom väldefinierade och genomtänkta titlar samt strukturerade sektioner så blir det enkelt för användaren att förstå innehållet som presenteras genom att visa en överblick av gränssnittet.
När används det?
Titled sections används när du vill skapa ett överskådligt gränssnitt som är enkelt för användaren att förstå och navigera sig på, trots att en stor mängd innehåll visas samtidigt. Du kan på detta sätt underlätta för användaren och kan guida dom i all den information som visas. Ett exempel är sidor med mycket text, som en tidning med mycket artiklar.
Människans visuella system tittar alltid efter större mönster oavsett om de finns eller inte. Titled section kan med fördel användas när du vill göra gränssnittet bekvämt för användarens öga. Informationsarkitekturen blir genom detta uppenbar för användaren. Användaren har lättare att identifiera intressant eller användbar information.
Hur används det?
Först och främst är det viktigt att få en bra informationsarkitektur genom att dela upp och gruppera innehållet, utefter till exempel tema eller uppgift som ska utföras. Att även arbeta efter vad som är logiskt för användaren och skapa titlar utefter detta är viktigt. Att exempelvis döpa grupperingarna till något som representerar innehållet.
Det är även bra att använda typografi som sticker ut från resten av innehållet för rubriker. Detta skulle exempelvis kunna innebära fetstil, större, starkare färg eller ett annat typsnitt.
Att använda vitt utrymme mellan sektionerna för att separera dessa och använda bakomliggande block med en bakgrundsfärg som skapar kontrast bakom varje sektion är även ett bra tillvägagångssätt. Det är dock viktigt att säkerställa att färgen på titeln inte störs av bakgrundsfärgen eller tvärtom. Ibland kan det vara användbart att lägga till en ram för att skapa en känsla av vilket innehåll som är avskiljt från resterande.
Eget exempel – Best practise
Exempel från webben:
Ikea https://www.ikea.com/se/sv/customer-service/
Ikeas kundtjänst sida är ett bra exempel på en Grid of Equals och Titled Sections. Ikea har skapat rutor som är lika stora och med samma avstånd till varandra, där det kategoriserat upp tjänsterna. Detta ger en tydlig överblick på alternativen man har som kund. Som användare förstår man även att dessa rutor hör ihop, tack vare att innehållet i rutorna liknar varandra. Ikonerna i rutorna har samma formspråk och är även tydligt kopplade till dess Titled Sections. Användningen av Whitespace är även bra, där det har en god marginal och padding som göra innehållet luftigare. Pilen som är längst ned i varje ruta hintar om att rutan är en länk. Detta förtydligats när man för musen över objektet, då uppstår en highlight-effekt som ges i form av förstärkt skugga. Rutan längst upp till vänster visar detta i bilden. Detta gör att Ikeas kundtjänst sida ger ett prydligt och organiserat intryck som gör det lätt för användaren att hitta det hen söker.
Lush – https://www.lush.com
Lush onlineshop som erbjuder färsk hudvård och hårvård, visar på ett dåligt exempel av Grid of Equals. Innehållet är arrangerat i ett rutnät men det är inget systematiskt mönster vilket gör att elementen inte ser ut att ha ett lika stort värde. Den visuella massan av ett element bör vara likadan hos alla element som presenteras i samma rutnät men Lush följer inte ett sammanhängande mönster. När man ska använda sig av ett rutnät så är det bra att tänka på hur man kan presentera sitt innehåll på bästa sätt för användaren, det ska vara tydligt att urskilja vad som är vad. Denna sida blandar kategorier vilket gör det svårt att urskilja vad de egentligen vill att användaren ska fokusera på och elementen ser inte ut att vara jämlika utifrån storleken som skiljer från objekt till objekt. Det är även svårt att få fram en stark visuell hierarki som definierar det essentiella i innehållet.
Lnu.se/MyMoodle https://mymoodle.lnu.se/course/view.php?id=36454
Här är ett bra exempel på Titled section där informationen förstärks genom en tydlig rubriksättning. Det ger användaren en bättre struktur och kan enklare ta till sig informationen och sortera ut det som denne anser är av intresse.
Lnu.se/MyMoodle – https://mymoodle.lnu.se/mod/page/view.php?id=2180708
Här visas ett dåligt exempel på Titled Sections där det är svårt för användaren att ta till sig informationen på ett enkelt och överskådligt sätt. Informationen är inte uppdelad på ett tydligt eller avgränsat sätt.
Netflix – http://netflix.com
Netflix är ett bra exempel där Grids of equal och Titled sections kombineras. Gränssnittet beskriver tydligt olika alternativ utav filmer i kategorier utav intresse så som “popular at netflix” och “trending now” där materialet i form utan rektanglar innehar samma storlek och avstånd mellan varandra vilket bidrar till en tydlighet och förståelse för den tänkta strukturen på sidan. Som kontrast visas en filmnyhet “The end of the f***ing world” i större format och inbringar en tydlig variation till de mindre partierna utav filmer, det blir då en behaglig balans i mellan de olika elementen på sidan. I toppen av bilden finns det “breadcrumbs” där vald sida markeras med “fet” vit text istället för vanlig för att hjälpa användaren att förstå vart de befinner sig på sidan.
Länk till fler exempel https://interfacepatternsresource.school.blog/grid-of-equals-titled-sections-bra-daliga-exempel/
Interface Patterns – Designmönster för användargränssnitt | På svenska 