IT-design til arbejdspladsen – beyond UX og usability

IT-værktøjer til arbejdspladser er i dag ofte web-baserede, men de er ikke almindelige websites. Vejen til den gode IT-løsning på arbejdspladsen er forskellig fra vejen til det gode website, der i reglen handler om at kommunikere noget ud af huset.

Fra web-tilgangen ved vi selvfølgelig godt, at forundersøgelser og brugertest er nyttige, men der kan opstilles mere specifikke retningslinier for IT-design i organisationer.

Jeg vil gerne dele nogle af de mest værdifulde tips som jeg har opsamlet igennem 10 år i webbranchen og tre år som underviser i co-design (IT-Universitetet) og IT-innovation (Københavns Universitet).

Generelt om IT-projekter

IT-projekter er kendetegnet ved høj kompleksitet og omskiftelighed. Man kender sjældent alle variable på forhånd og der opstår/afdækkes som regel nye behov og løsningsforslag i løbet af designprocessen.

Mere end UX

At konstruere et retvisende user-flow, som man derefter kan basere en testbar prototype ud fra er et vigtigt første skridt. Man er dog ikke nødvendigvis i mål, når det er gjort.

Når konteksten er en arbejdsplads/organisation er tingene altid mere komplicerede, bl.a. på grund af:

  • risiko for værdi- eller interessekonflikter (der eksisterer i reglen både fælles og modsatrettede interesser i organisationer).
  • risiko for at IT-projektets mål/vision ikke matcher organisationens mål og problemstillinger helt.
  • risiko for at sætte eksisterende ressourcer på spil, f.eks. på grund af mangelfuld indflydelse og/eller forankring hos medarbejdere, ledelse eller interne IT-folk.

Inden for de akademiske ‘skoler’ participatory design (PD) og computer supported cooperative work (CSCW) har man arbejdet med disse særlige problemstillinger. Det har udmøntet sig i konkrete forslag til at organisere IT-designprojekter og teknikker til at indsamle viden, skabe nye løsninger og sikre at løsningerne faktisk realiseres. Grundlæggende om dem kan man sige, at der kræves mere end at være en dygtig designer eller usabilityspecialist.

Værdifulde principper for IT-design i organisationer

  1. Sammenhængende vision for forandring: For at sikre bæredygtighed og at perspektiver vedrørende IT, organisationen og kvalifikationsudvikling alle betragtes.
  2. Reel brugerinddragelse: For at sikre at projektets visioner matcher oplevede behov, brugeres ret til indflydelse på egen arbejdspraksis og en gensidig læring.
  3. Førstehåndserfaring med arbejdspraksis: For at sikre relevante og forståelige beskrivelser af arbejdspraksis og at brugeres perspektiv anerkendes.
  4. Forankring af visioner: For at sikre at de foreslåede forandringer faktisk bliver realiseret.

Brugerinddragelse og forankring volder særlige problemer

Principperne er lige vigtige, men min erfaring er at nr. 2 (reel brugerinddragelse) og nr. 4 (forankring af visioner) er dem der oftest udelades eller behandles lidt halvhjertet. Der er en tendens til at brugere, som ikke er en del af projektets daglige ledelse eller arbejdsgrupper, ofte kun inddrages helt i begyndelsen og slutningen af IT-designprocessen.

Det er en skam for alle – ikke for kun dem der ikke var inviteret med til festen, så at sige – for vigtige indsigter og idéer kan gå tabt og løsningen kan blive modtaget på en uhensigtsmæssig måde.

Et klassisk problem er, at løsningen ender med at understøtte en arbejdspraksis der ikke svarer til brugernes reelle mønstre, men en idealiseret, forestilling om hvordan opgaver burde løses. Der kan være gode grunde til at foreslå ændringer i arbejdspraksis, men der kommer sjældent noget godt ud af, at diktere forandringerne.

Det handler ikke om altid at give brugerne ret. Det gode IT-design opstår ikke ud af en slags blindt brugerdiktatur – eller andre slags diktatur for den sags skyld.

