Workshop 3 - User Centered Design & GUI

Jawel! De derde workshop alweer! Deze keer over 'User Centered Design' en GUI of 'Graphic User Interface'.

User Centered Design (hierna UCD) is een manier van ontwerp en design waarbij de (eind)gebruiker centraal staat. Denk hierbij aan websites, besturingssystemen, maar ook apparatuur.

Een nieuwe gebruiker moet meteen goed met het product om kunnen gaan, om een zo goed mogelijke 'relatie' met het product op te bouwen. De mening over zo'n product wordt vaak al binnen een paar seconden gevormd, dus is het belangrijk dat een product toegankelijk is voor een grote groep mensen. Juist daarom is het belangrijk om uit te gaan van de doelgroep waarvoor het product bestemd is. Maar... hoe doen we dat? We nemen als voorbeeld dat we een nieuwe website willen maken:

Stap 1 - Informatie verzamelen; We proberen ons voor te stellen wie of wat de doelgroep gaat zijn.

Stap 2 - We gaan onze doelen bepalen. Wat willen we bereiken met ons product?

Stap 3 - Vervolgens maken we een aantal 'persona's', we schetsen een aantal karakters van mensen die zich in onze doelgroep bevinden. Dit doen we, omdat het veel te tijdrovend/duur is om hiervoor op zoek te gaan naar echte mensen die binnen deze doelgroep passen.

Stap 4 - Maak een 'sitemap' (klik voor voorbeeld)

Stap 5 - Maak een 'moodboard' (klik voor voorbeeld); Bepaal welke sfeer je wilt neerzetten op je website. Sluit deze aan bij de doelgroep?

Stap 6, 7, 8 - Schets, maak een prototype en vervolgens je eerste ontwerp

Stap 9 - Maak vervolgens je eerste werkende prototype; Dit ontwerp heeft 90% van de uiteindelijke oplevering in zich. Heb aandacht voor detail!

Stap 10 - Oplevering; Als je alles goed hebt gedaan, sluit je website direct aan op de doelgroep, weten mensen (uit de doelgroep) direct de weg te vinden op je website en zul je een zeer user friendly website neergezet hebben!

Alle bovenstaande stappen leiden je naar een succesvol UCD. Kanttekening: het kost veel tijd om bovenstaande stappen uit te voeren en de praktijk leert dat lang niet iedereen deze stappen volgt. Zie het dan ook meer als een basis waaruit je verder kunt werken.

GUI (Graphic User Interface)

Iedereen kent een GUI en iedereen werkt tegenwoordig met een GUI. Geen idee waar ik het over heb? Windows, Mac OS X, Android, iOS, zijn allemaal een GUI.

Een GUI helpt mensen te interacteren met computers. Je zou kunnen zeggen dat een GUI dienst doet als een 'Human Computer Interface' of HCI.

De eerste echte vorm van interactie met computers vond plaats door middel van zogeheten 'ponskaarten'. Grote kaarten met daarin gaten gestanst, die in de computer ingevoerd konden worden, waardoor de computer wist wat voor berekening hij moest uitvoeren. Al gauw kwam men er achter dat dit verre van ideaal was en werd het eerste GUI ontworpen. De Xerox PARC was de eerste computer met een GUI.

Vervolgens kwam Apple (Macintosh) een paar jaar later met het eerste besturingssysteem dat in grote getale aan de man kon worden gebracht. De Apple Lisa was een van de eerste systemen met een toegankelijk GUI.

Zoals je op de laatste afbeelding hebt kunnen zien, is er vandaag de dag nog helemaal niet zo heel veel veranderd! Natuurlijk, computers zijn toegankelijker geworden, ze zijn krachtiger geworden en het ziet er allemaal veel chiquer uit dan de eerste zwart-wit versie. Maar als je bedenkt dat we inmiddels 40 (!) jaar verder zijn en dat de basis nog steeds het zelfde is (pictogrammen, bureaublad, menu structuur, etc.) hoe geavanceerd zijn 'we' dan eigenlijk?

De grootste ontwikkeling die we (vooral de laatste jaren) hebben doorgemaakt, is de ontwikkeling van allerlei mobiele besturingssystemen. Deze breken met het gros van de systemen door elke functionaliteit onder een enkel pictogram te verbergen (denk aan Apps). En toch is de basis daarvan het zelfde; Klik op een pictogram, op een scherm, en er gebeurd wat!

Om een ander perspectief op te werpen, wat zien wij op dit moment als de toekomst? Onderstaand filmpje kwam ik tegen als studie naar de nieuwe iPhone 5:



Zeker leuk zo'n holografische projectie van een toetsenbord en ook zeker toekomstmuziek, maar...
Is dit nou eigenlijk wel zo'n grote sprong voorwaarts? Ik zie nog steeds een toetsenbord (dat hadden we in 1985 ook al). Nog steeds moet er een fysieke actie gedaan worden om input in het apparaat te krijgen. Kan dat niet anders?

