Geschikt icoon om een menu aan te geven

[Dark Blue]

Hallo, al de hele avond ben ik mijn hoofd aan het breken over een oplossing voor mijn website.

Ik heb een vrij strakke website die eruit ziet als een ansichtkaart. De kaart is donker van kleur en heeft altijd een witte rand van 5 pixels. Content tekst is zwart en staat in witte vlakken. Dit leg ik even uit omdat ik er verder niet naar ga linken (doe dat svp ook niet als je op me reageert) maar zo hebben jullie dan toch een idee van de layout.

Nu heb ik al sinds jaar en dag onderin de hoek het woordje 'MENU' staan. Wanneer men erop klikt blijft het woordje staan en komt er een verticaal lijstje naast te staan met menuitems. Nog een keer op MENU klikken zorgt dat het lijstje weer verdwijnt.

Nu vind ik het woord MENU niet universeel genoeg. Ik wil een icoon, een afbeeldinkje, dat het woordje vervangt. Maar wat?
Het icoontje moet aangeven dat er méér is, en zodra het menu uitgeklapt is, aangeven dat er mínder is. Ik heb overwogen om gewoon een <INPUT TYPE="BUTTON"> er neer te gooien, maar dat vind ik echt te lelijk. Toch wil ik goed aangeven dat er op de knop gedrukt moet worden, want het is de enige manier om door mijn site te navigeren. Mijn platte 'ansichtkaart layout' leent zich niet voor 3D buttons of voor 3D-effecten in knoppen. Ik wil daar consistent in blijven.

Een aantal suggesties that passed my mind, maar het niet zijn geworden:
- Uitgeklapt, dit. Ingeklapt alleen een horizontale balkje (dus 1 regel hoog) met het driehoekje eraan
- Een wit vierkantje met een plus in de donkere kleur van de pagina
- Een transparant vierkantje met een witte plus
- Een pijl naar rechtsboven
- Een pijl recht naar boven: omgekeerde handeling van C|Net's download? Verwarrend dacht ik
- Deze gebruikt Palm. Omgekeerd vind ik hem wel leuk, maar zo complex! Dat moet toch simpeler kunnen?
- De 'ribbeltjes' op deze scrollbar vind ik heel leuk. Het geeft aan dat je er mee kunt interacteren... zet je muis erop en hij zal iets doen.

Ik vind het echt ruk dat ik hier zo lang aan zit, ik verpest er een avond mee. Maar ik weet dat als het resultaat goed is, dat ding voor jaren op m'n site zal bivakkeren. Ik weet dat als ik niet tevreden ben met het icoontje, het me enorm gaat jeuken en ik nog 3 weken lang elke avond zit te piekeren wat het wél kan zijn.

Wie heeft er een tip, of een voorbeeldje?

[NoepZor]

Ik zou denk ik voor de pijl gaan, staat het beste bij die witte rand en de tekst bovenaan. Anders moet je een soort van bulletlist maken met een pijltje er bij, is ook wel aardig duidelijk.

Edit: trouwens een gif plaatje van het palm icoontje

http://www.chocopoolp.com/bhajis/imgs/btn_menu.gif

[ Voor 22% gewijzigd door NoepZor op 02-05-2008 23:21 ]

[Dark Blue]

Ja, aan een bulletlist had ik ook al zitten denken. Dan heb je een soort miniatuur van je menu dat je wil gaan showen (niet realtime, gewoon een PNG )

Ik had zo'n dingetje van 20x20 pixels gefabriceerd, maar ik vond 'm niet doorslaggevend... misschien was hij ook wel te klein en te fijntjes, misschien moet ik het ding gewoon lomper maken, 50x50 pixels. Hij is alweer offline dus ik kan hem ook niet meer laten zien.

Jammere is dat frequente bezoekers van mijn site weten dat in de linker onderhoek altijd het menu zit en dus ook wel op 'wat dan ook' zullen klikken als ik het plotseling vervang. Maar nieuwe bezoekers (en ik heb wel eens over iemands schouder staan meekijken) zouden echt niet weten waar ze op moeten klikken. Het ergste zou dan zijn dat ze de site verlaten omdat hun poging om te navigeren faalde. Dat wil niemand dus laat ik dat ook niet in de hand werken.

