Het ontwerpen van Userinterfaces

Het ontwerpen van

Userinterfaces

René Dohmen 2008-2011

1

Inleiding Er zijn twee manieren om dit lesmateriaal door te werken: de leerling kan een planning binnen een gegeven periode maken of de leerlingen volgende planning van de docent. Wat van toepassing is bepaalt de docent natuurlijk. Docentplanning De planning is gemaakt op weekniveau. Per week staan de opdrachten vermeldt die je moet maken. Tijdens de laatste les van de week moet je de opdrachten schriftelijk inleveren. Op de eerste bladzijde schrijf je de datum en je naam. Tijdens de laatste les mail je alle materiaal in een zip-bestand naar [email protected] onder vermelding van je naam, klas en het onderwerp 'userinterfaces'. Week 1 1 1 1 1 2 2 2 2 3 3 3 4 4 4 5 5 5 6 6 6 6

opgaven 1.2 2.1 tm 2.4 3.1 4.1 tm 4.2 5.1 tm 5.3 6.1 tm 6.5 7.1 tm 7.4 8.1 9.1 10.1 tm 10.2 11.1 tm 11.5 12.1 13.1 tm 13.6 14.1 tm 14.3 15.1 tm 15.5 16.1 17.1 tm 17.4 18.1 tm 18.2 19.1 tm 19.2 20.1 tm 20.3 21 22

per hoofdstuk 2 4 1 2 2 4 4 1 (extra) 1 2 5 1 6 3 4 1 veel werk 4 2 2 3 1 1 veel werk

2

per week

12

11 8 14 7

7

Leerlingplanning Hieronder vind je een voorbeeld van een planning die door een leerling gemaakt is. Deel 1 Maak een spreadsheet aan in Google Documents. Bewaar deze onder de naam PlanningUserinterfaces en geef [email protected] leesrechten. Deel 2 Lees alle opdrachten in zijn geheel door. Maak een planning voor deze opdrachten. Geef per vraag een schatting van de tijd in minuten die je nodig denkt te hebben om de opdracht uit te voeren. Van je docent krijg je een einddatum. Verwerk dit alles tot een planning in het bestand PlanningUserinterfaces door per datum aan te geven welke opdracht. Hieronder zie je een voorbeeld: neem de vormgeving letterlijk over in je document. Tijdsinschatting Opdracht 1 2

tijd (min) 20 15

opmerkingen ….

Planning datum 2 oktober 4 oktober 6 oktober

opdracht(en) 1.1 2.1 2.2 2.3

3

Voorbeeld van een tijdsinschatting en planning Tijdinschatting Opdracht 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Tijd(minuten) 30 25 20 30 20 45 20 30 20 30 40 20 20 25 20 40 20 20 10 15 15

Opmerking

Totaal:

8 uur en 35 minuten

Betoog gaat het meeste werk kosten Stond bij dat het moeilijk is

Planning Datum 7 Januari 2011 12 Januari 2011 13 Januari 2011 19 januari 2011 20 Januari 2011 26 Januari 2011 27 Januari 2011 26 Januari 2011 2 Februari 2011 3 Februari 2011 9 Februari 2011 11 Februari 2011

Opdracht(en) 1,2 3,4 4,5 6, 7,8 9,10 11, 12,13 14,15 16, 17,18 19, 20, 21

4

Deel 3 Daarna maak je een tweede document aan met de naam LogboekUserinterfaces. Ook voor dit document geef je [email protected] leesrechten. In dit document houd je elke activiteit voor deze opdrachten bij. datum 1 oktober 3 oktober 5 oktober

starttijd 15:10 16:05 20:20

eindtijd 15:40 16:45 21:10

tijd (min) 30 40 50

opmerkingen …. .. ….

LET OP: Bij opdracht 5.3 heb je een tablet nodig. Omdat er maar een beperkt aantal exemplaren aanwezig zijn, moet je deze opdracht maken als een tablet vrij is. Dat mag ook tijdens tussenuren. Uitwerking Bij het uitwerken van de opdrachten zul je vaak tekeningen en schetsen moeten maken. Voeg deze digitaal bij het verslag. Dat kan het eenvoudigste met een fototoestel, maar je mag ze ook scannen (Het moet 'leesbaar' zijn). Video's maak je het gemakkelijkste met de video-functie van een fototoestel of een webcam. Je moet de opdrachten op de volgende manier opslaan: − −

maak een map met de naam userinterfaces maak binnen die map mappen met de nummers 1 t/m 20. Binnen elk van die mappen sla je de bestanden op van die opdracht.

Word-bestanden moet je opslaan in .doc-formaat (dus niet .docx). De tekst moet schreven zijn in het lettertype Times New Roman, puntgrootte 12. Een titel is 16pt groot. Elke les lever je bij je docent een afdruk in van de opdrachten die je af hebt. Hoe eerder je inlevert, hoe beter. Tijdens de laatste les lever je een mapje in met een afdruk van het hele verslag inclusief alle bijlagen. Bovendien lever je alles digitaal – gezipt – in. Dat doe je door het zip-bestand op je website te zetten.

5

Les 1: Wat is een userinterface?

Deze lessen gaan over userinterfaces. Lees op wikipedia de volgende artikelen door: http://nl.wikipedia.org/wiki/Mens/machine-interface http://nl.wikipedia.org/wiki/HMI http://nl.wikipedia.org/wiki/Gebruikersinterface http://nl.wikipedia.org/wiki/Opdrachtregelinterface http://nl.wikipedia.org/wiki/Tekstuele_gebruikersinterface http://nl.wikipedia.org/wiki/Grafische_gebruikersomgeving In dit Engelstalige artikel vind je nog meer informatie en verwijzingen: http://en.wikipedia.org/wiki/User_interface opdracht 1.1 Schrijf op wat een userinterface is. Je uitleg moet ongeveer een halve pagina A4 lang zijn. Opdracht 1.2 Welk computerprobleem zit jou in de weg? Wat moet er absoluut beter? En je weet zeker dat het beter kan! Waarom luistert er niemand naar jouw geweldige oplossing? Beschrijf een door jou zelf verzonnen computerprobleem en geef de beste oplossing daarvoor. Het computerprobleem moet gaan over een bewerking die je op het scherm doet. Je oplossing moet een beschrijving van 200 woorden en een tekening bevatten.

6

Les 2: De userinterface van een MP3-speler Bestudeer de userinterface van je MP3-speler. Verwerk je bevindingen in een Wordbestand. Als je geen MP3-speler hebt mag je in plaats daarvan de userinterface van een PDA of een routeplanner (TomTom) beschrijven. Bespreek dit met je docent voor je aan de opdracht begint. Opdracht 2.1 Schrijf op welke merk/type het is. Opdracht 2.2 Maak een foto van de MP3-speler (dit is het origineel). Maak kopie van de foto. Hierop geef je met behulp van een tekenprogramma aan welke knoppen/schermen etc. er zijn. Neem beide foto's in het verslag op. Opdracht 2.3 Geef een complete beschrijving van het menu door de boomstructuur tekenen. Als je screenshots in het verslag opneemt is de waardering hoger. Je moet dat op de onderstaande manier doen. Gebruik voor dat deel van je verslag een zogenaamd niet-proportioneel lettertype1, zoals Courier New. Gebruik TAB om in te springen. Afspelen Albums Artiesten Stijl Pop Rock Opdracht 2.4 Geef van alle onderdelen waarmee je de mp3-speler (knoppen, menu, scherm, behuizing) aan hoe gebruikersvriendelijk je ze vindt op een schaal van 1-5 (1=zeer slecht te bedienen, 5=zeer gemakkelijk te bedienen). Leg uit waarom je dat vindt. Je moet minimaal de volgende aspecten in je beoordeling meenemen. Kleurgebruik Grootte Plek van de onderdelen op de behuizing (dit kun je uitsplitsen per onderdeel). Leesbaarheid van het scherm (grootte, kleur en soort van de gebruikte lettertypes, contract en resolutie van het scherm) Iconen op of bij de knoppen.

1

Niet-proportioneel houdt in dat alle letters even breed zijn. Een i is dus even breed als een m. Bij een proportioneel lettertype heeft elke letter een aangepast breedte. Dan zal de i veel smaller zijn dan de m.

7

Relatieve plek van de onderdelen op de behuizing (dus de positie t.o.v. de randen, het scherm of andere knoppen). De (relatieve) grootte van de onderdelen. De volgorde van de menu-items. Het aan- of juist afwezig zijn van menuonderdelen. Neem een kopie van de onderstaande tabel in je verslag op om dit onderdeel te verwerken. onderdeel

