Grupp 5 – Campus

Vad är det?

Det är en ganska ny design praxis som är en form av stor, rektangelformad navigations meny som antingen är en drop-down- eller en fly-out meny som kännetecknas av tydligt organiserade kategorier eller annan typ av användbara sorteringsordningen. Egentligen kan man säga att den ersätter teoretiskt den traditionella “drop-down / slide out” -menyn och kallas förutom Fat menus även för Mega dropdown-menu. Den samlar det olika avsnitten/kategorierna i en lång lista, som sedan delas upp i underkategorier. Vilket du når genom navigationsfältet/navigationsmenyn. Som namnet också antyder så används det för att visa stora grupper av alternativ, kategorier, datamängder eller annan slags relaterat innehåll på en gång. Man använder ofta Fat menus för att förenkla användandet av ett gränssnitt där man vill få in mycket information i navigations meny, men där innehållet på menyn tydligt kan delas upp i flertal tydliga kategorier. Man ska igenom det som användare få en tydlig överblick över vilka sektioner som finns på sidan och dess respektive undersidor.

När används det?

Fat menus används på webbplatser eller appar som har många sidor i många olika kategorier, ofta i en hierarki med tre eller fler nivåer. Detta är utformat så för att användaren lätt ska kunna få en överblick om vad som finns tillgängligt på webbplatsen eller appen. Så om du letar efter mer än det fördelarna en vanlig drop down meny ger dig så är kanske fat menus precis vad du behöver. Att definiera kategorier för objekt är en av det viktigaste stegen i en implementation. Men du får se till att detta design interface pattern inte heller bidrar till en en potentiella frustrationen som finns när meny automatiskt tas bort när markören flyttas bort och undvik även en menyn som täcker hela sidan. Så även om dessa menyer är att starkt rekommendera för en riktigt bra användarupplevelse så är det av stor vikt hur de distribueras.

Varför Fat menus?

För att i det flesta fall är en hemsida relativt komplex och detta är ett sätt att underlätta och göra en komplex webbplats lättare att navigera på. Sen används det tradionellt sätt så någon form av dropdown meny pattern som är placerad på toppen av skärmen vilket gör att nästan alla användare, oavsett deras kunskaps nivå är vana vid att använda en sida eller applikation som har detta pattern. Därför är det att föredra att använda sig av något form av dropdown pattern. Att då använda sig av fat menus fungerar extra bra på grund av sina tydliga indelningar av kategorier i en dropdown meny. Användaren får inte heller allt synligt direkt utan kan börja med att titta över menyrubrikerna för att skapa sig en första bild av vad som finns där. När hen sen känner sig redo behöver hen endast hoovra över eller trycka på menyrubrikerna för att få alla kategorier och underkategorier att visa sig. Så användaren kan därmed se ett stort antal alternativ från en sida som succesivt blir mer specifikt tackvare visning av alla underkategorier inom samma område, utan att användare behöver scrolla eller byta sida. Vilket gör att användaren får lättare att hitta runt på sidan.Dom slipper därmed att ta sig till en annan sida där de behöver orientera sig vid varje ny siduppdatering, vilket ju inte är en bra idé då det behöver lägga ännu mer tid på processen och därmed ge användaren intrycket av att det måste jobba för att hitta saker på sidan. Så om du kanske till och med redan använder menyer i din globala navigering, så är det en ganska lätt övervägning att utvidga dessa till fat menus.

Hur används det?

På varje meny presenterar du en välorganiserad lista med länkar. Ordna dem i rubriker (kapitel 4) om de passar in i underkategorier: om inte, använd en sorteringsordning som passar innehållets natur, till exempel en alfabetisk eller tidsbaserad lista.

Använd rubriker, avdelare, generöst vitrum, blygsamma grafiska element och vad du än behöver för att organisera dessa länkar visuellt. Och dra fördel av horisontellt utrymme – du kan sprida menyn över hela sidan om du vill. Många webbplatser använder utmärkt flera kolumner för att presentera kategorier. Om du gör menyn för hög, kan den gå direkt i slutet av webbläsare sidan. (Användaren styr hur lång webbläsaren är, gissa konservativt.)

De bästa webbplatserna har feta menyer som fungerar stilistiskt med resten av webbplatsen. Designa dem så att de passar bra in i färgschemat, rutnätet och så vidare på sidan.

