Waarschijnlijk heb je de begrippen

WEB DESIGN

HOOFDSTUK 9 User Interface Design

9.0 Interface en Interactive Design, waar ligt het verschil?

Interface design Interface design omvat de presentatie, lay-out, opmaak en het visueel ontwerp van alle onderdelen die op het scherm komen inclusief de interactieve onderdelen. Het visueel ontwerp, speelt een grote rol in de gebruikersvriendelijkheid van de interface. Zien de knoppen er klikbaar uit? Zijn de knoppen en interactieve widgets op logische plekken geplaatst, waar gebruikers deze ook verwachten? Zijn de navigatie onderdelen visueel te onderscheiden van de rest en zijn deze als groep op een aparte plek, gescheiden van de inhoud, geplaatst?

W

aarschijnlijk heb je de begrippen “interactive design” en “interface design” eerder in Web gerelateerde gesprekken gehoord en ging je er vanuit dat beide begrippen hetzelfde betekenen. Er is echter een verschil in betekenis en het is van belang wanneer je een gebruikersvriendelijke Web- of mobiele site wilt maken, dat je de goede gewoontes van beide combineert.

Interaction design Kort gezegd draait het in interaction design om de navigatie van punt A naar punt B. Je zoekt de beste manier om een gebruiker te laten navigeren en een doel te bereiken met behulp van van widgets zoals knoppen, menu’s, schuifbalken en dergelijke. Neem bijvoorbeeld een website waar je boeken kunt vinden. Heeft de ontwerper van de website gekozen voor een uitgebreide zoekfunctie of een aantal vervolgkeuzelijsten en filters? Of kun je uit beide opties kiezen?

In dit hoofdstuk zullen we een aantal technieken voor het ontwerpen van jouw Web pagina’s bespreken zodat het eenvoudiger voor jouw gebruikers wordt om te navigeren op de site. Dit proces begint met het plannen op pagina niveau en zal eindigen met het maken van geschikte visuele ontwerpen.

9.1 Plannen op Pagina niveau In hoofdstuk 8 heb je geleerd hoe je en volledige sitemap kunt maken waarin alle pagina’s van jouw

Figuur 9-1: Een wireframe is op een diagram lijkende tekening die het plan van de inhoud, de interactie en de navigatie van een web- of mobiele site weergeeft

67

© 2012 Excel With Business

WEB DESIGN website te zien zijn. De volgende stap is het inzoomen op elk blok van de sitemap dat naar een pagina refereert en deze opvullen met details over de inhoud zoals de interactieve en navigatie elementen die zij zullen bevatten.

Wat zijn wireframes? Om voor elke pagina het ontwerp van de inhoud en interactie van te voren te plannen kun je een “wireframe” maken, een tekening dat op een diagram lijkt. Zoals je in figuur 9-1 kunt zien, lijkt een wireframe meer op een blauwdruk van een architect dan op een web pagina. Sterker nog, een wireframe met minder opmaak dat saaier oogt zal waarschijnlijk de boodschap beter overbrengen. Als je namelijk aan een klant een wireframe laat zien die er te gelikt uit ziet dan zal de klant het verwarren met een visueel ontwerp en zich niet richten op de inhoud van de pagina en de interactieve onderdelen. En het laatste is nou juist waar de wireframe aandacht op moet vestigen.

Richt je op het maken van sjablonen van unieke pagina’s Maak je geen zorgen als je aan een tamelijk grote website werkt. Je maakt namelijk alleen een wireframe voor elke unieke pagina lay-out. Deze lay-outs worden jouw pagina sjablonen. Het is niet vreemd om slechts 20 tot 25 unieke sjablonen te maken voor een site die meer dan 500 pagina’s telt. Een eCommerce site bijvoorbeeld, verkoopt honderden producten. Al deze producten hebben elk een pagina met daarop aangegeven de prijs, afbeeldingen van het product, recensies van klanten en specificaties. Al deze pagina’s kunnen samengevat worden met slechts één “product informatie” sjabloon. Alle gegevens en afbeeldingen die behoren tot een specifiek product zijn opgeslagen in een database genaamd CMS (content management system) en worden in het sjabloon geplaatst om zo een unieke pagina voor elk product te maken. Het is dus aan jou de taak om te bepalen hoe de pagina’s in de sitemap omgezet kunnen worden in unieke pagina sjablonen zodat je jouw wireframe alleen op deze sjablonen richt. Deze sjablonen krijgen zoals je in de onderstaande lijst kunt zien vaak namen mee als “Landingspagina 1” of “Landingspagina 2”

