Eindpresentatie: Augmented Reality met Aurasma

Wat is Aurasma? 

Aurasma is een softwareprogramma dat gebruik maakt van Augmented Reality, oftewel: toegevoegde realiteit. Het brengt de virtuele en echte wereld dichter bij elkaar door gebruik te maken van revolutionaire technieken.


Aurasma kan plaatjes, symbolen en objecten herkennen. Als zo'n plaatje wordt herkend door de Aurasma applicatie op je smartphone kan daar een video, 3D-animatie, geluid of een webpagina aan toegevoegd worden. Het brengt het plaatje dus tot leven.

Om dit te realiseren gebruikt het programma de camera, GPS, kompas en de accelerometer van een smartphone. Trendwatchers denken dat QR-codes verleden tijd worden en daarvoor in de plaats komen programma's die gebruik maken van Augmented Reality. Aurasma heeft nu al meer dan 3 miljoen gebruikers en steeds meer mensen melden zich aan of maken er  gebruik van.

Wat kun je met Aurasma?

Je kunt het op verschillende manieren gebruiken, bijvoorbeeld als bedrijf maar ook als gebruiker.

Als bedrijf zou je via Aurasma je bedrijf of product op een nieuwe interactieve manier kunnen promoten. Door daar een website aan te koppelen lok je de gebruiker naar je website en genereer je meer traffic.   Ook geeft het een 'extra' dimensie. Zie het Youtube-filmpje. Ook kan men denken aan speciale reclame campagnes. Bijvoorbeeld: "Ga naar Amsterdam en scan de Dam met je mobiele telefoon. Je krijgt dan een video te zien met daarin een geheime opdracht en een volgende locatie. De persoon die als eerste op alle locaties is geweest en alle opdrachten heeft volbracht wint een reischeque". Je krijgt dan een soort virtuele "hide and seek" speurtocht.

Een "Aura" maken

Als gebruiker kan je zelf een plaatje maken en daar iets aan koppelen. Dat heet een "Aura" maken. Deze Aura kan je delen met je vrienden via sociale media zoals Twitter en Facebook. Aurasma zou je ook kunnen gebruiken om mensen hun kennis te verbreden. Je zou bijvoorbeeld een Aura kunnen maken van een monument, een huidige locatie meegeven, online opslaan in een grote online database om er vervolgens een informatief filmpje aan toevoegen wat meer achtergrondinformatie geeft over dat monument.


Voordelen en nadelen van Aurasma


Voordelen

Je wereld wordt verbreed door Aurasma omdat plaatjes tot leven worden gewekt. Het heeft een bepaalde 'funfactor' en je krijgt steeds minder overlap tussen de virtuele wereld en de echte wereld. Bedrijven kunnen zichzelf en hun producten op een nieuwe en realistische manier promoten. Door zelf Aura's te maken en deze te delen met je vrienden kan het je meer kennis of plezier opleveren en je hebt meer contact tussen elkaar. Ook kan Aurasma in de toekomst goed gebruikt worden voor onderwijsdoeleinden.

Nadelen

Ik ben zelf op onderzoek uit geweest en ik heb zelf ook een Aura geprobeerd te maken. In de praktijk viel het nog best tegen, vaak herkende Aurasma het plaatje niet en dat wekt natuurlijk frustratie op. Zie het Youtube-filmpje die ik zelf heb gemaakt. Je hebt een goede belichting nodig bij het maken van de foto. Het contrast op de foto moet hetzelfde zijn als hoe het plaatje er in het echt uit ziet. Dat betekent dus dat als je een foto in de buitenlucht scant je niet altijd hetzelfde contrast hebt als op de foto en het programma daarom het plaatje niet herkent. Dit is een groot nadeel. Echter, het is nog zo'n nieuwe trend dat ik denk dat er nog volop verder ontwikkelt gaat worden om Augmented Reality zo efficiënt mogelijk te maken naar de gebruiker toe.




De toekomst