Ik weet dat dit best wel een kwestie van persoonlijke smaak wordt, maar ik heb het topic meer geopend met de vraag van... wat is nou een goed begrijpbaar icoon voor een menu. Lastig. Moet ik er dan maar gewoon een 'start' button van maken ;') ... als we het over standaardisatie hebben?

[Bosmonster]

Die extra klik voor het menu blijft een beetje een zwaktebod imho. Persoonlijk zou ik het menu gewoon zichtbaar houden.

Als je het dan toch wilt verbergen, zet het dan achter een mouseover met een leuke fade-in ofzo. Dan kun je er ook voor kiezen om het bijvoorbeeld 10-20% zichtbaar te houden, zodat je iig weet dat er iets zit, zonder dat het je vormgeving in de war schopt.

[ Voor 95% gewijzigd door Bosmonster op 02-05-2008 23:47 ]

[Dark Blue]

Bosmonster schreef op vrijdag 02 mei 2008 @ 23:40:
Die extra klik voor het menu blijft een beetje een zwaktebod imho. Persoonlijk zou ik het menu gewoon zichtbaar houden.

Wat betreft mijn website: ja, daar zit ik nu ook weer over te denken. Ik wilde geen 'intropagina' maar tóch een helder beeld bij het binnenkomen van de site (zonder dat je gelijk allerlei keuzes opgedrongen worden). Nu overweeg ik toch weer om het menu gelijk bij binnenkomst zichtbaar te maken, dat is ook niet zo moeilijk, even 'n variabele veranderen.

Ga ik daar van uit, dan biedt dat me een hoop mogelijkheden. Namelijk, de bezoeker heeft het menu al voor zich staan. Hij kan navigeren. Mocht hij het menu een doorn in het oog vinden, dan voeg ik een knopje toe waarmee hij het naar wens kan laten verdwijnen (en terugkeren). Maar navigeren wordt nu één, naar een cleane site kijken wordt twee. Het 'doe dat menu weg' knopje hoeft nu niet meer superduidelijk te zijn, want - omgekeerd van 'dóe mij dat menu' knopje - is het niet de sleutel tot het navigeren door de site. Grote kans dat iemand weggaat van mijn site omdat hij niet navigeren kan, kleinere kans dat hij zal weggaan 'omdat dat menu zo storend in beeld staat'. Wat niet impliceert dat ik het menu dan ook maar meteen storend mag maken, haha

Okay, maar laat ik nu dit topic weer een beetje breed trekken. Wat ik hierboven zeg is dat ik voor mijn eigen site eigenlijk niet wil dat mensen constant een menu voor hun neus móeten hebben staan. In een boek staat ook niet in de kantlijn van elke bladzijde de inhoudsopgave geprint voor het geval dat je eens naar iets anders zou willen skippen. Maar, een website is geen boek, dus is dit wel te vergelijken? Je leest het niet van voor tot achter, je gaat er ook geen uren voor zitten.

Een uitrolmenu of een half-transparante hint van het menu - die vervolgens als de muis erop landt, wel volledig werkbaar is - is een mooie oplossing. 'Tze menu is waiting for you in tze background!'
(Ik heb inmiddels een crossbrowser transparency-oplossing gevonden, dus wie weet dat ik me er nog aan waag.)

Wat vinden jullie? Moet navigatie op de website áltijd volledig aanwezig zijn?
Wanneer zou je kiezen voor een hint zoals een menuknop?
Speelt je doelgroep hier ook een rol in?

Wie heeft wel eens getest met website usability?

[Fish]

waarom niet even wachten .. en na 10 seconden je menu icoon animeren en tegelijk je menu van volledig transparant naar half transparant laten gaan ?

[Dark Blue]

fish schreef op zaterdag 03 mei 2008 @ 22:18:
waarom niet even wachten .. en na 10 seconden je menu icoon animeren en tegelijk je menu van volledig transparant naar half transparant laten gaan ?

Dat kan. Doet me een beetje denken aan de ervaring dat je laptopfan uitgaat 10 seconden nadat je een zware game hebt afgesloten.