68

HOOFDSTUK 9 User Interface Design 1. Thuispagina 2. Landingspagina 1 3. Landingspagina 2 4. Landingspagina 3 5. Lijstpagina 1 6. Lijstpagina 2 7. Pagina met details 1 8. Pagina met details 2 9. Vestigingen 10. Bestel geschiedenis 11. Wachtwoord herstellen 12. Registreren 13. Klantenservice 14. Winkelmandje 15. Facturering/Verzending 16. Betalen van order 17. Bevestigen van order 18. Algemene voorwaarden/Privacy policy In Figuur 9-2 kun je zien dat je op je sitemap naast de reeds gebruikte nummering een code kunt gebruiken om aan te geven welk sjabloon elke pagina zal gebruiken. Een aantal website ontwerpers geven meerdere identieke pagina’s met hetzelfde sjabloon aan door de blokken op te stapelen. Het achterliggende idee is echter hetzelfde: zoek om een schaalbare website te maken de pagina’s die zich lenen voor een sjabloon en bouw de rest van de website hier uit op.

Weergeven van inhoud en navigatie Je kunt wireframes zien als een waslijst van wat allemaal op een pagina komt te staan. Denk hierbij aan inhoud, interactieve onderdelen en het navigatiegedeelte. Deze geven aan hoeveel en welke inhoud er in elk copy element geplaatst moet worden, zodat de content schrijvers weten wat ze moeten schrijven. Ze geven ook aan de ontwerpers aan wat voor soort form elementen en vervolgkeuzelijsten de pagina gebuikt. In Figuur 9-1 maakt de bovenste


WEB DESIGN


Figuur 9-2: Dit figuur geeft aan welk sjabloon elke pagina gebruikt door rechtsboven een code weer te geven. Je kunt een sectie waarbij dezelfde sjabloon voor meerdere pagina’s wordt gebruikt ook aangeven door meerdere blokken op elkaar te stapelen in plaats van slechts een enkel blok weer te geven.

sectie van de inhoud, gebruik van een zogeheten “accordion” interface zodat een hoop verschillende berichten in hetzelfde gebied kunnen worden weergegeven. Alle onderdelen op een wireframe zijn meestal genummerd zodat informatie designers naar deze nummers kunnen refereren met gedetailleerde notities in de rechter marge. Deze notities worden “annotaties” genoemd. Het team van ontwikkelaars kan met zo’n uitgebreide blauwdruk aan de slag gaan om alle pagina’s te bouwen. Een belangrijk verschil waar rekening mee gehouden moet worden is dat de wireframe niet gelijk staat aan de lay-out. Het gebeurt maar al te vaak dat ontwerpers zich gelimiteerd voelen door een wireframe en dat zij binnen de randen van deze wireframe blijven werken. Dit is niet het geval. Het doel van de wireframe is om alle onderdelen, de manier waarop interactie wordt geboden en hoe belangrijk ieder element relatief gezien is aan te geven. De taak is nu aan de grafisch ontwerper om

69

met creatief talent een visuele lay-out te creëren waar al deze elementen in terug te zien zijn.

9.2 De rol van het visueel ontwerp in de gebruikersvriendelijkheid Het kiezen welke widgets je gaat gebruiken en wat voor soort navigatie ontwerp de beste browse ervaring geeft is deels logica en deels boerenverstand. Het visuele ontwerp en de lay-out van de verschillende elementen op de site is wat er voor zorgt dat een site gebruikersvriendelijk is. Vergelijk ter illustratie de twee formulieren in Figuur 9-3. Formulier A toont een registratie formulier voor nieuwe klanten maar, is erg lang en chaotisch. Formulier B daarentegen bevat dezelfde elementen maar het is zodanig gerangschikt dat de pagina niet alleen meer uitnodigt om te registreren maar ook handiger in gebruik is.


WEB DESIGN