Det nytter ikke blindt at adlyde umiddelbare ønsker fra brugerne. Dels fordi andre perspektiver end brugernes er vigtige (jf. princip nr. 1 og 4), men også fordi de gode idéer tit ikke er kendte på forhånd. De opstår gennem et faciliteret samarbejde, hvor alle behov og indsigter tages i betragtning.

Konkrete teknikker til reel brugerinddragelse og forankring kan være:

  • Fremtidsværksteder, der bl.a. har den fordel at man både behandler de nuværende forhold og udvikler nye visioner, samt at workshopformatet kan rumme ret mange deltagere.
  • Høringer, hvor visioner kan fremlægges og diskuteres åbent (faciliteret).
  • Eksperimenter med prototyper, ikke forstået som test eller observationer alene, men som en dialog om behov og visioner, med udgangspunkt i nogle konkrete forslag, man kan tage og føle på.

Videre læsning:

Jeg anbefaler på det varmeste bogen Professionel IT-forundersøgelse: Grundlag for brugerdrevet innovation, af Keld Bødker, Finn Kensing og Jesper Simonsen (MIT Press, 2004), hvor flere af ovenstående principper findes beskrevet nøjere.

Godt webdesign vs. dårligt webdesign

Godt webdesign er noget man kan måle. Det handler ikke (kun) om æstetik, men primært om, hvorvidt det fungerer og om brugerne oplever at det fungerer.

Funktionalitet kan gradbøjes og brugeroplevelsen er naturligvis kompleks, og farvet af mange ting, men begge dele er noget man kan forholde sig objektivt til. Og det bør man gøre, når man står overfor at skulle skabe eller forbedre et website eller en anden IT-løsning.

Ofte sker det imidlertid, at en dialog om design tager udgangspunkt i, hvad man selv synes og føler vedr. det æstetiske aspekt af designet. Sådan en dialog, der tager udgangspunkt i ens egen smag, afsporer designprocessen. Målet bør ikke være flot design, men godt design (der er dog en sammen­hæng, som vi vender tilbage til). Designet har altid til formål at løse en opgave, hvad enten brugerne skal kunne finde information, købe en vare eller noget tredje.

Men hvad er så godt og dårligt design, hvis det ikke (kun) handler om de smukkeste billeder, former og farver? Hvordan kan man forholde sig objektivt til funktionalitet og brugernes subjektive oplevelse af webdesign?

Lad os tage et par eksempler.

Jeg vil sammenligne forsiderne fra to forbrugerorienterede websites, der begge er drives af redaktionelt indhold: computermagasinet PCWorld og avisen The Boston Globe. Store medier, der begge har brugt kræfter på at bygge netudgaver af deres publikationer, dog med vidt forskelligt resultat.

Jeg vurderer kun designet som det fremstår, når man kommer direkte ind på forsiden – ikke interaktionen eller undersiderne. En brugertest ville afsløre flest detaljer, men det er også muligt at sige noget generelt om egnetheden af webdesign, på baggrund af videnskabelige undersøgelser, der har afdækket fakta om generel brugeradfærd. Det er sådan en form for heuristisk undersøgelse, de to websites underkastes her.

Dårligt design: PCWorld.com

Screenshot af PCWorld.com
PCWorld.com på mellemstor skærm. Bemærk den ukonventionelle opsætning og den horisontale scrollbar (klik for at forstørre).

