Komplekse webapplikasjoner må bli enklere

Innledningen til en artikkel kan skrives på uendelige måter. Men, hva er det som gjør et valg mer riktig enn et annet? Hvordan tar man beslutningen om retningen artikkelen skal gå? For oss som jobber med utvikling og design ligger det alltid et viktig ord til grunne for alt - ikke et faglig begrep, men et menneskelig et: empati. Det Dieter Rams snakker om, og det er her vi må starte.

I Publicis har vi utviklet et eget verktøy som heter Cortex. Et omfattende system som tar på seg en komplisert oppgave: å forene utfordringene digital markedsføring består av og å forenkle veien fra A til Å. Her sikter vi oss inn på å forenkle kampanjestyring, budsjettering, planlegging av annonser, og alt det andre digital markedsføring medfører, både for våre interne brukere, og for kundene våre.

Fra datakaos til brukervennlighet

Et slikt system tar i bruk store mengder informasjon som skal formidles på en effektiv og brukervennlig måte. Det er snakk om en miks av store tabeller, grafer, og redigering i avanserte skjemaer. Besitter man et system som i sin egenart er en grotesk kilde til informasjon, en slags Frankenstein-sammensetning av ulik data, da blir viktigheten av å forenkle satt i førersetet.

Forstår man ikke utfordringen og virkeligheten til folk, så kan man heller ikke utforme et system som gjør jobben lettere for dem. Dette prinsippet omfatter særlig Cortex, men det er et prinsipp som er viktig i alle yrker der man skaper noe. En forfatter kan ikke skrive godt uten evnen til å skape karakterer som føles autentiske. En arkitekt kan ikke tegne et godt bygg uten å tenke på utfordringen av å bevege seg i det. En webutvikler kan ikke lage en god nettside uten å kode den for de som skal bruke den.

I en stor webapplikasjon støter man på utfordringer som er krevende å løse. Hvordan forhindrer man kognitiv overbelastning? Hvordan gjør man det enkelt å navigere seg fra et sted til et annet? Hvordan utformer man en tabell med 20 kolonner der hver rad skal ha redigerbare felter? Med mål om å danne den beste brukeropplevelsen, må man alltid kode med de som skal bruke det i bakhodet. Er man i tvil, bør man helst snakke med de for å finne en god løsning i fellesskap.

Bruk av empati i designprosessen

Allerede i planleggingsfasen må man jobbe med å forstå systemets brukere. Derfra tar man innsikten med seg gjennom de initiale skissene, videre inn i konkret design, deretter til implementering, og til slutt også til ferdig produkt når de retrospektive analysene begynner. Det må tenkes på før, under, og etter.

Påvirkningskraften fra et brukerorientert design utgjør forskjeller i ulike deler av webapplikasjonen, og med riktige samtaler og et godt mellommenneskelig fundament, kan man bruke informasjonen til å belyse de riktige valgene.

Da kan man ta beslutninger på hvordan man skal utforme et godt layout og hvordan man bør organisere innholdet:

Eller man kan skape interaktive elementer som er estetiske og funksjonelle. Ofte tenker man at design og praktisk funksjonalitet er motsetninger. At det ene må gå på bekostning av det andre. Men, i virkeligheten er det et samarbeid, og det som er funksjonelt oppfattes ofte som estetisk sett mer tiltrekkende. Vi mennesker er glad i struktur og tydelighet, slik som det å forenkle visualiseringen av det å skrive telefonnummer på.

Tydeliggjøring av navigasjon og innhold

Kognitiv overbelastning på en nettside skjer når man som bruker blir overveldet av mengden informasjon som vises, og resultatet er ofte at man enten trekker seg tilbake og ut av nettsiden, eller blir mentalt utmattet av å tvinge seg gjennom informasjonen for å gjøre det man skal gjøre.

Å forhindre dette er dermed kritisk, både for å beholde brukere, men også for å verne om. Klikker man på en annonse til en nettbutikk og lander på en side der man blir spammet ned av nyhetsbrev, cookie pop-ups, og annen perifer informasjon som er sekundært for det man kommer dit for, så bidrar det til at brukeren mister troverdigheten til nettbutikken. Enda verre er det at man blir deltagende i et stadig økende konsum av informasjon som kan bidra til mer stress og overbelastning.

For å forhindre dette, kommer viktigheten av et intuitivt menysystem, tydelige labels, og hierarkisk organisering inn. Jobb med å konkretisere informasjon og å fjerne irrelevant støy.

Tydelig kommunikasjon

Mange tenker kanskje ikke på tekst og skriveferdigheter som en vanlig del av en utviklers yrke, men å ha en god penn er en viktig forutsetning for å skape en god brukeropplevelse. Tydelig kommunikasjon i form av enkel og klar tekst kommer til syne i feilmeldinger, overskrifter, labels, og menyer på tvers av hele applikasjonen. Svært mye av navigasjonen og informasjonen formidles i form av ord og bokstaver, så god språkforståelse er viktig for utformingen av systemet man jobber i.

Tydelig kommunikasjon skjer også i form av andre signaler som forsterker det interaktive utfallet eller fordøyelsen av informasjon. Riktig bruk av farger og ikoner danner klare forventninger for brukeren, og forhindrer misforståelser og frustrasjon.

Jobb kontinuerlig for å bedre brukergrensesnittet

Enten du er produkteier, utvikler, designer, markedsfører, eller annonsør. Så lenge du jobber med noe som har en bruker i andre enden, er det viktig at du uttrykker en vilje til å forbedre produktet for sluttbrukeren. Ha det i bakhodet når du skaper noe, og snakk med de som skal bruke det du lager for å få innsikt og forståelse i deres hverdag. Og snakk med hverandre, dere skapere imellom.

Empati er grunnlaget for hvordan alt man skaper blir mottatt. Nøkkelen til å styre hvordan det man lager blir mottatt, ligger derfor i empatien. Denne artikkelen er bare et lite innblikk i alt som rører seg bak en utviklingsprosess. Med et godt teoretisk grunnlag kan man gjøre etiske valg som unnlater å manipulere. Det er vårt ansvar å utvikle produkter som treffer de empatiske målene og ivaretar brukere.

Skrevet av: Martin Sollien
Frontend developer

Noen smågrep kan både forenkle bruken og øke estetikken på samme tid.

Til venstre, et eksempel på hvordan formulering og fargebruk kan bidra til å mislede brukeren i en kanselleringsprosess gjennom såkalte «dark design patterns». Til høyre, et eksempel på hvordan det bør gjøres.