beoordeling argumentatie

Kleurgebruik

4

Grootte

5

...

...

...

8

Les 3: Analyse van een inlogscherm

Elke Windows-versie heeft zijn eigenlijk inlogscherm gehad. Wat zou je kunnen variëren aan iets eenvoudigs als een inlogscherm? Wat is de waarde van die variaties? Is het ene inlogscherm beter dan het andere? Ontwerp jouw idee van een inlogscherm. Er moeten meerdere gebruikers in je systeem zitten. Het gaat er niet om dat je een bestaand scherm namaakt, maar vooral dat je (nieuwe/andere) mogelijkheden onderzoekt. Opdracht 3.1 Analyseer de mogelijkheden. Denk bijvoorbeeld aan de grootte en plaats van invoervelden, kleurgebruik, iconen. Eventuele statische teksten op scherm en de grootte en plaats daarvan. Beschrijf welke aspecten/alternatieven je onderzocht hebt en waarom je uit de mogelijkheden juist deze gekozen hebt. Je kunt de alternatieven toelichten door middel van (computer-)tekeningen of schermafdrukken die je in je verslag bij deze opdracht opneemt. Teken je ontwerpen met een tekenprogramma. Gebruik bijvoorbeeld dit programma: http://www.cumulatelabs.com/draw/draw.html?release=0.4.7 Alternatief: IBM heeft een pagina met veel voorbeelden van schermelementen http://www-01.ibm.com/software/ucd/widgetgallery/widget_home.html Als je al kunt programmeren is het een pre als je een werkende demo in Delphi of Small Basic van je idee laat zien. Voeg een screenshot van het programma als tekening in. Op de einddatum stuur je de broncode mee.

9

Les 4: Tekenprogramma's vergelijken Opdracht 4.1: Analyseren Kies in overleg met de docent twee van de volgende online tekenprogramma's. http://www.billybear4kids.com/Learn2Draw/PaintProgram/drawing.htm http://muro.deviantart.com/# http://www.allgraphicdesign.com/graphicsblog/2008/05/online-drawing-tools-freeonline-painting-sketching-tools/ Maak voor elk programma een tabel waarin je de de tekenfuncties van het programma opsomt. Post de tabel op dit webadres: spreadsheets.google.com/viewform?formkey=dDh1WVNfVFFkMVNNUmNNVEF4dHhsY3c6MQ

Opdracht 4.2: vergelijken Schrijf een korte beoordeling van de programma's waarin je de functies (wat het programma kan) en de gebruiksvriendelijkheid vergelijkt en beoordeeld. Je moet minimaal van de volgende functies aangeven of het programma dat jij beoordeeld die beheerst.

Vrij tekenen (pen) curve tekenen lijn trekken afbeelding invoegen (sticker) open rechthoek tekene gevulde rechthoek teken ellips tekenen cirkel tekenen tekst schrijven frame om afbeelding achtergrond instellen muziek toevoegen

10

vloeiende lijn kleur opnemen (punt aanwijzen->kleur wordt overgenomen) kleur selecteren in pallet undo/redo zoom in zoom out verplaatsen van een selectie nieuwe afbeelding bewaren laden afbeelding gum fill verkleinen/vergroten lijnkleur vulkleur positie muis wordt weergegeven grootte van rechthoek e.d. wordt tijdens het slepen aangegeven raster op de achtergrond om uit te lijnen dikte lijnen aan te passen paintbrush dichtheid paintbrush vrij te kiezen afmeting paintbrush vrij te kiezen

11

Les 5: Alternatieve manieren van bedienen en interactie Niet klikken Bekijk de volgende website: http://www.dontclick.it/ Op welke manier blader je door de website? Wel klikken De Spaanse zangeres Labuat heeft op haar website deze bijzondere interactieve clip staan: http://soytuaire.labuat.com/ Hoe reageert de clip de muiskliks en muisbeweging? Gepersonaliseerde video In september 2010 was The Wilderness Downtown een hit op internet: http://thewildernessdowntown.com/ Iedere gebruiker kan een aangepaste versie van een videoclips bekijken. Op het ogenblik (najaar 2010) is het alleen in Firefox of Chrome mogelijk om de clip te bekijken. Multitouch Een paar jaar geleden was dit nog toekomstmuziek. Bekijk de het multitouchscreen van Jeff Han: http://multi-touchscreen.com/perceptive-pixel-jeff-han.html Bekijk ook de link over Microsoft’s Surface. Het scherm wordt niet met de muis bediend. Zou dat toch (even goed) kunnen? Welke ‘dingen’ - die je op een normale computer ook vind – zijn niet verdwenen? In het najaar van 2010 werd multitouch een bekend verschijnsel. In het najaar van 2011 zit het bij nagenoeg iedere nieuwe telefoon.

12

Zenzui Zoek op youtube filmpjes van de ZenZui interface. http://www.youtube.com/watch?v=r12eUXJNbl8 http://www.youtube.com/watch?v=XgE-lLN1GBQ Welke bijzondere manier(en) van bedienen heb je gezien?

Microsoft Courier De Courier is Microsoft's nieuwste idee over mobiel gebruik van een computer. Bekijk de filmpjes op de onderstaande website en vermeldt mindstens 10 opvallende eigenschappen van deze Userinterface die je bij de huidige Windows-computers niet tegenkomt. http://www.engadget.com/2010/03/05/microsofts-courier-digital-journal-exclusivepictures-and-de/ (najaar 2010: de Courier is inmiddels van Microsoft's lijstje met plannen geschrapt) Microsoft UMPC Een UMPC (Ultra Mobile PC) kan met een speciale versie van Windows uitgevoerd worden: Bekijk de website en noteer bij elk scherm de bijzonderheden die je ziet. http://www.microsoft.com/windows/products/winfamily/umpc/demo.mspx en http://news.cnet.com/8301-10805_3-20128013-75/the-inside-story-of-howmicrosoft-killed-its-courier-tablet/ Microsoft Kin Ook de Kin werd in 2010 aangekondigd, én afgeblazen. Zoek op youtube naar filmpjes van de Kin. Update: in november 2010 kwam ineens het bericht dat de Kin toch op de markt gebracht wordt. 8Pen Bekijk het filmpje over 8Pen: http://www.the8pen.com/ Fluid app layout Een ontwerp voor een iPad-app met alleen maar klikbare vlakken (op een iPad klik je natuurlijk niet met een muis maar met een vinger). 13

http://vimeo.com/29136481 Windows phone Je kunt Windows voor telefoons ook uitproberen zonder z'n telefoon te kopen. http://m.microsoft.com/windowsphone/en-us/demo/unsupported.mspx Opdracht 5.1 In september 2011 verschenen de eerste filmpje van het nieuwe besturingssysteem Windows8 op youtube. In het eerste filmpje zie je een omgeving die er op het tradionele Windows lijkt, maar waarin toch veel bijzondere userinterface-elementen te vinden zijn. http://www.youtube.com/watch?v=CGhOtLfbjhM In het tweede filmpje zie je Microsoft Windows8 gemaakt voor tablets (denk maar aan een iPad). http://www.youtube.com/watch?v=p92QfWOw88I Het derde filmpje is het vervolg op het tweede. http://www.youtube.com/watch?v=l3YAaT2imZ0&feature=related Maar er is nog veel meer te vinden: http://www.youtube.com/watch?v=kBHujE6DdrA&feature=related Bekijk de filmpjes en vermeldt minstens 10 nieuwe of opmerkelijke bedien-elementen om Windows te gebruiken. Noteer elk van de 10 bedienelementen op de volgende manier: − − − − −

link van het filmpje tijdstip waarop het element te zien is screenshot van het filmpje waar het (zet het filmpje even stil) korte beschrijving van wat je ziet beschrijving van wat er volgens jou nieuw of opmerkelijk aan is

Gebruik daarvoor de tabel uit onderstaand voorbeeld. voorbeeld link

http://www.youtube.com/watch? 14

v=kBHujE6DdrA&feature=related tijdstip

01:06:00

screenshot

Korte beschrijving

De computer werkt met een touchscreen

Wat is er opmerkelijk Er zijn wel versies van Windows die met een touchscreen werken, maar nog nooit zo veelzijdig als bij deze versie.