Figuur 9-3: Deze twee formulieren bevatten dezelfde elementen. Bij Formulier A ontbreekt een logisch visueel ontwerp waardoor deze minder visueel aantrekkelijk oogt en minder eenvoudig te gebruiken is dan Formulier B.

Affordances: Functies van objecten suggestiever maken

dat knoppen waar niet op gedrukt kan worden niet dezelfde visuele metamorfose krijgen zodat de gebruikers niet op deze knoppen proberen te drukken.

Auteur Donald Norman schrijft in zijn boek “The Design of Everyday Things” dat we allemaal weten hoe we bijvoorbeeld een deurknop kunnen gebruiken dankzij de vorm, het visueel ontwerp en de plaatsing. Een goed ontwerp impliceert de oorspronkelijk bedoelde functie. Visuele aanwijzingen en hints die ons helpen met het navigeren van het Internet worden ook wel “affordances” genoemd. Figure 9-4: Voici un exemple de différentes

Bekijk Figuur 9-4. Kun jij raden welke elementen interactief zijn? Hoe zou jij met een interactie met deze elementen aangaan?

Het leveren van visuele feedback

Wanneer gebruikers sites navigeren hebben ze graag een idee waar ze precies zijn. Daarnaast willen ze graag weten als ze een bepaald manières de présenter les mêmes mots pad op de site volgen hoeveel tijd pour différencier un contenu interactif Het is belangrijk om wanneer d’un contenu non-interactif. het gaat kosten. Om deze vragen je gebruiksinterfaces aan het te beantwoorden, kun je jouw ontwerpen bent de knoppen waar interface op de volgende manier laten terugkoppelen op gedrukt kan worden te onderscheiden zijn van om de gebruiker te laten weten waar hij of zij precies de knoppen waar niet op gedrukt kan worden. is. Knoppen, kiesschijven en vervolgkeuzelijsten zullen een visuele metamorfose moeten ondergaan die aangeeft hoe gebruikers een interactie met deze kunnen aangaan. Moeten ze met de muis klikken, met de muis slepen of met hun vingers knippen? Het is overigens net zo belangrijk om er voor te zorgen

70

Geef de gebruikte navigatie aan door middel van highlights Wanneer een gebruiker een keuze heeft gemaakt tussen de navigatie mogelijkheden dan is de beste


WEB DESIGN


optie deze navigatie keuze te onderstrepen, om te laten weten waar de gebruiker zich bevindt ook al gaat het om iets kleins als een vervolgkeuzelijst. De website in Figuur 9-5 maakt het duidelijk voor de gebruiker in welk deel van de website hij of zij zich op het moment bevindt.

Progress trackers Progress trackers zoals in het voorbeeld in Figuur 9-5 zijn regelmatig in verschillende websites terug te zien om de gebruiker visuele feedback te geven over waar de gebruiker zich bevindt, in een lineair proces. Denk hierbij aan het bestellen van een product of het aanmelden voor een dienst. Progress trackers lijken verdacht veel op de “broodkruimel navigatie” methode die je terug kunt zien in het voorbeeld in Figuur 9-6 maar, er zijn twee belangrijke verschillen: • Geen interactie. Het is niet mogelijk om een interactie aan te gaan met de progress trackers. Je kunt niet op deze klikken om ergens anders naar toe te gaan, zoals je met de broodkruimel navigatie wel kan. Het is puur een visueel element. • Weergave van volledige voortgang. De progress tracker geeft het gehele lineaire proces van begin tot eind aan en markeert de stap waar jij je nu bevindt. De broodkruimel navigatie methode werkt hetzelfde als het achterlaten van een spoor. Het eindigt bij de pagina waar je je nu bevindt en laat de pagina’s zien die vooraf gingen.

Consistentie Wanneer een gebruiker voor het eerst een website

Figuur 9-5: Een progress tracker is een voorbeeld van een visueel feedback systeem dat een lineair proces weergeeft en markeert waar de gebruiker zich op het moment bevindt. Progress trackers zijn niet interactief.