Saker att tänka på

Av sin natur så visar fat menus många olika alternativ vilket kan bli något dubbelt. För om dessa olika alternativ inte är arrangerade i sub-kategorier eller är tydligt visualiserat med hjälp av ex typstorlek, ikonografi eller bilder så blir användaren tvungen att skanna av ett väldigt stort område innan hen kan identifiera det som hen söker efter. Så om man inte tänkt på detta i designprocessen blir fördelarna med många alternativ istället för något positivt något negativt och begränsande.

Enligt Nielsens studie från 2009 så fungerar Fat menus så bra  eftersom “… de visar allt på ett ögonblick, så att användare kan se allt snarare än försöka komma ihåg allt.” Detta går tillbaka till Nielsens tidigare arbete med användbarhet som rekommenderar gränssnitt som förlitar sig på erkännande snarare än att återkalla (Nielsen, 1995).

Anpassning till olika plattformar

När man vill använda sig utav fat menus på andra plattformar som exempelvis smartphones har man en hel del att ta i åtanke. Eftersom telefonerna i sig inte är lika stora som en skärm kan man inte riktigt utnyttja bredden lika väl som man annars kan på en datorskärm. Därav vill man helst undvika att scrolla horizontellt. Då finns det enbart en lösning kvar vilket är den vertikala scrollningen. Om man anpassar den vertikala scrollningen direkt såsom en fat menu ofta fungerar på en webbsida för en dator kommer informationen som presenteras vara betydlig svårare att tyda och vi tror att det skulle kunna uppstå förvirring. Istället kan man göra som de flesta applikationer har idag att man har en form av tre streck vid sidan som ska representera en “meny”. Därefter kan man behålla strukturen som exempelvis adidas har. Alltså t.ex. Herr>Skor>Löpning, dock att dessa sker i en vertikal scrollning och i en dropdown funktion. Skulle denna anpassning göras kan man inte kalla det för en fatmenu längre. Därför skulle man kunna säga att en fatmenu enbart används väl i webbaserad form och ej för smartphone bruk ur ett användarvänligt perspektiv.

Bra exempel nr 1

Adidas

Adidas hemsidan är ett ganska klart exempel på en bra Fat menu. De visar tydlig struktur i deras så kallade “Fat menu”. I deras meny fält presenterar de informationen på ett sätt som gör det lätt för användaren att förstå. Exempelvis genom att ha huvudkategorier som Dam, Herr, Barn, Sporter, Brands och Julklappar som alltid syns i toppen av sidan. Under dessa huvudkategorier har de sedan kategoriserat informationen genom underrubriker som Skor, Kläder, Accessoarer osv. Därefter listas de olika kategorierna inom exempelvis skor eller kläder. De har använt sig utav spacing för att särskilja de olika meny kolumnerna och även gjort en tydlig underline vid “Visa allt” funktionen. Menyn utnyttjar hela bredden på webbsidan och blir därav mer tydlig och enhetlig. Tillsammans med den vita färgen som menybakgrunden får, ser man klart och tydligt var den börjar och slutar. Därför behövs heller inget mörkare filter på resterande sida när menyn blir aktiv då resterande sida är av mörkare karaktär.

Bra exempel nr 2

Arizona Public Service

Här har vi ett annat exempel på en bra och tydlig fat menu. Arizona Public Service (ASP) hemsida gör som Adidas att de använder sig utav hela bredden på sidan. De har även tänkt på en kontrastfärg vilket används för att särskilja fatmenu gentemot de huvudsakliga kategorierna på själva menybakgrunden.. Därefter har de delat upp informationen i underrubriker som i sin tur listar upp de olika funktioner som den specifika kategorin kan erbjuda. ASP har delat in de olika kategorierna med hjälp av spacing och därefter tydligt gjort underrubriks texter svarta och de rubriker som kommer därefter blåa. De har också valt att använda spacing mellan de blå rubrikerna för att särskilja dem vilket i våran åsikt kan kännas rörigt. Hade de använt sig utav mindre spacing mellan dem tror vi att menyn hade varit betydligt lättare att tyda men det är fortfarande en väldigt bra fat menu.

Dåliga exempel nr 1

