Kapitel 1. Tillykke: Du har valgt Informatik B

IT-branchen er en ung branche, og det præger branchen. Der er store muligheder, ikke kun som udvikler, men også i krydsfeltet mellem økonomi og IT. Det gælder ikke mindst, når man digitaliserer virksomheder.

Det bedste ved branchen er den åbenhed, som folk kommer med. Alle IT folk bruger internettet meget i deres arbejde. Folk er mere end villige til at dele deres viden på nettet. Jeg er f.eks. medlem af et community, WordPress Danmark på Facebook. Når jeg spørger, går sjældent mere end en time eller 2, så har de svar jeg mangler. Hvis du også bruger engelske communities, er mulighederne nærmest ubegrænsede.

1.1 Hvad er forskellen på informatik C og B?

I følge lærerplanerne fra ministeriet indeholder informatik B egentlig ikke nogle nye emner. Hovedformålet med informatik er stadigvæk at lære:

Konstruktion af it-system som løsning til en problemstilling

Du skal ikke lære om ret mange nye emner. Det betyder, at de forskellige moduler ofte vil starte med noget repetition. Til gengæld skal vi noget dybere ned i de emner, som du allerede kender.

Link til toppen af siden.

1.2 Hvorfor skal vi lære om informatik?

På samme måde som vi efterhånden føler os nøgne uden vores smartphone, så er IT på godt og ondt blevet en stor del af vores hverdag.

Fremtiden kommer til at byde på endnu mere IT. Det er derfor nødvendigt for os at forstå, hvordan IT fungerer, hvordan det påvirker os som personer og selvfølgelig, hvordan man arbejder med IT på arbejdspladser.

Når det blæser, bygger nogle læskure. Andre sætter vindmøller op

IT er kommet for at blive. Det er vigtigt, at vi både ser anvendelser i IT og forstår, hvordan det virker, men vi skal også kunne se fremad og kunne bruge det i forhold til innovation.

Link til toppen af siden.

1.3. Computational thinking

Hvis målet med informatik C er en vis digital dannelse, så er målet med informatik B, at du bliver bedre til “computational thinking”.

Computational thinking betyder, at vi kan “oversætte” vores problemer til en måde, så vi kan få en computer til at løse vores problem. Lad os sige, at du arbejder med aktier. Hvis du mestrer computational thinking, vil du bruge lave programmer, der kan hjælpe dig til at lave analyser af aktiemarkedet. Ud fra dit kendskab til computational thinking vil du også selv kunne skabe programmer, og du vil kunne forstå og bruge resultaterne.

Sidst men ikke mindst: Du er ikke bange for at gøre forsøget i forhold til at få computeren til at løse dine opgaver. Du ved nogenlunde, hvad der skal til.

Man kan bryde computational thinking ned i 4 dele:

1. Dekomposition. Du kan nedbryde dit store, komplekse problem i mindre og mere simple problemstillinger
2. Genkende mønstre. Du kan genkende mønstre i virkeligheden, som du kan “oversætte”. F.eks. variable, sekvenser og forgrening-betingelse
3. Abstraktion. Du kan finde løsninger på mønstre og andet, der ikke umiddelbart matcher det, du kender
4. Algoritmer. Du kan lave beregninger. Ordet “algoritme” betyder “udregning”.

Link til toppen af siden.

Kapitel 2. Det grafiske puslespil

I kapitlet her skal du primært repetere, hvad du lærte i informatik C om, hvordan man arbejder med grafik.

2.1 Typografier

Typografier er det samme som skrifttyper. Man kan dele alle skrifttyper ind i 2 slags skrift: Serif og sans-serif. Serif betyder “fod”. Nogle typer skrift har en lille fod på bogstaverne, andre har det ikke.

Hvis vi sætter en lille fod på bogstaverne, så danner bogstaverne en kunstig linje. Den linje hjælper os især, hvis vi laver lange tekster. Til korte tekster er det bedre med skrifttyper uden fødder. På nettet finder vi mest sans-serif skrifttyper.

Skrifttyper kan understrege vores budskab. Den her skrifttype er f.eks. meget brugt i det vilde vest i USA.

Hos www.dafont.com kan du finde en guldgrube af sjove skrifttyper, grænsende til det vanvittige.

Link til toppen af siden.

2.2 Farvelære

Vi bruger farver mere end vi tror. Farver kan hjælpe os med at understrege budskabet. Kik f.eks. på http://play.barbie.com/da-dk, hjemmeside for barbiedukken. Et orgie i bløde pastelfarver, men siden henvender sig også til små piger, ikke til voksne. Ikke overraskende er hjemmesiden for Rammstein, tysk heavyrock-gruppe, noget mere “maskulin” i sit udtryk. https://www.rammstein.de/de/. Politiet bruger kølige, alvorlige farver for at understrege autoritet, mens en klovn i cirkus er et orgie af varme og stærke farver.

Farvelære handler om at forstå farver. Start med Goethes farvecirkel. Ud fra 3 grundfarver: Rød, grøn og blå, kan han danne alle mulige andre farver.

Farvecirklen fortæller os en masse. 2 farver på hver sin side af cirklen vil fremhæve hinanden. En orange farve fungerer godt med blå baggrund og omvendt. Dette kalder man for “kontrastfarver”. Der er dog en vigtig undtagelse: Brug aldrig kontrastfarverne rød-grøn sammen, for farveblinde kan ikke se forskel.