Den amerikanske version af det globale computermagasin PCWorld, fik et nyt webdesign i september 2012. Den nye version af PCWorld.com har fået et tidssvarende look, er baseret på HTML5 og designet er responsivt; Det kan tilpasse sig forskellige skærmstørrelser, hvormed det bl.a. er mobil­venligt. Man har gjort sig umage, og relanceringen har næppe været helt billig. Desværre er det nye design en mindre katastrofe, hvad angår brugervenligheden. Websitet blevet svært at forstå og anvende.

  1. Det er svært at scanne forsiden med øjnene. Brugere skimmer websites før de læser, hvilket er svært her. PCWorld-logoet er placeret godt i toppen, men smelter næsten i ét med indholdet og hvor er hovedmenuen? Der er generelt kamp om pladsen. Siden er som et patchwork af små artikel­uddrag, links til kommercielt indhold og annoncer. Man har forsøgt at lave et hierarki på sidens øvre del, for at guide brugerne, men tilgangen er i det store hele fejlslagen. Det ville være bedre at give hvert uddrag mere plads, med de vigtigste fremhævet i toppen (under menuen). Brugere scroller gerne efter indhold, omend 80% af tiden bruges over sidens fold.

  2. Sidens top ligner reklamer. Sidens top, det mest dyrebare område, domineres af nogle store artikel-grafikker. Det er problematisk at placere indhold oven over hovedmenuen. Det er svært at se hvor det hører til, og det ligner nemt bannerreklamer, hvilket medfører at mange brugere vil ignorere det. Fænomenet kaldes banner blindness.

  3. Hovedmenuen er underprioriteret på bekostning af overblikket. Hovedmenuen er hjertet i ethvert indholdssite og bør placeres helt centralt. Eye-tracking studier viser, at brugernes øjne generelt skimmer websites oppefra og ned, fra venstre mod højre, i et F-formet mønster. Derfor er en mere konventionel placering af menuen øverst på siden og/eller helt til venstre mere brugervenligt. Sproget i menuen er gennemskueligt, bort set fra det første punkt, “WHAT’S HOT”. Man kunne tro at det var et link til nyheder, men hvorfor så ikke kaldet det “NEWS”? Endvidere er de fleste af menuens links skrevet med tynd skrifttype, i en farve der er lysere end størstedelen af sitets øvrige tekst, hvilket heller ikke hjælper til at fremhæve menuen.

  4. Søgefunktionen er placeret godt, men er alligevel utydelig. Brugere vil typisk forvente at finde søgningen øverst til højre, som set her. Imidlertid er søgefeltet lagt oven på et baggrundsbillede med tilhørende tekstboble, og er sidestillet med fire links der ikke har med søgning at gøre. To af dem peger tydeligvis til eksternt indhold på Facebook og Twitter. Det virker forvirrende. Objekter der er grupperet sammen opfattes typisk som samhørige, viser psykologiske studier. Deraf gestaltlovenes princip om nærhed. Det kan fremstå som om søgningen og billedet/teksten hænger sammen: Hvad er det man kan søge i? Det ville være mere logisk at placere søgefeltet nær menuen.

  5. Funktioner er utilgængelige i mellemstor skærmopløsning. Layoutet er ca. 70 pixels for bredt til at kunne vises i sin helhed, med en skærmopløsning på 1024×768 pixels (indbefatter bl.a. iPad). Det medfører at bladrefunktionen i den horisontale karrusel under menuen, ikke fungerer for disse brugere. Heller ikke hvis de scroller sidelæns. De sølle ekstra 70 pixels kunne undværes. Layoutet gør sig faktisk bedre på helt små skærmstørrelser.

  6. Hovedmenuen knækkes over i stor skærmopløsning. Det responsive design tager ikke kun højde for mobile brugere, men også brugere med store skærme. Disse brugere får vist en ekstra spalte til højre, hvor der ellers ville være tom plads. Desværre har man valgt, at flytte de tre første menupunkter over i denne spalte. Således bliver hovedmenuen splittet, og de punkter der før havde den mest prominente placering i menuen, er nu rykket ud til højre og vises som faneblade. Som sagt matcher det ikke mønsteret som brugernes øjne generelt scanner skærmbilledet i. Vi ved at venstre del af skærmen får over dobbelt så meget opmærksomhed.

Godt design: BostonGlobe.com

Screenshot af BostonGlobe.com
BostonGlobe.com på mellemstor skærm. Bemærk opsætningens umiddelbare enkelhed (klik for at forstørre).