Toch vind ik het wat eng. Net op het moment dat de bezoeker is begonnen met lezen 'verandert' er iets in beeld. Hij is dan afgeleid en bang, dat hij misschien door een onwillekeurige muisklik ofzo wat in werking heeft gezet. Niet om je gelijk af te vallen hoor. Ik vind het een hele mooie oplossing. Maar hoe zou een bezoeker erop reageren? Zou het nog uitmaken of het een Flash website is (die zijn over het algemeen wat bewegelijker, zonder dat je zelf iets doet) of dat het HTML is (waarvan je verwacht dat het stilstaat als je geen poot uitsteekt).

offtopic:
Ik wil trouwens gaan afstuderen op usability, interfaces enzo. Ik denk dat ik nog een pain-in-the-ass word voor m'n teamrakkers, gnagna

[ Voor 7% gewijzigd door Dark Blue op 03-05-2008 22:24 ]

[Spockz]

Wat mij mooi lijkt is dat je een soort balkje hebt aan een kant op je ansichtkaart. Op de manier zoals bijv. IDE's dat ook hebben. En als je er op klikt dat hij in-/uitklapt.

Ik zal eens een screenshotje maken:

[ Voor 26% gewijzigd door Spockz op 03-05-2008 22:33 ]

[Fish]

je zit met usability vs mooi

Mensen zijn gewoon gewend een een centraal punt hetzij start,menu etc
In jou geval mag het niet 3d zijn maar het moet wel duidelijk zijn dat het een knop is, en dan mag er niets opstaan als menu oid ... ik denk dat je het jezelf wel lastig maakt

je zou een basic menustructuur in het plaatje kunnen zetten

[ Voor 7% gewijzigd door Fish op 03-05-2008 22:46 ]

[Bosmonster]

fish schreef op zaterdag 03 mei 2008 @ 22:18:
waarom niet even wachten .. en na 10 seconden je menu icoon animeren en tegelijk je menu van volledig transparant naar half transparant laten gaan ?

Die 10 seconden is voor de homepage bijvoorbeeld al weer veel te lang. Bij contentpagina's echter leidt het weer onnodig af. Zit je net te lezen begint er links ineens iets te animeren.

Ik denk nog steeds dat je beter het probleem kunt voorkomen (en dus een stapje terug moet doen in je ontwerpproces), dan een zelf-veroorzaakt probleem proberen op te lossen.

Wat betreft die transparantie, die kun je met de meeste libraries van tegenwoordig in 3 regels code voor elkaar krijgen en dan animeert het ook nog mooi met een fade

[ Voor 12% gewijzigd door Bosmonster op 03-05-2008 22:58 ]

[Dark Blue]

Spockz schreef op zaterdag 03 mei 2008 @ 22:28:
Wat mij mooi lijkt is dat je een soort balkje hebt aan een kant op je ansichtkaart. Op de manier zoals bijv. IDE's dat ook hebben. En als je er op klikt dat hij in-/uitklapt.

Ik zal eens een screenshotje maken:
[afbeelding]

Ja, klopt, zo'n menu zit vaak bij de instellingen van je grafische kaart zoals nvidia enzo... erg mooi! en begrijpbaar, volgens mij. Wat vinden jullie?

Bosmonster schreef op zaterdag 03 mei 2008 @ 22:57:
Ik denk nog steeds dat je beter het probleem kunt voorkomen (en dus een stapje terug moet doen in je ontwerpproces), dan een zelf-veroorzaakt probleem proberen op te lossen.

Ja... dat klopt wel. Ik zal het bij een volgende update van m'n website weer eens omdraaien: standaard staat het menu aan. de voordelen ervan had ik hierboven al beschreven.

Wat betreft die transparantie, die kun je met de meeste libraries van tegenwoordig in 3 regels code voor elkaar krijgen en dan animeert het ook nog mooi met een fade

libraries? ik hou het tot nu toe bij css en plain html, soms een stukje javascript. In welke taal zijn die libraries waar je het over hebt?
Via Google kwam ik overigens op deze: klik.

[ Voor 45% gewijzigd door Dark Blue op 04-05-2008 15:01 ]

[Fish]

dat is wel weer een beetje 3d .
het moet niet overheersen in je design .. maar wel opvallen

persoonlijk denk ik dat de meeste mensen er niets van snappen
(ik weet je doelgroep ook niet echt )