Opdracht 5.2 Let op: er zijn drie mogelijkheden om deze opdracht uit te voeren: Ubuntu, Android Tablet, Android Styleguide. Je hoeft maar 1 van deze drie opdrachten uit te voeren. Omdat er weinig tablet zijn, is Ubuntu of Android Styleguidede manier om deze opdracht snel te maken. Bovendien kan het dan ook thuis. Misschien dat je door je beoordeling van Ubuntu op het idee komt om Ubuntu op je eigen PC te gaan gebruiken? Ubuntu Bekijk het besturingssysteem Ubuntu in VirtualBox. VirtualBox kun je hier downloaden: https://www.virtualbox.org/ Ubuntu kun je hier downloaden: http://www.ubuntu-nl.org/getubuntu/download Beschrijf verschillen in de UI (maak screenshots: Applications > Accessoiries > Take Screenshot). Lees hier meer over het maken van screenshots onder Ubuntu.

15

http://mygeekopinions.blogspot.com/2011/05/how-to-take-screenshotincluding-menus.html Onderzoek hoe drives en mappen in Ubuntu getoond worden. Schrijf op welke verschillen je ziet. Laat zien met screenshots zien wat je gevonden hebt Android Bekijk het besturingssysteem Android op een tablet. Beschrijf verschillen in de UI (maak screenshots, bijvoorbeeld met: http://sourceforge.net/projects/ashot/). Onderzoek hoe drives en mappen in Android getoond worden.Ubuntu getoond worden. Schrijf op welke verschillen je ziet. Laat zien met screenshots zien wat je gevonden hebt. http://sourceforge.net/projects/ashot/ Android StyleGuide Bekijk de styleguide van Android 4.0 op deze website: http://developer.android.com/design/style/index.html Kies in het menu voor Building Blocks. Neem de volgende tabel over en vul in de tweede kolom in wat je bijzonder vind aan de stijl en werking van elk UI-element. UI-element

Bijzonderheden

Tabs Lists Grid Lists Scrolling Spinners Buttons Text Fields Seek bars Progress & activity Switches Dialogs Pickers

16

Opdracht 5.3 LET OP: Er is maar een beperkt aantal tablets beschikbaar. Maak deze opdracht dus op een moment dat een tablet vrij is. Dat mag ook tijdens een tussenuur. Gebruik een tablet van school om te onderzoeken of je het vak informatica met zo'n apparaat zou kunnen geven. Kies een onderwerp van het vak informatica (overleg even met je docent; er mogen geen onderwerpen dubbel gekozen worden). – Beschrijf op welke fronten je de tablet wel kunt gebruiken. – Vermeld op welke onderdelen een tablet onbruikbaar is. – Bedenk manieren om de tablet toch bruikbaar te maken (door aanpassingen voor te stellen met betrekking tot de gebruikte software etc.)

17

Les 6: Invoer en uitvoer → Het toetsenbord, de muis en het scherm De ramplank – ook wel bekend als het Toetsenbord – is het meest gebruikte apparaat om informatie in een computer in te voeren. Bestudeer deze websites over toetsenbordjes (op smartphones). http://blogs.msdn.com/jasonlan/archive/2006/01/06/510052.aspx http://www.allaboutsymbian.com/features/item/The_fastest_gun_in_the_west.ph p http://en.wikipedia.org/wiki/Dvorak_Simplified_Keyboard http://www.mt.nl/158/50801/techbusiness/keyboard-2-0.html? order=0#slideshow dit was de oude link: http://www.geardiary.com/2007/08/16/smartphone-smartphone-in-my-handwhich-is-the-fastest-thumbboard-in-the-land/ Opdracht 6.1 Onderzoek welke verschillende toetsenborden er bestaan. Denk bijvoorbeeld aan QERTY, AZERTY, T9, ... Opdracht 6.2 Type de volgende tekst op de volgende toetsenborden laat iemand anders de tijd meten die je nodig had. “De snelle bruine vos springt over de luie hond” Gebruik de volgende toetsenborden: − − − −

een normaal toetsenborden een T9 toetsenbord op je mobiele telefoon een virtueel toetsenbord in Windows een virtueel toetsenbord op Touchscreen (bijvoorbeeld een iPod Touch)

En als je de mogelijkheid hebt: − −

Swipe een kleine telefoontoetsenbord (bijvoorbeeld Blackberry)

Het virtueel toetsenbord kun je vinden onder: 18

Bureau-accessoires > Toegankelijkheid > Schermtoetsenbord

Post je resultaten d.m.v. Het volgende formulier: spreadsheets.google.com/viewform?formkey=dF94OUI0V0Nvc0s5aXhPQ09QU3Z4TlE6MQ

De link kun je ook op de website vinden. Opdracht 6.3 Lees het volgende artikel over een patent van IBM: IBM's nieuwe virtuele toetsenbord past de toetsen op het scherm automatisch aan de grootte van de vingers en de manier van typen aan. IBM heeft onlangs een nieuw virtueel toetsenbord gepatenteerd dat de indeling van de toetsen aanpast op de anatomie en de typstijl van de gebruiker. De interface van het touchkeyboard past zich aan aan de persoon, waarbij de lettertoetsen van grootte, vorm en positie kunnen veranderen. Het virtuele toetsenbord heeft een kalibratiefase waarbij de gebruiker een serie oefeningen moet doen om de metingen en anatomische algoritmes op gang te krijgen. De software meet de grootte en positie van de vingers op het touchscreen. Na een tijdje - IBM zegt niet precies hoe lang - past het toetsenbord zich aan de gebruiker aan. Sommige letters staan net iets hoger of zijn wat groter. Het doel is dat mensen dan minder typfouten maken. In de patentaanvraag stelt IBM dat de techniek is te gebruiken op zowel touchscreens als op materiaal met computerprojecties. Bron: http://www.bright.nl/virtueel-toetsenbord-past-zich-aan-je-aan Schrijf jouw versie van dit touchscreen toetsenbord in Small Basic. Opdracht 6.4 Je docent verdeelt de volgende opdrachten over de leerlingen van je klas. Vraag je docent welke opdracht jij moet maken. Het betoog/verslag moet minimaal een half en maximaal een heel kantje A4 zijn (lettertype Times New Roman, 12 pt) Schrijf een betoog over de toekomst van het toetsenbord. Hoe zal de mensheid in de toekomst teksten invoeren? Schrijf een betoog over de toekomst van de muis. Schrijf stuk waarin de werking van de muis uitgelegd wordt. Schrijf een verslag waarin de werking van een toetsenbord uitgelegd wordt. Schrijf een verslag waarin de werking van een LCD-scherm uitgelegd wordt 19

Schrijf een verslag waarin de werking van een touchscreen uitgelegd wordt. Schrijf een verslag waarin de werking van een ebook-scherm uitgelegd wordt. Schrijf een verslag dat het verschil tussen capacitieve en resistieve schermen uitlegt. Schrijf een verslag over de geschiedenis van computerschermen. Er zijn de geschiedenis al heel wat manieren gebruikt om iets op het scherm aan te wijzen. Schrijf een korte geschiedenis waarin je alle soort pointing devices opsomt die je kunt vinden. Zoek vooral dingen die van een muis verschillen. Geef van elke device een afbeelding, de naam, de URL waar je het gevonden hebt en een korte beschrijving. Opdracht 6.5 Lees het volgende artikel over HUD: http://tweakers.net/nieuws/79547/canonical-wil-menus-in-ubuntu-vervangen-doorhud-interface.html Onderin het artikel staat een video. Bekijk deze. Blijkbaar wil men in het besturingssysteem Ubuntu een HUD inbouwen die de rol van menu's vervangt. Geef in minimaal een half A4-tje (Times New Roman, lettergrootte 12pt) jouw mening over een HUD als vervanging van de traditionele menu's.

20

Les 7: Ik zie ik zie wat jij niet ziet: kleurgebruik

Het gebruik van kleur (of juist het weglaten ervan) kan de bruikbaarheid van een userinterface sterk beinvloeden. Tekst- en achtergrondkleur hebben een grote invloed op de leesbaarheid van teksten. Onderzoek dit met behulp van deze website: http://www.colortools.net/color_text_on_background.html Op deze pagina kun je tegenovergestelde kleur laten bepalen. http://www.colortools.net/color_complementary.html Onderzoek of tegenovergestelde kleuren leesbare teksten geven als je ze als voor- en achtergrondkleur gebruikt. Opdracht 7.1 Op de volgende website worden combinaties van kleuren voorgesteld http://www.colortools.net/color_close.html Leg uit hoe de website de combinaties maakt. Opdracht 7.2 Veel mensen (vooral mannen) zijn kleurenblind. http://nl.wikipedia.org/wiki/Kleurenblindheid Op de volgende website kun je van een kleurencombinatie de contrastratio berekenen:

21