Ik denk dat Aurasma er voor kan zorgen dat er een nieuwe martketingtechniek gaat ontstaan. Geen saaie QR-codes meer, maar inspelen op het creëren van een virtuele omgeving en het bij elkaar brengen van de virtuele en echte wereld op je smartphone wordt de toekomst. Scan een DVD hoesje en krijg meteen een trailer te zien van de desbetreffende film. Scan een product en zie binnen no-time alle specificaties van het product, speel een trailer af van hoe het product nou precies werkt en kijk via dezelfde smartphone in welke winkels het product bij jouw in de buurt (nog) leverbaar is.


Ook kan Aurasma in de toekomst goed gebruikt worden voor onderwijsdoeleinden. Denk bijvoorbeeld aan Wikipedia waar de gebruiker zelf de content aan maakt. Met Aurasma zou dat in de toekomst ook kunnen gebeuren als er één grote onderwijsdatabase wordt gecreëerd. Wilt u de historische achtergrond weten van de Domtoren in Utrecht? Scan de toren en u krijgt een filmpje te zien die een andere gebruiker er aan heeft gekoppeld. Wie is Einstein in ons natuurkundeboek? Haal Aurasma erbij, scan het hoofd van Einstein en krijg in het kort uitgelegd wie Einstein was en wat hij voor de wereld heeft betekend.

Conclusie

Ookal zitten we nu nog in de kinderschoenen, ik denk dat wanneer we een aantal jaren verder zijn Augmented Reality een trend is en het ook stukken verder is in zijn ontwikkeling. Je ziet dan beter uitgewerkte marketingconcepten. Je hebt geen last meer van contrast problemen als je als gebruiker een Aura wil maken. En een grote onderwijsdatabase met een grote community met moderators, zoals bij Wikipedia, is niet geheel onrealistisch. De toekomst zal het leren!

Les 5: Internet en sociale media

Omdat ik bij deze les niet aanwezig kan zijn heb ik een andere opdracht gekregen voor deze les. Ik zal een voorbeeld laten zien hoe een bedrijf sociale media kan aanpakken.

Verschillende sociale media
Om te beginnen is het belangrijk om te weten dat er verschillende sociale platforms zijn. De belangrijkste zijn:

- Twitter
- Facebook
- Youtube
- Hyves

Elk medium heeft zijn eigen vormgeving, usability en stijl. Dat kan het de eerste keer even lastig maken maar men heeft het vaak al na een tijdje door.

Ik heb stage gelopen bij de internetredactie van het televisieprogramma Kassa van de VARA. In de tijd dat ik daar werkzaam was heb voor hen een Handleiding Sociale Media gemaakt. Deze kan ik niet online publiceren.

Sociale media kan er aan bijdragen dat de omzet en groei van een bedrijf wordt vergroot dus het is belangrijk om hier aandacht aan te vestigen. Ik kan wel aan de hand van cijfers laten zien dat door mijn gegeven aandacht al deze sociale media platforms zijn gegroeid(op Hyves na).

Cijfers

Eind december 2011


- Twitter 4.950 followers
- Facebook 1.269 likes
- Youtube 72 abonnee's
- Hyves 11.489 leden


Midden maart 2012

- Twitter 6.612 followers (+33,58%)
- Facebook 2.005 likes (+58,00%)
- Youtube 96 abonnee's (+33,33%)
- Hyves 11.239 leden (-2,18%)

Deze cijfers betekenen dat in drie maanden de gemiddelde sociale media groei maar liefst +30,68% is. Opvallend is dat alleen sociale media platform Hyves een negatieve groei kent. Dit komt omdat steeds meer mensen hun Hyves account hebben opgezegd. Vaak komt dat door te snelle website veranderingen en te veel reclames.

Les 4: Web development

Omdat ik bij deze les niet aanwezig kan zijn heb ik een andere opdracht gekregen voor deze les. Ik moet wat vertellen over de verschillende webapp frameworks.

Verschillende smartphones

