InfoNu.nl > Pc en Internet > Programmeren > Het bouwen van een beter webdesign

Het bouwen van een beter webdesign

Het bouwen van een beter webdesign Jaarlijks houdt Microsoft een grote conferentie, in een congreshal. Hier geven guru’s uit de techniek sessies, lezingen en presentaties over de nieuwste technieken, programma’s en innoverende manieren van programmeren. Deze sessies zijn verdeeld over twee dagen. Ook vind je hier allerlei gadgets die je mee kan krijgen. Eén van de sessies ging over het bouwen van betere user interfaces.

Jason beres

De sessie werd verzorgd door Jason Beres, die auteur is van boeken als Silverlight 3, SQL en verscheidene boeken op .net gebied. Hij is werkzaam voor een bedrijf dat componenten bouwt, die het leven van programmeurs gemakkelijker moet maken m.b.t. het bouwen van interfaces gericht op de klant. Jason Beres is een Ui liefhebber ongeacht welke techniek als achtergrond wordt gebruikt.

User Interface(UI)

Op de UI zijn een aantal keywords van toepassing, waarbij je moet denken aan

HerkenbaarheidHerbruikbaarheidPerformance
OnderhoudbaarheidSecurityStabiliteit
EfficiencyBeschikbaarheidSchaalbaarheid
GebruikerservaringUitbreidbaarheidBetrouwbaarheid

Op een aantal van deze aspecten een korte toelichting;

Betrouwbaarheid

Het bekendste voorbeeld is hierbij, een site waarbij je iets moet of wil gaan afnemen. Als zo’n site geen betrouwbaarheid uitstraalt dan koop je er niks of neem je er niks af. Het is dan ook belangrijk dat er geen fouten op de deze pagina’s staan. Ongeacht of dit nu design- of spelfouten zijn.

Gebruikerservaring

Apple heeft veel aandacht besteed aan de interface van de iPhone. Het is een secuur proces waarbij men gebruikerservaring(en) toetst. Echter, deze inspanningen zijn niet voor niks geweest. De interface van de iPhone is inmiddels de standaard voor de smartphone. Een ander voorbeeld is de Nintendo Wii. In Amerika heeft bijna iedereen er één en sommigen zelfs twee. Er zijn winkels met bordjes waarop staat maximaal twee Wii’s per klant. Ook Nintendo heeft zich gefixeerd op ervaringen van gebruikers, om dit succes tot stand te laten komen.

Performance

Denk maar aan je eigen surfgedrag. Beland je op een pagina die een lange laadtijd heeft, dan zal je ook snel weer de site verlaten.

Herbruikbaarheid

onderdelen van een website moet je kunnen hergebruiken voor volgende projecten. Omdat er vrijwel altijd gelijksoortige websites zijn, kan je gebruik maken van patronen, uit vorige best practices. Patronen die de herkenbaarheid van een type site versterken.

Herkenbaarheid

Het gaat er niet altijd om, of dat een site mooi, leuk of efficiënt is. Wat belangrijk is, is de herkenbaarheid voor de gebruiker. Een gebruiker onderzoekt niet zomaar wat er op een site moet gebeuren maar doet wat common is. Met andere woorden, hij doet, wat hij denkt dat zou moeten. Een goed voorbeeld vind je bij de techniek van Ajax. Ajax biedt mooie dingen maar heeft ook valkuilen. Gebruik bijvoorbeeld niet de back button van de browser, maar die in het scherm zelf. Een programmeur weet waarom en begrijpt ook dat hij het niet moet gebruiken. Maar dat geld niet voor de gebruiker!

Werkwijze

Jason Beres geeft de volgende fases Een bedrijf zou zijn werkzaamheden als volgt moeten indelen;

informatie-architectuur

Je begint met de informatie-architectuur. Je stelt hier de vragen: wie is de klant, wat wil hij, in wat voor omgeving bevinden we ons. Wat je in deze fase gaat je opleveren: navigatie, keywords, tags, zoek strategieën, categorieën, etc.
Tijdens ieder project moet iedereen op de hoogte zijn van wat er speelt, met andere woorden iedereen moet dezelfde taal spreken. Jantje moet het niet over x hebben en vervolgens denkt Pieter dat hij het over y heeft…

Interaction design

Het uittekenen van wat er gebouwd moet worden door middel van tekeningen, blueprints, storyboards. Dit uiteraard in overleg met de klant. Want hoe gaat de klant, elk gedeelte van de site gebruiken? Voer je deze fase niet goed en heb je die interactie niet met de klant, dan ga jezelf beslissingen nemen over hoe je verwacht, hoe het zou moeten zijn. Je bouwt als het ware, in deze fase, een prototype.