http://gmazzocato.altervista.org/colorwheel/wheel.php Maak een schermafdruk van een goed leesbare combinatie van voor- en achtergrondkleur die in alle vier de situaties goed leesbaar is (er staat dan ok achter de contractratio). Vermeld de kleurcodes en de vier contrastratio's in je verslag en post ze op het volgenden webadres: spreadsheets.google.com/viewform?formkey=dF94anNZNG1TWlpST2R2M2hUdTdXWVE6MQ

opdracht 7.3 Doorloop de test op de volgende website color.method.ac Maak een screenshot van jouw resultaat en voeg dat bij je verslag.

22

Opdracht 7.4 Bezoek de volgende website type.method.ac De bedoeling is dat je de letters zo schuift dat er een zo esthetisch mogelijk beeld ontstaat. Maak weer een screenshot van jouw score.

23

Les 8: Toegankelijkheid Lees de volgende webpagina: http://www.pocketinfo.nl/nieuws/hardware/8603/voicesense-pda-zonderscherm-voor-blinden.html

Voor mensen met een handicap is het vaak moeilijk om machines te gebruiken, op de manier zoals mensen zonder handicap dat doen.

De volgende opdracht is een extra opdracht. Aangezien het in het verleden moeilijk bleek voor alle leerlingen om deze opdracht zinvol uit te werken. Wie de opdracht wél maakt, kan daarmee natuurlijk wel een hogere beoordeling verdienen. Opdracht 8.1 Selecteer een stuk leerstof (op het niveau van de basisschool of de middelbare school) en bedenk hoe een computer er aan zou kunnen bijdragen om deze leerstof op de gehandicapte over te brengen. Welke handicap wil je overwinnen? In de uitwerking van deze opdracht moet minimaal een ontwerp voor de userinterface zitten. Overleg eerst met je docent, als je bedacht hebt wat je wilt uitwerken.

24

Les 9: passief versus actief Op een scherm staan allerlei elementen: teksten, knoppen, lijsten. Sommige van die element staat er alleen om gelezen of om bekeken te worden. Sommige zijn statisch (onveranderlijk), andere kunnen in de loop van de tijd veranderen. Ook zijn er elementen die iets doe als de gebruiker er op klikt. In het onderstaande scherm staan twee labels en een knop. In het ene label staat de statische tekst 'welkom'. In het tweede label staat de veranderlijke tekst 'het is nu:' plus de actuele tijd. Op de knop staat ' sluiten' en als je er op klik wordt venster gesloten.

Welkom Het is nu: 12:34:56

Sluiten

De beschrijving is ook in een tabel samen te vatten: Venster 1: introscherm naam label

event

knopSluiten

Sluiten

Click:Het venster wordt gesloten

labelTijd

Het is nu + de actuele tijd

Geen

labelWelkom

Welkom

geen

Opdracht 9.1 Kies in overleg met je docent voor één van de volgende opdrachten: schooljaar 1112 • • •

Hyves voor een mobiele telefoon Facebook voor een mobiele telefoon Online Socces Manager voor een mobiele telefoon

schooljaar 1011

25

Routeplanner • Fotoalbum (bladeren door het album, foto's toevoegen) • Muziekalbum (programma waarmee je een collectie muziek kunt afspelen) •

(De laatste twee voor een vaste of een mobiele computer). • • •

Ontwerp de schermen Maak per venster een lijst met schermelementen. Geef elk schermelement een naam Beschrijf voor de schermelementen met een event wat er gebeurt (bijvoorbeeld als je op een knop of een tekst klikt, of als je met de muis over een bepaald gebied beweegt).

26

Les 10: Maak het beter Lees eerste het artikel uitvinders over hun briljante idee in Intermediair. http://www.intermediair.nl/artikel/branches-techniek/202515/uitvinders-overhun-briljante-idee.html Als het op internet niet meer staat, zie dan de bijlage. Opdracht 10.1 In februari 2008 werd de eerste tank-robot in gebruik genomen. Zie ook: http://www.youtube.com/watch?v=7gPqDGrHQoM of http://www.youtube.com/watch?v=4GnBh7YTJ2c Wat er al niet voor nodig is om de handelingen van een mens bij een tankstation te imiteren. Hoe zouden auto en tankstation beter op elkaar aangepast kunnen worden, zodat de tankrobot eenvoudiger kan werken? Maak schetsen en beschrijvingen. Opdracht 10.2 Schrijf op hoe volgens jou een koe gemolken wordt. Lever je beschrijving in en zoek daarna op aanwijzing van je docent naar dit onderwerp. Beschrijf daarna wat je opviel vergeleken met je eerste inschatting.

27

Les 11: Paper prototyping: Dagboek Nu je al meer in de interactie tussen mens en machine verdiept heb. Is het tijd om zelf een echt ontwerp te gaan maken. Maak de tekeningen eerst op papier. Je mag ze daarna scannen (fotograferen) of overtekenen met een tekenprogramma. Je kunt op internet veel voorbeelden van deze werkwijze vinden (paper prototyping) http://www.alistapart.com/articles/paperprototyping http://www.sum-it.nl/prototyp.html

Bekijk een video over paper prototyping op internet. Bijvoorbeeld deze: http://www.youtube.com/watch?v=GrV2SZuRPv0

Maak een ontwerp voor de schermen van een dagboekprogramma dat op een Smartphone moet werken. Het moet geschikt zijn voor jonge kinderen. Alles moet zo eenvoudig mogelijk werken. Veel voorkomende handelingen moeten met 1 klik te doen zijn. Een dagboek-item bestaat uit een datum en een tekst. Verder niets. Je moet de tekst bij een dag kunnen invoeren, bewerken en bewerken. Je moet dus door het dagboek kunnen bladeren. Denk weer aan: • • • • • • • •

Kleurgebruik Grootte van schermelementen Leesbaarheid van het scherm (grootte en soort van de gebruikte lettertypes, contract en resolutie van het scherm) Iconen op of bij de knoppen. Relatieve plek van de schermonderdelen op de behuizing (dus de positie t.o.v. de randen, het scherm of andere knoppen). De (relatieve) grootte van de knoppen en tekstvakken. De volgorde van de menuitems. Het aan- of juist afwezig zijn van menuonderdelen.

Opdracht 11.1 Schrijf een verantwoording waarin je voor het hele programma uitlegt waarom je voor een bepaalde bediening gekozen hebt. Je moet dus meerdere ontwerpen maken en kunnen uitleggen welke alternatieven je afgewezen hebt en waarom.

28

Opdracht 11.2 Daarna maak je een eindontwerp en leg je voor elke scherm specifiek uit waarom je deze opzet gekozen hebt (en weer welke alternatieven je afgewezen hebt). Opdracht 11.3 Leg je ontwerp voor aan minstens twee andere mensen (liefst kinderen, maar ook ouders zouden mogen) en schrijf (uitgebreid) op wat hun reacties zijn op je ontwerp. Opdracht 11.4 Schrijf op wat je denkt te moeten aanpassen naar aanleiding van de reacties. Pas je ontwerp aan naar aanleiding van de reacties. Opdracht 11.5 Probeer zo goed en zo kwaad als het kan een prototype te maken in Delphi (of eventueel Small Basic). Het gaat er niet om dat het programma werkt, maar wel dat je van scherm naar scherm kunt springen. Je moet dus knoppen, lijst etc op de schermen zetten. Als je ergens naar een ander scherm kunt klikken, moet je dat in het prototype inbouwen. Let op: het gaat er dus niet om dat je een volledig werken programma bouwt. Maar het mag wel!

29

Les 12: Lorum Ipsum: teksten opmaken door kleine variaties in de layout Een leerboek bestaat grofweg uit de volgende elementen: hoofdstukken, beginnend met een kopje binnen een hoofdstuk één of meer paragrafen, beginnend met een kopje een paragraaf bestaat uit één of meer blokken die tekst een tabel, een afbeelding, een voorbeeld of een opgave kunnen bevatten. Een afbeelding heeft soms een onderschrift. In dat onderschrift kan een nummering voorkomen (bijvoorbeeld: afbeelding 23: een kanarie). Een tekstblok met een voorbeeld heeft een kopje met de tekst voorbeeld en eventueel een nummering. Opgave hebben een nummering en eventueel een kopje met de tekst opgave/opdracht of iets dergelijks. In de tekst worden vormen (lijnen, cirkels, rechthoeken) en kleuren gebruikt om zaken te accentueren. Zoek in je leerboeken naar een voorbeeld waar deze elementen in voorkomen. Als voorbeeld vind je in de bijlage een paragraaf uit een informatica-boek. Je mag dit alleen gebruiken als er in je leerboeken werkelijk geen enkel voorbeeld te vinden is (wat eigenlijk onmogelijk is). Opdracht 12.1 Bedenk een layout voor zo een boek dat bruikbaar is op een website. De layout moet zo rustig en duidelijk mogelijk zijn. Omschrijf voor elk element : - fonttype - fontgrootte - fontkleur - andere fonteigenschappen (vet, cursief, etc). - de achtergrondkleur - of het tekstelement inspringt - eventuele andere opmaak. Bijvoorbeeld: het nummer van het hoofdstuk staat in een witte cirkel met een dunne zwarte rand. Maak deze layout bij voorkeur als een website (CSS/XHTML). Bekijk hiervoor eventueel het lesmateriaal over XHTML. Als dat niet lukt mag je ook in Word een voorbeeld maken (minder punten waard). 30

Gebruik als tekst Lorem Ipsum: http://nl.lipsum.com/ Je verdient meer punten als je een website maakt met een bijpassend menu. Behalve het menu moet je dan ook beslissen hoe je de boektekst opbreekt in losse delen; hoe spring je bijvoorbeeld naar een vorige of volgende pagina.

31

Les 13: Acties Bepaalde handelingen komen heel vaak voor. Bij deze opdrachten moet je zelf nadenken over (alternatieve) manieren waar je een handeling zo efficiënt mogelijk zou kunnen doen. Opdracht 13.1 Wat is de handigste manier op een Smartphone om een applicatie af te sluiten? Let op: het is natuurlijk niet nodig dat je een smartphone hebt. Je vormt dan in ieder geval een onafhankelijkere mening. Opdracht 13.2 Hoe wissel je op een Smartphone tussen de agenda en een tekstverwerker? Opdracht 13.3 Bij Windows 95 tot Windows XP trof je linksonder een startknop aan. In Windows Vista is die veranderd. Onder Linux kom je weer andere varianten tegen. Schrijf een overweging waarin je uitlegt, wat het voor en het nadeel van de verschillende manieren is. Het minste wat je moet doen, is uitleggen wat de voor- en nadelen zijn van een startknop (of het afwezig zijn daarvan). Opdracht 13.4 Beschrijf of teken de ideale startknop voor een smartphone. Opdracht 13.5 Onder Windows 2000 kon je met F3 een zoekvenster oproepen. In Windows XP kun ook via het startmenu bij een zoekoptie komen. Bij Vista heeft een Verkenner-venster ook rechtsboven een zoekoptie. Beschrijf weer de voor en nadelen van de verschillende opties (minimaal 2). Opdracht 13.6 Beschrijf een eigen – ideale – zoekoptie voor een smartphone (je hebt dus maar een klein scherm tot je beschikking).

32

Les 14: De knop en andere bedieningselementen In de afbeelding hieronder zie je een schermafdruk van een installatie-programma. Op het scherm staat een knop. Je vindt waarschijnlijk dat deze niet eenvoudig te herkennen is.

(mei 2011) Soms gaat er bij goedbedoelde userinterfaces toch iets mis:

(juni 2011)

33

Zelfs bij gerenommeerde bedrijven:

(september 2011) In programma's en website komen allerlei elementen voor waarmee je het programma of de website kunt bedienen. Een bladzijde van Youtube staat vol met links, maar kun je vooraf zeggen welke teksten links zijn en welke niet?

Opdracht 14.1 Zoek minimaal 10 voorbeelden van goed en slecht herkenbare bedieningselementen. Maak een schermafdruk en vermeld bij elk voorbeeld of je het bedieningselement goed of slecht herkenbaar vind. Schrijf bij elk voorbeeld het webadres (kopiëren uit adresbalk van de browser) 34

Opdracht 14.2 Omschrijf waaraan goede bedieningselementen moeten voldoen.

35

Opdracht 14.3 Teken een eigen voorbeeld van een venster met elementen die volgens jou het beste voldoen. Je kunt de volgende tekst als voorbeeld nemen. 1) De tekst op de website is: Op deze website kunt u informatie vinden over onze producten. 2) In deze tekst staat ergens een link. Je mag zelf bepalen wat de link wordt. 3) Verder zijn er knoppen of een menu voor de volgende producten: – halfvolle melk – volle melk – magere yoghurt – stragiatella-vla