BEGREB	FORKLARING
Kontrastfarver	Farver, der står overfor hinanden i farvecirklen. Kontrastfarver fremhæver hinanden
Varme og kolde farver	Varme farver træder frem og er gode forgrundsfarver. Kolde træder tilbage og er gode baggrundsfarver. Varme og kolde farver står overfor hinanden i farvecirklen. Verdens bedste baggrundsfarve er … grå. Kik på grå beton, al grafitti træder tydeligt frem.
Farvefamilier	F.eks. pastelfarver, jordfarver, pangfarver. Man kan skabe en god sammenhæng ved at bruge farver fra samme farvefamilie.

Faktaboks: Farver på en skærm Alle farver på en skærm er sammensat af kun 3 farver: Rød, grøn og blå. Det kalder man for RGB-farver. Hvad med hvid og sort? Ved hvid skruer man helt op for farvernes lysstyrke, ved sort helt ned. Rød laver man ved at skrue helt op for den røde farve og helt ned for grøn og blå. Der er ca 1 mio. forskellige farver I alle programmer, der arbejder med farver, kan du sammensætte dine egen farver. Her i Microsoft Office på en PC, Mac er lidt anderledes. Bemærk muligheden for at blande rød, grøn og blå nederst.

I de næste videoer kan du lære om både teoretisk farvelære og om farvelære i praksis.

Link til toppen af siden.

2.3 Gestaltlovene

Når vi ser på ting, har vi nogle ubevidste måder at opfatte (eller “perceptionere) tingene på. Vi ser “skikkelser” eller på tysk “gestalter”, “hvad der er stillet i orden. Hjernen forsøger at skabe sammenhænge i, hvad den ser. Disse måder er formuleret i gestaltlovene.

GESTALTLOV	FORKLARING	EKSEMPEL
Loven om nærhed	Symboler, der er anbragt nær hinanden, opfattes som hørende sammen
Loven om lighed	Symboler, der ligner hinanden, opfattes som hørende sammen
Loven om lukkethed	Symboler, der står i samme ramme, opfattes som hørende sammen
Loven om forbundethed	Symboler, der er forbundne, opfattes som hørende sammen
Loven om figur og baggrund	Den mindste, afgrænsede figur på arealet vil først blive opfattet som figuren
Loven om symmetri	Hvis 2 figurer er anbragt symmetrisk omkring en linje, så opfattes de som hørende sammen.

Faktaboks: Hvad er en gestalt? En gestalt er tysk for “skikkelse”. Et eksempel: Vrede Viggo går i terapi, fordi han er rasende på sin far. Tereapeuten beder Viggo forestille sig, at hans far sidder i en stol overfor ham, og så får Viggo ellers lov til at fortælle hans far et par borgerlige ord. Faderen er selvfølgelig ikke til stede fysisk. Den form for terapi kaldes “gestaltterapi”

Gestaltlovene har enorm betydning, når man laver grafisk design. Hvis man f.eks. (som på denne hjemmeside) lukker navigationen inde i en ramme, anbringer dem tæt ved hinanden og giver dem samme typografi, så opfatter hjernen alle menupunkter som hørende sammen. Det er pga. loven om lukkethed, lighed, nærhed og måske loven om symmetri. Kik selv efter.

Jeg har lavet en video til dig om gestaltlovene. Den sidste gestaltlov om symmetri er ikke med i videoen.

Link til toppen af siden.

2.4 Gode råd til din grafiske produktion

Her er et par gode råd.

• Sørg for, at alt tekst er nemt at læse. Mørk tekstfarve på mørk baggrund er sjældent en god idé
• Brug kølige farver til baggrund og varme til forgrund
• Tænk på målgruppen og design efter det
• Overhold gestaltlovene
• Skab symmetri og sæt de grafiske elementer på linje
• Skab orden. Det vigtigste skal være tydeligt
• Skab genkendelighed. Genbrug farver, grafik og skrifttyper. Det gør brugeren tryg
• KISS (Keep It Simple and Stupid)

Eksempel 1. Baggrund- og forgrundsfarve

Den første er rædselsfuld. Lys tekst på en skriggul baggrund. Jeg får næsten ondt i øjnene. Nr 2 er bedre. Der er en god kontrast, men den gule baggrundsfarve dominerer teksten. Nr. 3 er god. Diskret baggrundsfarve, god kontrast og teksten får hovedrollen.

Eksempel 2. Symmetri

Ove Schneiders løbesidet. Der er INGEN symmetri. Siden er så rodet, så det nærmest er kult.

Gucci har selvfølgelig en helt anderledes orden og symmetri. Der er tænkt over hver en lille stump grafik her, og tingene er millimeter symetriske.

Skab orden og symmetri og hiraki

Her er et forslag til en AGF fanside. Det er svært at se, hvad der er vigtigst da alle skrifttyper er lige store. Navigationen er virkelig rodet. Men ok, det er en side for fanfraktionen “Tossehjørnet”, så de er tilgivet. Der er i øvrigt ingen hjørner på Aarhus Station :-).

Nu er der skabt noget orden. Overskrifterne har et hiraki, der er orden på navigationen, og der er symmetri. Dvs. at tingene er på linje eller centrerede.

