WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Design av dubbla menyer (https://www.wn.se/forum/showthread.php?t=37579)

Yepp 2009-06-24 20:06

Har fastnat i lite problematik i samband med omdesign av en äldre webbplats - med en design anno tidigt 2000 nånting. Det det gäller är främst hur jag bör utforma menyerna för att de dels ska smälta in smidigt på sidan, korrelera med övriga element, inte "stjäla" för mycket plats och framförallt samtidigt vara tillräckligt användarvänliga för besökarna.

Problematiken ligger främst i att sidan kräver "dubbla menyer". Med det menar jag att sidan har ett antal huvudkategorier och respektive av dessa är därefter indelade i ett antal underkategorier. Det är dessvärre inget alternativ att frångå detta upplägg.

Det känns som att jag egentligen har tre huvudalternativ:

- Dubbla horisontella menyer långt upp på sidan, där den undre ändrar skepnad beroende på vilken av huvudkategorierna som besöks
- Vertikal meny (enligt "klassisk" metod") längs ena sidan av webbsidan - som växer och utökas beroende på vilken av huvudkategorierna som besöks.
- En kombination av ovan: Horisontell meny för huvudkategorierna långt upp sidan och en vertikal undermeny längs sidan av sidan som ändras enligt samma princip som i det första fallet

I den förra versionen av sidan användes den första metoden. Det har dock visat sig att besökarna lätt missade eller missförstod upplägget på denna och helt enkelt inte använde sig av undermenyn utan enbart huvudmenyn - inte så bra. Om det berodde på en dåligt utformad meny eller mindre bevandra besökare är aningen oklart. Besökarna är blandade "vanliga" besökare, utan någon speciellt nischad åldersgrupp. Är inte direkt IT-relaterade besökare, så sidan måste vara anpassad för gemene man och kvinna så att säga. För att testa ett nytt grepp var jag först inne på att i den nya designen försöka att använda mig av det sistnämnda förslaget, men är inte alls säker på om det är speciellt lämpligt.

Vad anser ni? Hur utformar ni helst menyer, när det gäller dubbla sådana? Har ni några konkreta exempel på sidor som ni tycker har löst det här med dubbla menyer på ett snyggt och lättförståeligt sätt?

Instinktivt säger något mig att det förstnämnda är att föredra och är vanligast, samtidigt fungerade det inte så bra på den förra sidan. Men å andra sidan kanske det blir för rörigt med upplägget där horisontell och vertikal meny kombineras? Bör tilläggas att jag vill undvika dropdown-menyer.

I vilket fall som skulle jag bli oerhört glad för lite tips, inlägg, feedback, tankar eller vad som helst när det gäller det här med menyer.

Simma lugnt i värmen !! B)

taz76 2009-06-24 20:33

Jag tycker en kombo som du skriver om.. det kan man få snyggt och även så att det blir markerat att HÄR kommer en ny meny med fler sidor. Lägger man det horizontellt under huvudmenyn blir det inte lika markerat. En meny som utvecklar sig kan vara rätt så avancerad för icke IT-folk tror jag.

dAEk 2009-06-24 20:55

Vertikala menyer tycker jag bättre om. Man kan stoppa i fler menyval utan att sabba upplägget på sidan. Med en horisontell meny är man ganska begränsad, man kan inte slänga in hur många menyval som helst och använder man mer än två rader upplevs menyn som rörig och svår.

Man skulle kanske kunna tänka sig att ha en kombination. Den horisontella menyn pushar lite extra för de två, tre viktigaste sektionerna på sajten medan den vertikala menyn är vägen in till alla sektioner.

greenio.se 2009-06-24 22:23

Jag föredrar också det första upplägget. Tycker till exempel dn.se gör det bra. Men en stor fördel tycker jag är ju om menyerna inte är det enda sättet att ta sig till ett ställe på sidan.

Vilken struktur som passar bäst beror ju också på typ av sida och innehåll.

Yepp 2009-06-25 11:42

Hehe, mina farhågor visade sig vara aningen uppfyllda - det finns inget vedertaget "the-super-meny-deluxe-upplägg" att utgå ifrån. Typiskt också. För som jag uppfattar det föredrar ni var och en vart och ett av de olika alternativen. Det positiva i det hela är väl att hur man än gör så är i alla fall inget helt fel, det finns åtminstonde några anhängare därute.

Saken är ju den att ni även har rätt i de fördelar och nackdelar med de olika alternativen som ni framför, vilket givetvis komplicerar det hela. Hur man än gör blir de en kompromiss. Det jag tycker är lite märkligt att jag inte hittat någon mer ingående granskning i hur de olika valen påverkar besökarnas upplevelse. Känns som att någon stackars interaktionsdesigner på någon av alla våra högskolor runt om i landet borde haft det som ämne i en uppsats eller två - har dock inte hittat någon.

Tack för era synpunkter. Jag håller med om att jag gillar också DN:s upplägg, men när jag nämnde det för en kompis (typisk slentriansurfare) så hade han inte ens lagt märke till undermenyn - och det är lite det som oroar (vilket Taz också nämner). Daek tar också upp en begränsning som jag uppmärksammat - att det inte är så lätt att få med alla alternativ i undermeny. Taz, du får gärna utveckla "och även så att det blir markerat att HÄR kommer en ny meny med fler sidor." - har du något/några bra exempel för att få lite inspiration?

Kontentan blir nog att jag drar ihop flera designförslag - så får en mindre gallup avgöra vilket som är lämpligast. Om någon annan har något att tillägga får ni gärna framföra det såklart.

Ha det!

greenio.se 2009-06-25 11:59

Jag skulle föreslå att du letar reda på 5 stora siter inom samma område om det finns, brukar oftare finnas mer av en "universallösning" för en viss typ av siter. :)