36

Les 15 Het presenteren van resultaten: De zoekmachine Zoekmachines presenteren hun zoekresultaten op een bepaalde manier. Opdracht 15.1 Vergelijk minimaal 3 zoekmachines. Zoek op de zoekterm 'informatica'. Vermeld in de uitwerking de namen van de zoekmachines die je gaat vergelijken. Plak in je uitwerkingen een screenshot van het resultaat van de zoekopdracht.

Opdracht 15.2 Vergelijk de zoekmachines van onderdeel 1 (minimaal 3). Let op: er zijn zoekmachines die hun zoekresultaat heel anders presenteren dan Google dat doet. Probeer minimaal één zo'n ' bijzondere' zoekmachine te vinden! Hieronder staan aspecten waar je op moet letten. Neem de tabel over en vul ze verder in. Vervang ZM1, ZM2 en ZM3 door de namen van jouw zoekmachines. ZM1 Een zoekopdracht beginnen Hoe kun je iets zoeken? Zijn er opties en instellingen. Wat is daar bijzonder aan?

Presentatie van de zoekresultaten zelf Wat wordt er bij elk zoek resultaat vermeld? Wat valt er op aan lettertypes en kleuren? Volgorde (wat staat bovenaan?) Hoeveel informatie staat er over elke website?

37

ZM2

ZM3

Welke informatie? Is het webadres volledig in beeld? Hoe leggen kleuren en fontstijl (vet) accenten en hoe scheiden ze informatie?

Periferie Wat staat er om dit alles heen? Worden er zaken bij de zoekresultaten gezet die in principe niets met het zoekresultaat van doen hebben? Is er informatie over de veiligheid van de website (mcafee site advisor) Resultaten binnen dezelfde website (bv. wikipedia) worden gegroepeerd? Kun je aanvullend/uitgebreid zoeken? Hoe?

Opdracht 15.3 Analyseer de alternatieven bij het presenteren van zoekresultaten. Welke gegevens zou je kunnen tonen? Welke mogelijkheden zijn er om met lettertypen, kleur of een bepaalde layout een duidelijkere presentatie te krijgen? Opdracht 15.4 Ontwerp je eigen voorbeeldpagina voor de resultaten van een zoekmachine. Leg uit waarom je juist voor deze combinatie van mogelijkheden gekozen hebt. Werk je idee uit als CSS/XHTML-webpagina.

38

Opdracht 15.5 Let op: van de twee onderstaande onderzoeken hoef je er maar één te doen. Vraag aan je docent welke jij moet uitvoeren. Boekenwinkel Vergelijk de zoekopties van Bruna en Bol. Maak een overzichtelijk schema waarin de verschillen duidelijk laat zien. Rond je onderzoek af de in de onderstaande tabel in te vullen welke aspecten van beide zoekopties je wel óf niet bevallen. Boekenwinkel

Positieve aspecten

Negatieve aspecten

Bruna.nl Bol.com

Vakantiepark Vergelijk de zoekopties van Landal en Centreparcs. Maak een overzichtelijk schema waarin de verschillen duidelijk laat zien. Rond je onderzoek af de in de onderstaande tabel in te vullen welke aspecten van beide zoekopties je wel óf niet bevallen. vakantiepark

Positieve aspecten

Landal.nl Centerparcs.nl

39

Negatieve aspecten

Les 16: Het usabilitylab Hoe kun je onderzoek hoe of een userinterface gebruiksvriendelijk is? Eenvoud: door waar te nemen hoe een gebruiker het programma gebruikt.

Opdracht 16.1 Zet een onderzoek op om te analyseren hoe mensen een verslag met Word maken. Het verslag moet over walvissen gaan. Er moet een titel in staan, een beetje tekst (hooguit een paar regels) en een afbeelding van een walvis. De afbeelding moet je op internet zoeken. Bevraag minimaal 2, maximaal 4 proefpersonen. Zorg dat er verschillende leeftijden onderzocht worden (jong kind, puber, volwassene, oudere). Maak voor elke testpersoon een video van het scherm (met geluid). Je mag de proefpersoon niet helpen! Werk je bevindingen in een verslag uit. Schrijf op welke handelingen de gebruikers achtereenvolgens verrichten om te het gewenste resultaat te komen. Vermeld bij elke handeling de verlopen tijd sinds het begin. voorbeeld Jan – Man – 36 jaar - 0:00:00 het starten van Word (hoe?) - 0:00:30 typen - 0:02:00 starten IE (hoe?) - 0:03:00 opzoeken afbeelding walvis (beschrijf hoe!) - 0:21:00 afbeelding in Word opnemen (hoe?) - 1:57:00 bewaren van het Word-bestand Zet de lijsten met handelingen naast elkaar (bijvoorbeeld in Openoffice Calc) zodat je ze gemakkelijker kunt vergelijken. Let op: de maximumtijd voor één persoon is 15 minuten. Als het dan nog niet gelukt is om wat regels tekst en een afbeelding in Word te krijgen, moet je meteen stoppen.