Alt i alt. Kend reglerne. Du må gerne bryde reglerne, men du skal kunne argumentere for det. Et eksempel: Fodboldholdet Liverpool er et af verdens mest populære hold. De spiller i rødt. Rød er en meget varm farve, og duer som udgangspunkt ikke som baggrundsfarve. Jeg har alligevel set et fornuftigt forslag til en hjemmeside for Liverpool med rød baggrund.

Link til toppen af siden.

Kapitel 3. Billedbehandling

Jeg har en kammerat, som arbejdede med marketing. Han var på et tidspunkt dybt frustreret. Han ville gerne sende nogle pæne billeder af firmaets produkter ud til kunderne, men firmaets grafiker havde aldrig tid. Chefens opgaver kom altid først, og chefens var dygtig til at fylde grafikerens ind-bakke med opgaver. Den situation kan du slippe for med kapitlet her.

Både til hjemmesider og til alt muligt and et er det nyttigt at kunne billedbehandle. De vigtigste teknikker i billedbehandling er:

• Gemme i mange forskellige billedformater
• Frilægning. Dvs. at du fjerner uønsket baggrund
• Arbejde i lag
• Arbejde med maskering
• Reparation af billeder

I afsnit 3.3 gennemgår jeg punkterne mere detaljeret.

Du kan finde masser af programmer, der kan et eller flere af ovenstående, f.eks. bruger PowerPoint lag. Det er dog kun de professionelle programmer, der kan alle tingene.

99% af alle grafikere trækker vejret gennem Adobes produkter og de bruger alle kæmpe Mac-skærme. De er mere afhængig af Adobe end økonomifolk er af Excel, og det siger en del. Nogle af de vigtigste Adobe produkter er:

• Adobe Photoshop til “almindelig” billedbehandling
• Adobe Illustrator til grafik
• Adobe InDesign til grafisk layout, f.eks. foldere og piecer
• Adobe Dreamweaver til hjemmesider
• Adobe har naturligvis også programmer til video redigering, after effects osv. osv.

Lige som Microsoft Offices Word, Excel, PowerPoint mv. ligner brugerfladen på Adobes programmer hinanden, og de arbejder rigtigt godt sammen. Lige som Office køber man programmerne i en pakke. Adobe kalder det for Adobe CS = Adobe Creative Suite.

Desværre er Adobes programmer med rette ret dyre. I kapitlet her vil jeg i stedet bruge gratis GIMP, som du kan hente hos https://www.gimp.org/downloads/. GIMP tænker på samme måde som Photoshop.

I kapitlet vil jeg gennemgå basis teori om billeder og billedbehandling.

I øvelserne skal du lære professionel billedbehandling, og her bruger jeg GIMP. GIMP er gratis og kan hentes på https://www.gimp.org/. Som det eneste sted i bogen bruger jeg betalingsbøger.Jeg bruger e-bogen Grafisk præsentation og billedbehandling fra Systime, https://grafisk.systime.dk/. Det er en betalingsbog. Alternativt brug hæfterne fra https://www.libris.dk/ som duer fint som opslagsværker. I al ubeskedenhed er jeg forfatter til alle 3 bøger.

BOGEN HOS SYSTIME	BØGERNE HOS LIBRIS

Link til toppen af siden.

3.1 Papir, web og opløsninggrad

På et papir har du ubegrænset “lagerplads”. Du kan være ligeglad med, hvor meget billedet fylder målt i GB. Du kan også bruge lige så høj en opløsningsgrad, som du vil. Jo højere, jo pænere billede. En opløsninggrad på 300 – 400 dpi er helt almindelig.

Web er nærmest modsat. Hvis billedet fylder for meget målt i GB, så tager det for lang tid at hente det ned. Samtidig kan vi højest gå op til 72 dpi i opløsningsgrad i de fleste tilfælde. Det betyder, at en webbruger modsat en papirbruger ikke kan se forskel på et billede i 72 dpi eller 300 dpi, men brugeren kan desværre sagtens mærke forskellen i den tid, det tager at downloade billedet. Et billede på 300 dpi i samme størrelse som et i 75 dpi kan sagtens fylde 10 gange så meget målt i MB. På nettet er det afgørende, at man kan komprimere billeder, så de fylder mindre (dvs. får en lavere opløsningsgrad).

Faktaboks: Hvad er dpi? Dpi står for “dots per inch”. Ppi står for “pixels per inch”, og man bruger begge udtryk for opløsningsgraden. BIlleder består af prikker på en skærm, og jo flere prikker, jo højere dpi eller ppi. En inch svarer til 2,54 cm.

Der er en lille undtagelse. Hvis du laver en PowerPoint, som skal projekteres op på væggen og ikke på web, så brug billeder i høj opløsning og test det først. Især hvis du skal vise det til kunder eller chefer :-).

	PAPIR	WEB/ELEKTRONIK
FORDELE	Ubegrænset mængde lagerplads Du bestemmer selv, hvilken overflade dit billede får	Nemt at oprette Nemt at skifte ud Nem at distribuere
ULEMPER	Svær at lave om, når det først er tryktDyrt i forhold til webSvært at distribuere	Begrænset mængde lagerplads Kan ikke vise tingene i så fin en opløsningsgrad

Link til toppen af siden.

3.2 Billedformater

Her er et overblik over de vigtigste billedformater. De vigtigste billedformater til nettet er .jpg, .png og .gif.

