Tips voor het vereenvoudigen van uw sitenavigatie

Wat er gebeurt op projecten als het verkeerde pad eenmaal is gestart, is dat we meestal terughoudend zijn om terug te gaan, zelfs als we ons niet helemaal goed voelen over de richting waarin we ons begeven. Het probleem wint aan kracht naarmate er meer tijd of geld is geïnvesteerd in het volgen van het verkeerde pad.

Het is essentieel om die aarzeling te overwinnen. Als een slechte navigatiestructuur bruikbaarheidsproblemen met zich mee zal brengen (zoals het geval in de voorbeeldsite voor dit artikel), moeten we die verkeerde structuur herstellen in plaats van door te gaan met het ontwikkelen van de site.

Als we dat niet doen, zal het moeilijker zijn om de schade later te herstellen. Bij het ontwerpen of opnieuw ontwerpen van navigatie, moeten we onthouden dat de behoeften van de gebruiker op de eerste plaats komen.

Complexe navigatiestructuren zijn zelden noodzakelijk. We denken gewoon dat ze zijn wanneer we ze voor het eerst maken. Wat je altijd moet doen, is jezelf afvragen of er geen eenvoudiger manier is om hetzelfde doel te bereiken.

Als er een eenvoudigere manier is, moet je het gebruiken, omdat al het andere, hoe indrukwekkend het er ook uitziet, je meer zal kosten dan dat het je op de lange termijn ten goede komt. In dit artikel gebruiken we een voorbeeld van een live website om een ​​complexe navigatiestructuur te vereenvoudigen om de bruikbaarheid te verbeteren.

Stap 1: onderzoek het bestaande ontwerp

Het probleem waarmee we beginnen is dat het bestaande navigatieontwerp te ingewikkeld is. In het geval van de voorbeeldsite die we herontwikkelen voor dit project, die complexiteit scheen noodzakelijk, maar alleen omdat een betere manier niet meteen duidelijk was.

Ten eerste zal het helpen begrijpen waarom de oorspronkelijke navigatie in de eerste plaats gecompliceerd was. De onderwerpsite is een tutorialsite en het onderwerp van de tutorials is voor een nogal gecompliceerd systeem.

Omdat de site een live-emulator gebruikt van het onderwerp waarop de leerling kan leren, betekent dit dat we niet van pagina naar pagina kunnen (of zouden moeten) navigeren. We moeten inhoud weergeven door deze inline in te voegen om te voorkomen dat het systeem constant opnieuw moet worden geladen en dat de systeemstatus moet worden opgeslagen.

Navigatielinks worden daarom niet altijd omgeleid naar fysieke pagina's en de meeste worden omgeleid naar virtuele pagina's. Navigatie in dit geval kan worden beschouwd als verdeeld in lessen, hoofdstukken en onderwerpen.

De bovenste navigatiebalk is al eenvoudig genoeg, hoewel het zou kunnen doen met een bijgewerkte look. Wanneer de gebruiker voor het eerst op de site arriveert, ziet hij het menu in de linkerkolom.

De gebruiker moet een les uit dit menu kiezen voordat hij de afzonderlijke hoofdstukken en onderwerpen van de les kan zien, zoals getoond in Fig. 2.

Wat deze structuur te complex maakt, is dat er geen noodzaak hoeft te zijn om de navigatie op deze manier te splitsen (gebruiker kan geen navigatie-items op het hoogste niveau selecteren zonder een extra navigatiestap), en numerieke paginering is niet ideaal voor het selecteren van onderwerpen.

Het is echter eenvoudig om de logica te begrijpen waarom de navigatie oorspronkelijk op deze manier werd ontworpen. Het geëmuleerde apparaat werd eerst gemaakt en had een bepaalde grootte die werd bepaald door de SVG-code.

Het wijzigen van de grootte met code voordat universele volledige browserondersteuning voor de CSS3 Zoom-functie zou betekenen dat alle JavaScript-code (via 10,000-regels) zou worden gewijzigd, wat een verspilling zou zijn geweest.

Het oorspronkelijke navigatieontwerp is dus een poging om horizontale ruimte te besparen, zodat zowel de les als het geëmuleerde apparaat tegelijkertijd op het scherm passen.

Nu we de fout in de bestaande navigatiestructuur kennen, wordt het plannen van een nieuw navigatieontwerp in de volgende stap eenvoudiger.

Stap 2: Plan een nieuw ontwerp

Omdat er nu meer consistente (maar nog steeds geen uitstekende) ondersteuning is voor CSS3 Zoom in de populairste desktopbrowsers, kan het geëmuleerde apparaat worden ingezoomd tot een kleiner formaat zonder dat enorme hoeveelheden opnieuw coderen nodig zijn.

Als dit goed wordt gedaan, is links meer ruimte beschikbaar, zodat we een extra kolom in het midden hebben.

De echt voor de hand liggende verandering is dat het lichaam van de les helemaal van het navigatiegebied is verwijderd, en dat is precies zoals het zou moeten zijn.

Deze wijziging zorgt voor meer flexibiliteit in het navigatiesysteem en biedt meer ruimte voor weergave van de lesgroep.

Stap 3: Implementeer het plan

