The observer

Dit is een koffer met daarin apparatuur/software dat kan opgesteld worden en daarmee data verzameld worden. Een camera en een microfoon neemt de gebruiker op tijdens het proces en met de software op een laptop kan er gedragingen en momenten worden voorzien van aantekeningen. Op de laptop kun je kijken wat de gebruiker allemaal doet en wanneer. Je hebt dus twee beelden naast elkaar, de persoon en het scherm waar het persoon op kijkt.

Mensen zijn vaak verbaasd als ze zien hoe belangrijk het kan zijn om een website of applicatie te testen op usability. Met het testen kun je de website beter op je doelgroep afstemmen en uiteindelijk de doelstellingen makkelijker behalen.

Tijdens deze les werd een stukje van OOP uitgelegd, we hebben dit gedaan in Flash met ActionScript 3.0. Ik heb al enig ervaring met OOP omdat ik hier ook vaak te maken heb met PHP voor het programmeren van websites/applicaties.

Voordelen

• Je creëert structuur in je code en maakt alles overzichtelijk.
• Een wijziging is makkelijker door te voeren.
• Het debuggen gaat een stuk simpeler en het probleem is snel te vinden.
• Een stukje code is makkelijk te hergebruiken in andere applicaties.

OOP is een methode die zich richt op objecten, deze objecten hebben bepaalde eigenschappen en deze kunnen alleen gemanipuleerd worden door het object zelf. Deze eigenschappen worden ook wel variabelen genoemd. Voor het veranderen/manipuleren/gedrag maak je gebruik van een functie.

Dus we hebben een Class die bestaat uit objecten met eigenschappen die gemanipuleerd kunnen worden doormiddel van functies.

Doormiddel van een stukje AS3.0 hebben we een klein voorbeeldje gemaakt waar we een paar basis elementen van OOP hebben besproken:

• Public functions
• Private functions
• Protected functions
• Contructors

Zelf heb ik niet veel aan deze les gehad omdat het allemaal niet nieuw was. Wel interessant was dat de leraar een aantal voorbeelden liet zien van motion tracking.

Webstrategie

• Business IT Alignment, stem de IT af op de doelen van de organisatie.
• Denken vanuit de business/organisatie
• Internet koppelen aan bedrijfsdoelstellingen
• Planmatig werken en rekening houden met de toekomst
• Prioriteiten stellen en sta open voor andere mogelijkheden.

Er zijn verschillende niveau van kijken:

• Operationeel (hoe ziet iets eruit) (werkvloer)
• Tactisch (hoe breng ik het op de markt) (middelmanagement)
• Strategisch (hoogte niveau van besluit vormen.. de “waarom” vraag) (directie)
• Helicopterview (wat is er gaande, bekijk het van een afstand. Zet een duidelijke richting uit)

Al deze punten hierboven moeten sturing en een richting hebben.

De stappen die we in deze les hebben behandeld om een internet strategie op stellen zijn:

1. Wat is de organisatie

• Wat is de onderscheidende kracht vergeleken met anderen?
• SWOT-analyse, wat zijn de Strenghts, Weaknesses, Opportunities en Threads?
• Zijn de concurrenten goed in beeld gebracht en wat zijn hun sterke en zwakke punten?
• Zorg dat je doel, visie en missie duidelijk en goed uitgewerkt zijn.

2. Plannen en Toekomstvisie

User centered design is een methode om een product te ontwerpen waarbij het goed gekeken word naar de gebruiker. De methode bestaat uit een aantal basisstappen:

• Verzamel informatie
• Doelen vaststellen
• Maak eventueel personas
• Stel een sitemap op
• Moadboard maken
• Schetsen maken en testen
• Design ontwerpen en testen
• Details afwerken
• Test eindproduct -> nogmaals testen

Door deze stappen geduldig en goed te volgen zal leiden tot een goed UCD. Het zal allemaal wat tijd en geld kosten maar het is meerdere malen bewezen dat dit uiteindelijk veel geld kan opleveren. Het is vaak wat bedrijven niet doen omdat het te veel tijd kost, tijd is geld.

User Interface

Bij het maken van websites is het tegenwoordig steeds belangrijker geworden om rekening te houden met de User Interface. Vaak is geval dat gebruikers niet hun doel kunnen bereiken als ze op een website bevinden, deze zal dan ook snel de website verlaten en een slecht indruk. Er moet dus een duidelijk structuur in je website zitten en de bezoekers moeten het gevoel hebben dat ze op het juiste adres zijn.

Om User Interfaces te testen kun je jezelf een aantal vragen stellen wanneer je bijvoorbeeld op een website bent:

• Waar ben ik?
• Wat kan ik hier doen?
• Wat gebeurt er?
• Hoe kwam ik hier?
• Hoe kan ik terug?
• Waar kan ik nu heen?
• Wat kan ik daar dan vervolgens doen?

Mentaal Model

Als je iemand voor het eerst een iPad en zegt diegene dat je er een boek op kan lezen dan heeft deze persoon een model in zijn hoofd hoe hij het voor zich ziet op het scherm, bladeren van pagina’s bijvoorbeeld. Er is dus een ‘mental model’ van het lezen van een boek op een iPad aanwezig in zijn hoofd terwijl hij dit nog nooit eerder heeft gedaan.