FORMAT	ANVENDELSE	FORDELE OG ULEMPER
.jpg eller .jpeg	Både web og papir.	– Kan vises i både meget høj og ret lav opløsningsgrad, den kan med andre ord komprimeres kraftigt – Bruges altid i kameraer – Kan ikke vise gennemsigtighed – “Slører”, hvis der er store, ens farveflader fra f.eks. grafik
.png	Mest web	– Man kan sagtens blande grafik med “rigtige” billeder. – Kan vise -gennemsigtighed – Meget brugt til web – Kan ikke nødvendigvis vise billedet i super fin opløsning
.gif	Kun web	– Blev brugt til logoer i gamle dag – Bruges stadig lidt til grafik – Kan vise små animationer – Kan ikke vise tingene i særligt høj opløsningsgrad
.bmp	Kun papir	– Kan håndtere høj opløsningsgrad – Duer ikke til web, for den kan ikke komprimeres
.ico, .svg m.fl.	Kun web	– Specialformater til hhv. faviconer (som står foran f.eks. www.dr.dk) og til logoer. Kun til web
.xcf, .psd m.fl	Kun internt	– Duer kun internt i hhv. GIMP og PhotoShop – GIMP kan læse PhotoShops .psd arbejdsformat – De fleste programmer har lignende, ”egne/interne” formater, f.eks. docx til Word og xslx til Excel

Link til toppen af siden.

3.3 Det professionelle billedbehandlingsprogram

Her er en gennemgang af de krav, man kan stille til et professionelt billedbehandlingsprogram

Skalere, komprimere og gemme i mange forskellige billedformater

Vi bruger som nævnt et væld af billedformater, og jeg har kun nævnt de vigtigste. Hvad værre er, hvis man skal kunne gemme f.eks. en .jpg/.jpeg fil til web, så skal man kunne komprimere den professionelt. Man skal også kunne gøre billederne større eller mindre uden, at det går ud over billedkvaliteten.

Frilægning. Dvs. at du fjerner uønsket baggrund

Ved frilægning fjerner man uønsket baggrund. Især på webshops er det meget vigtigt, at billederne ikke har forskellig baggrund. Nogle billeder kan være nemme, andre meget komplicerede at fjerne baggrund på. Bilen herunder er en nem frilægning. Bemærk, at du er nødt til at gemme i .png format, hvis du vil bevare gennemsigtigheden på billedet.

Arbejde i lag

Du ved allerede, at man i f.eks. PowerPoint kan arbejde i lag. Når man arbejder professionelt med billedbehandling, kan man sagtens have et billede med op til 100 lag, ofte samlet i grupper. Man kan klikke lagene til og fra, når man skal eksportere til f.eks. .jpg eller .png formatet.

Fordelen er, at man kan arbejde med de enkelte dele af billedet uden, at man forstyrrer de andre dele. Forestil dig en professionel webside som billedbehandling. Her vil man anbringe knapper i en gruppe, hver knap i et lag for sig. Logoet i et lag for sig. Baggrunden i et lag for sig osv. osv. Ande-fanten fra sidste afsnit er helt sikkert lavet i lag.

En anden ting ved lag er, at man kan skrue op for gennemsigtigheden. Så man man måske kun ane billedet

Maskering

En maske tillader kun, at man ser en del af helheden, f.eks. øjnene.

Når man laver papirsbilleder, kan man arbejde i et såkaldt mørkekammper. Hvis man belyser en del af billedet, så kan man få til at være lysere. Hvis man lægger en maske, dvs. et papir med et hul i til lyset, så opnår man, at kun den ønskede del af billedet bliver lysere. Man kan selvfølgelig maskere i professionel billedbehandling

Reparation af billeder

En international kendt fotomodel blev engang kaldt “perfekt” af nogle fans. Det mente hun ikke selv, at hun var. Så hun fremlagde en regning fra det grafiske bureau, der tog billeder af hende. På regningen stod alle de småurenheder, mini-rynker og andet, som var blevet billedbehandlet væk fra hendes billeder. Man kan alt i billedbehandling :-).

Link til toppen af siden.

Kapitel 4. Tættere på brugerne

Operationen lykkedes, men patienten døde

Når vi udvikler, er det altafgørende, at vi kommer helt tæt på på både kunden og brugerne. Skrækscenariet er, at vi udvikler det perfekte produkt, som ingen bruger kan finde ud af.

Der er mange aspekter i at komme tæt på kunden og brugerne. Processen starter allerede, når vi vil planlægge, hvordan man udvikler et projekt. Den går igen i kontakten med kunden og brugerne. Her er nogle af elementerne i et komme tæt på kunderne.

• Vælg en udviklingsstategi, der involverer kunder og brugere
• Arbejde med prototyper i udviklingsprocessen
• Designe efter, hvordan brugeren forstår tingene.
• Brugbare funktionaliteter
• Brugertest

Faktaboks. Brugbarhed er penge I gamle dage kaldte man brugbarhed for brugervenlighed. Det er dog ikke kun for brugernes blå øjnes skyld, at brugerinvolvering er vigtigt. Hvis vi udvikler et produkt, som ingen kan bruge, så har vi spildt vores egen tid og kundens penge. Omvendt, hvis vi udvikler et produkt, som brugerne kan lide, så står vi meget stærkere i konkurrencen mod andre firmaer. Konkurrenterne er kun 1 klik væk

Link til toppen af siden.

4.1 Udviklingsmodeller

“Fail often. Fail early”

Du husker sikkert, at der er 2 overordnede udviklingsmodeller. Vandfaldsmodellen og agil udvikling. De 2 strategier ser du herunder