taz76 2009-06-25 12:05

Jag pluggar iofs på högskolan men inte interaktionsdesign fast har läst en kurs som även dom läser och boken människa-dator-interaktion :P nån studie känner jag inte till..

Det jag tänkte var nått sånt här:

Startsidan:
--logo--
--huvudmeny--

--innehåll, en kolumn--

sen på en undersida (ifrån huvudmenyn) blir det något sånt här:

--logo--
--huvudmeny--

--undermeny till vänster, kolumn ett
innehåll till höger, kolumn två--

Kom först inte på något exempel, men sen gjorde jag det.. en hemsida som jag själv underhåller.. haha!

Kika på denna sidan: http://www.premlavanya.se/ och sen klicka på exempelvis "Behandlingar" så har du en undermeny till vänster.

Edit: för den som är intresserad av hur människan funkar och allmäna designtips så kan jag varmt rek boken "Don't make me think" av Steve Krug. En sån enkel sak som att centrera en rubrik istället för vänsterjustering kan skapa en stor förändring och inte alltid en positiv sådan eller en logo som lagts på en udda placering.. nio av tio människor scannar en hemsida tills de hittar något intressant.. scannar - inte läser dvs.

Yepp 2009-06-25 13:22

Citat:

Originally posted by greenio.se@Jun 25 2009, 10:59
Jag skulle föreslå att du letar reda på 5 stora siter inom samma område om det finns, brukar oftare finnas mer av en universallösning för en viss typ av siter.

Ett bra tips - har scannat igenom merparten av utbudet och det är väldigt varierat. Det finns helt enkelt ingen generell standard, mer än möjligtvis att man kan skönja att de flesta har ett ganska rörigt upplägg med länkar och menyer lite här och där. De flesta har någon form av toppmeny, men därefter ligger det undermenyer lite här och där. Finns fall där sidorna har upp till tre undermenyer i en disposition som lämnar mycket i övrigt att önska. Men det gav faktiskt en hel del, går att identifiera nackdelarna ganska tydligt och sedan får jag helt enkelt försöka undvika dessa i största möjliga mån. :)

Jag kollade in sidan Taz och för tillfället är det ett liknande upplägg som jag jobbar på. Var initialt rädd för att folk ska missuppfatta att "menyn fortsätter på ett annat ställe" - men har nu checkat runt och det verkar finnas en hel del relativt allmäna sidor inom diverse genrer som använder sig av upplägget. Till exempel regeringen.se - och den bör väl ändå anses vara en sida riktad mot allmänheten.

Tackar för tipsen - nu gäller det bara att förvalta dem också :)

greenio.se 2009-06-25 13:38

Det finns ju gott om studier på att vänstra sidan av skärmen är där folk kollar mer naturligt, så har man menyer där så kan man spara en hel del tid på att försöka göra toppmenyer tydliga. :)

taz76 2009-06-25 16:56

Citat:

Originally posted by greenio.se@Jun 25 2009, 13:38
Det finns ju gott om studier på att vänstra sidan av skärmen är där folk kollar mer naturligt, så har man menyer där så kan man spara en hel del tid på att försöka göra toppmenyer tydliga.

