That’s a lot of CHI !

About CHI, GUI and stuff.

1ste iteratie

with one comment

Onze eerste iteratie is vooral gericht om de leertijd van nieuwe gebruikers in te korten door het vergroten van consistentie doorheen onze applicatie.We doen dit voor dat we effectief nieuwe gebruikers gaan te lokken, omdat we er in de eerste plaats voor willen zorgen dat onze toekomstige gebruikers onze applicatie zullen begrijpen en gebruiken. En ten tweede omdat dit natuurlijk ook onze reeds bestaande gebruikers ten goede komt.

Interne consistentie

 

We hadden een grote inconsitentie bij het weergeven van industry en science levels. Voorheen werden ze op verschillende pagina’s anders weergegeven. Op de “command center” pagina werden ze weergegeven als progress bars (1ste links) en op de andere pagina’s werden ze weergegeven als getallen (2de links) de rechtse kolom toont de nieuwe weergave die nu altijd gebruikt wordt om het sciene of industry level van een planeet weer te geven. Het is een samentrekking van de andere 2 weergave methodes. De progress bar geeft gebruikers een gevoel van welke level gebruikers hebben ten opzichte van de maximum en minimum level. Terwijl het getal ze een duidelijk te vatten waarde geeft van de defense en industry level van een planeet.

Daarnaast hebben alle pagina’s nu een titel gekregen. Zodat gebruikers naast de tab ook hier duidelijk kunnen zien waar ze zich bevinden. Of hetgeen ook een duidelijke hint kan geven van de functionaliteiten die de pagina zal bieden. (Een tip van het boek Don’t Make Me Think! A Common Sense Approach to Web Usability door Steve Krug)

Facebook consistentie

Om meer specifiek te zijn, zijn we hier juist afgestapt van de consitentie met andere facebook applicaties. Waar we eerst de standaard facebook tabs gebruikten (onderaan links), hebben we onze nieuwe tabs (onderaan rechts) nu een stuk herwerkt. Omdat iedereen tabs al wel voldoende kent bij andere websites en er vlot mee kan werken (of dat nemen we in ieder geval aan). Hebben we van deze kennis gebruik gemaakt om ze te verduidelijken. De huidig geselecteerde tab is nu duidelijker, de achtergrond loopt nu vlot over in de achtergrond van de content van onze applicatie. En de niet geselecteerde tabs zijn iets duidelijker op de “achtergrond” gezet. (Weermaals een tip van het boek Don’t Make Me Think! A Common Sense Approach to Web Usability door Steve Krug)

Externe consistentie

We hebben ook onze tabellen een consitentie update laten doorgaan. Nu zien ze er meer uit als alledaagse tabellen (voornamelijk die we zien op het Mac OS X besturingssysteem) met alternerende rij achtergronden en lijnen tussen de verschillende kolommen. Dit in plaats van elke cel individueel een kantlijn te geven en er spatiëring rond te voorzien. (4 bovenste afbeeldingen geven dit weer)

Andere

Daarnaast hebben we ook besloten over de gehele applicatie de concepten “Command Center” en “Homebase” te verwijderen. De laatste is volledig verwijderd. De eerste hebben we vervangen door een meer specifieke term “My Planets” omdat dit duidelijker weergeeft wat de gebruiker van de pagina kan verwachten.

En als laatste hebben ook de attack en opponent pagina’s aangepast, maar hier hierover tijdens de presentatie en in ons finaal verslag.

Written by Dries Janssens

May 18, 2009 at 9:55 pm

Posted in 1

History of CHI — re-reloaded

leave a comment »