VANDFALDSMODELLEN	AGIL UDVIKLING

Vandfaldsmodellen er den traditionelle udviklingsmodel. Vi opdeler vores projekt i faser, og vi afslutter en fase, før vi starter på den næste. “Ordning muss sein” kan man sige. Revisorer elsker vandfaldsmodeller, for tingene er så nemme at tjekke.

Vandfaldsmodellen er god til projekter, hvor vi er sikre på det færdige resultat. Byggeri er et godt eksempel. Det giver ingen mening at installere toiletterne før, at vi har støbt fundamentet, bygget murerne og lagt taget.

Overfor vandfaldsmodellen står agile metoder eller scrum. “Agil” betyder fleksibel og “scrum” er taget fra rugby, når bolden gives op og folk står i en klynge. Agile metoder/scrum har især vundet indpas inden for IT-projekter. Modellen tager højde for, at vi i et vist omfang kan skifte retning undervejs.

Bygger man et hus, giver det ikke mening, at man halvvejs får lyst til at sløjfe et rum eller lave kælder, men det kan give god mening i et IT projekt. IT projekter er karakteriseret ved, at vi ikke har en helt præcis idé om det færdige resultat. Inden for agile metoder tager man projektet op til revision gang på gang. Vi arbejder i “interationer” eller “sprint”. Ordet iteration betyder “gentagen udregning”, og kan du det, så bliver din matematiklærer meget stolt.

En iteration eller et sprint tager typisk 2 – 3 uger. Man mødes med kunden, aftaler hvad der skal laves og mødes 2 uger efter igen og tager projektet op til revision. En interation eller et sprint er vist som cirklen i modellen ovenfor.

Agile metoder gør det sværere at aftale, hvad der skal leveres. Typisk aftaler man en kerne i et IT projekt, der skal være i orden.”need to have”, f.eks. “vores system skal opdateres”. Så afsætter man et antal timer til udvikling af rapporter og lignende, der vil være arbejdskraftbesparende, men er “nice to have”, og prøver på at lave en prioritering sammen med kunden.

I praksis kan man blande de 2 modeller. Der findes mange udgaver af både vandfaldsmodellen og agile metoder, men næsten alle projektmodeller har tydelige elementer af enten vandfaldsmodellen, agile metoder eller begge. Man kan se de 2 modeller som hver sit ekstrem, hvor virkeligheden byder på et miks af begge. Der er dog ingen tvivl om, at man har taget agile metoder til sig inden for IT-verdenen. Med god grund, metoden fanger i langt højere grad, at brugerne flytter sig, og så må udviklerne flytte med. Mere om det i næste afsnit.

DET OPRINDELIGE PROJEKT
DET FÆRDIGE PROJEKT MED VANDFALDSMODELLEN
DET FÆRDIGE PROJEKT MED AGILE METODER/SCRUM

Link til toppen af siden.

4.2 Udviklingsmodeller og brugbarhed

Agile metoder har som udgangspunkt et meget større fokus på kunden og slutbrugeren end den traditionelle vandfaldsmodel. Igen, der er ikke noget galt med vandfaldsmodellen. Hvis jeg f.eks. køber et firma til at bygge et hus for mig, så behøves jeg i princippet ikke blande mig, før huset står færdig. Ud fra tegningerne vil både bygherre og kunde begge have en ret god idé om det færdige resultat.

EPJ – den elektroniske patientjournal Det lyder næsten for oplagt: Det danske sundhedsvæsen er kæmpestort, og tænk nu hvis man alle steder i sundhedssystemet havde en fælles patientjournal, som man registrerede alt i på samme måde. Det kan vi alle blive enige om er en god idé. Så derfor startede man EPJ, den elektroniske patientjournal for mere end 10 år siden. Et kæmpe projekt at køre alle sundhedsvæsnets data sammen i et program. Desværre kørte projektet af sporet. Projektet er langt over budgettet, for man undervurderede, hvor svært det er. Man undervurderede også de mangtkampe, det gav anledning til. Den dag i dag fungerer EPJ stadig ikke tilfredsstillende. Revisorer på projektet foreslog på et tidspunkt, at man gik over til vandfaldsmodellen frem for agil udvikling. Simpelthen for at kunne placere et ansvar lettere.

Agile metoder er i langt højere grad end vandfaldsmodellen designet til at involvere brugere. “Extreme programming” hedder en udgave af agile modeller. Her er det et krav, at udviklerne sidder sammen med brugerne.

Når man starter en iteration, er det oplagt at kunden sidder med ved bordet. Så får vi afstemt forventningerne til projektet sammen, og vi får korrigeret projektet, hvis vi er på vej i en forkert retning. “Fail often, fail early”. Jo før vi opdager problemet, jo billigere er det at gøre noget ved det.

Det at holde løbende møder med kunden undervejs er et skridt på vejen til at lave et produkt, der passer godt til kunden. Men det er bestemt ikke hele vejen. Dem, der tager beslutninger om f.eks. at opgradere eller udskifte et ERP system i en virksomhed (ERP = økonomistyring, meget mere om det i senere kapitler) er typisk ledere. At skifte/opgradere et system kan være en dyr affære, og hvis det går galt, så kan det blive endnu dyrere. Det er logisk, at en virksomheds ledelse vil være involveret i en sådan beslutning og vil følge processen tæt gennem professionel projektledelse. Det er lederne, det falder tilbage på, hvis processen løber af sporet.