40

Les 17 : Traditionele informatie van papier naar het scherm Agenda's en takenlijsten (todo-list's) zijn er al eeuwen. Nu ze op het venster staan zie er er anders uit. Opdracht 17.1: Gebruik van een bestaande agenda en todo-lijst Kies en digitale agenda en todo-lijst. Dat kan op internet, op je PC of op een smartphone. Bruikbare, onconventionele keuzes krijgen meer punten (Outlook is een voorbeeld van een conventionele keuze). Vraag éérst goedkeuring aan je docent. Gebruik de agenda en todo-lijst om een week lang schoolse zaken bij te houden: •

lessen

•

huiswerk

•

opdrachten

Voeg een schermafdruk van je agenda bij het verslag. In de schermafdruk moet een weekaanzicht te zien zijn. Opdracht 17.2: analyse van de mogelijkheden Maak een opsomming van de instellingen die je bij een agenda en een todo-item kunt maken. Als de lijstjes heel erg op elkaar lijken kun je de opsommingen in een tabel samenvatten. Met voetnoten kun je details verduidelijken. In het voorbeeld hieronder staat er een kruisje als de instelling van toepassing is. Er staat een nummer als er een voetnoot is. Voorbeeld agenda

todo

omschrijving

x

x

startdatum

x

einddatum

x

herinnering

1

2

41

1) Meer dan één herinnering mogelijk: minuten, uren, dagen, weken, … 2) Alleen herinneringen in stappen van hele dagen Het verduidelijken van je analyse d.m.v. screenshots geeft meer punten Opdracht 17.3: Eigen ontwerp Ontwerp een agenda en een todo-lijst voor een mobiele telefoon. Maak van alle vensters een tekening met een toelichting. Alle standaard functies moeten ingebouwd zijn: - item toevoegen, wijzigen, verwijderen - instellingen van een item aanpassen (alarm, herhaling, ….) Opdracht 17.4 Bij een kalender kan het voorkomen dat er in een periode maar een paar items ingevoerd zijn. 03-02-10

04-02-10

05-02-10

06-02-10

09:00:00 Dhr. Janssen bellen over … 10:00:00

Vergadering met Dhr. Willems...

11:00:00

Installatie …

Bedenk een manier waar je de kalender zo compact mogelijk kunt laten zien (uiteraard moet wel alle items zichtbaar zijn)

42

Les 18: Meer is minder, minder is meer Bij een navigatie-programma (TomTom) krijgt de gebruiker allerlei informatie over de route te zien. Denk daarbij aan de huidige positie, het verdere verloop van de route en de huidige snelheid. Den ene gebruiker wil dit en de andere dat. Hoe krijg je al die informatie op een paar schermen? Wat hoort waar? Opdracht 18.1 Maak een lijst met zoveel mogelijk zaken die in beeld gebracht zouden kunnen worden. Je moet er minimaal 20 in je lijst hebben staan. Originele items leveren een hogere waardering op (bijvoorbeeld de hoogte van het eerste volgende viaduct ná de volgende afslag). Als je niet meer kunt verzinnen kun je bij je docent voorbeelden bijkopen. Opdracht 18.2 Verwerk de lijst tot ontwerpen waarin je telkens een selectie van de gegevens laat zien. Maak minimaal 3 schermen waarin samen alle onderdelen verwerkt zijn. Telkens is er een selectie zichtbaar voor een bepaald doel. Schrijf een korte toelichting bij elk scherm.

43

Les 19 Wat maak je me nu? Orde in de chaos! Wat is een logische volgorde in menu's. Sommige dingen lijken universeel te zijn: (nagenoeg) iedereen vindt dat een bepaald item aan het begin hoort te staan. Over ander dingen heeft haast niemand dezelfde mening. Opdracht 19.1 Het menu van een programma bestaat uit de volgende vijf items: beeld

bestand

bewerken

help

opmaak

Binnen deze vijf items moet je de volgende subitems onderbrengen. Ook de volgorde is belangrijk! afdrukken...

lettertype

plakken

afsluiten

nieuw

statusbalk

alles selecteren

ongedaan maken

tijd/datum

automatische terugloop

openen

vervangen...

ga naar...

opslaan

verwijderen

help weergeven

opslaan als...

volgende zoeken

knippen

over

zoeken

kopiëren

pagina-instellingen...

Werk deze opdracht uit in de vorm van een tabel. Je kunt de volgende voorbeeldtabel als startpunt gebruiken. Waarschijnlijk vind je deze indelingen niet helemaal logisch... beeld

bestand

bewerken

help

Afdrukken

Volgende zoeken

Alles selecteren

Zoeken Help weergeven

44

Opmaak

Opdracht 19.2 Vaak is het mogelijk om een menuitem weer te geven met twee dingen: – een werkwoord – een zelfstandig naamwoord Het menuitem bestand > opslaan is daarvan een goed voorbeeld. voorbeeld de menuoptie help > help weergeven kan ook/beter in het menu gezet worden met: toon > help

Maak een eigen menuindeling waarbij je deze methode zoveel mogelijk toepast. De items uit het eerste onderdeel van deze opgave moeten in jouw menuindeling allemaal terugkomen.

45

Les 20: De ultieme tekstverwerker Je hebt in een eerdere opdracht gezien hoe (moeizaam) iemand met een computer kan werken. Het kan in ieder geval beter! In het schema hieronder kun je zien hoe iemand een opdracht met een computerprogramma uitvoert. Als ontwerper/programmeur bepaal je wat het programma kan en hoe het programma dat doet en presenteert. Het doel is dat je een programma ontwerpt (en maakt), waarmee je met zo weinig mogelijk handelingen een verslag kunt maken. Het programma moet zeer intuïtief werken, dus ook voor iemand die niet of nooit met een computer werkt. Zorg dat je programma logische keuzes al heeft gemaakt. Laat het geen overbodige keuze aanbieden. Bied alleen relevante keuzes aan. Opdracht 20.1 Maak een lijst met acties die een gebruiker moet kunnen uitvoeren. Neem daarvoor de volgende tabel over en pas deze aan. Bij elke actie moet je aangeven hoe de gebruiker dat kan doen. In het geval van tekst invoeren kan dat iets heel eenvoudigs zijn. Bij het invoegen van een afbeelding hopelijk ook! actie

Wat moet de gebruiker exact doen om de actie te laten plaatsvinden

bestand openen bestand opslaan bestand opslaan als... tekst invoeren tekst bewerken ... ...

46

Opdracht 20.2 Maak een grafisch ontwerp voor het programma: (computer-)tekeningen, schetsen, beschrijvingen, video-opname die het ontwerp uitlegt, …. Opdracht 20.3 Als je in Delphi een demonstratie-programma maakt, verdien je extra punten, als het programma ook nog werkt nog meer.

47

Les 21 : Onderzoek Hieronder vind je 10 vragen. Kies telkens het ontwerp dat jou het beste lijkt. Vermeld je keuze in de onderstaande tabel door L (links) of R (rechts) te vermelden: vraag keuze

1 2 3 4 5 6 7 8 9 10

Neem deze tabel daarna over in het webformulier en verstuur het met jouw gegevens. vraag 1 Welke van deze twee pagina’s vind je het prettigste om te zien?

vraag 2 Welk blok tekst is gemakkelijker te lezen?

vraag 3 Heb je het menu liever links of liever rechts op het scherm?

vraag 4 Welke links zie je het liefst?

vraag 5 Op welke pagina is de zoek-optie het gemakkelijkste te vinden?

vraag 6 Waar verwacht je de verzend (submit) knop?

vraag 7 Welk ontwerp geeft je het meest het gevoel met een betrouwbare organisatie te maken te hebben?

vraag 8 Op welke manier wil je het liefst te zien krijgen dat je items niet ingevuld hebt?

vraag 9 Wat is voor jou de beste plek voor het kruisje om deze ballon te sluiten?

vraag 10 Als je de mogelijkheid krijgt om te printen, hoe krijg je die optie dan het liefst gepresenteerd?