Netudgaven af avisen The Boston Globe, har ligeledes fået en overhaling for nylig. Også denne hjemmeside er baseret på HTML5 og har responsivt design. Der er endvidere nogle grundlæggende ligheder med PCWorld.com, f.eks. det flerspaltede design og blandingen af artikeluddrag, kommercielt indhold og annoncer. Alligevel er det en helt anden verden. BostonGlobe.com er et eksempel på temmelig godt webdesign med kun få mangler.

  1. Designet ligner det det er – en avis. Det er nemt at gennemskue, hvad hjemmesiden går ud på, og forsiden er lettere at overskue. Med sit konventionelle layout er det tydeligt, at sidetoppen rummer navigationen, mens det nedenunder er selve indholdet. Dog kunne logoet med fordel have været anbragt til venstre, i stedet for i midten, jf. eye-tracking studierne. Vejrudsigten optager den mest prominente plads i designet, og burde måske placeres nede ved det øvrige indhold.

  2. Tydelig og gennemskuelig hovedmenu og søgefunktion. Med sin prominente placering på tvært af sidens top er hovedmenuen er let at finde og menupunkternes navne svarer ca. til sektionerne i en avis. Søgefunktionens placering er ligeledes optimal, og med sin nære placering til hovedmenuen fremstår den som en del af websitets navigation. Sidens top rummer endvidere arbitrære annoncelinks og links vedr. abonnement, men de er grupperet for sig og adskilt fra hovedmenuen, så de støjer ikke, modsat på PCWorld.

  3. Indholdet er forholdsvis tydeligt opdelt. Det er nemt at identificere tophistorien, idet den både er placeret mere prominent, øverst til venstre i indholdsspalten, og har et større billede. Ligeledes er der et hierarki i de øvrige artikeluddrag, hvormed man undgår at de slås om pladsen som hos PCWorld. Dog er Boston Globes brug af spalter ikke helt gennemskuelig. Venstre side, der som sagt får størst opmærksomhed hos brugerne, er godt udnyttet, men overskriften “Latest news” virker malplaceret i midterspalten (opløsninger på 768×1024 og derover). Hvis midten er seneste nyt, hvad er det til venstre så? Om ikke andet kunne venstrespalten få sin egen overskrift. Eye-tracking studier viser, at der både er fordele og ulemper ved flerspaltede webdesigns.

  4. Layoutet fungerer godt i alle gængse skærmstørrelser. Al funktionalitet bevares umiddelbart og sidens elementer folder sig nydeligt ind under hinanden på små skærme og ud igen på store. Logoet, hovedmenuen og søgefunktionen bevarer deres placering, samlet i toppen. Uanset om websitet tilgås på smartphone, tablet eller en stor skærm, er funktionen og overskueligheden bevaret.

Godt design handler ikke (kun) om æstetik

Ovenstående sammenligning skelner mellem godt og dårligt design, baseret på evidens. Hvis man lavede en brugertest med rigtige brugere, evt. eye-tracking, ville resultatet med al sandsynlighed lægge sig i forlængelse af den eksisterende viden om, hvordan hjemmesider opfattes. Man ville kunne måle, hvor godt de fungerer. Man må erkende at design ikke kan reduceres til æstetik – det skal først og fremmest løse en opgave.

Sammenhæng mellem usability og æstetik

Udseendet er imidlertid vigtigt. Det ved vi ligeledes fra usability-studier, der viser at brugernes subjektive oplevelse af det visuelle design, påvirker opfattelsen og motivationen til at bruge websitet. Brugernes oplevelse af webdesignets æstetik, ville ligeledes kunne undersøges i en brugertest, hvormed man også bliver i stand til at forholde sig til dette aspekt.

Man ser også, at websites med høj brugervenlighed opfattes flottere end sites med ringe brugervenlighed. Tænk på et website som Google. Er det specielt smukt og kunstfærdigt? Sandsynligvis har du ikke skænket det mange tanker, fordi Google simpelthen leverer varen, hurtigt og nemt. Det pudsige er dog, at websites der opfattes som flotte opfattes også brugervenlige.