Men: Hvad med brugerne? Hvad gør vi ved dem? Skal de involveres fra start eller gør vi “bare” det, at de måske får et kursus i det nye system, når de er færdigt. Hvis slutbrugerne ikke befinder sig i selve kunde-virksomheden, så har vi ikke engang adgang til brugerne.

Brugerne er ofte besværlige. De stiller krav og har ønsker, men vi kan ikke undvære dem. Hvis vi ikke involverer dem, så risikerer vi at stå med et ubrugeligt produkt. “Operationen lykkedes, men patienten døde”.

Designet kan i sig selv være agil udvikling

Når man skal starte med et program, så start med at identificere brugerne og deres behov. Så arbejder man sig fremad i en iterativ (= cirkulær) proces mod det færdige resultat.

Personas er et ofte benyttet redskab til design. Læs mere i næste afsnit. Et andet nyttig tilgang er at dele brugerne op. Nogle brugere er måske mere vigtige end andre. Det kan godt være, at Mette Mormor køber en julegave til barnebarnet på en webshop, der sælger sneakers til unge, men hun er ikke så vigtige en kunde som de unge.

Link til toppen af siden.

4.3 Prototyper og fidelity

Prototyper er uundværlige. Selvom de kun er en model af det færdige produkt, hjælper de os enormt i vores udviklingsprocess. Med protyper kan vi anskueliggøre/visualiere, hvordan vi ser det færdige produkt for os. Ved agil udvikling vil vi typisk præsentere kunden for en visualisering af projektet. Så aftaler man de første skridt, udfører skridtene og mødes igen et par uger efter for at følge op og aftale videre.

Der findes forskellige typer protytyper, og man inddeler dem efter “fidelity”. Dvs. hvor tæt de er på virkeligheden, “fidelity” betyder egentlig “trofasthed”. I starten af et projekt vil det være nok at tale ud fra løse skitser. Man siger, at man har modeller med “low fidelity”. Når vi arbejder os fremad i projektet, vil vi have behov for protytyper, der ligger tættere og tættere på det færdige produkt. Skabelonerne bliver “high fidelity”.

Hvilke typer protytyper og hvor og hvornår man bruger protytyper i udviklingsporcessen afhænger af både projektets kompleksitivet, af projektets art og af den forforståelse, som kunden har. Det afhænger også af dig selv, hvis du er en god tegner, så vil du nok foretrække papirprototyper frem for en skærm. Hvis du har en ny og banebrydende idé, kan det endda være, at det i det første stykke tid slet ikke giver mening at involvere brugerne.

Redskaber til design af brugerflader

NAVN	FORKLARING	EKSEMPEL
Skitse	Man har lavet skitser i århundreder. Papirskitser er nemme at arbejde med, de er “low-fidelity”
Roughs	En hurtig og upoleret udgave, uanset om der er tale om en skitse, wireframes eller prototyper. Kald den “quick and dirty”. Nogle gange er et par få streger på et papir eller et whiteboard nok til, at man kan have en kvalificeret diskussion om et produkt.
Wireframes	Hvis man har flere skærmflader, kan man lave en oversigt, og man kan måske klikke sig vej fra billede til billede. Der Wireframes er stadigvæk low-fidelity, men vi nærmer os high fidelity. Skærmbilledet er fra programmet MockFlow.
Prototyper	Prototyper kan, som wireframes, både være på papir og elektronisk, og grænsen mellem wireframes og prototyper kan være ret flydende, især hvis vi taler om hjemmesider. Man kan sagtens forestille sig både papirsprototyper, fysiske prototyper (f.eks. en ny mikrobølgeovn) og kørende prototyper (f.eks. en ny bil)
Throw-away modsat system prototyper	En system prototype er en simplificeret udgave af det endelige system, mens en throwaway prototype .eks. kan fokus på at udforske alternativt designs
Mock-up	Mockups er ofte en 1:1 papudgave af det færdige produkt, men mockups i Lego er set :-). Her en mock-up af en Iphone 6 fra 2012. Nogle entusiaster kunne ikke vente på den nye Iphone, så de lavede en mock-up i ventetiden
Strukturdiagrammer	Typisk en oversigt over en menustruktur. Alle kan forstå en punktopstilling, så det er et godt værktøj. Til højre er jeg startet på et strukturdiagram over hjemmesiden her
Rutediagrammer/flowcharts	De 2 begreber dækker over det samme. De beskriver brugerens vej igennem et system. Man kan kode efter rutediagrammet

Bemærk, at jo mere kompliceret et produkt, jo flere “mellemtrin” kan man have brug for. Spil som f.eks. Sims og Fortnite er meget komplicerede produkter. Iphones er også et kompliceret produkt.

Link til toppen af siden.

4.4 Design efter brugerne

“Don’t make me think”

Fra kapitel 2 kender du allerede regler for farvelære og designs. Jeg vil introducere nogle nye regler her, som du kan bruge i forhold til at arbejde brugerorienteret.

Faktaboks. Brugerorienteret design tjener penge. Store penge Grundlæggerne af hhv. Microsoft og Apple Steve Jobs og Bill Gates har både været hinandens med- og modspillere. Steve Jobs, grundlæggeren af Mac, var altid god for en provokation, og han sagde engang “Microsoft er grimt”. Med det mente han, at Microsoft modsat Apple ikke havde/har en bærende design idé. Tænk lidt over, hvor meget Mac tjener på, at folk bedre kan lide deres særdeles gennemtænkte design end PC-verdenens design.