Maar natuurlijk al zien we hier nog steeds een beeldschermpje, invoer knoppen, etc. Ik zelf zie het nog wel gebeuren dat we een chip in onze kop krijgen, die aan onze hersenactiviteit gelinkt wordt. Dat we alleen nog maar hoeven te denken om iemand te bellen en het contact wordt al gezocht. Praten doen we gewoon in de lucht, de geïmplementeerde chip registreert onze hersenactiviteit in combinatie met het geluid dat we produceren en stuurt dit via Wi-Fi of 5G (tegen die tijd vast wel ontwikkeld) naar de persoon die we willen bereiken.

Nu nog een sterk verhaal, maar wie weet, over een jaartje of 40?

Workshop 2 - Mobile & RIA Development (Adobe Air)

De tweede workshop ging over Mobile & RIA (Rich Internet Application) Development. Kort gezegd, hebben we in deze workshop geleerd een mobile app te maken.

Als er momenteel een nieuwe app op de markt komt, is het bijzonder om te zien dat sommige platforms deze app wel kunnen draaien en andere platforms niet. Het komt vaak voor dat andere platforms enige tijd moeten wachten op dezelfde app. Dit komt door het feit dat er nog geen echte standaard is als het gaat om het maken van multi-platform apps.

Als het aan Adobe ligt, is dit verleden tijd. Adobe heeft het zogeheten 'Adobe Air'. Dit is een manier van app-development die het mogelijk maakt om met slechts één ontwerp, één programmatuur een app te maken voor de diverse (mobile) platforms.

De app wordt als het ware per platform op een eigen manier gerenderd, zodat deze app op elk platform kan draaien. Zo hoeft een ontwikkelaar slechts 1 app te (laten) programmeren om deze vervolgens op alle platforms, iOS, Android, Windows Mobile, Symbian, RIM, tegelijk uit te kunnen brengen.

Adobe heeft 'Device Central' ontwikkeld. Dit is een programma dat een grote database bevat van (bijna) alle mobile devices. In dit programma kunnen ontwikkelaars hun app eerst testen, alvorens de app uit te brengen. Selecteer in dit programma je beoogde device, bijvoorbeeld een iPhone, laadt je app in (bijvoorbeeld je Adobe Flash file) en starten maar!

Zo kun je met een beetje Flash en wat Actionscript (3) al een basic app maken!

Mocht je zelf met Adobe Air een app willen maken, kijk dan bijvoorbeeld eens op http://www.adobeairtutorials.com/

Workshop 1 - HTML5 & CSS3

Vandaag heb ik de eerste workshop gehad van mijn verdieping in het Webdomein. De eerste workshop ging over HTML5 en CSS3.

HTML5 is op het moment nog in ontwikkeling, maar moet binnen nu en 3 jaar de nieuwe HTML standaard worden. Daar aan gekoppeld is/wordt CSS3 ontwikkeld. 

De verschillen met de vorige versie(s) van HTML zijn aannemelijk; HTML5 legt meer de nadruk op de content. Binnen de programmeertaal wordt met behulp van nieuwe 'markup elementen' een betekenis aan de content gegeven. Zo wordt het voor browsers makkelijker om het doel/nut van de content te herkennen. Daarnaast zouden zoekmachines in de toekomst deze 'betekenissen' kunnen gebruiken om concretere zoekresultaten te bieden. 

Om een voorbeeldje te geven: De tekst die ik hier type is voor mij op dit moment de basiscontent. In HTML5 zou ik deze tekst tussen de < article > tags kunnen plaatsen. Zo weet de browser dat dit de 'hoofdcontent' is van dit stukje blog. Daarnaast zou ik binnen de < aside > tags wat neveninformatie kwijt kunnen. Denk bijvoorbeeld aan links naar andere websites, voorbeelden ter verduidelijking van wat in de 'hoofdcontent' staat, etc.

Samenvattend valt te zeggen dat HTML5 voor browsers bijdraagt aan de manier waarop de internet pagina's worden 'ontleed'; welke betekenissen de content op diverse pagina's hebben. De focus ligt op de semantics, zoals dat zo mooi heet in vaktaal.

CSS3 is de nieuwe script-taal die het design voor zijn rekening gaat nemen. Hier zijn weer een hoop nieuwe functies geïmplementeerd, die het vormgeven van websites een stuk beter en makkelijker moet maken. Denk hier bijvoorbeeld aan het toevoegen van schaduwen om een (onderdeel op je) webpagina extra dynamiek te geven, of bijvoorbeeld het afronden van de hoekjes van een < div > element.

Voorheen moest je werken met achtergrond afbeeldingen, maar nu kan het allemaal door een simpel regeltje code toe te voegen. Ook mooie 'gradients' zijn in CSS3 een kwestie van slechts een enkel regeltje code. 

Om een voorbeeld te geven van al dit bovenstaande, hebben we in de workshop een HTML5 video viewer gemaakt. Door HIER (note: deze video viewer is alleen te bekijken in Safari) te klikken, kun je zien wat ik er van gemaakt heb. 

Naast HTML5 en CSS3 zit hier ook een stukje jQuery in (met dank aan Matthijs van Veen voor het beschikbaar stellen van deze code) om te laten zien wat de mogelijkheden van deze nieuwe technieken gaan zijn.

Benieuwd wat de tweede workshop mij gaat brengen!