Navigatie binnen een website bestaat hoofdzakelijk uit 4 onderdelen
- Het hoofdmenu
- Submenu's
- Hyperlinks
- Zoek functie
Je bent op het web aan geen enkele regel gebonden qua vormgeving. Maar wil je dat iedereen de website makkelijk kan gebruiken, dan is de beste optie om vaste goede patronen te gebruiken. We nemen ze per onderdeel door.
Het hoofdmenu
Ten eerste is het hoofdmenu groot en duidelijk. Er ligt meer nadruk op dan andere interface elementen. De hoofd navigatie moet ook uitstralen dat de gebruiker er iets mee kan doen.
Voorbeeld: De huisstijl van een bedrijf bestaat uit gekleurde bollen. Iemand heeft het geniale plan om de bollen te gebruiken als hoofd navigatie waardoor het onderstaande menu ontstaat.
Helaas is het nu voor niemand duidelijk dat je op die bollen kunt klikken. Je moet altijd in de gaten houden dat iets wat voor jou duidelijk is, misschien niet zo duidelijk hoeft te zijn voor iemand anders.
Omdat de bollen niet ondersteund worden door tekst ziet het er meer uit als een stijlelement. Mensen verwachten tekst in de hoofd navigatie. Hetzelfde geldt ook voor iconen. Deze werken als hoofd navigatie beter als ze ondersteund worden door tekst.
Een algemeen navigatie punt: Verander de staat van een menu item of link als je er met je muis overheen gaat. Onderstreep de hyperlink, of haal de streep juist weg. Verander de kleur van de tekst of de achtergrond kleur. Voeg een stijl element zoals een pijltje toe. Het maakt niet zoveel uit wat er gebeurd, als er maar iets gebeurd en de tekst leesbaar blijft.
Zorg ook dat de muis cursor veranderd. Bij voorkeur in het wijzende vingertje. Dit gebeurd niet altijd als javascript wordt gebruikt voor de navigatie. Dit is makkelijk te verhelpen met CSS:
selector{
cursor: pointer;
}
cursor: pointer;
}
Het is tegenwoordig populair om je menu op te bouwen met een Unordered List, de <ul> tag in html. Deze bevat meerdere <li> elementen waarin de <a> elementen staan waar de uiteindelijk link op gedeclareerd is. Geen probleem, dit is een mooie oplossing. Alleen worden deze menu's soms op de verkeerde manier gestyled met CSS. Een voorbeeld:
De achtergrond en tekstkleur veranderen als je over een item heen gaat. Het lijkt erop dat je in het linkse plaatje hieronder al op het item kunt klikken. Dit is alleen niet het geval. Je kunt alleen op de tekst klikken (rechter afbeelding). Teveel van de stijl van het hoofdmenu item wordt gedeclareerd op de <li> tag in plaats van de <a> tag. Daardoor is niet het hele vlak een link.
Gebruik de <li> tag om de plaatsing van de <a> tags te regelen. Declareer het uiterlijk van het menu in de <a> tags. Een voorbeeld in CSS:
.menu li{
float: left;
}
.menu li a{
padding: 10px;
color: #000;
}
.menu li a:hover{
color: #fff;
background: #000;
}
float: left;
}
.menu li a{
padding: 10px;
color: #000;
}
.menu li a:hover{
color: #fff;
background: #000;
}
Door padding op <a> elementen te plaatsen heb je een groter gebied om te klikken. En het voordeel van de :hover pseudo-class declaratie op het <a> element; het werkt ook in Inter Explorer 6. Daar werken :hover declaraties niet op andere elementen.
Omdat deze post nu al veel te lang is, splitsen we ook deze op. In de toekomst nog meer over navigatie.
Posts
Geen opmerkingen:
Een reactie posten