Visual design en interface

Je bouwt het prototype in de vorm van stylesheets, themes, lettertypes, images, Masterpages en patterns. Patterns zullen verder worden toegelicht.

Patterns

Reusability van de interface, door gebruik van patterns. Hierbij bouw je een concept van patronen op van wat je in een interface zou moeten verwachten. Je vormt je een beeld van, welk patroon er waar kan worden toegepast, maar ook waarom en hoe? Dit zodat je weet wanneer je welk patroon wel of niet kan gebruiken. Patronen kun je dan gaan vastleggen en als het ware later weer gaan hergebruiken. Hetzelfde patroon gebruiken betekent niet hetzelfde interface gebruiken. Simpel maar helder voorbeeld: Een startpagina of een reis-pagina. Deze bevatten allen een nagenoeg gelijksoortig patroon maar in een andere stijl.

Het Liquid design

Liquid design is een patroon dat steeds meer wordt toegepast. Onze Windows explorer is een goed voorbeeld van liquid, de content groeit mee als je het beeld maximaliseert en andersom. Vooral bij grote beeldschermen wil je een mee-groeiend beeld. Er zijn namelijk veel verschillende schermresoluties. Silverlight is overigens ideaal voor het liquid design. Het re-sizen is makkelijk en silverlight blijft zorgen voor een kristalhelder beeld.

Two panel selector

Dit design pattern, is goed, voor het bewaren van het overzicht. Een voorbeeld is de mappen structuur in windows explorer. Aan de linkerkant zie je de structuur en in het hoofdscherm zie je de map waarin je zit.

Overview plus detail

Denk maar aan het mapping principe. Je kan, bijvoorbeeld in Google maps, in en uit zoomen. Door in te zoomen zie je detail, zoom je uit dan zie je weer waar het allemaal ligt. Ander voorbeeld is de timeline, hierbij zij je een gedeelte van een grafiek op detail niveau (Google finance).

Veel pattern libraries staan op het internet en hier zou je eens in kunnen duiken. Je hebt bijvoorbeeld de Yahoo widget library. Een bekende Nederlandse site is Wellie.com. Hier staan veel bruikbare patronen die je zou kunnen toepassen in je nieuwe design.
© 2009 - 2018 Emen, het auteursrecht (tenzij anders vermeld) van dit artikel ligt bij de infoteur. Zonder toestemming van de infoteur is vermenigvuldiging verboden.
Gerelateerde artikelen
IPhone 8, 8 Plus en iPhone X: wat is het verschil?IPhone 8, 8 Plus en iPhone X: wat is het verschil?Op 12 september 2017 heeft Apple drie nieuwe iPhones geïntroduceerd. Inderdaad, drie! Hiertoe behoren de iPhone 8 en 8 P…
Het huis inrichten met design meubelsHet huis inrichten met design meubelsEen trendy woonkamer wie wil het niet. In grote woonboulevards worden we overspoeld met de mooiste meubels, lampen en al…
Wat is een interface of gebruikersinterface?Wat is een interface of gebruikersinterface?Je hoort het woord vaak voorbij komen: gebruikersinterface of interface. Het is dan ook een bekend begrip met betrekking…
De iPhone 6 en 6 plus: verbeteringen en verschillenDe iPhone 6 en 6 plus: verbeteringen en verschillenVeel mensen hebben er lang op zitten wachten: de iPhone 6! De nieuwste iPhone is groter, dunner en sneller. Er zijn twee…
Het opzetten van een website - Het designHet opzetten van een website - Het designBij het opzetten van een website komt veel kijken, zo ook het ontwerp van je website. Hier lees je alle informatie en ti…
Bronnen en referenties
  • Inleidingsfoto: Geralt, Pixabay

Reageer op het artikel "Het bouwen van een beter webdesign"

Plaats als eerste een reactie, vraag of opmerking bij dit artikel. Reacties moeten voldoen aan de huisregels van InfoNu.
Meld mij aan voor de tweewekelijkse InfoNu nieuwsbrief
Ik ga akkoord met de privacyverklaring en ben bekend met de inhoud hiervan
Infoteur: Emen
Laatste update: 17-08-2016
Rubriek: Pc en Internet
Subrubriek: Programmeren
Bronnen en referenties: 1
Schrijf mee!