Er is in de loop der jaren een ongelooflijke vooruitgang geweest in wat we allemaal met technologie kunnen. In mijn ogen kan men deze vooruitgang niet echt fatsoenlijk bijbenen. Vooral op het gebied van security (non-repudiation, integrity, CONFIDENTIALITY,…) staat men een pak achter op de technologische vooruitgang. Indien de toekomst ons ubiquitous computing zal brengen, heb ik daar niet zo veel problemen mee. Het heeft zeer veel nuttige (en ook zeer interessante op het gebied van HCI…) toepassingen die ons het leven een pak aangenamer zullen maken. Maar ik heb er wel problemen mee als die toekomst al zeer dichtbij ligt. Ik zou nooit zoveel info van mij op het net willen indien het net nog zo onveilig blijft als nu, noch zou ik daardoor ZO sterk afhankelijk willen zijn van technologie.

Wat ik wel wat raar vond was dat alles wat nu op de markt gebracht wordt als ‘nieuwe’ technologie eigenlijk al oude technologie is. Ik vind nu al dat het veel te snel gaat om de technologie om te zetten in veilige en degelijke toepassingen. Dus misschien maar goed dat de technologie al zo oud is.

Los daarvan zou ik echt wel graag zo’n ‘tafeltje’ hebben…

Written by tonyvanbeers

May 18, 2009 at 9:21 pm

Posted in 1

History of CHI – reloaded

leave a comment »

Bevindingen over de les in “geschiedenis van CHI”

De technologie is de voorbije jaren zo snel geëvolueerd, dat het logisch is dat mensen deze technologie ook anders beginnen te gebruiken. Computersystemen in alle vormen en maten zijn tegenwoordig onlosmaakbaar verbonden met de mens, een deel van ons leven als het ware. De mens vraagt de machine niet meer expliciet om opdrachten uit te voeren, maar verwacht dat de machine vanzelf de mens helpt, en dit zo onzichtbaar mogelijk.

Ubiquitous computing is hier mijns inziens het logische gevolg van. Computersystemen die overal en nergens zijn. Bijgevolg ben ik van mening dat dit niet meer zo lang op zich zal laten wachten. We evolueren immers al een hele tijd hiernaartoe. Dit is dan ook de eerstvolgende grote stap die ik zie gebeuren in de toekomst van CHI.

Andere technologieën lijken mij ook interessant, maar minder snel realiseerbaar. Een computer die bestuurd wordt door gedachten bijvoorbeeld, heb ik mijn bedenkingen bij. Mensen zitten niet steeds geconcentreerd achter de pc. Ik kan mij dus inbeelden dat zo’n mentaal aangedreven UI nogal goed moet weten welke gedachten belangrijk zijn en welke niet, anders zou dit vrij veel frustratie met zich kunnen meebrengen. Aangezien ze er nu al mee bezig zijn, misschien iets voor binnen 10 jaar ?

Written by tonnyvp

May 11, 2009 at 6:03 pm

Posted in 1

History of CHI

leave a comment »

Om terug te reflecteren op de les over “History of CHI”:

We zijn ver gekomen. Er zijn veel ontwikkelingen geweest waarvan we nu nog steeds de vruchten plukken. Daarnaast is ubiquitous computing veel minder ver weg dan we denken. Mensen zijn steeds meer en meer constant verbonden met het internet. De technologiën die dit mogelijk maken zijn reeds beschikbaar. En de infrastructuur is op komst.

Of we binnenkort gaan rondlopen in een pak dat volledig ‘wired’ is denk ik niet. Wel, geloof ik er in dat we meer nog dan nu gaan treden naar een wereld vol met kleine digitale gadgets/computers zoals de iphone. En gigantische computer clusters online. Deze gaan meer en meer onze gegevens gebruiken om te gokken wat we willen doen. En om die gegevens te gebruiken om ons te lokken om dingen te kopen of huren. Steeds meer mensen zullen constant verbonden zijn en applicaties zullen intelligenter inspelen op onze noden.

