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. Één van de sessies ging over het bouwen van betere user interfaces, hierover meer…

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

Herkenbaarheid	Herbruikbaarheid	Performance
Onderhoudbaarheid	Security	Stabiliteit
efficiency	Beschikbaarheid	Schaalbaarheid
gebruikerservaring	Uitbreidbaarheid	Betrouwbaarheid

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 spellingsfouten 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 surf gedrag. 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 die 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.