Med andre ord må man både arbejde med usability og det rent grafiske. Inden for grafisk design arbejder man ligeledes med principper, der har til formål at understøtte funktionalitet (typografiske hierarkier, grids, farveteori etc.). Kombineret med den brugercentrerede tilgang er det et stærkt våben. The Boston Globe er et godt eksempel på, hvordan formen følger funktionen.

Helstøbte oplevelser med UX

Det lyder jo dejligt med alle disse objektive kendsgerninger, men man kan ikke nøjes med at sætte sig ind i de nyeste usability-studier, og regne med at alt derefter løser sig. Man er nødt til at lave noget brugerresearch, for at komme i dybden med brugernes subjektive, følelsesmæssige oplevelse af ens design. User experience (UX)-tilgangen bygger netop bro mellem de objektive og subjektive aspekter af brugeradfærden, og er den bedste simpleste vej til succes. Sådan bliver man i stand til at sætte sig ud over sin egen smag, både som designer og kunde. Det er brugerne det handler om.

For en god ordens skyld vil jeg nævne, at jeg ikke er affilieret med hverken PCWorld eller The Boston Globe, og at denne sammenligning kun er lavet som et hurtigt, uafhængigt case-studie.

Læs mere om vores usability- og UX-ydelser

Er du brugervenlig?

Brugervenligheden af dit website er afgørende for, om du får det optimale udbytte af det. Men hvordan finder man ud af, hvad der kan gøres bedre?

Brugervenlighed handler ikke kun om at være flink ved andre. Det handler lige så meget om, at optimere sandsynligheden for at brugerne interagerer med dig og dit indhold, sådan som du ønsker det.

“Jamen, hvorfor skulle brugerne ikke forstå mig?”

Måske er du (bruger)venligheden selv. Sandsynligvis er der dog ting der kan forbedres.

Man kender fra hverdagen, at ting som er indlysende og logiske for én selv, kan kræve en ekstra forklaring for andre. I en samtale opfatter man hurtigt, om den man taler med forstår hvad man mener. Man tilpasser det man siger lidt efter modpartens reaktion, ind til man forstår hinanden.

Den mulighed findes desværre ikke på samme måde på et website. Forstår brugerne dig ikke får du ikke nødvendigvis chancen for at forklare. Studier viser at folk er ret utålmodige på nettet, og samtidig er din nærmeste konkurrent ofte kun et klik væk.

Det betaler sig at optimere sit website til sin målgruppe. Men hvordan finder man ud af, hvad der fungerer godt og hvad der bør gøres bedre?

Tryktest løsningen med usability

Der findes en lang række teknikker til at teste usability (tænke-højt-tests, kortsortering, eye-tracking osv.). Fælles for dem er, at man afprøver det rigtige indhold på de rigtige brugere. Sådan kan man få et objektivt billede af, hvordan løsningen faktisk virker. Ofte kan tingene optimeres en hel del for at blive nemmere og hurtigere at bruge.

Jo lettere folk har ved at forstå et websites formål og opbygning, og jo hurtigere de kan få det de kom efter, desto bedre er deres brugeroplevelse. Verdens mest succesfulde websites har forstået værdien af at prioritere brugbarhed og brugervenlighed i første række (Google er måske det bedste eksempel).

Google Screenshot
Google: Fokus er på det essentielle – søgningen. Let at tage for givet, men det er ikke mange år siden en søgemaskine så sådan her ud.

Ud over at teste objektive aspekter af brugen, kan man naturligvis interviewe brugerne om deres subjektive oplevelse. Altså hvad de synes om løsningen og hvordan de opfatter afsenderen. Der er oftest en klar sammen­hæng at spore.

Succesfulde løsninger starter ved brugerne

De mest succesfulde løsninger er dem, der har størst brugsværdi for det største antal brugere i målgruppen.

Spørgsmålet er, hvordan du finder ud af, hvad brugerne har behov for og hvordan en løsning kan matche dem bedst muligt.

Her er det oplagt, at gå direkte til brugerne: Dem der skal bruge løsningen i sidste ende.