bezoekt zal hij of zij eerst rondkijken om bekend met de site te raken. Hopelijk heeft de gebruiker het visuele ontwerp en de navigatiestrategie snel door, zodat deze verder kan met het zoeken voor hetgeen waarvoor de gebruiker aanvankelijk op de website gekomen is. Nadat de gebruiker de tijd heeft genomen om de interface te begrijpen, wilt hij of zij hier geen tijd meer aan verspillen. De interface laag, moet dus “transparant” worden zodat op de inhoud geconcentreerd kan worden. De beste manier om een interface laag doorzichtig te maken voor de gebruiker, is om te zorgen dat deze altijd constant blijft. Wanneer je een visuele taal hebt ontwikkeld voor elementen waar op geklikt kan worden en elementen waar geen interactie mee mogelijk is, houdt het dan ook bij alleen deze taal en verander niet. Houd daarnaast de navigatie telkens in dezelfde omgeving, zowel in de thuispagina als in de pagina die het verst in de hiërarchie van de website gelegen is.

9.3 Basis beginselen van het grafisch ontwerpen Websites zijn voor het overgrote deel gebouwd volgens een lay-out strategie die ook wel het “grid systeem” genoemd wordt. Een grid systeem verdeelt de pagina in geordende rijen en kolommen. Het is

Figuur 9-6: Een broodkruimel navigatie systeem geeft aan waar de huidige pagina zich bevindt in de hiërarchie van de pagina index, maar dit hoeft niet perse het pad te zijn dat de gebruiker gevolgd heeft om op deze pagina uit te komen. In dit geval kunnen gebruikers klikken op Products of op Handbags, om naar deze delen van de website te gaan die zich op een hoger niveau in de navigatie hiërarchie bevinden. Op de laatste pagina uit het lijstje, “Lous Vuitton Palermo”, kan niet geklikt worden. Dit is de naam van de pagina waar de gebruiker zich nu bevindt.

71


WEB DESIGN niet gebruikelijk om een pagina, zoals in Figuur 9-7 wordt getoond, te vinden waarbij de inhoud lukraak over de pagina is verspreid of dat de inhoud diagonaal wordt weergegeven. Een grid systeem is niet alleen gunstig omdat HTML en CSS hierop gebaseerd is maar ook wij als gebruiker verwachten tegenwoordig deze structuur. Wij als gebruiker prefereren een structuur dat opgebouwd is volgens het grid systeem. Dit maakt het makkelijk voor ons om de site te ontcijferen. Daarnaast weten we dan waar we ons op moeten richten en herinneren we, waar alles gevonden kan worden.

Een visuele hiërarchie opbouwen Het is uiterst belangrijk om uit visueel oogpunt duidelijk de prioriteit van elementen te


Figuur 9-7: Deze website is gebouwd met behulp van Adobe Flash. Flash stelt ontwerpers in staat om af te wijken van het grid systeem dat de voorkeur geniet van HTML en CSS. Het afwijken van het grid systeem kan echter voor gebruikersvriendelijkheid problemen zorgen. De vernieuwde website van dit bedrijf maakt wel gebruik van het grid systeem. © The Seen, www.theseen.biz id.

onderscheiden, zodat de gebruiker weet waar hij of zij moet beginnen. Een pagina waar alles even relevant is dwingt de gebruiker om automatisch de pagina van boven naar beneden en van links naar

Figuur 9-8: Welke pagina lay-out helpt het best, met het kunnen herkennen welke onderdelen van de inhoud belangrijker zijn?

72


WEB DESIGN rechts (in het geval van Westerse gebruikers) door te nemen. Vergelijk de twee diagrammen in Figuur 9-8. Beide figuren hebben hetzelfde aantal elementen maar het figuur rechts geeft visuele hulp aan gebruikers en geeft aan waar zij moeten beginnen of hun aandacht op moeten vestigen. Het diagram verdeelt de pagina ook in drie onderdelen ten behoeve van de aandachtspunten. Door de pagina in drie delen op te breken – groot, gemiddeld en klein – wordt zelfs een pagina met veel inhoud een stuk makkelijker om door te lezen. Dit wordt ook wel de “big, medium, small” strategie genoemd. Als je de website van Apple, Apple.com, bezoekt zul je deze groot, gemiddeld, klein strategie overal op de site en op de perfecte manier uitgevoerd zien. Door het aan elkaar groeperen en nesten van inhoud kom je een heel eind met het gebruikersvriendelijker maken van jouw website.