Machines zullen flexibeler worden om meer en meer de veranderende noden van de mens te vervullen. Assemblage fabrieken zullen zich grotendeels automatisch kunnen aanpassen aan het maken van hun nieuwe producten. Smart phones en micro computers zullen meer en meer uitbreidbaar zijn aan de noden van de gebruikers. Denk daarbij bijvoorbeeld aan de iTunes store die tegenwoordig propvol iphone applicaties zit.

Daarnaast zal meer dan vroeger marketing een belangrijke rol blijven om deze stroom aan vernieuwingen door te voeren. Reclame kan gebruikt worden als handleiding voor nieuwe producten. Hetgeen de leertijd een stuk inkort. Maar kan ook een privacy schendend apparaat aantrekkelijk doen overkomen.

Standaard UI componenten maken weermaals hun opkomst in internet applicaties. Tabellen, knoppen, tekstvelden zijn nog steeds paraat. Terwijl er veel open ruimte is voor innovatie op dit medium blijven mensen hier toch grotendeels trouw aan. Voornamelijk vanwege korte leertijd omdat deze consitent zijn met desktop applicaties. Maar ook vanwege de verschillende libraries die deze componenten ter beschikking stellen en daarmee ook de ontwikkeltijd enorm verkorten tov nieuwe manieren te bestuderen of uit te testen. Er is wel een enorme verbetering in deze componenten, denk daarbij maar aan live validatie etc.

Hoe we dit linken aan Facebook en onze applicatie. Facebook is een voorbeeld van een ubiquitous service. Kijk maar naar alle links die je tegenkomt. “Log in with facebook”, “Add on facebook”, “My facebook page” etc. We hebben onze persoonlijke applicaties die we kunnen installeren. Compatibiliteit met verschillende media klein en groot: iPhone, PC etc. En veel datamining technieken om ons de juiste reclame voor te schotelen. Hieruit kunnen we ook afleiden, dat naast de open source efforts zoals openID en dergelijke het grote succes nog altijd blijft bij hun commerciële tegenpolen (Log-in with Facebook). En bedrijven met een groot marketing budget. (Apple iPhone vs Android) En de vooruitgang zal hier dan ook sterk afhankelijk van zijn.

De applicaties zelf zijn naast persoonlijk ook een sociaal gebeuren. Je kan zoals bij onze applicatie (Planetary Conquest) kan je het tegen je vrienden opnemen om zoveel mogelijk punten te scoren, je kan grappen, je kan foto’s delen, informatie delen, quizes organizeren. Alles gaat meer en meer verbonden zijn. En gecentraliseerd online.

We gebruiken voornamelijk standaard componenten voor onze applicatie omdat die de leertijd verkorten hetgeen zeker een pluspunt is voor kleine applicaties. En natuurlijk ook omdat we slechts een beperkte ontwikkeltijd hadden.

Written by Dries Janssens

May 11, 2009 at 10:18 am

Posted in 1

Meten van resultaten na ‘esthetische update’.

with one comment

De wijzigingen die we voortaan maken aan onze facebook app, zullen voortaan voorafgegaan worden door een bespreking van de verwachtingen die we hebben over die wijzigingen. We moeten er ook voor zorgen dat we meetbare resultaten hebben die onze verwachtingen kunnen bevestigen/ontkrachten. Voor sommige dingen liggen die meetbare resultaten duidelijk voor de hand. Zo zullen we bijvoorbeeld een wijziging doorvoeren die een andere pagina als default laat zien dan voorheen. We verwachten hierbij dat er relatief minder doorgeklikt zal worden naar de andere pagina (die eerst de default was) . Dit kan duidelijk gemeten worden door het aantal kliks te tellen en te vergelijken met onze oudere gegevens. Jammer genoeg is het niet zo simpel om overal zo’n measure voor te vinden…

