Doing Things
Werkgroep 3
1
HP redesigns beoordelen
1. Ruil/Rouleer je Homepage redesign. 2. Vul de vragenlijst in voor het ontvangen redesign. nb.Vul bij naam, nummer en klas de gegevens van degene van wie je het werk beoordeelt in en niet je eigen naam. 3. Beoordeel het redesign met een cijfer.
10 á 15 minuten
2
g aa nd Va OO
Tools
oriented
OS-sen: OSX Vista/7 iPhone Symbian… komt niet vaak voor geen onderdeel van lesprogramma
Task
oriented
Object oriented
dingen doen
Info
oriented
dingen bekijken, beluisteren, lezen... ook volgende week en volgend jaar en overvolgend jaar 3
t
OBJECT ORIENTED 6/6
Obj
t Objec
ect
Object
t Objec
t
Ob jec
t
t
ct
ec j Ob
Ob je
Objec
ct
Ob je
ct
Object Oriented = User in Control
je b O
Ob je
ct
(in tegenstelling tot task oriented) 4
Vie w aan pas sen
ct
Ob jec
t
bje ct
Ob je
Se lec te er Cre eer Ob Obj jec ect t
Bew erk O
Object
Obj ect
5
Desktop
Bumptop
Objecten en gedrag
WindowsIconsPointerMenus
De volgende stap van de desktop metafoor of een stap te ver?
bron: bumptop.com (er is een nieuwe versie) 6
ob je ct
ai t n o C
ct e bj o r e n
To ol ob jec t
Da ta
7
Act
ie r
Co nt
ain er ob jec t
(in bo x)
Me
oo f a t
pe a (p
p) i l rc
t( c bje o a
) e j ilt a m
t Da Date object (mailtje)
ct) a t on c ( ct e j b o a Dat
Objecten en Gedrag
-
Object - Actie
-
User in Control Flexibel / Schaalbaar
-
Objecten uit reële wereld Metaforen Natuurlijke interactie Relaties tussen objecten Objecten met kenmerken
lbaar) a a h c s ( ils 2963 ma 8
Object georiënteerd + ... he isc log ak Va i .. mb co .
Formulieren (next week)
Menu’s en dialogen
Directe manipulatie
dit ar ma
dit ar ma
Vraag en antwoord
...
...
Command line
ok
ok
no ka
no ka
9
Object georiënteerd + Directe manipulatie + ...
Keyboard
Mouse/GUI
Pen/Stylus
Single point
Multi point
Good for
Good for
Good for
Good for
Good for
Con
Con
Con
Con
Con
Accuracy
Limited
Moving across the screen efficiently Indirect
Freeform input
Low accuracy Need large controls
Direct object selection
Not for input Low accuracy Need large controls
Manipulating objects
Not for input Low accuracy Need large controls
10
Ontwerp mijn.numa.nl voor de ING bank On-line bankieren voor kids van 6 tot 9 / Object georiënteerd / Direct manipulatie
De ING bank wil kinderen van 6 tot 9 als onderdeel van Numa’s Wereld de mogelijk geven om on-line te bankieren, mijn.numa.nl. Om dan als ze wat ouder zijn door te stromen naar een reguliere jongeren en ING rekening. De kinderen krijgen de beschikking over een girorekening, spaarrekening en een bankpas met één rekeningnummer. Voor de veiligheid en controle door ouders/verzorgers wordt slechts beperkte functionaliteit aangeboden.
11
Ontwerp mijn.numa.nl voor de ING bank On-line bankieren voor kids van 6 tot 9 / Object georiënteerd / Direct manipulatie
Stap 1a. Bepaal/analyseer • • • •
welke objecten een rol spelen (container / data / tools). de kenmerken van de objecten. welke acties met objecten uitgevoerd kunnen worden. de relaties tussen de objecten.
Stap 2a. Bedenk en... •
metaforen voor de objecten.
Stap 2b. ...ontwerp • •
de user interface (uitwerken op een flip-over). eerst de ‘HomePage’ (en vervolgens de rest van de applicatie).
Nb. Eenvoudig, intuïtief en aansluiten bij kinderen van 6 tot 9, bij bankieren en bij de ING bank. Nb. Moeilijke dingen: Rente, Periodieke overschrijving, Niet “Rood” staan, maximaal 50 dan wel 100 euro.
12
object kenmerken
‘Contant’ geld
Bankboekje
Bankafschrift
Bankbijschrift
(data object)
(container object)
(data object)
(data object)
-
Bedrag
-
Bedrag
-
Mededeling (optioneel)
-
Mededeling (optioneel)
-
Maximaal 100 euro (indien contactpersoon)
Bevat Bankafschriften en Bankbijschriften
-
Hoort bij Bankboekje
-
Hoort bij Bankboekje
-
Bekijken
-
Details bekijken
-
Details bekijken
-
Mapje
-
Nb. Wellicht geen apart object, maar een kenmerk van het Bankboekje
-
Nb. Wellicht geen apart object, maar een kenmerk van het Bankboekje
-
Huidige saldo Saldo mag niet negatief zijn
-
relaties
acties
-
Geld tellen / Saldo bekijken Geld geven aan Contactpersoon
-
mogelijke metaforen of icons
Contactpersoon of Spaarrekening
Hoort bij Contactpersoon of Spaarrekening
Datum (automatisch) Naam + Reknr. of Contactpersoon
Hoort bij Contactpersoon (optioneel)
Overzicht naar printer sturen
max 100 euro
-
Geld Sparen (naar Spaargeld)
-
Stapel geld Portemonnee ...
Datum (automatisch)
Notitieblokje Bankboekje ...
13
object
Adresboek
Contactpersoon
Printer
Bankbijschrift
data ? container ? tools ?
data ? container ? tools ?
(tool object)
(data object)
-
-
kenmerken
relaties
acties
Bevat Contactpersonen
Hoort bij Adresboek
-
Kan overzichten afdrukken
mogelijke metaforen of icons
14
object
Adresboek
Contactpersoon
Printer
Bankbijschrift
data ? container ? tools ?
data ? container ? tools ?
(tool object)
(data object)
Wie v
an de dri e?
W ie
va n
de
dr ie ?
kenmerken
relaties
acties
-
Bevat Contactpersonen
-
Hoort bij Adresboek
-
Kan overzichten afdrukken
mogelijke metaforen of icons
14
object
Adresboek
Contactpersoon
Printer
Bankbijschrift
data ? container ? tools ?
data ? container ? tools ?
(tool object)
(data object)
kenmerken
Welke ken
relaties
acties
-
Bevat Contactpersonen
-
merk en?
Hoort bij Adresboek
-
Kan overzichten afdrukken
We lke act ies ? mogelijke metaforen of icons
14
Ontwerp mijn.numa.nl voor de ING bank On-line bankieren voor kids van 6 tot 9 / Object georiënteerd / Direct manipulatie
Stap 1a. Bepaal/analyseer • • • •
welke objecten een rol spelen (container / data / tools). de kenmerken van de objecten. welke acties met objecten uitgevoerd kunnen worden. de relaties tussen de objecten.
Stap 2a. Bedenk en... •
metaforen voor de objecten.
Stap 2b. ...ontwerp • •
de user interface (uitwerken op een flip-over). eerst de ‘HomePage’ (en vervolgens de rest van de applicatie).
Nb. Eenvoudig, intuïtief en aansluiten bij kinderen van 6 tot 9, bij bankieren en bij de ING bank. Nb. Moeilijke dingen: Rente, Periodieke overschrijving, Niet “Rood” staan, maximaal 50 dan wel 100 euro.
15
User Interface status veranderingen Slide do wn
Edit Tag
Voor elk event een mini-storyboard 16
User Interface status veranderingen Slide do wn
Edit Tag...
...Edit Tag
Voor elk event een mini-storyboard 17
User Interface status veranderingen
k j i l e d n i e Uit of / n e o dem dig o n e p y protot
Edit Tag...
...Edit Tag
Voor elk event een mini-storyboard 17
Ontwerp mijn.numa.nl voor de ING bank On-line bankieren voor kids van 6 tot 9 / Object georiënteerd / Direct manipulatie
Stap 1a. Bepaal/analyseer • • • •
welke objecten een rol spelen (container / data / tools). de kenmerken van de objecten. welke acties met objecten uitgevoerd kunnen worden. de relaties tussen de objecten.
Stap 2a. Bedenk en... •
metaforen voor de objecten.
Stap 2b. ...ontwerp • •
de user interface (uitwerken op een flip-over). eerst de ‘HomePage’ (en vervolgens de rest van de applicatie).
Nb. Eenvoudig, intuïtief en aansluiten bij kinderen van 6 tot 9, bij bankieren en bij de ING bank. Nb. Moeilijke dingen: Rente, Periodieke overschrijving, Niet “Rood” staan, maximaal 50 dan wel 100 euro.
18