[kamerplant]

Bij "Een pijl naar rechtsboven" denk ik meer aan een "go to fullscreen" knop, ik zou daar dus niet echt voor kiezen.

[ Voor 31% gewijzigd door kamerplant op 03-05-2008 23:07 ]

[Bosmonster]

Dark Blue schreef op zaterdag 03 mei 2008 @ 23:00:
[...]

libraries? ik hou het tot nu toe bij css en plain html, soms een stukje javascript. In welke taal zijn die libraries waar je het over hebt?
Via Google kwam ik overigens op deze: http://css-tricks.com/css...gs-for-all-broswers/]klik.

JQuery of Mootools (of een van de andere tig dhtml libraries)

[RobIII]

Dark Blue schreef op zaterdag 03 mei 2008 @ 23:00:
[...]


Ja, klopt, zo'n menu zit vaak bij de instellingen van je grafische kaart zoals nvidia enzo... erg mooi! en begrijpbaar, volgens mij. Wat vinden jullie?

Die krengen zijn IMHO altijd te klein om op te klikken voor 'huist-tuin-en-keuken-surfers' en daarbij veel te onopvallend (ze staan altijd tegen de edge van de container aan).

Ik vind je site nu overigens erg lastig navigeren, ik moet nu 2x klikken om iets te bereiken; 1x menu en 1x het item. Dan zou ik nog eerder bij een hover op het menu-knop-ding-icon-wat-het-ook-wordt het menu tonen.

[ Voor 19% gewijzigd door RobIII op 04-05-2008 00:14 ]

[Spockz]

Die krengen zijn IMHO altijd te klein om op te klikken voor 'huist-tuin-en-keuken-surfers' en daarbij veel te onopvallend (ze staan altijd tegen de edge van de container aan).

Je zou hem dan altijd nog wat groter kunnen maken toch?

[Bozozo]

Het doet mij allemaal een beetje denken aan het nieuwe menu van DeviantArt. Ontzettend irritant, imo.

Als je persee je menu wilt verbergen dan zou ik gewoon een menubalk aan de bovenkant maken die wegfade of wegschuift, zoals de taskbar van Windows op 'hide'.

[Zerora]

Ik heb heel eventjes wat dingetjes zitten proberen voor je. Hopelijk heb je er iets aan.



Ik heb gewoon erg simpel gedacht om ze te creeren. Het hoeft namelijk niet moeilijk te zijn

[ Voor 22% gewijzigd door Zerora op 04-05-2008 13:07 ]

[The-Source]

^^ ligt het aan mij of is het patroon wat in het zwart zit verwerkt alleen zichtbaar als je het selecteert?

[Fish]

nueh . je moet je scherm wat lichter zetten .. of laptop scherm ff kantelen

[Makkelijk]

Ik vind de 3e van boven rechts het mooist. Pijlen maken het duidelijk dat het een knop is, mouseover erbij en dat komt goed. Ik zie dat patroon trouwens ook nauwelijks op een gecalibreerd scherm

[Dark Blue]

Bosmonster schreef op zondag 04 mei 2008 @ 00:09:
[...]


JQuery of Mootools (of een van de andere tig dhtml libraries)

Interessant, ik zal er eens naar kijken. Het is altijd leuk om te weten wat er allemaal te koop is in de wereld... al heb ik het niet dágelijks nodig.

RobIII schreef op zondag 04 mei 2008 @ 00:11:
Die krengen zijn IMHO altijd te klein om op te klikken voor 'huist-tuin-en-keuken-surfers' en daarbij veel te onopvallend (ze staan altijd tegen de edge van de container aan).

Klopft, ik vind ze ook te klein. Het leek me, als ik dat menu rechtstreeks in mijn layout zou zetten, dat niemand het meer zou vinden... want de rand is toch de rand, die is er altijd geweest en daar ga je toch niet opeens zoeken naar een menu

Ik vind je site nu overigens erg lastig navigeren, ik moet nu 2x klikken om iets te bereiken; 1x menu en 1x het item. Dan zou ik nog eerder bij een hover op het menu-knop-ding-icon-wat-het-ook-wordt het menu tonen.

