PROSJEKT
OPPGAVE
Restrukturere, redesigne, og oppgradere nettstedet psykiskhelse.no, inkludert integrasjon med de SoMe-kanaler som rådet benytter, primært Twitter og Facebook. Rådet ønsker en ny informasjonsarkitektur for å sortere og prioritere innholdet på nettstedet og forenkle brukeropplevelsen. De ønsker å tydeliggjøre kjerneoppgavene samt fremheve magasinet deres “Psykisk helse”.
MIN ROLLE
UX designer - ansvarlig for at temaet ivaretar brukernes ønske om å få presentert nyttig informasjon på ett lettleselig måte, og at veien til informasjonen skal skje ved få klikk. Av et tema på 4 personer, var vi to designer som hadde hovedansvaret for å utvikle en klikkbar prototype i programmet Figma. 
PROSESS
KARTLEGGING AV DAGENS LØSNING 
Vi kartlegger utfordringer, problemer og interaksjoner ved dagens løsning for å få et godt utgangspunkt til å kunne forbedre nettsiden. 
- Nettsiden er per i dag bygd opp slik at budskapet som Rådet for Psykisk Helse ønsker å fremme, lett kan forsvinne på grunn av dårlig struktur. 
- Psykiskhelse.no har en lang liste på nettsiden sin over hvilke oppgaver de jobber målrettet mot. Disse oppgavene er veldig generelle og gir lite spesifikk informasjon på hva det er de eksakt gjør. 
- Mye av navigasjonen går via footeren, og footeren i seg selv er stor og stjeler mye oppmerksomhet fra resten av siden. 
- Det er ingen struktur i menyen og det bidrar til at det er vanskelig å finne frem. 
- Vi synes også det er vanskelig å forstå hvilke primærmålgrupper nettsiden er til for.
- Etter en nøye gjennomgang av nettsiden til Rådet for Psykisk Helse finner vi flere typiske kjennetegn ved både god og dårlig universell utforming.
- Rådet for psykisk helse bruker fargene blå og rød og hvis vi refererer til fargelære så symboliserer disse fargene signalfarge, raseri, krig, konservativitet, og ensomhet - noe som kan innvirke negativt på besøkende som sliter, er deprimerte og trenger ro.
SITEMAP
Nettsiden består av mange sider og undersider, og i dag er det ingen kategorisering eller logisk rekkefølge på disse. Vi lagde sitemap av dagens nettsted for å få oversikt over alle sidene en kunne navigere seg til, og derfra lagde vi en ny sitemap av hvordan informasjonsarkitekturen på det nye nettstedet skulle være.
WIREFRAMES
Vi ønsker å finne ut tidlig i prosessen om ideene våre fungerer i en endelig løsning. Vi lagde klikkbare wireframes (trådskisser), som er lavnivå-prototyper.
BRUKERTESTING
FORMÅL
Benytte lavnivå prototype (wireframes), metode og brukerundersøkelser, for å hente inn og analysere kvalitative data som kan anvendes i videre utarbeiding mot et endelig produkt.
TESTOMFANG
Intervjubasert brukertesting bestående av både konkrete oppgaver og oppfølgingsspørsmål knyttet på brukeropplevelse. Alt ble dokumentert ved bruk av lydopptak og notater. Fokus var å teste anvendbarhet, funksjonalitet og navigasjon.
HOVEDFUNN
Store deler av prototypen var både funksjonell og anvendbar, og mesteparten av navigeringen fremsto som intuitiv. Fra brukertesten har vi fått gode tips til forbedringer rundt plassering av ulike funksjoner, samt tydeliggjøring av viktige funksjoner som meny. Et viktig funn etter analysen var hvor uforståelig og lite selvforklarende noen av menypunktene var, samt at selve menyikonet var uklart.
FERDIG LØSNING
DESIGNPRINSIPPER
Når vi skal designe gode løsninger, kan vi ta utgangspunkt i designprinsipper som er regler for god design. Det finnes flere som har utarbeidet designprinsipper, og alle baserer seg på hvordan mennesker oppfatter, lærer og husker ting. Vi har tatt utgangspunkt i designprinsippene fra Donald Norman. Disse designprinsippene skal hjelpe oss med å utforme grensesnittet mest mulig brukervennlig.
Synlighet
Designprinsippet synlighet går ut på å gi en påminnelse til brukeren om hva som skal gjøres, og hvordan. Det handler om at vi synliggjør funksjonaliteten i systemet. Dette har vi spesielt hatt i bakhodet når vi har designet for hvordan meny-knappen skal se ut. En hamburgermenylogo kan være synlig for de fleste, men for de som ikke er like kjent med denne, har vi lagt til en tekst ved siden av ikonet. 
På hver underside har vi lagt ved brødsmulesti under tittelen for å synliggjøre for brukeren hvor de er på nettsiden. Vi har også implementert hyperkoblinger til temaer under disse igjen, for å synliggjøre for brukeren hva innholdet på denne nettsiden er - og dermed tillater brukeren å enkelt navigere seg til ønsket seksjon.
Sammenheng
God sammenheng gjør det enklere for brukeren å forstå hva nettsiden tilbyr. Det handler om sammenhengen mellom to elementer, og i dette tilfellet sammenhengen i forhold til informasjonsarkitekturen. Vi jobbet grundig med hvordan vi skulle kategorisere de ulike punktene i menyen. For å få til en god sammenheng har vi lagt til overskrifter som oppsummerer kategoriene punktene ligger under. 
Konsist design
Konsistent design handler om at lignende funksjonalitet skal fungere på lignende måte. Dette er for at løsningen skal være lettere å lære og lettere å bruke. Mye som går under konsistent design handler om konvensjoner, og er i stor grad allmennkunnskap. Dette har vi gjort ved å la logoen til nettsiden lede brukeren til forsiden. Vi har en hamburgermeny som menyknapp, vi har lagt footeren i bunn og inkludert kontaktinformasjon og SoMe-kanaler i denne. Det var ned til footeren de aller fleste testpersonene i brukertesten vår ville gått for å finne disse elementene. Vi opprettholder et konsistent design ved å ha samme stilsetting for magasinet og SoMe-delingen på alle sider. 
Begrensninger
Begrensninger handler om å begrense hva brukeren kan gjøre, for å unngå at feil skjer. Hvis vi ser på skjemaet som ligger under støtt vårt arbeid, der brukeren skal velge beløp, har vi valgt å benytte oss av radioknapper. Dette er fordi brukeren kun kan velge ett beløp om gangen. På denne måten kan de ikke ved en feiltakelse ha valgt flere beløp og donert et større beløp enn det som var tenkt. 
Hint
Hint handler om oppfattede eller faktiske egenskaper ved noe, som gjør at designet oppfattes som selvforklarende. På forsiden har vi lagt snarveier til de “viktigste” sidene på nettstedet, og hvis man holder musepekeren over, vil det dukke opp en ramme rundt, som gir et hint om at de er klikkbare. På SoMe-seksjonen kan man se tre streker under posten, som hinter om at man kan se flere innlegg, og hinter om hvilket innlegg du er på.​​​​​​​
Bildet under illustrerer designprinsippene 
HØYNIVÅ PROTOTYPE (Forside, meny, underside type 1, underside 2)
Back to Top