Fitts lov

Fitts lov siger, at

• Jo større et mål er, jo hurtigere/nemmere er det at ramme
• Jo tættere målene er på hinanden, jo hurtigere/nemmere er de at ramme

Hvis vi vil øge brugbarheden på et produkt, skal vi derfor lave knapperne store og placere dem tæt.

Hicks lov

Hicks lov siger, at jo flere valgmuligheder vi har, jo længere tid/sværere er det at tage en beslutning.

Hvis vil øge brugbarheden på et produkt, skal vi derfor begrænse valgmulighederne og evt. lave et hiraki. Det sidste svarer til, at vi i stedet for 15 punkter i hovedmenuen måske kun har 5, mens resten bliver til underpunkter.

Her er en udmærket og kort video om Fitts lov. Hicks lov er også lidt med i videoen

KISS

KISS står for “Keep IT Simple and Stupid”. Gør det nemt for brugeren. Eller som forfatteren Steve Krug udtrykte det i en bog “Don’t make me think”. Gør det nemt for brugeren. Jo mindre brugeren skal tænke, jo hurtigere og jo bedre.

FTF

FTF står for “putting First Things First”. Læg det, som brugeren har mest brug for, forrest i menuen. Det kræver, at man kan se sig selv fra brugerens synspunkt.

Personas

En “persona” er en opdigtet person, som man bruger til at gøre en side mere brugervenlig med. Et eksempel: Vi har en webshop, som specialiserer sig i sneakers til unge både mænd og uekvinder. Man forestiller sig så f.eks. 2 profiler på den typiske kunde: Birgitte Birkenstock og Niels Nike. En sådan profil kalder men en persona. De 2 persona’er kunne se således ud:

BIRGITTE BIRKENSTOCK

NIELS NIKE

Birgitte er 17 år. Hun er 170 cm høj, langt mellemblondt hår, og hun bor i en forstad med hendes storebror, far og mor og katten. Dræbermis i en forstad til Kolding. Hun dyrker ridning, men hun har ikke sin egen hest. Hun har nogle gode veninder, og sammen går de ofte ud og shopper og på café. Birgitte går i gymnasiet, og hun drømmer om at læse videre inden for enten design eller handel og arbejde inden for tøjbranchen.

Niels er 20 år. Han er 185 cm høj og har mørkt, krøllet hår. Niels er flytte hjemmefra for at læse, og han læser på første år på ingeniørstudiet i Aarhus. Niels har en kæreste, men han hænger stadig meget ud med hans gamle gymnasiekammerater fra Nyborg. I weekenderne går han tit i byen med dem. Niels dyrker ikke sport, men han gamer en del, og han har ambitioner om at få en ledende stilling inden for teknik på et tidspunkt. Han følger 3 fodboldhold tæt: AGF, Liverpool og Dortmund, og han oddser på deres kampe.

Altså: Ren fantasi, men så alligevel ikke. Man prøver på at ramme de typiske kunder med personas, og man prøver at give de samme oplysninger om hver persona (højde, bopæl, hvad de laver osv.). Når man så holder møde, så kunne man f.eks. sige “Birgitte Birkenstock er meget modebevidst, så vi skal have det sidste nye på hjemmesiden” eller “Niels Nike vil gerne betale, hvis han ellers kan købe nogle helt specielle Nikesko”. Man taler om personas, som om de findes.

Man kan sagtens ændre personas eller opfinde nye personas, hvis det er nødvendigt. Måske får Birgitte også en kæreste, måske flytter Niels til Vestjylland og dyrker økologiske grøntsager. Bare personas passer til den typiske kunde, så er alt godt.

Link til toppen af siden.

4.5 Brugertest

Vi bruger mange metoder for at nå og forstå både kunder og brugerne. Gentagne møder med brugere og kunder som i den agile udviklingsmodel er kun en af flere muligheder, vi har

• Prototyper. Protyper er mini-udgaver af det færdige resultat. En god prototype kan give en god dialog med brugerne
• Teste undervejs

Der findes forskellige brugertest. Du skal kende disse typer test.

• Eksperttest eller heuristisk test
• Tænke-højt test
• Kvantitative test

Eksperttest

En eksperttest eller heuristisk test er såre simpelt. Det er, når du tester dit eget arbejde. Det er nemt, billigt og effektivt, men det kan ikke stå alene.

Tænke-højt test

Tænke-højt test er en test, hvor man stiller brugere forskellige opgaver. Lad os tage DSB som eksempel. Brugeren får til opgave, at de skal være i Nykøbing Falster i morgen kl. 12. Hvilket tog skal de tage og hvad koster billetten.

Brugeren tænker så højt, f.eks. “Hm, først vil jeg åbne DSBs hjemmeside”. “Mon der er en billetknap, næeh, jeg klikker her i stedet …”. Designerne er så bag brugeren og lytter med. På den måde lærer de, hvordan brugeren opfatter programmet.

Tænke-højt test er helt fantastiske, og f.eks. Microsoft har dyre lokaler indrettet specielt til tænke-højt tests. Men de kan være dyre at gennemføre. Især hvis man ønsker et bredt udsnit af brugerne.

Kvantitative test

