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 oriented dingen doen Info oriented dingen bekijken, beluisteren, lezen... ook volgende week en volgend jaar en overvolgend jaar 3
OBJECT ORIENTED 6/6 Oriented = User in Control (in tegenstelling tot task oriented) 4
Bewerk Selecteer Creeer View aanpassen 5
Desktop WindowsIconsPointerMenus Bumptop en en gedrag De volgende stap van de desktop metafoor of een stap te ver? bron: bumptop.com (er is een nieuwe versie) 6
Data object Container object Tool object 7
Actie Metafoor (paperclip) en en Gedrag Container object (inbox) Data object (mailtje) Data object (contact) - - Actie - User in Control - Flexibel / Schaalbaar - en uit reële wereld - Metaforen - Natuurlijke interactie - Relaties tussen objecten - en met kenmerken Date object (mailtje) 2963 mails (schaalbaar) 8
georiënteerd +... Vaak logische combi... Command line...maar dit kan ook Vraag en antwoord Formulieren (next week) Menu s en dialogen...maar dit kan ook Directe manipulatie 9
georiënteerd + Directe manipulatie +... Keyboard Mouse/GUI Pen/Stylus Single point Multi point Good for Accuracy Good for Moving across the screen efficiently Good for Freeform input Good for Direct object selection Good for Manipulating objects Con Limited Con Indirect Con Low accuracy Need large controls Con Not for input Low accuracy Need large controls Con 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 / 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 / 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 Contant geld (data object) Bankboekje (container object) Bankafschrift (data object) Bankbijschrift (data object) kenmerken - Huidige saldo - Saldo mag niet negatief zijn - Bedrag - Datum (automatisch) - Contactpersoon of Spaarrekening - Bedrag - Datum (automatisch) - Naam + Reknr. of Contactpersoon - Mededeling (optioneel) - Mededeling (optioneel) - Maximaal 100 euro (indien contactpersoon) relaties - Bevat Bankafschriften en Bankbijschriften - Hoort bij Bankboekje - Hoort bij Contactpersoon of Spaarrekening - Hoort bij Bankboekje - Hoort bij Contactpersoon (optioneel) acties - Geld tellen / Saldo bekijken - Geld geven aan Contactpersoon - Bekijken - Overzicht naar printer sturen - Details bekijken - Details bekijken - max 100 euro - Geld Sparen (naar Spaargeld) mogelijke metaforen of icons - Stapel geld - Portemonnee -... - Mapje - Notitieblokje - Bankboekje -... - Nb. Wellicht geen apart object, maar een kenmerk van het Bankboekje - Nb. Wellicht geen apart object, maar een kenmerk van het Bankboekje 13
object Adresboek data? container? tools? Contactpersoon data? container? tools? Printer (tool object) Bankbijschrift (data object) kenmerken relaties - Bevat Contactpersonen - Hoort bij Adresboek acties - Kan overzichten afdrukken mogelijke metaforen of icons 14
object Adresboek data? container? tools? Contactpersoon data? container? tools? Printer (tool object) Bankbijschrift (data object) kenmerken Wie van de drie? Wie van de drie? relaties - Bevat Contactpersonen - Hoort bij Adresboek acties - Kan overzichten afdrukken mogelijke metaforen of icons 14
object Adresboek data? container? tools? Contactpersoon data? container? tools? Printer (tool object) Bankbijschrift (data object) kenmerken Welke kenmerken? relaties - Bevat Contactpersonen - Hoort bij Adresboek acties - Kan overzichten afdrukken Welke acties? mogelijke metaforen of icons 14
Ontwerp mijn.numa.nl voor de ING bank On-line bankieren voor kids van 6 tot 9 / 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 down Edit Tag Voor elk event een mini-storyboard 16
User Interface status veranderingen Slide down Edit Tag......Edit Tag Voor elk event een mini-storyboard 17
User Interface status veranderingen Uiteindelijk demo en/of prototype nodig 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 / 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