Ja, dat 2x klikken hè... Ik ben zelf niet zo fan van rollovers, omdat ze bij wat spastisch muiswerk je ontschieten... en dan moet je weer over de knop hoveren. Kan er eens naar kijken, dat zeker. Het idee is wel goed namelijk.

Makkelijk schreef op zondag 04 mei 2008 @ 15:32:
Ik vind de 3e van boven rechts het mooist. Pijlen maken het duidelijk dat het een knop is, mouseover erbij en dat komt goed. Ik zie dat patroon trouwens ook nauwelijks op een gecalibreerd scherm

Het patroon van de body is dan ook heel donker ik wil niet dat het storend is tijdens het lezen. Maar met het lekkere weer buiten vind ik het nu alweer te somber, dus over een dag of twee komt er een lekker zomers kleurtje op de achtergrond! :-) Iets met Frusi kleurtjes! Het patroon van de 'kaart' is niet echt een patroon, dat is gewoon gerommel met de ruis in een webcamfoto.

De voorbeeldjes die Rakkerzero had gemaakt, had ik op papier ook al getekend en een paar ervan had ik ook in Photoshop gemaakt. Geweldig dat je zo meedenkt, en dat we dan ook nog op praktisch hetzelfde uitkomen! Nouja, had ik ook al wat gezegd. Maar je inspanningen zijn zeker niet zonder gevolg; soms moet je iets even digitaal voor je zien ipv op papier, en dat zie ik nu wel - ik ga gewoon weer het woordje menu gebruiken.

Intussen ben ik al onderwater aan een nieuwe template bezig, maar het is zo lekker warm dat ik meer in de achtertuin zit te schetsen dat ik ook echt wat uitvoer met de code. Ik heb alweer wat ideetjes, wil het resultaat ook hier nog wel laten zien... maar als het topic verder doodbloedt, so be it; ik wil echter nog wel eens wat vaker met jullie wat van ideeën wisselen over usability... in een ander, breder topic, dat minder op een sitecheck uitloopt

[ Voor 17% gewijzigd door Dark Blue op 04-05-2008 16:02 ]

[Makkelijk]

oww dat patroon is alleen donker in het bericht van rakkerzero, zal wel een photoshop kleurding zijn ofzo

[Dark Blue]

Makkelijk schreef op zondag 04 mei 2008 @ 16:03:
oww dat patroon is alleen donker in het bericht van rakkerzero, zal wel een photoshop kleurding zijn ofzo

Het kan er misschien ook aan liggen dat ik tegenwoordig zelf vanaf een laptop werk en dat patroontje rond middernacht gemaakt is. Overdags zie je er dan vaak geen hout meer van.

[Lawrentium]

Je kan ook icoontjes gebruiken van bijvoorbeeld Gnome of KDE themas gebruiken (linux desktop omgevingen). Deze zijn meestal vrij te gebruiken. Kijk hier eens:
- http://gnome-look.org/
- http://kde-look.org/
- http://art.gnome.org/

Er is nog veel meer te vinden op andere thema sites voor:
- Gnome
- KDE
- XFCE

[Dark Blue]

Ja, dat is eigenlijk iets dat ik nog niet genoemd heb. Mijn site leent zich er niet zo voor (te plat, compact) maar als ik weer eens een grotere site voor een brede doelgroep zou bouwen zou ik iconen zeker overwegen. En dan zijn de 'onbekendere' iconen goed te gebruiken. Windows iconen lenen zich er minder voor vind ik persoonlijk, omdat je bezoeker dan het idee krijgt dat jij zo graag een Windows interface wilde nabouwen (want al je bezoekers zijn vást Windows users) bovendien zijn er tegenwoordig veel nare popups en banners die hopen iemand om de tuin te leiden met zo'n familiaire look.
Trouwens, als ik al de interface van een OS zou willen gebruiken, dan zou dat in eerste plaats van Apple zijn, omdat je daar nog een stevig boek over kunt lezen wát wánneer hóe uitgelijnd moet worden. Ik vind de iconen van Linux-thema's een goede tweede dan. En vrij om te gebruiken!

[NoepZor]

BTW, Rakkerzero heeft aardig uitgesoept wat ik bedoelde met de bullet list Maar zo'n fadend menu lijkt me inderdaad ook wel grappig voor je site.