Functioneel ontwerp. Navigatie

Transcriptie

1 Functioneel ontwerp Het functioneel ontwerp bestaat uit de volgende onderdelen: 1. Navigatie 2. Lijst van alle pagina s 3. Paginaontwerp 4. Formulierontwerp 5. Grafisch ontwerp Navigatie Navigatie wordt op een aantal manieren weergegeven: 1. Menu 2. Belangrijke items op home-pagina 3. zoeken 4. breadcrumbs 5. sitemap Het menu is van de bovengenoemde navigatiemogelijkheden de belangrijkste en zorgt voor de informatiestructuur van een website. Beperk het menu tot zeven plus of min twee hyperlinks. Zorg er verder voor dat de menustructuur er op elke pagina hetzelfde uitziet en zorg ervoor dat op elke pagina de home-pagina met één klik bereikbaar is. Zorg er tot slot voor dat een pagina met één klik of met twee klikken bereikbaar is. De organisatie van de informatiestructuur is vaak hiërarchisch, dat wil zeggen van grof naar fijn. Daarom kan een menu in de vorm van een boomstructuur worden weergegeven: Maak deze structuur niet te breed en vooral niet te diep. Geef de menuonderdelen logische en duidelijke namen. Gebruik dus niet termen als mailform of lijst met producten. Mailform is een technische term en moet dus vervangen worden door een duidelijker term. Lijst met producten kan Producten worden. Vermijd ook te lange namen. Standaard staat Home altijd als eerste. Geef in de beschrijving van het menu weer wat voor menu s gebruikt gaan worden: Horizontaal of verticaal met of zonder horizontale of verticale uitklapmenu s. Belangrijke items komen op de hoofdpagina: Dat kan nieuws zijn, acties die op dat moment lopen. Zet op de hoofdpagina geen welkomstboodschap en ook geen uitleg over de site. Als dat nodig is, spreekt de navigatiestructuur van de website niet voor zich. Applicatieontwikkeling: project functioneel ontwerp p.1 uit 5 versie 1.0

2 Een zoekfunctie kan een belangrijk navigatiemiddel zijn. Deze functie staat meestal rechtsboven op de pagina, met name op de hoofdpagina. Zet deze functie niet onder een knop. Breadcrumbs (broodkruimels) zijn er in eerste instantie om de gebruiker te laten weten waar hij zich op de website bevindt. Door van de hogere niveaus hyperlinks te maken kan het tevens dienen als navigatiemiddel. De sitemap is eigenlijk de index van een website. Op één pagina staan de trefwoorden van de website in de vorm van hyperlinks, zodat de gebruiker met één klik naar het onderwerp van zijn keuze kan gaan. Lijst met pagina s Maak vervolgens een lijst van alle pagina s die op de website komen en zet erachter of de pagina een formulier bevat of niet, wat de functie van een pagina is en of een afwijkend paginaontwerp noodzakelijk is. Een functie kan zijn: Het geven van informatie over een type broodrooster. Een andere functie kan zijn: Het opvragen van de adresgegevens van een klant. Een dergelijke lijst ziet er als volgt uit: Naam pagina Formulier Functie Afwijkend paginaontwerp Hoofdpagina nee Belangstelling voor de website en voor de nee producten opwekken Productenpagina nee Toont lijst met producten waaruit de klant nee een keuze kan maken Bestelpagina ja Klant kan product bestellen nee Paginaontwerp Maak eerst een vlekkenplan dat op de meeste pagina s van de site van toepassing is. Een vlekkenplan geeft de plaats weer van de verschillende onderdelen van een pagina. Die onderdelen kunnen zijn: 1. Logo 2. Naam en / of tagline 3. Menu en eventueel submenu s 4. Breadcrumbs 5. inhoud 6. zoekfunctie Een vlekkenplan kan er als volgt uit zien: Applicatieontwikkeling: project functioneel ontwerp p.2 uit 5 versie 1.0