Man ser desværre stadig alt for ofte på alverdens webbureauer, at brugerne enten slet ikke kommer i spil, eller kun kommer det overfladisk. Selv webprojekter i millionklassen baseres ofte på rene forestillinger, eller løsrevne erfaringer, vedr. brugerne.

Du og dine brugere fortjener imidlertid bedre.

Ved at inddrage brugerne i udviklingen af dit nye digitale koncept, får du indsigter og idéer med rødder i deres verden, som du ikke har råd til at undvære.

Brugerinddragelse

Forskellige målsætninger (og budgetter) kalder på forskellige tilgange. Mulighederne kan groft opdeles i to kategorier, ud fra om man evaluerer en eksisterende løsning eller om man udvikler nye koncepter. Man kan i øvrigt gøre begge dele med fordel.

Test og evaluering (usability)

Benyttes typisk når der foreligger et produkt klar til brug, f.eks. et website, for at undersøge, om brugerne forstår og anvender det som tiltænkt. Fagtermen for disse aspekter der handler om brugbarhed og brugervenlighed er usability.

Når Korpus udfører usability tests med rigtige brugere, dokumenteres det normalt på video. Videoen viser hvad der sker på skærmen, samt brugerens ansigtsudtryk imens handlingerne udføres. Rækker budgettet ikke til at teste med rigtige brugere, kan man ty til det næstbedste: En ekspertevaluering som vurderer løsningen ud fra en forskningsbaseret viden om, hvad der kan give anledning til problemer for brugerne. Evt. kan en ekspertevaluering gå forud, og udpege emner der bør undersøges nærmere, med hjælp fra rigtige brugere.

Outputtet er en oversigt over ting der ikke fungerer optimalt, samt konkrete forslag til forbedringer.

Samudvikling med brugere (user experience design)

Benyttes tidligt i selve designprocessen, hvor løsningen tager form. Det handler om, hvordan der kan bygges bro imellem brugernes behov og kundens budskab/forretning. Hvad giver det mening at bygge? Der findes forskellige fagtermer for dette, bl.a. co-design, interaktionsdesign og user experience design. I webbranchen bruges sidstnævnte betegnelse oftest (forkortes ofte også UX, UXD eller UED).

Det kan være risikabelt at vente med at få feedback fra brugerne til når løsningen er lanceret. På det tidspunkt kan grundlæggende konceptuelle ændringer koste dyrt. I stedet kan brugerne inddrages i udformningen af en løsning, der passer til dem.

Outputtet er en konceptbeskrivelse eller et idékatalog, der illustrerer de belyste brugerbehov og konkrete bud på løsninger, der kan koble dem til kundens behov.

Eksempel

Scenarie: En velrenommeret vinhandel overvejer en netbutik.

  1. For at sikre at den nye løsning får klangbund i målgruppen hyres en user experience designer til at udvikle et skarpt koncept, i samarbejde med kunden og et udsnit af målgruppen.
  2. I arbejdet med brugerne viser det sig måske, at målgruppen af vinelskere slet ikke ønsker at købe dyre, skrøbelige vine online, men at de gerne vil læse anmeldelser og diskutere vine med hinanden.
  3. Ved i stedet at understøtte dette brugerbehov – blive et nyttigt medie for viden om vin – tiltrækkes flere nysgerrige brugere (eksponering). Måske brugerne kan tilmelde sig websitet, hvormed vinhandelen også kan få mulighed for at kontakte brugerne, hvilket er guld værd (email-annoncering, invitationer til vinsmagninger etc.).
  4. Kunden undgår en fejlinvestering og får i stedet en løsning, som målgruppen faktisk finder nyttig og som åbner andre muligheder for indtjening på kerneforretningen.

Afrunding

Dette var blot et hurtigt overblik over de to overordnede tilgange til brugerinddragelse. Senere vil jeg gå mere i dybden med dem begge her på bloggen.

Der findes mange muligheder for at få god indsigt i din målgruppe, uanset om dit projekt er stort eller lille. Prøv det. Det værste der kan ske er at du bliver klogere.