Groeperen en nesten Een pagina opdelen in verschillende secties waarin je inhoud groepeert, maakt de website niet alleen leesbaarder. Door inhoud en interactieve

HOOFDSTUK 9 User Interface Design elementen te groeperen en te nesten kun je sterke hints over hun werking achterlaten. Zoals wordt geïllustreerd in Figuur 9-9 kan het groeperen van een aantal simpele interface elementen die er ongeveer hetzelfde uitzien in één grafisch onderdeel ervoor zorgen dat deze elementen er klikbaar uitzien, ook al zien de elementen er op zichzelf niet klikbaar uit. Figuur 9-9 laat ook zien hoe je verbanden tussen inhoud kunt illustreren door inhoud te nesten. Omdat Shoes en Socks onder het kopje Products vallen, weet je dat deze onderdelen zijn van Products en niet van andere secties van een hoger niveau.

UKleurgebruik De meeste bedrijven maken gebruik van merkgerelateerde stilistische richtlijnen die aangeven welke kleuren je ziet op hun website. Hieronder volgt een aantal richtlijnen waar je rekening mee moet houden wanneer jij, je eigen gebruikersinterface ontwerpt: • Lichte en donkere kleuren. Pagina’s die te wit of te donker zijn kunnen moeilijk leesbaar zijn op een computer scherm. Daarnaast geven sommige PC monitoren pagina’s donkerder weer, dan volgens jouw ontwerp. Kies alleen als je heel erg weinig tekst op je pagina hebt voor een lichte kleur tekst op een donkere kleur. In alle andere gevallen levert dit een dramatisch effect op omdat een witte tekst op een donkere ondergrond pijn doet aan de ogen. Als je veel inhoud op jouw pagina wilt weergeven, is het beter om te kiezen voor een lichte achtergrond en een donkere kleur voor de tekst. • Verzadiging. De verzadiging van een kleur, geeft aan hoe rijk en helder een kleur is. Mocht je bekend met Microsoft Excel zijn, de standaard kleuren die Excel gebruikt zijn allen sterk verzadigd. Vermijd het gebruik van kleuren die erg verzadigd zijn voor je achtergrond of inhoud. Deze kleuren hebben de neiging om op te vallen op het computerscherm maar zijn lastiger te lezen. Daarnaast zijn deze kleuren niet al te gemakkelijk voor de ogen.

Figuur 9-9: Deze tekst elementen zonder opmaak, maken overduidelijk deel uit van een navigatieblok. Dit is op te maken uit de manier waarop deze gegroepeerd zijn en deze visuele eigenschappen hebben. Omdat de elementen genest zijn, weten we dat Shoes en Socks subpagina’s zijn onder de pagina Products en zich niet op hetzelfde niveau vinden als Locations en Support.

73

• Kleur van de tekst. Persoonlijk gebruik ik nooit puur zwart en nauwelijks puur wit voor grote copy blokken. In plaats van zwart, kies ik dan een donker grijs of een gebroken wit om de uitstraling van de tekst minder hard te maken waardoor het minder pijn doet aan de ogen. © 2012 Excel With Business

WEB DESIGN


Figuur 9-10: Deze website maakt gebruik van een uitstekende balans tussen lichte en donkere kleuren en een variatie van verschillende fonts waardoor de pagina er goed verzorgd uitziet en eenvoudig te lezen is.

Het gebruik van fonts Een font heeft een hoop persoonlijkheid dus wees voorzichtig bij het kiezen van een font. Zorg ervoor dat je de juiste fonts kiest voor jouw website. Net als je eerder bij het kiezen van een geschikt kleurenpalet hebt gedaan zul je met beleid een font uitzoeken. Kies een aantal verschillende fonts om je website extra levendig te maken maar, kies niet te veel verschillende fonts, anders ziet jouw site er te schizofreen uit.

NEXT volgende

74

Zoals in Figuur 9-10 geïllustreerd wordt, kun je een font voor de titels, een font voor de opschriften en een font voor de rest van de tekst gebruiken. Daarnaast laat dit figuur ook een goede verdeling zien van lichte en donkere kleuren waardoor depagina eenvoudig te lezen is en netjes oogt.

Hoofdstuk 10 Presentatielaag Design


Waarschijnlijk heb je de begrippen

Recommend Documents