Workshop Studio Dumbar

Hier kan je de presentatie terugvinden van de workshop.
Kort uitgelegd:
Social netwerken draait om mensen in het oog te houden, op te volgen. Je “bespioneert” als het ware je vriend of vriendin. Soms heb je ook mensen in je netwerl zitten die je erg leuk vindt, waar je bewondering voor hebt of wie je iemands levensstijl wel cool vindt. Daar draait ons core concept om.
In de plaats van Essent als een bedrijf te profileren creëren we verschillende “characters” hier rond. Deze characters hebben elk hun eigen persoonskenmerken, en samen vormen ze Essent City. Je kiest een character uit waar jij het meeste affiniteit hebt en voeg deze toe als vriend. Deze vriend kan je dus opvolgen en je ziet dus als het ware wat hij uitspookt in het dagelijkse leven. Deze character is een ambassadeur van Essent. Hij/zij doet “groene” dingen waarvoor hij betaald wordt. Het is dus een in scene gezet spel. Van het leven worden foto’s en video’s gemaakt. De vriend geeft je tips, geeft je groene pokes enz. Op die manier wordt je steeds aan herinnert welke simpele dingen je zelf kan doen om de wereld groener te laten worden en minder te consumeren. Er kan ook gekozen worden voor échte Essent ambassadeurs, die eventueel een vergoeding krijgen om te berichten over hun leven.

Taakverdeling groepsopdrachten

Belastingdienst Formulier Werkzaamheden (Individueel)

- brainstormen functies – aantekeningen aanpassingen
- tekstueel uitschrijven van aanpassingen en onderbouwing (post 16 okt.)
- Meedenken uitwerken schetsen (post 16okt.)
- Webbel: script + opname + voice over (post 21 okt.)

Interaction Design Elements Werkzaamheden (Individueel)

- onderzoek content: users (16 okt.)
- brainstorm op dinsdagen : vastleggen onderwerpen (16 okt.)
- onderzoek content: interaction design elements: theorie (tekst)
- bijhorende filmpjes en plaatjes opzoeken bij theorie
- structuur/indeling opmaken
- script voor voice over schrijven
- scenario uitdenken (volgorde afwisseling tekst en beeldmateriaal)
- opname en voice over (28 okt. en 1 nov.)

les 1: Interaction design elements – video

Hier kan je de video downloaden die over interaction design elements gaat.

Ik heb de tussenstukjes (theorie) korter gehouden, om zo de aandacht van de bezoekers beter vast te houden. De videostukjes zijn soms klein uitgevallen, maar dit kan niet worden verholpen, aangezien deze zo upgeload waren. Vergroten zou leiden tot minder beeldkwaliteit, wat zeker niet ten goede zou komen voor de overall kwaliteit van de les.

flash presentatie interaction elements – jaar 1

hierbij de flash presentatie die we gebruiken voor de les van jaar 1 over interaction design elements.

Gisteren hebben we in de les een kort deeltje bekeken van onze gemaakte video. Er bleken nog veel dingen niet goed te gaan:

- uitleg te saai en te langdradig

- te veel euh tussen de tekst

- geluidsopename enkel bij interne mic en niet bij luidsprekers

- haperende filmpjes van youtube

We gaan vandaag verder met het verbeteren van het filmpje. Zo hebben we eerst alle youtube filmpjes gedownload via een firefox addon. Na het converten van de filmpjes, gaan we nu deze in final cut pro bewerken, zodanig dat er makkelijker kan oversprongen worden tussen de flash les en de filmpjes. Dit brengt wel mee, dat de gedownloade filmpjes klein van formaat zijn (youtube formaat), we gaan zien wat dat geeft in de uiteindelijke les. Ik ga vandaag de flash les opnieuw inspreken, proberen van het korter en met minder euhs ertussen op te nemen Ik doe mijn best! Daarna gaan we de filmpjes en de flash les opname samenvoegen en eventueel nog nabewerken, indien nodig. Hopelijk lukt het!

