Exempel från webben
Stayhard.se – https://www.stayhard.se/page/inspiration/who-do-you-shop-for?intcmp=1947_landing_block_xmas-guide
Mio.se – https://www.mio.se/matplats/bord/matgrupper
Lnu.se – https://lnu.se/forskning/sok-forskning/
Konsert & Kongress – https://konsertkongress.se/evenemang/musik/jakob-hellman
1177.se – https://www.1177.se/Kronoberg/liv–halsa/psykisk-halsa/
IMDb
Filmdatabasen IMDb visar på en dålig Titled Section. Sidan har definierat sina separata sektioner men användaren kan inte få en översikt på dessa utan att behöva klicka på varje separat kategori. Sidan har många olika kategorier med många underkategorier och att inte kunna få en bättre översikt över sidan ger användaren en oorganiserad känsla. När en arbetar med Titled Sections är det viktigt att kategorierna är korta, en ska hålla sig till max en till två ord. IMDb har gett sina kategorier väldigt långa namn med flera ord vilket bidrar till det oorganiserade intrycket av sidan. Det är också viktigt att välja ett typsnitt som står ut från övriga typsnitt och som definierar rubrikerna, men här har IMDb valt samma typsnitt på sina kategorier som underkategorier vilket gör att rubrikerna inte står ut.
SVT – https://www.svtplay.se/
Ett grid som ger varje objekt lika stort utrymme tillkännager att de har lika stor betydelse. Man kan se denna information mycket tydlig på SVT-webbplatsen. Allt är organiserat i samma storlek och ger användaren en känsla av konsistens.
ZARA https://www.zara.com/se/en/woman-special-prices-l1314.html?v1=1281579
ZARAs webbsida följde inte grid-systemet. Man kan se att i samma katalog använder de olika mängder bilder för att beskriva en produkt eller visade olika mängder produkter i en rad. Det fick mig att tänka på om artikeln med två bilder är viktigare än den med bara ett foto. Är de tre produkterna i samma rad mindre viktiga än de två produkterna i en annan rad? Alla dessa produkter finns i samma rabatt katalog och de bör inte ha någon stor skillnad mellan varandra.
H&M ttps://www2.hm.com/sv_se/index.html
HMs webbplats har sju tydliga rubriker som gör att sidan är mycket enkel att skanna igenom och förstå. När man klickar på varje avsnitt ser du att det fortfarande finns mycket mer innehåll. Produkterna kategoriseras med olika generaliseringar, och användaren kan söka på produkter baserade på olika syften. Deras app följer också samma organiserade stil.
Götabiblioteken https://www.gotabiblioteken.se/web/arena
Götabibliotek:s webbsida markerar titelsektioner enbart med ett tunt understreck när man har muspekaren över dem. Samtidigt använder de samma teckensnitt och samma storlek för både titel sektioner och alternativen i rullgardinsmenyn för titelsektionerna. De lämnar inte heller tillräckligt med utrymme för att separera avsnitten. Dessa skäl gör att webbplatsen inte har stark informationsarkitektur och visuell hierarki. Titelsektionerna är inte heller uppdelade i grids, vilket gör att avståndet mellan varje titelsektion skiljer sig från varandra. Om man expanderar en rullgardinsmeny kommer menyn att överlappa över nästkommande sektion baserat på bredden i varje underliggande objekt.
Gott exempel: Junkyard.com
Junkyard presenterar sina produkter i en grid of equals som bjuder in till att välja mellan olika varor. De använder inte för många och inte för få produkter per rad vilket kan tyckas tillåta besökaren att harmoniskt gå igenom och leta produkter utan att bli överväldigad. Whitespace används sparsamt men ändå tillräckligt för att få sidan att kännas luftig. Varje produkt har samma gråa bakgrundsfärg som gör att rutnätet får en känsla av att hänga ihop och skapar ett stilrent slutresultat.
Wish presenterar också sina produkter i en grid of equals. Informationstexten vid och på bilderna följer, för det mesta, liknande mall men problemet är att den visuella vikten mellan bilderna inte är konsekvent och de följer inte liknande mall överhuvudtaget. Vissa bilder är foton som tagits på en person med en naturlig bakgrund medans andra enbart är ett objekt med en helt svart bakgrund.
Snyggt, tydligt, bra särskiljning mellan enheter under “Aktuella böcker”. Varje bok är snyggt grupperad med sin tillhörande text.
Rörigt, otydligt och fult. Oklart vilken text som hör till vilken bild. Vissa texter hamnar under bilderna. Detta är inte ett planerat kaos/statement utan det är ett omedvetet kaos.
Rörigt och icke-harmonisk helhet. Det är mycket info i vissa beskrivande texter och för lite i andra. Rubrikerna är alla på olika många rader och de beskrivande texterna har olika många rader. Dessutom är texten justerad mot både höger- och vänsterkant vilket skapar enorma sjöar och floder i texterna – det hade varit bättre att antingen arbeta mer med en snygg marginaljustering eller att helt enkelt vänsterjustera alla texter. Vidare hade det varit bra om bild och tillhörande text hade varit tajtare mot varandra för att bilda en tydlig grupp, eller om mellanrummet mellan varje bild/text-grupp varit större.
Älmeboda – http://almeboda.nu/
De olika rubrikerna och linjer förenas inte eller håller samma struktur och utgångsplacering vilket gör att sidan upplevs som en aning svår att begripa. Genom att anpassa bredden på de olika materialet så kunde det här enkelt åtgärdas. Det är även till fördel att ha mer marginal med vitt tomrum på sidan för att minska risk för att innehållet upplevs svårläst och överväldigande. De olika materialet som syns på bilden har heller ingen tydlig relation till varandra samt det är svårt att avgöra vad användaren ska lägga fokus på och att förstå vad som är mest viktigt?
Här kan du hitta mer information om Grids of equal och Titled Sections: https://interfacepatternsresource.school.blog/grid-of-equals-titled-sections/
Interface Patterns – Designmönster för användargränssnitt | På svenska 