Smartphones zijn big business. Over de hele wereld zijn er al meer dan twee biljoen smartphones verkocht. Dat betekent dat het internet steeds makkelijker toegankelijk wordt omdat het vaak overal beschikbaar is. Er wordt steeds meer op mobile toegespitst omdat die doelgroep explosief aan het groeien is. Het kan binnenkort zo kan zijn dat er tegelijkertijd meer smartphone-gebruikers dan pc-gebruikers online zijn.

Het is dus belangrijk om met de tijd mee te gaan en mobile HTML5/Native apps te maken die zijn aangepast aan de mobiele interface zoals een iPhone of een Android. Dit kan je doen door gebruik te maken van verschillende webapp frameworks zoals bijvoorbeeld: jQuery Mobile, Sencha Touch en jQTouch.
Deze drie gaan wij nader bekijken.

jQuery Mobile

Mobile UI Elements

jQuery Mobile is een touch-geoptimaliseerd JavaScript framework voor smartphones en tablets. Het zorgt er voor dat de user makkelijk en toegankelijk zijn content kan implementeren. Je hoeft maar één website te ontwikkelen die, door middel van dit framework, op alle bekende browsers en platforms werkt. Dit is een erg groot voordeel omdat je anders voor elk device een aparte website moet maken. Tevens is het ook een flexibel framework. Je kan door gebruik te maken van de HTML5 markup snel en makkelijk content aanpassen. Verder zorgt jQuery Mobile voor een hoge snelheid door kleine bestanden te gebruiken en men probeert zo min mogelijk afhankelijk te zijn van afbeeldingen. Ook kan je gebruik maken van speciale thema's zodat je applicatie een hoge user experience krijgt. Dit framework ondersteunt helaas geen gestures en multitouch waar jQTouch en Sencha Touch dat wel doen. jQuery Mobile ondersteunt HTML5 en CSS3.

jQTouch interface

jQTouch


jQTouch is een Open Source JQuery plugin geoptimaliseerd voor WebKit devices als iPhone, Android en Palm. Hiermee kan je net als jQuery Mobile mobiele applicaties ontwerpen met een native 'look and feel' door gebruik te maken van HTML5, CSS en Javascript. Dit framework is minder uitgebreid dan jQuery Mobile. Er wordt meer gebruik gemaakt van jQuery Mobile en de gebruikers zijn daar ook een stuk actiever.



Sencha Touch

Sencha Touch interface

Sencha Touch is een UI JavaScript framework geoptimaliseerd for mobile web. Hiermee kan je net als jQTouch en jQuery Mobile webaplicaties ontwikkelen die de 'look and feel' hebben van een native app. Het is net als de andere twee frameworks gebaseerd op HTML5, CSS3 en JavaScript. Het heeft user experience hoog in het vaandel staan en het is makkelijk en snel om een web applicatie te maken.
Het framework ondersteunt onder andere: iPhone, Android en Blackberry.


Veel gelijkenissen


Zoals je hebt gelezen zijn er veel overeenkomsten tussen deze frameworks en zit het vaak in de details. Toch is dat niet helemaal zo. Wat deze Mobile Frameworks vaak niet met elkaar gemeen hebben zijn de verschillende platforms en WebKit's waar ze wel of niet op draaien. Als je een web applicatie wil gaan maken is het dus verstandig om eerst een goede keuze te maken tussen al deze frameworks. Een goede site om dat te doen is de Mobile Framework comparison chart van Markus Falk. Je selecteert je gewenste platform(s) aan, vult andere gegevens in en je krijgt automatisch een tabel te zien wat het beste bij jouw applicatie past. In dit geval heb ik de bovenstaande drie frameworks met elkaar vergeleken en kunt u de verschillen zien als u op de tekst onder het plaatje klikt.

Klik hier(niet op het plaatje) een voor groter overzicht van de verschillen tussen 
jQuery Mobile, jQTouch en Sencha Touch

Les 3: Mobile & GUI Design

De les Mobile & GUI (Graphic User Interface) Design hebben we gekregen van leraar Herman Paassen. Ook hebben we het gehad over trends en UX (User Experience) guidelines. Het is met name toegespitst op het mobile platform.

Dhr. Paassen geeft een les Mobile & GUI Design