Wanneer je dit wel eens eerder een boek hebt gelezen op een iPad zal het mentaal model anders zijn dan van diegene die het nog nooit eerder heeft ervaren. Ook deze mentaal model kan na het lezen van meerdere boeken veranderen aan de hand van ervaringen die je opdoet al die tijd. Als je dan een andere soortgelijke devices in je handen krijgt en er word verteld dat je daarop een boek kan lezen heb je al een model in je hoofd hoe dit in elkaar zit en hoe je handelingen kan verrichten.

Wat hiermee duidelijk word gemaakt is dat de gebruiker altijd een beeld heeft in gedachten. Het is dus de kunst om je hierin goed te verplaatsen zodat je rekening kan houden met wat de gebruiker zal gaan doen en verwacht te kunnen doen.

Handige links

http://www.1stwebdesigner.com/inspiration/trendy-web-design-interfaces-deviantart/.

http://www.designzzz.com/creative-web-design-interfaces/

http://www.1stwebdesigner.com/inspiration/trendy-web-design-interfaces-october/

http://sixrevisions.com/usabilityaccessibility/20-websites-to-help-you-master-user-interface-design/

Adobe Air

Voor alle applicaties die worden gemaakt met Flash CS5.5 moet je telefoon Adobe Air geïnstalleerd hebben om deze te kunnen draaien. We hebben algemeen de mogelijkheden bekeken die Adobe Air bied om applicaties te bouwen voor een mobile device. Zo hebben tijdens deze les een kleine applicatie gemaakt waarbij er gebruik werd gemaakt van de camera op de device. Het grootste voordeel van Adobe Air is dat het de applicatie gebruiksklaar maakt voor verschillende mobile deives.

Daarnaast kun je bijvoorbeeld makkelijk gebruik maken van de multitouch screen en bewegingssensor. Om optimaal gebruik te maken van deze functie en alle andere heeft Adobe zelf een uitgebreide documentatie online staan.

Boris gaf ons daarna nog een paar bestanden waarmee we konden spelen en ons een beeld gaf hoe makkelijk het is om met Flash CS5.5 onderdelen van je telefoon te besturen.

Ik was zelf al wat gaan verdiepen in het maken van applicaties in JAVA voor Android devices. Nadat ik zelf ben gaan verdiepen in Adobe Air leek het me toch verstandiger om verder te gaan met programmeren in JAVA specifiek voor Android omdat ik hier al mee bezig was en JAVA toch wat dieper gaat en meer mogelijkheden bied voor Android.

HTML5 de nieuwste versie voor de HTML-standaard. Deze versie zit vol met nieuwe functies en de foutjes van de vorige versie zijn verbeterd. Een groot voordeel van deze versie is dat deze betere ondersteuning bied voor verschillende platformen (desktop, mobiel, pda, e-reader, etc.). Dankzij HTML5 hoeft er minder code gebruikt te worden om iets te realiseren waardoor de laadtijden vaak merkbaar korter worden.

Hieronder vind je een aantal nieuwe mogelijkheden die HTML5 biedt.

• Semantic Markup (semantisch opmaken)
  Iemand die wel eens iets met HTML heeft gedaan kent <div>, <h1>, <p> om de website op te delen in blokken en onderdelen. Met Semantic Markup kun je de onderdelen nader beschrijven met: <article>, <section>, <aside>, <hgroup>, <dialog>, <footer>, <nav>, <time>, <mark>, <figure> en <figcaption>. Daarnaast zijn er nog een paar om je website op te maken, dit allemaal met het gevolg dat websites sneller laden en beter schaalbaar worden.

• Geolocation
  HTML5 maakt het nu mogelijk om zonder een API een locatie te vinden. Doormiddel van een klein stukje javascript kun je de gebruiker toestemming vragen om de browser je locatie te vinden.

• Form Enhancements
  Een formulier opmaken kan met HTML5 een stuk makkelijk en met een flink aantal nieuwe mogelijkheden die eerder alleen mogelijk waren met bijvoorbeeld JavaScript. Klik hier voor een voorbeeld

• Audio / Video
  Zelf heb ik gemerkt dat deze mogelijkheden een van de meest besproken is. Het is mogelijk om zonder enige JavaScript of een externe player een audio/video weer te geven op een pagina. Je kunt bij HTML5 gebruik maken van de tags <audio> en <video>, mits je audiobestand van het type .ogg, .mp3, .wav of .aac is of je videobestand een .ogv of .mp4 (h.264) filmpje is.

Naast de bovengenoemde nieuwe mogelijkheden zijn er nog een paar, deze kun je bekijken op: http://www.html5rocks.com/en/. Op de site kun je ook zien welke functionaliteiten beschikbaar zijn in welke browsers.

Dat is tegenwoordig helaas nog het grootste nadeel. Niet welke browser ondersteund HTML5 of niet alle functies. Als ontwikkelaar moet je hier dus rekening houden en indien nodig afvangen. Tot  heden zijn daarom nog niet alle ontwikkelaars overgestapt op HTML5. Langzamerhand gaat dit wel gebeuren en dat is ook al te merken aan de webbrowsers die steeds nieuwe updates uitbrengen waardoor ze nieuwe functionaliteiten ondersteunen.