De eerste aanpassingen die we nu gaan doen zullen vooral gaan over het ‘mooier’ maken v/d app. Dit ligt (in mijn ogen) nogal wat moeilijker. Wat kunnen we verwachten van een ‘esthetische’ update? Het verandert niets aan de gameplay van onze app, het blijven dezelfde knoppen en links en zo, ze zien er enkel anders uit. Moeten we hiervan verwachten dat mensen langer zullen spelen? Ik heb hier toch mijn twijfels over, het is niet zo dat er extra voordelen voor de gebruiker mee gemoeid zijn. Het zal ook niet zo zijn dat een gebruiker nu gewoon langer de pagina zal bewonderen (want zooo heel mooi zal het nu ook weer niet worden…). Misschien moeten we eerder in de richting gaan van het tellen van het aantal mensen dat 1 maal op onze pagina komt kijken en vervolgens niet meer komt spelen (omdat ze geschrokken zijn van de lelijkheid v/d app). Maar om hier meetbare resultaten uit te halen zullen we ook weer een hoop nieuwe gebruikers moeten aanlokken, wat dan een probleem is dat we in een volgende iteratie wilden aanpakken.

Reacties en suggesties altijd welkom.

Written by tonyvanbeers

April 30, 2009 at 1:07 pm

Posted in 1

Demonstratie app

leave a comment »

Onze presentatie is hier te vinden.

Written by tonnyvp

April 28, 2009 at 1:43 pm

Posted in 1

Debugging JavaScript on Facebook

leave a comment »

I’m not going to be a man of many words today.. So let’s just get started.

On Firefox there is of course Firebug to help you debug your code, you can easily log your messages with the console.log(args) function. On Safari (and especially Webkit Nightly) you have Web Inspector built-in that works pretty much the same as Firebug. (And besides if your code works on Firefox, there’s a big chance it’ll work on Webkit.) So no real problems here. If you know how the sandbox of Facebook works you’ll be debugging your JavaScript in no time.

But of course this leaves out the browser with the largest market share.. Internet Explorer. I ran into a few problems when I tried to debug my code in IE7. I There wasn’t any descent JavaScript debugger available. I tried installing the Internet Explorer Developer Toolbar released by Microsoft but it didn’t seem to have any features for JavaScript debugging.. But it did give me an overview of the DOM structure. (Step 1)

To get descent error messages I installed Microsoft Visual Web Developer 2008 Express Edition. I’m not going into any details how to set this up. Just check out this blogpost for more details. Now you can easily track your JavaScript errors in JavaScript. (Step 2)

So now if only we had a way to display the content of variables. Since Facebook disabled the alert(msg) function it’s pretty hard to show simple information. I was thinking that it would be a lot nicer if I had some sort of function to display a bit more information about our variables. That’s why I created the simple fbDebug.js. Don’t expect anything fancy. I just looked on the web for a JavaScript clone of the popular print_r function in PHP. And wrote some code around it to make it easy to use on Facebook apps.

Here’s how it works.

  • You include the fbDebug.js file first, so it loads before other JavaScript files.
  • From now on you can easily call the $debug(args) function.
    • You can add any number of arguments.

    The function will now create an element with ID ‘fbDebug’ to your page and print information about your variables here. Or if the element already exists. It will overwrite its content with the information.

Example:

Let’s imagine that we have a class like this:

function Test() { this.i = 5; }
Test.prototype.doSomething = function() {}

And a DOM Element like this:

<pre id="fbDebug" />

Then this code:

$debug('Hello', 20, [123, "World"], new Test(), document.getElementById('fbDebug'));

Would result in:

"Debug :
  [0] : (string) hoi
  [1] : (number) 20
  [2] : (array) :
    [0] : (number) 123
    [1] : (string) World
  [3] : (object) :
    [doSomething] : (function) function() {}
    [i] : (number) 5"
  [4] : (object) <PRE#fbDebug>

Now we have completed our (Step 3). And now we can begin debugging our JavaScript code in a decent Internet Explorer Environment. I’m not going into any more details. But if you have any questions or remarks. Just shoot.

Written by Dries Janssens

April 13, 2009 at 5:26 pm

Posted in 1