Algemeen


Binnen 50ms ontwikkel je een beeld over wat je ziet. Esthetische beslissingen maak je heel snel. Doordat je oordeelt over Usability en Credibility besluit je of je wat gaat aanschaffen ja of nee. Een ontwerp van een interface is dus heel belangrijk.

Je zorgt o.a. voor een goede interface door de 'human interface design principles' te gebruiken. Hierin staat hoe je het beste met de gebruiker om moet gaan zodat hij/zij niet voor verwarringen komt te staan. Ook moet je gebruik maken van het 'mentaal model'. Dat houdt in dat de gebruiker veel leert van ervaringen uit het verleden op het gebied van interfaces die deze persoon al heeft gebruikt. Daarnaast zijn er de UX (User Experience) guidelines.

Wat is belangrijk bij het maken van een interface?

- Maak het duidelijk en overzichtelijk en voorspelbaar (User Control)
- Wat vinden mensen belangrijk? Kijk goed naar de doelgroep
- Consistentie (zelfde typografische layout, zelfde interactie, zelfde vorm)
- Label je icons
- Maak gebruik van het 'mentaal model'
- Probeer realisme toe te voegen en hou een oog op detail
- Maak icons van 44 bij 44 pixels
- Feedback (bv. vibratie, geluid, highlight, animatie)

Als mensen iets moois vinden is dat een kwestie van smaak, maar wat bij interactieve applicaties belangrijk is, is dat ook de gebruiker snapt wat de functionaliteit is en hoe het werkt. Het wordt dus aangeraden om van dit soort guidelines gebruik te maken.

Apple's iOS Human Interface Guidelines

De volgende trends zijn hieruit ontstaan:

- Grote logo's en headers
- Typografisch design
- Textuur lay-out
- One page lay-outs
- 3D omgevingen
- Schetsen / handgetekend design
- Interactief design
- Minimalistisch design
- Retro design
- Grid Intensive lay-out

Conclusie


Het is niet de fout van de gebruiker maar van de designer als de gebruiker iets niet snapt. Als de interactie niet logisch is of als het er niet goed uit ziet zullen mensen afhaken. Het gebruik maken van UX guidelines, het 'mentaal model' en human interface design principles is dus een belangrijk onderdeel om tot een goede en gebruiksvriendelijke app te komen.


Meer info

Designing Gestural Interfaces, Dan Saffer, ISBN: 978-0-596-51838-4
Apple's iOs Human Interface Guidelines
Teehanlax

Les 2: Mobile & RIA Development

Vandaag hebben we een les gehad over Mobile & RIA Development door de populaire docent Boris Slaghuis. Dit is een onderwerp waar ik me ook later graag in wil verdiepen. Zoals ik al in mijn vorige blogpost zei: "Apps zijn op dit moment booming business".

We hebben een introductie gekregen over hoe je een applicatie maakt in Adobe Flash CS5.5 en hoe je deze makkelijk kunt exporteren naar een Mobile Device; in dit geval een Android toestel. Om deze applicaties te runnen dient Adobe Air geinstalleerd te zijn.

Wat ook aan bod kwam zijn de verschillende TouchEvents en GestureEvents die men kan aanmaken. Van Boris hebben we drie verschillende files gekregen met elk een eigen opdracht.

File 1: Camera
Ik heb mijn actionscript zó aangepast dat het Android toestel zijn camera gebruikt in de applicatie. Daarnaast heb ik een knop gemaakt waardoor je de foto die je zojuist hebt gemaakt meteen te zien krijgt in je applicatie.

File 2: Multitouch
Hier heb ik verschillende Events gebruikt zoals zoom en rotate. Dit resulteerde in een plaatje dat je in en uit kon zoomen en ook kon laten draaien door je beide vingers een bepaalde richting op te bewegen.

File 3: Gyroscope

Helaas ben ik hier niet aan toe gekomen. Ik ben van plan dit alsnog in mijn eigen tijd te gaan proberen omdat het een belangrijke functie kan zijn in een applicatie.