.. under förutsättning att det är ett land/besökare som läser ifrån vänster till höger ;)

Anwar 2009-06-30 12:16

Du bör göra ditt val baserat på en rad faktorer;

- Mängd innehåll [Riktigt stora sajter, som nyhetssidor kör ofta +3 nivåer]
- Typ av sida [Allt funkar inte överallt, split-navigation på t.ex. en torrent tracker skulle se oerhört märkligt ut]
- Innehållsvärde [Hur nödvändiga är undersektionerna för att din sida ska konvertera & vilken bana vill du att folk ska ta på din sida?]

Utöver de navigationsformer du listar finns massvis med andra alternativ. Förutsatt att du fortfarande har frihet att ändra innehållsstrukturen samt jQuery-kunskap så kan du experimentera med allt från module tabs till dragspelsmenyer.

Tänk dock på att färg, form och typsnitt oftast är viktigare än menytyp för att få folk att göra det du vill. Ofta missar folk detta helt och skapar menyer som inte känns sammanhängande, trots att de fungerar som de ska rent tekniskt.

Området du är inne på är interface design. Om du vill läsa mer rekommenderar jag Steve Krugs bok "Don't make me think".

Övriga nyttiga länkar:

http://www.smashingmagazine.com/2008...-and-examples/

http://www.smashingmagazine.com/2009...and-solutions/

http://www.smashingmagazine.com/2009...t-practices-2/

coredev 2009-06-30 13:43

Om jag har förstått dig rätt så gör Garaget.org detta snyggt.

Yepp 2009-06-30 17:02

Två stycken som rekommenderat Steve Krugs bok oberoende av varandra nu, det verkar helt enkelt som en intressant titel.

Coredev: Jag tycker garaget.org har löst det helt okay - men är tveksam till om jag kan hålla med om att det är speciellt snyggt. Det funkar helt enkelt. Då sidan innehåller väldigt många alternativ och underalternativ har de tvingats till en lite font. Detta gör att den som snabbt scannar av sidan lätt missar dessa, vilket var problemet med den förra layouten. Garaget har fördelen att det är en stor skara trogna användare som är vana vid sidan. Den sida jag jobbar med bygger sin trafik på drygt 85 procents sökmotortrafik - och dessa har en tendens att missa allt det andra som sidan erbjuder, i dagsläget "fastnar" de i den kategori som de trillade in på. Detta behöver inte vara jättekonstigt då de förmodligen letade efter en specifik sak och hittade det de fann. Men jag vill gärna försöka bidra till att väcka intresse för övriga delar på webbplatsen som besökaren förmodligen kan ha ett intresse i.

Och i och med det kommer vi in på det Anwar tar upp, det stämmer mycket riktigt som du säger att det finns ett flertal faktorer att ta hänsyn till. När det gäller just de faktorer du nämner kan det väl sägas att mängden innehåll är relativt stort, inte riktigt i nivå med garaget, DN eller så men i klass med t.ex. Gameplayer. Sidan riktar sig till en relativt bred skara, med även äldre besökare som målgrupp. Innehållsvärdet är en relevant fråga, som blir aningen tvärtom i det här fallet då merparten av besökarna anländer direkt till en undersida - men sedan har svårt att hitta till grunden och se vad sidan mer erbjuder. En viss förklaring till detta tror jag ligger i nuvarande menyer och upplägg, en annan i att materialet som presenteras idag inte presenteras tillräckligt attraktivt samt att många besökare helt enkelt letar efter en specifik sak och sedan lämnar (för att inte sällan återkomma via google ett par minuter senare...)

Jag har full frihet att ändra innehållsstrukturen och även möjlighet att använda mig av jQuery och liknande tillämpningar. Just till de rena huvud- och direkt underliggande menyerna vill jag dock helst undvika allt för mycket avancerade upplägg på grund av dels en idag fungerande SEO på sidan som gärna får behållas men även att vissa delar i målgruppen eventuellt inte är riktigt vana eller gillar detta upplägg. Tänkte istället använda mig av den typen av lösningar (t.ex. modular tabs som du tar upp) för boxar för till exempel senast kommenterat, relaterat etc.

Tackar för länkarna - hade missat de artiklarna på SmashMag; matiga och bra inspiration!

Simma lugnt i värmen (still!)


Alla tider är GMT +2. Klockan är nu 17:34.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson