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