Conclusie:
Wat mij opvalt is dat het relatief makkelijk is om een (leuke) applicatie te maken. Ik zou zeker verder willen leren op dit gebied. Toch denk ik dat Adobe Flash voor Mobile niet de beste manier is om je te ontwikkelen in deze branche.

Het is hier en daar nogal 'buggy' en daar komt ook bij dat Adobe Flash niet ondersteunt wordt door Apple. Dat is voor mij echt een big issue omdat de iPhone markt heel erg groot is.

Ik denk dat ik me daarom eerder zal moet toespitsen op Xcode of LUA en ik ben dit ook van plan te doen in 'Verdieping 2 en 3'.

Les 1: Usability

Vandaag hebben wij onze eerste les gehad in het domein 'Web'. Het ging over Usability. Usability; oftewel gebruiksvriendelijkheid is ontzettend belangrijk in het ontwerpproces. Immers, mensen moeten goed met het product om kunnen gaan. Er zijn verschillende manieren om Usability te testen:

- Hallway testing --> Mensen van de straat pikken en observeren

- Remote Usability testing --> Alles onderzoeken en opschrijven in een bepaalde structuur en daar later scenario's van maken. Voorbeeld zijn: Usabilla en Silverback.

- Automated expert review

Als je deze gebruiksvriendelijkheid wil laten testen is het het beste om mensen te nemen die nauwelijks bekend zijn met het product. Het is allemaal nieuw en daardoor krijg je meer belangrijke informatie dan een ervaren persoon zou hebben gegeven.

Volgens Usability consultant Jakob Nielsen zou je al met een onderzoek van 5 mensen 75 procent van je fouten er uit kunnen halen. Als je je product door nog meer mensen zou laten onderzoeken wordt het getal significant lager. Ook heeft hij 10 'find & discovery' punten geschreven. Als je deze volgt word je product al een stuk meer gebruiksvriendelijk.

Wat ook aan bod kwam was de 'Noldus koffer' met daarin The Observer. In de koffer zit onder ander een camera, veel kabels en speciale software. Alles bij elkaar kan je met The Observer bijvoorbeeld doelgericht een website onderzoeken. Niet alleen op het gebied van muisklikken maar ook de reactie van de gebruiker. Waar loopt de gebruiker tegen aan in een bestelproces? Wat is er onduidelijk? Wat wekt frustratie op? Alles kan worden geregistreerd en in één timeline worden gezet.

The Observer is een must-have om dit soort Usability onderzoeken te doen. Het nadeel is dat deze koffer een kleine tienduizend euro kost. Gelukkig zijn er een aantal soortgelijke producten zoals Usabilla en Silverback die een stuk voordeliger zijn.

The Observer van Noldus in actie

Ik denk dat de meeste bedrijven onderschatten wat de waarde is van een goed Usability onderzoek. Er gebeurt te vaak dat men gewoon begint en in het ontwerpproces te weinig aandacht schenkt aan de gebruiksvriendelijkheid.

Ik ben zelf geïnteresseerd in het maken van Mobile Apps. Het is een groeiende markt, het aantal gebruikers neemt fors toe en daarmee ook het aantal applicaties. Booming business dus. Vele applicaties zullen niet (goed) getest zijn op hun Usability. Ik denk dat daarin veel progressie te halen valt. Daarnaast vind ik dat het maken van Mobile Apps en het toetsen van Usability goed te combineren valt als ik mij daar op wil gaan richten.

Al met al vond ik het een zeer interessante les. Ik denk dat ik daar mijn onderzoek ook over wil gaan doen in combinatie met Sociale Media. Hoe precies weet ik nog niet, daar ben ik nu hard over aan het nadenken.

Achtergrondinformatie:
Steve Krug
Don't make me think (1e druk, 187 pagina's, €34,95)
Rocket surgery made easy(1e druk, 137 pagina's, €32,95)

Ik heb voor het domein 'Web' gekozen. Op deze blog ga ik vertellen wat ik van de lessen uit het domein Web heb geleerd en tevens hoort daar een reflectie bij. Alvast veel leesplezier.