Onthoud dat elke les meerdere hoofdstukken kan bevatten en dat elk hoofdstuk meerdere onderwerpen kan bevatten. Hoe gaan we daarmee om? De eenvoudigste manier is om een ​​samenvouwbare stapel menu-items te maken. Door een les uit te breiden, worden de hoofdstukken onthuld en als een hoofdstuk wordt uitgebreid, worden de onderwerpen ervan onthuld.

Op fig. 4 ziet u de niet-uitgevouwen lijst met lessen die in het linkermenu worden getoond.

Let ook op de noodzakelijke toevoeging van een navigatieknop in het lichaam van de les. Dit is om te voorkomen dat de gebruiker altijd het navigatiemenu gebruikt om naar het volgende of vorige onderwerp in het hoofdstuk te gaan.

Dit is wat de gebruiker te zien krijgt als ze een les selecteren in het linkermenu:

Deze enigszins cryptisch ogende links zijn misschien niet zo belangrijk voor jou, maar voor iemand die traint om vlieger te zijn, spreken ze voor zichzelf. Als u de lijst naar het derde niveau uitvouwt, worden de afzonderlijke onderwerppagina's weergegeven, zoals weergegeven in fig. 6.

Naarmate de lijst met koppelingen groeit, wordt een verticale schuifbalk aan de pagina toegevoegd. We kunnen de schuifbalk aan het menu zelf koppelen door een vaste hoogte voor het menu in te stellen.

Technische dingen

Externe scripts, CSS-frameworks en lettertypen die in het bovenstaande voorbeeld worden gebruikt, omvatten:

  • Bootstrap v3.3.7
  • Font Awesome v4.7.0
  • Google Fonts: pompière, concert één, varela rond

Dit zijn geenszins de manier om iets als dit werkend te krijgen, maar ze zijn in dit project gebruikt als een manier om snel een webveilige oplossing te bereiken zonder de noodzaak van te veel codering of extra markup.

De constructor voor het menu-prototype is opmerkelijk eenvoudig als u Bootstrap als uw CSS-framework gebruikt.

Op het eerste streepjesniveau maak je een div voor het navigatiegebied (hier met de ID van "leftSide") en een class div erin om in te stellen welke eigenschappen de bevattende ruimte zou moeten hebben. In dit geval gebruiken we gewoon de standaard "well" -klasse die al is voorgedefinieerd in Bootstrap (fig. 7).

Binnen deze set voegen we op het derde streepje een paar paragrafen toe om het menu te verbergen en weer te geven (fig. 8). De weergave-eigenschappen van elk zijn belangrijk, omdat hierdoor de koppelingen kunnen werken als een tuimelschakelaar.

Zoals je kunt zien, activeert het klikken op de links JavaScript-functies om de kolom te verbergen of weer te geven. In dit geval betekent "verbergen" alleen maar het verwijderen van de inhoud en het inkrimpen van de kolom tot een kleinere grootte, zoals weergegeven in fig. 9.

Wat de functie hide doet, is dat de linkerkolom wordt verkleind tot 40px-breedte (net genoeg om het pictogram weer te geven dat nodig is om het weer naar normaal uit te breiden) en de middelste kolombreedte uitbreidt naar 50% van het kijkvenster. Weergeven laat alles terugvallen naar de oorspronkelijke staat.

Nu moeten we een container maken om de menu-items vast te houden.

Voeg vervolgens het navigatie-item toe, in dit geval het "instructies" -paneel.

Het samenvouwen voor het item wordt afgehandeld door Bootstrap's eigen CSS en JavaScript, dus alles wat we moeten doen is functies toevoegen om de inhoud van de middelste kolom te wijzigen wanneer op een item wordt geklikt (l1s1 en l1s2).

Deze worden afgehandeld door een extern script, maar voor de volledigheid getoond op fig. 12.

Terug naar het menu in ons HTML-bestand. Een regeleinde wordt toegevoegd als een eenvoudig scheidingsteken, waarna de resterende items worden toegevoegd als een reeks geneste lijsten. De initiële constructor wordt getoond in fig. 13.

Vanaf dit punt is het toevoegen van de resterende menu-items heel eenvoudig. Kortheidshalve wordt alleen de toevoeging van de eerste itemset getoond, maar de overige itemsets worden op precies dezelfde manier toegevoegd.

Alle items moeten tussen het lijstlabelpaar worden toegevoegd, zoals weergegeven.

Het volgende menu-item zou worden toegevoegd door een nieuwe regel in te voegen op regel 75 en vervolgens exact dezelfde procedure te volgen voor item T1-L2, enzovoort.

Nadat alle items (hoofdstukken) van T1-L1 tot en met T1-L6 zijn toegevoegd, voegen we een nieuwe regeleinde toe en beginnen een nieuwe lijst (als categorie T2) volgens dezelfde procedures totdat het menu is voltooid.

De laatste stap in de revisie van ons navigatiemenu is om een ​​script toe te voegen om ervoor te zorgen dat onze menu-items aanvankelijk niet-geëxpandeerd worden weergegeven.

Als uw site niet de gewenste resultaten oplevert, kan een mogelijke reden zijn dat uw navigatiesysteem complexer is dan het zou moeten zijn.

Het verminderen van de complexiteit van menu's is een belangrijke stap in de richting van verbetering van de bruikbaarheid van de site. Door het voor gebruikers gemakkelijker te maken om hun weg te vinden in complexe systemen, wordt u beloond met meer terugkerende bezoekers en mogelijk meer verwijzingen.

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.