Kvantitative test er, at man typisk beder brugerne besvare et spørgeskema. De skal så svare på spørgsmål om brugbarhed, indhold. Man kan bede brugerne udføre opgaver og bagefter skal brugerne fortælle, om det var let/svært, og hvad man kan gøre bedre.

Kvantitative test er billigere end tænke-højt test, men de kommer ikke helt så tæt på brugerne hvis kontakten til brugerne kun sker gennem spørgeskemaer.

Link til toppen af siden.

4.6 Systemtest er ikke brugertest

I sidste afsnit læste du om, hvordan man kan teste for at øge brugervenligheden. Der findes en anden type test, systemtest, hvor man groft sagt er ligeglad med brugerne. Et eksempel: Jeg har nu designet en lille regnemaskine, der kan omregne fra danske kroner til dollars, engelske pund og euro alt efter, hvad brugeren nu vælger.

Jeg laver en prototype, involverer brugerne og tester prototypen af på mine brugere. De er godt tilfredse. Men: Når jeg skal teste, om koden rent faktisk er i stand til at omregne, så tester jeg ikke, om mit design er godt. Jeg tjekker udelukkende, om den virker, som den skal. Denne type test kaldes en systemtest.

Link til toppen af siden.

4.7 Testkørsler

Lad os sige, at du nu er færdig med at opgradere et ERP system. Hvordan skal vi så komme i gang med systemet? Skal vi bare skrotte det gamle system og håbe det bedste? Næppe, det vil her være alt for risikabelt i forhold til at miste dyrbare. Skal vi i stedet del-teste det af? Skal vi gå i gang trin for trin? Skal vi køre både det gamle og nye system parallelt i en periode og så se, hvad der sker. Mulighederne er mange, de kan kombineres, men hav en plan B klar. For hvad gør du, hvis testen slår fejl? Omvendt er det dyrt at køre 2 systemer parallelt, så vi kan heller ikke gå med både livrem og seler.

BEGREB	FORKLARING
Direkte overgang	Vi kaster os ud i det. Så må det gå, som det går
Parallelkørsel	Vi arbejder med både det gamle og det nye system i en periode, indtil vi er trygge
Glidende overgang	Vi udfaser det gamle og sætter det nye igang i små trin. Evt. med overlap
Deltest eller afprøvning	Vi lader nogle prøve det nye system af i en periode. Det er ikke det samme som parallekørsel. Vi tester muligvis kun en begrænset del af systemet, og vi tester kun i en begrænset periode. Hvis det går godt, kan man så sætte flere dele af systemet på

Link til toppen af siden.

4.7 Usability og user experience

Usability er brugbarhed. Men det er ikke det samme som user experience eller UX. I den sidste handler det om, hvordan brugeren oplever siden. Jeg kan f.eks. sige, at uanset hvad så vil min oplevelse af Brøndby IF’s hjemmeside være elendig, lige som min oplevelse af AGF’s hjemmeside vil være vidunderlig næsten uanset hvad.

Jeg vil prøve at uddybe begreberne lidt. Først et par eksempler på usability problemer:

• Jeg har glemt mit password. Hvordan får jeg fat i det, når jeg ikke kan huske, hvad mit brugernavn er
• Jeg havde forventet, at jeg kunne finde åbningstiderne under Kundeservice
• Jeg kan ikke købe en pladsbillet uden også at købe en almidelig billet
• Hvad gør jeg, hvis jeg også vil købe billet til min cykel (igen hos DSB)
• Jeg har udfyldt en formular, og programmet melder, at den er udfyldt forkert. Men jeg kan ikke se hvor

User experience og usability er begreber, der er under udvikling. Her et bud på, hvordan begreberne kan spille sammen.

Min kilde til afsnittet her er: http://informationsteknologi.wdfiles.com/local–files/interaktionsdesign/Interaktionsdesign.pdf

Link til toppen af siden.

4.8 Udvikling og magtkampe

I afsnit 4.2 lærte du, at det at have ledelsen med til udviklingsmøder ikke er det samme, som at slutbrugerne er involveret.

Nogle brugere vil sikkert være glade for et nyt system. Men lige så mange brugere vil se “bøvl og ballade”. De føler, at de har rigeligt at lave i forvejen. De har måske brugt det gamle system i mange år og kender det til fingerspidserne, og de har måske ikke lyst til at skulle lære nyt.

Nogle ledere vil invitere dem med i processen fra start, mens andre bare vil komme med en lodret ordre. Ved at involvere brugerne fra start giver man brugerne mulighed for at tage ansvar. Men: Hvad nu, hvis brugerne har massiv modstand mod at lære nyt uanset hvad? Og at ledelsen på samme tid mener, at vi skal skifte for at være på forkant med sikkerhedstrusler eller at kunne følge med konkurrenterne. Eller hvis den erfarne medarbejder føler sig overhalet af yngre kollegaer, der hurtigere sætter sig ind i den nye teknologi, medarbejderne generelt føler sig sat til side af ledelsen. Brugerne kan måske frygte, at den virkelige dagsorden bag et nyt system er, at der skal spares og fyres folk.

Hvis det er et krav, at et system skal opgraderes, så kan man omvendt ikke sætte brugerne til at diskutere i en rundkreds, om vi skal opgradere. Der er med andre ord både “for” og “imod” brugerinvolvering.

Næsten alle virksomheder har oplevet problemer med magtkampe, når de opgraderer programmer. I opgaverne har jeg lavet en, desværre, ret typisk case om en bogholder.

Link til toppen af siden.