Les 22 Voor deze opdracht moet je bij twee website's een reisinformatie zoeken (niet boeken!). Vraag aan je docent welke twee websites te moet gebruiken: Voor een vliegreis Ryanair Easyjet alltours TUI Nettetal Voor een autoreis Landal (alleen verblijf, niet de reis) Centerparcs (alleen verblijf, niet de reis) In beide gevallen betreft het een gezin van 4 personen (man 45, vrouw 41, twee kinderen 12 en 10 jaar oud). De vliegreis gaat van een vliegveld in de buurt van Venlo naar Zuid-Spanje. Ze reizen in de zomervakantie in de augustus. Ze willen een hotel met minimaal drie sterren, een zwembad, liefst glijbanen en minimaal halfpension. Het gezin wil op 1 kamer verblijven (dus niet 2 of 4 losse kamertjes). Als er geen transfer tussen vliegveld en hotel bij de reis zit moet je de kosten van een huurauto in de prijs meenemen. Het hotel moet een meer dan gemiddelde beoordeling hebben (als de schaal 1 tot 5 is, minimaal een 3). Ook de kosten van het parkeren tellen bij de reis. Bij de autoreis gaat van Venlo naar een bestemming in Duitsland. Het gezin wil een huisje op een vakantiepark met eten. Maak een schatting van de kosten inclusief de kosten van de autorit en eten. Opdracht 22.1 Maak een schermopname van de handelingen die je moet verrichten om de reis te boeken. Opdracht 22.2 Beschrijf in minimaal een half A4-tje per website (Times New Roman 12pt) wat je opviel aan de handelingen die je moest verrichten. Opdracht 22.3 Beschrijf in minimaal een een half A4-tje (Times New Roman 12pt) de voor- en nadelen van de beide website. Geef een eindoordeel op grond van je testresultaten.

Bijlage 1: De rechten van een computergebruiker A COMPUTER USER'S MANIFESTO The sooner the industry adopts these common-sense precepts, the better Did you ever get so angry with your computer that you wanted to take a baseball bat to it? Have you ever been stumped by some error message that bore no relationship to anything in the manual or the online help? Have you ever been cold in winter? A leading computer-industry researcher feels your frustration. Clare-Marie Karat is a PhD psychologist who evaluates the way people interact with their computers and designs what the industry calls human interfaces at IBM's (IBM) Thomas J. Watson Research Center in Hawthorne, N.Y. The problem, as she sees it, is simple: The engineers and computer scientists who design hardware and software know little about the needs and frustrations of consumers. ''The technologists get far into the design of a system without really understanding who the target users are, the work that they do, and the context in which they do that work,'' Karat says. By the time feedback comes in, it's ''way too late.'' The results can be annoying, such as the progress indicator that claims a job is 90% finished when it's only half-done. Or you can have a catastrophe: programs or computers that don't work as promised or don't work at all. To remedy this situation, Karat is challenging the industry to endorse a 10-point User's Bill of Rights: 1. The user is always right. If there is a problem with the use of the system, the system is the problem, not the user. 2. The user has the right to easily install software and hardware systems. 3. The user has the right to a system that performs exactly as promised. 4. The user has the right to easy-to-use instructions for understanding and utilizing a system to achieve desired goals. 5. The user has the right to be in control of the system and to be able to get the system to respond to a request for attention. 6. The user has the right to a system that provides clear, understandable, and accurate information regarding the task it is performing and the progress toward completion. 7. The user has the right to be clearly informed about all system requirements for successfully using software or hardware. 8. The user has the right to know the limits of the system's capabilities.

9. The user has the right to communicate with the technology provider and receive a thoughtful and helpful response when raising concerns. Bron: http://www.businessweek.com/1998/39/b3597037.htm

Bijlage 2: Links Usability http://www.useit.com/papers/guerrilla_hci.html Principles of design http://iainstitute.org/nl/translations/000187.html#Anchor-Color-33869 Gnome interface guidelines http://library.gnome.org/devel/hig-book/2.32/hig-book.html Design Principles http://www.ambysoft.com/essays/userInterfaceDesign.html Techniques for userinterface design http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-gooduser-interface-design-in-web-applications/ UI Design Links http://www.sum-it.nl/guilinks.html User centered design *** http://www.usabilitynet.org/management/b_design.htm

Bijlage 3: Artikel Intermediair

Uitvinders over hun briljante idee Auteur: Nicole Carlier | 28-10-2010 | Internemdiair De Nederlandse Octrooiwet bestaat deze maand honderd jaar. Waar uitvinders een eeuw geleden vaak in hun eentje geniale vondsten deden, komen de meeste octrooien tegenwoordig tot stand in samenwerkende onderzoeksteams. Al bestaan de eenlingen met dat ene briljante idee nog altijd.

Een stukje ijzer met een paar bochtjes. Wat een prachtige uitvinding is zo'n paperclip. De kracht van een goede uitvinding ligt in zijn eenvoud, vindt Douwe Brongers. Brongers is auteur van de De Uitvindersgids, een gids die adviseert hoe een idee of uitvinding succesvol op de markt is te brengen. ‘De beste vindingen gaan in op de behoefte van de mens. Zo bepaalt de markt uiteindelijk of iets een goede uitvinding is. Neem de videocassetterecorder Video 2000 die Philips ontwikkelde. Die was perfect. Philips vond het immoreel om zijn systeem voor porno te laten gebruiken en aangezien de klant dat toch wil zien, werd uiteindelijk het concurrerende VHS de standaard. Die deden wel porno.' ‘De Uitvindersgids' zet uiteen wat er komt kijken bij het aanvragen van octrooien. Want dat gaat nogal eens mis. Brongers: ‘De maker van de Rubiks kubus, de Hongaar Ernö Rubik, had alleen octrooi aangevraagd in zijn eigen land. De rest van de wereld kon zo met zijn idee aan de haal. Hij is miljoenen misgelopen.'

Toen de Nederlandse Octrooiwet deze maand precies een eeuw geleden in werking trad, deden uitvinders innovatieve ideeën doorgaans op eigen houtje op; momenteel gebeurt dat meestal in onderzoeksteams. ‘De teams werken vaak in internationale projecten met universiteiten, onderzoeksinstellingen en bedrijven', zegt Bas Verschoor van het Nederlandsch Octrooibureau in Den Haag. ‘Een uitvinding is eerder verbonden aan een bedrijf of universiteit dan aan een persoon. Ongeveer eenvijfde van de octrooien komt op naam van particulieren.' In Nederland is Philips met afstand de grootste octrooiaanvrager: het bedrijf is verantwoordelijk voor ruim dertig procent van de aanvragen in Nederland, zo blijkt uit een analyse van octrooien in Nederland. De Nederlandse Orde van Uitvinders (NOVU) deelt uitvindingen grofweg in vier categorieën in: vindingen die in een fractie van een seconde zijn gedaan, ideeën die uit ergernis ontstaan, vondsten die voortkomen uit consequente research & development en uitvindingen die in opdracht van een andere partij worden gedaan. Binnen de werktuigbouwkundige uitvindingen, de machines, maakt de NOVU nog weer een ander onderscheid: dat tussen lichte en zware machines. ‘Het criterium is of

je de machine kunt tillen', zegt Wouter Pijzel van de NOVU. ‘Uitvinders van zware en lichte machines zijn wezenlijk anders. Mensen die zware machines bedenken, kunnen bijzondere gedachtesprongen maken. In een heel kort moment komen zij op een niveau dat voor leken onbegrijpelijk is.' 'De kunst is een oplossing te bedenken voor wat er fout kan gaan' Man: Bram Bruinsma (41) Machine: De ZZcomet, een volautomatische aspergesteekmachine. Bedrijf: ASM CV (samenwerking van Orteg, Ewac industrial en Telersvereniging Brabantse Wal) Eureka-moment: ‘Het lastigste was de camera, die communiceerde vaak niet met de rest van de machine. Na eindeloos testen en sleutelen met de programmering werkte het ineens. De machine deed prompt drie bedden foutloos. Op dat moment heb ik een fles champagne opengetrokken.' De bouw:‘Ik dacht "Geweldig!" toen Ewac mij vroeg dit te ontwikkelen. Echt iets voor een techneut in hart en nieren. Het begon met veel nadenken. Toen heb ik 3D tekeningen gemaakt en tests uitgevoerd. Bijvoorbeeld om te meten hoeveel kracht het steken kost. Na drie proefmodellen bouwen had ik iets bruikbaars. Je kunt redelijk gemakkelijk bedenken hoe zo'n machine in elkaar zou moeten zitten, maar de kunst is een oplossing te bedenken voor wat er fout kan gaan. Als er stro ligt bijvoorbeeld, of als de bodem heel hard of juist heel plakkerig is. Lastig is ook dat het aspergeseizoen maar twee maanden duurt. Er was daarom steeds weinig tijd om te testen en wijzigingen door te voeren. Dit voorjaar worden de eerste machines ingezet.' Hoe werkt hij: ‘De machine rijdt over de aspergebedden. Ziet hij met zijn camera een aspergekopje uitsteken dan steekt hij op die plek een mes in de aarde. Eenmaal boven de grond belandt de asperge achterin de machine in een krat water. De ZZcomet stuurt een sms'je als hij aan het eind van een bed is. Op het bed van de teler waar hij is getest, heeft hij een slagingspercentage van meer dan negentig procent.' Mooi, want: ‘Aspergestekers zijn vaak moeilijk te vinden. De machine kan hun werk overnemen. Bovendien kneuzen mensenhanden een aspergekopje altijd een beetje. Als de machine ze steekt, verschijnen ze maagdelijk boven de grond.'