3 Logo Tagline Zoeken Breadcrumb trail Menu Inhoud Dit is een voorbeeld. Het is mogelijk dat je in de praktijk juist meer of juist minder functies nodig hebt. Na deze standaardpagina, maak je op dezelfde wijze de indeling voor de pagina s met een afwijkend ontwerp (zie de lijst met alle pagina's). Probeer deze zo veel mogelijk aan de standaardindeling aan te passen. Voorkom bij dynamische pagina s dat deze te lang worden. Stel een grens vast van bijvoorbeeld 20 items per pagina. Probeer zo veel mogelijk de indeling van de statische pagina s te volgen en probeer uitzonderingen zo veel mogelijk te voorkomen. Formulierontwerp Een formulier op internet is een pagina, waar de bezoeker gegevens kan invullen. Veel mensen vinden het moeilijk een formulier in te vullen. Maak het hen dus zo eenvoudig mogelijk: o Maak een strak en overzichtelijk ontwerp o Maak een formulier aantrekkelijk o Geef duidelijk weer welke velden verplicht ingevuld moeten worden o Zet gegevens die bij elkaar horen, bij elkaar en breng visueel scheiding aan tussen groepen gegevens o Maak niet te grote formulieren. Zij gaan er al snel ingewikkeld uitzien. Verdeel liever het formulier over verschillende pagina s o Maak eventueel dynamische formulieren waarin vragen die niet ter zake doen, worden weggelaten Maak ook van elk formulier eerst een ontwerp, waaruit duidelijk blijkt welke besturingselementen worden gebruikt en welke velden verplicht moeten worden ingevuld. Dat wordt meestal met het teken * aangeduid. Applicatieontwikkeling: project functioneel ontwerp p.3 uit 5 versie 1.0

4 In het bovenstaand formulier zijn gegevens duidelijk visueel gescheiden. Verder zijn de besturingselementen in kolommen geordend en in een kolom van dezelfde grootte. Dat geeft een rustig beeld. Tot slot is er van vier besturingselementen gebruikt gemaakt: Tekstvak, combobox en radioknoppen en onderaan twee drukknoppen. Die laatste besturingselementen geven de bezoeker de mogelijkheid door te gaan of toch nog de bestelling ongedaan te maken. Ondanks dat de database onder water gebruik maakt van bestelnummers en klantcodes, zijn deze niet zichtbaar op de pagina. De bezoeker wordt dus niet met ingewikkelde codes lastiggevallen, ook niet in de comboboxen. Grafisch ontwerp Het grafisch ontwerpen van een website is moeilijk. Er zijn wel een aantal aanwijzingen te geven: Gebruik op het beeldscherm schreefloze letters. Deze zijn makkelijker te lezen dan letters met een schreef. Op papier kun je wel letters met een schreef gebruiken. Zorg voor voldoende contrast tussen voor- en achtergrondkleur. Rood op zwart is moeilijk te lezen. Voor (deels) kleurenblinden zijn bijvoorbeeld de kleuren groen en rood niet goed te onderscheiden. Maak bij teksten gebruik van een rustige achtergrond. Maak teksten niet te breed. Te brede teksten lezen moeilijk. Lijn teksten links uit. Onderstreep alleen hyperlinks. Dat is de bezoeker van de site gewend. Zorg voor voldoende ruimte rondom teksten. Applicatieontwikkeling: project functioneel ontwerp p.4 uit 5 versie 1.0

5 Het gebruik van afbeeldingen kent zowel voor- als nadelen. Het is vaak een afweging die gemaakt moet worden tussen de voor- en nadelen. Voordelen Afbeeldingen kunnen heel goed lange teksten verlevendigen en zeggen vaak meer dan 1000 woorden. Met afbeeldingen kun je heel goed de aandacht op iets richten. Dezelfde afbeelding op meerdere pagina s gebruiken zorgt alleen bij de eerste pagina voor vertraging. Als er gebruik wordt gemaakt van alt, dan is de afbeelding ook voor visueel gehandicapten toegankelijk. Nadelen Afbeeldingen vragen meer tijd om te downloaden dan alleen tekst. De meeste afbeeldingen zijn tegenwoordig in kleur, maar niet iedereen heeft een grafische kaart die 16 miljoen kleuren kan weergeven. Niet iedereen gebruikt een resolutie van 1280 pixels. Afbeeldingen zijn niet schaalbaar. Dat betekent dat een visueel gehandicapte de tekst in een afbeelding niet kan vergroten. Een aantal vuistregels: De vormgeving moet de doelgroep aanspreken Zorg voor snelheid. De bezoeker is over het algemeen ongeduldig. Zorg voor een duidelijke navigatie. De techniek is ondergeschikt aan de ervaringen van gebruikers. Beschrijf in het grafisch ontwerp welke voor- en achtergrondkleuren welke lettertypen worden gebruikt. Maak voor de opdrachtgever een prototype Dat is een niet werkende pagina die alleen gemaakt is om het uiterlijk te laten zien- die op verschillende resoluties te bekijken is en laat hem commentaar geven op het prototype. Pas vervolgens het prototype aan. Applicatieontwikkeling: project functioneel ontwerp p.5 uit 5 versie 1.0