Belastingdienst prototype – video uitleg

Onderzoek interaction design elements

Hier kan je het eerste onderzoek terugvinden van de interaction design elements.

Daarna heb ik een lijst gemaakt van welke dingen uitgewerkt moesten worden en welke info moest worden verteld:

Frame 1:
1. Wat is een input device?

“Een input device is een deel van de computer hardware waarmee de gebruiker data en signalen doorgeeft aan een information processing system, zoals vb. een computer. Input devices en output devices vormen samen de hardware interface tussen de computer en de gebruiker of wereld.”

Simpelweg: “De technologie waarmee de gebruikers het systeem kunnen manipuleren”

2. Welke input devices worden het meeste gebruikt?

overview in images:  toetsenbord, muis, pen & tablet, touchscreen, touchpad, game controls,…

3. Pro’s & cons van input devices

Toetsenbord

Pro’s
- ze zitten op elke computer
- ze geven geen extra kosten mee
- veel mensen weten hoe ze een toetsenbord kunnen gebruiken
- de input kan korte en lange antwoorden geven
- kort: vb. het woord “de” typen
- lang: vb. “ik ga naar de supermarkt, kom je mee?”

Cons:
- een kleine groep mensen kunnen het toetsenbord niet goed gebruiken vb. niet blind typen)
- typfouten of spellingfouten kunnen niet via het toetsenbord worden verbeterd
- Sommige symbolen vergen een beetje handigheid om ze te kunnen typen (vb. ” : ” vergt shift+;.

Muis

Pro’s:
- het gebruiken van een muis kan de vaardigheden verrijken
- het gebruik is gemakkelijker dan een toetsenbord (enkele klik, of dubbelklik, rechts of links, bewegen)
- De meeste mensen weten hoe om een muis te gebruiken
- Muis is goed voor gedetailleerde en accurate input. vb. drag and dro items
- De meeste computers hebben een bijhorende muis
- Muizen zijn relatief goedkoop
- trackball werkt op dezelfde manier dan een muis –> snel aanleren
- bij vele multimedia applicaties in ene leeromgeving wordt de muis gebruikt

Cons:

- Bij beginnelingen is het soms moeilijk om te wennen aan het gebruik van een muis. Het verschil tussen linker en rechterklik is soms moeilijk om aan te leren.
- Muizen worden makkelijk gestolen.

Touch screen

Pro’s:
- het gebruiken van een touch screen kan de vaardigheden verrijken
- een touch screen is makkelijker aan te leren in vergelijking met een toetsenbord of een muis

Cons:

- Een touch screen kan geen schrijfvaardigheden aanleren
- Beginners kunnen moeite hebben om accuraat iets aan te raken (vingers zijn grotere dan de touch vlakken, de hoek van waar je kijkt komt niet overeen met de échte plaats van het touchveld”.
- De accuraatheid van het aanraken is afhankelijk van de grootte van de touch screen –> hoe kleiner de screen, hoe meer fouten
- het minimum “touchveld” moet 1/10 zijn van de horizontale en verticale lengte zijn van de de gehele touch screen.
- het optillen van de armen werkt vermoeiend
- touch screens worden vuil door vingerafdrukken en  andere aanrakingen
- een touch screen is donkerder en minder constrastrijk dan een monitor.
- relatief goedkoop, maar toch extra kost bij een basis computer

Pen input

Pro’s:
- goed voor mensen met weinig kennis van het toetsenbord
- eens geinstaleerd, goed en snel voor het maken van antwoorden, notities en commentaar
- beperkt de kans op rsi in vergelijking met een muis en toetsenbord
- drukgevoelig

Cons:
- Het kost veel tijd om de computer je handschrift te laten kennen
- Je schrijfstijl moet consistent zijn
- Een pen kan niet op alle hardware platformen worden aangesloten
- moeilijk oplossen van typ- en spellingsfouten
- moeilijk om hoofdletters, leestekens enz. in te voeren

Frame 2:

3. Introductie eerst muis

Douglas Engelbart & William English, 1964 ( foto inserten)
Filmpje eerst muis tonen (http://www.youtube.com/watch?v=1MPJZ6M52dI)
History of the mouse (http://www.youtube.com/watch?v=pKZtJ-UCMOY)

Frame 3:

4. Input devices and direct manipulation

Wat is direct manipulation?
Moderne grafische user interfaces zijn gebaseerd op de directe manipulatie van visuele elementen op het scherm. De mogelijkheid om dingen “vrij” door het beeld heen te schuiven stelt eisen aan de input-apparaten die tot onze beschikking
staan.
Kort gezegd: het klikken en slepen van objecten.
video direct manipulation: http://www.youtube.com/watch?v=U0DOiBGAm5M

De drie belangrijke componenten:
1. visuele representatie van de objecten waar een applicatie uit bestaat
2. zichtbare mechanismen om deze voorwerpen te hanteren
3. direct zichtbare resultaten van deze acties

Ook visual manipulation genoemd, omdat het zo belangrijk is wat de user ziet tijdens het hele proces!
–> Rijke visuele feedback is de sleutel van succesvolle Direct Manipulation.

Wat is de kracht van direct manipulation?
- simpel
- makkelijk te leren
- makkelijk te onthouden

5. Drag and drop

Wat is drag & drop?
Klikken op een object en dit object verplaatsen naar een nieuwe locatie.
Video: http://www.youtube.com/watch?v=ta7G9o_RBcM (drie componenten)

3 Stappen:
- klikken op object –> source object (CLICK)
- verslepen van het object: plakt aan de muis, gaat “over” andere dingen heen (DRAG)
- drop targets moeten duidelijk zijn: drop candidates
- het object loslaten (DROP)

web: http://www.flickr.com/photos/organize/

Voorbeelden:
- een file openen via het verslepen naar het programma icoon
- files kopiëren of verplaatsen naar een folder/plaats/directory
- objecten toevoegen aan een lijst (vb. playlist)
- lay-out customizen
- een commando verplaatsen naar een object (kleur verplaatsen naar een kadertje=fill)
- tool verslepen naar een canvas om de tool te kunnen gebruiken
- een hyperlink creëren van de ene naar een andere locatie of document
- woorden verplaatsen van locatie (vb Word)

Frame 4:

Toekomst van input devices:

Wii remote: infrarood (kracht, zwaartekracht en afstand)
voice input
eye movement tracking
youtube: http://nl.youtube.com/watch?v=eBKCehTzU7M
http://nl.youtube.com/watch?v=SD4YBBAIONA
http://www.philips.com/about/brand/thesimplicityevent/index.page

Frame 5:

Literatuur:

The essenatials of interaction Design: About Face 3 – Alan Cooper
The Elements of User Experience: User-Centered Design for the Web – Jesse James Garrett

Belastingdienst prototype

Hier kan je het prototype bekijken van de belastingdienst opdracht.

Binnen enkele dagen komt er nog een korte webbel, die het prototype doorloopt, met uitleg nog even geduld aub

Visuals belastingdienst

Interaction Elements – minicollege

Volgende onderdelen zijn vastgelegd en goedgekeurd voor het minicollege over Interaction Elements.

Hier kan je een klein schetsopzet terugvinden.

minicollege – users

Ik had al een opzetje gemaakt voor het minicollege (video) voor de eerstejaars met betrekking to users. Naderhand is besloten om enkel voor interaction elements te gaan, omdat het anders te uitgebreid zou worden. Toch zet ik even online wat ik tot nu toe had gemaakt, dan is die zaterdag toch niet verloren gegaan. Wie weet kan iemand er nog iets mee