'Het merendeel van mijn ideeën is niet haalbaar' Man: Henk van Kuijk (50) Machine: Tiger-Stone, zes meter brede machine waarmee stratenmakers in één keer hele lappen kunnen bestraten. Niet op de knieën, maar staand. Bedrijf: Vanku B.V. Eureka-moment: ‘De straat voor mijn huis lag eens maandenlang open. Ik zag die stratenmakers op hun knieën kruipen en ik dacht "Dat kan ergonomischer". Ik ben vrijuit wat gaan schetsen. Zo'n brainstorm doe ik het liefst in het weekend, om zes uur ‘s ochtends. Ik weet niet meer precies hoe en wanneer ik het principe van de TigerStone bedacht. Ik heb aan de lopende band ideeën, het merendeel is alleen niet haalbaar. Dit wel. Het klopte aan alle kanten.' De bouw: ‘Er zijn al tientallen machines voor bestraten, maar die werken niet prettig. De Tiger-Stone houdt het straten maken redelijk traditioneel. Het gebeurt hiermee nog steeds handmatig en aangezien hij elektrisch is, maakt hij geen herrie. Ik had hiervóór geen ervaring met straten maken, maar ik wist wel hoe je machines maakt. Ik ontwikkel al zo'n vijfentwintig jaar mijn eigen speciale machines. Zoals een filter om frituurvet te filteren. We hebben negen maanden gewerkt voor we een goed werkend prototype hadden. Het was net puzzelen.' Hoe werkt het: ‘De stratenmakers staan met zijn tweeën of drieën op de machine. Daar leggen ze de stenen op een rooster en door de zwaartekracht glijden ze in het goede patroon. Is het rooster vol, dan zakt het stenen tapijt in zijn geheel op het zand. Twee mannen kunnen zo op één dag driehonderd vierkante meter bestraten. Op de traditionele manier legt een stratenmaker vijfenzeventig tot honderd vierkante meter per dag.' Mooi, want: ‘Veel stratenmakers hebben al op jonge leeftijd versleten knieën of ruggen. Ze kunnen dan nog niet met pensioen, waardoor ze noodgedwongen andere klussen doen. Door de ergonomische houding kunnen ze hiermee weer als stratenmaker aan de slag.'

'Ik zie de machine niet snel in de praktijk werken' Mannen: Douwe Dresscher (23) en Hans de Boer (23) Machine: Autonome Zwerfafval Opruim Robot. Dit is een prototype; zo autonoom is hij nog niet. Bedrijf: De Universiteit Twente (UT), Hako, Demcon en Stichting Nederland Schoon Eureka-moment: De Boer: ‘Het was heel ingewikkeld om alle onderdelen van de robot te laten samenwerken. Vaak wisten we niet eens precies wat er fout zat. Aan het eind van een heel lange dag prutsen en testen, hadden we kennelijk een setting goed veranderd. De robot deed het ineens. We hebben staan juichen. Dat was één dag voordat we hem moesten demonstreren.' De bouw: Dresscher: ‘Onze werkgroep bestond uit zes UT-studenten van verschillende studierichtingen. We begonnen in februari 2009; in januari 2010 demonstreerden we dit model. Er bestaan al veel schoonmaakmachines, maar die vegen en zuigen. Dat maakt veel lawaai en er komt fijnstof bij vrij. Een eis was dat deze robot niet hoeft stil te staan om afval te herkennen. Dat doet hij wel; een blikje ruimen duurt ongeveer een minuut.' De Boer: ‘Ik zie hem niet snel in de praktijk werken. Hij herkent nu alleen stilstaande objecten. Op straat zou hij ook lopende mensen tegenkomen.' Dresscher: ‘We hebben in ieder geval laten zien dat het te maken valt, want hij deed het tijdens die demo wel. Als je hem perfect wilt maken, moet er veel meer geld in.' Hoe werkt hij: Hij rijdt rond en scant de omgeving met een camera. Van elk waargenomen object berekent hij of het afval is. Zo ja, dan werkt hij het met een roterende plastic borstel naar binnen. Dit prototype herkent en ruimt alleen bepaalde blikjes. De beelden daarvan zijn vooraf in zijn geheugen ingevoerd. Mooi, want: Dresscher: ‘Het idee was dat hij een winkelgebied de hele dag door opruimt. Een plek die schoon is, houden mensen schoner.'

Bijlage 4: Doelen Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Les 7 Les 8 Les 9 Les 10 Les 11 Les 12 Les 13 Les 14 Les 15 Les 16 Les 17 Les 18 Les 19 Les 20 Les 21 Les 22 Les 23

Les

Bijlage 5: Opmaak voor een website Een voorbeeld van een stuk lesstof vind je op de volgende pagina's.

1.1

Bewerkingen met variabelen

In een programma kunnen getallen en tekenreeksen (strings) bewaard worden in een plek die we een variabele noemen.2 De naam van een variabele kan een letter zijn (A, B, C) of een tekenreeks. Bij echte programma's is het vaak beter om een duidelijke naam te gebruiken (zoals Temperatuur, Leeftijd of Voornaam). Opdracht

Uitleg

A=6

Deze opdracht zet de waarde 6 in de variabele A

A=B

De volgende opdracht kopieert de inhoud van B naar A

C=A+B

De volgende opdracht telt A en B op en zet het resultaat in C

A=A-1

De volgende opdracht verminderd de waarde van A met 1

Je vindt het misschien vreemd dat in één opdracht (A=A-1) twee keer dezelfde variabele voorkomt. Rechts van het is-teken staat wat de berekening is (A-1). Links staat waar de uitkomst bewaard wordt (in dit geval in dezelfde variabele: A). Dus als de waarde van A vooraf gelijk aan 6 is, dan is de waarde van A na de opdracht A=A-1 gelijk aan 5. De volgende berekeningen kun je met getallen maken: Opdracht Optellen Aftrekken Vermenigvuldigen Delen

Teken + * /

Voorbeeld A=B+C A=B-C A=B*C A=B/C

Je kent deze tekens waarschijnlijk al van een grafische rekenmachine zoals die op middelbare scholen gebruikt wordt. Voorbeeld In de tabel hieronder kun je drie eenvoudige bewerkingen met variabelen vinden. Deze worden van boven naar beneden uitgevoerd. Na elke opdracht staat vermeld wat de waarde van de variabelen A, B en C is, nadat de instructie uitgevoerd is. regel 1 2

opdracht A=2

A 2

B ?

C ?

Bij de meeste programmeertalen kun je ook andere ‘dingen’ in variabelen bewaren, bijvoorbeeld datums of tijdstippen. Voorlopig werken we alleen met getallen en tekenreeeks. De getallen kunnen dan gehele getallen of kommagetallen zijn.

2 3

B=5 C=A+B

2 2

5 5

? 7

Met A=2 zorg je er voor dat het getal 2 in variabele A bewaard wordt. Met C=A+B worden de getallen in de variabelen A en B bij elkaar geteld. De uitkomst wordt in variabele C gezet. De variabele waarin de uitkomst terecht komt staat altijd links van het gelijk-teken. Rechts van het gelijk-teken staat een constant getal of een berekening. Non-voorbeeld De volgende opdracht is geen geldige bewerking met een variabele: A+2 Er wordt wel iets met de variabele A gedaan (er wordt 2 bij opgeteld), maar het resultaat wordt nergens bewaard. Een geldig voorbeeld is B=A+2. Opdracht 1.1 Bekijk het volgende eenvoudige programma. Wat moet er op de plaats van X staan? regel 1 2 3

opdracht A=1 B=3 C=A+B

A 1 1 1

B ? 3 3

C ? ? X