Desert Financial

Här har vi ett exempel på en dålig fat menu. Strukturen på den fatmenu som finns tycker vi är i ett format som skulle kunna förbättras. På första rubriken “Why choose us” är det enbart bilder med en underrubrik på varje. Här skulle man kunna använda sig utav en annan teknik än fatmenus då informationen de presenterar inte är i behov av en fat menu. Här skulle de enkelt kunna använda sig utav en vanlig drop down eller någon annan form av presentationsverktyg. De andra kategorierna använder sig utav fatmenus men i generell mening så känns de lite smått rörigt och skulle behövas se över för att antingen kategorisera om de existerande rubrikerna eller alternativt byta interface pattern helt och hållet som kan passa deras sida bättre. Sidan har också ingen direkt avgränsning på de fatmenus som existerar. Detta resulterar i att menyn försvinner i en utav bilderna i bildspelet. Alltså att det är samma nyans av vit och har man otur och hamnar på den bilden när menyn är ute kan förvirring uppstå. Här skulle en kantlinje runt om den kunna finnas till hands eller helt enkelt byta färg på bakgrunden. Ett annat alternativt är också att man använder sig utav ett form av mörkare opacitets filter så man dimmar ut resterande sida när fatmenun är aktiv. Alltså att resterande sida blir mörkare för tillfället.

Dåliga exempel nr 2

Leslies Pool Supplies

Denna sida är vårt andra exempel på en dåligt fat menu där kategoriseringen av innehållet har blivit lite fel och man hade kunnat snygga till det i sin generella mening. I kategorin “Chemicals” finns en hel del kategorier som kan presenteras på ett annat sätt än med en förvirrande miniatyrbild på något som ska representera exempelvis en “Value bundle” eller hemsidans applikation som de kan få gratis. I själva menyn kan man istället använda sig utav enbart rubriker för att minimera intrycket som användaren får och eventuellt kategorisera det utefter bokstavsordning eller liknande. Detta kommer tillföra att kategorier som de ovannämnda görs mer tydliga och kan kategoriseras på ett bättre sätt. Personligen tycker vi att bilderna i sig känns mer som ett förvirrings moment än att skapa tydlighet. I rubriken “Chemicals” skulle flertalet av de kategorier som nu finns där, kunna klassas under någon form av överrubrik. Exempelvis skulle kategorier som “Chlorine”, “Chlorine Alternatives” och “Algae Control” klassas under en form av “Pool Cleansers” eller liknande. Som en gemensam nämnare har de också tagit med en form av kontaktinformation eller liknande på varje fat menu som de har. Detta känns som att det kan visas någon annanstans än just i menyn. Exempelvis i botten av sidan alternativt under en annan kategori som “Contact us”. I generell mening kan denna sidas fatmenus behövas uppdateras och göras mer användarvänliga och mer grafiskt lockande för att lättare hjälpa användaren att hitta rätt och inte skapa någon förvirring.

Eget exempel

Länk till prototyp: https://rfs9vv.axshare.com (Lösen är 1234)

Källor

https://www.adidas.se/
https://www.aps.com/en/Residential/Home
https://www.desertfinancial.com/personal
https://www.lesliespool.com/
http://designinginterfaces.com/patterns/fat-menus/

Bra & Dåliga exempel från andra grupper

Bra exempel – Grupp 3 – Campus

Bra exempel: bokus.com 

Tydlig kategorisering av innehåll och bra mellanrum mellan kategoriers kolumner viket möjliggör en snabb överblick över webbplatsens hela sortiment. 

Dåligt exempel – Grupp 4 – Distans

Dåligt exempel: I det här exemplet från clasohlson.com tar megamenyn upp större delen av skärmen men utrymmet används inte särskilt väl. För att se alla produktkategorier måste användaren först sväva muspekaren över en av underkategorierna; detta gör det svårt att få en snabb överblick över innehållet. Hade innehållet istället varit organiserat horisontellt, hade man eventuellt kunnat få plats med alla kategorierna i hela fönstret. Överflödigt utrymme hade också kunnat användas mer effektivt genom bilder och kontextuell navigation.

 

Länk Till fler bra och dåliga exempel: https://interfacepatternsresource.school.blog/fat-menus-bra-daliga-exempel/