Misforståelsen om bruk av farger i wireframes/prototyper

De fleste interaksjonsdesignere unngår å bruke farger  som virkemiddel når en designer wireframes/prototyper. Årsaken er grei nok; bruk av farger forvirrer mottakeren (klienten/prosjektgruppen), og det er vanskeligere og styre diskusjonen til å handle om funksjonalitet og informasjon når enkelte finner det nesten umulig å se forbi paletter og layout.

Wireframes eller prototyper er et vanskelig dokument å forstå for de som ikke lever i bransjen. Hvorfor vil en da øke forvirringen ytterligere ved blande farger inn i dette også?

Et av hovedproblemene er at wireframene blir oppfattet som design. For å begrense forvirringen for kundene er derfor standarden å trappe ned på de visuelle elementene og forholde seg til mono- eller duotone skisser (en eller to farger). Mest vanlig er svarte strek på hvit bakgrunn eller lys, lys blå bakgrunner i bokser som har en tynn strek/ramme rundt.

Men, på den annen side:

Riktig strategisk fargebruk er svært viktig for å fremme det intuitive grensesnittet, og for å hjelpe kunden til å forstå og finne frem på nettstedet uten å måtte l-e-s-e seg frem. Det er både det raskeste og samtidig et av de sterkeste virkemidlene vi har innenfor kommunikasjon. Brukt strategisk riktig vil farger hjelpe til med å gjøre grensesnittet mer brukervennlig og effektivt for de besøkende.

Spørsmålet jeg stiller meg er om det er opp til den grafiske designeren eller interaksjonsdesigneren å bestemme at farger skal brukes for å mellom annet:

• Utheve/dempe enkelte innholdsflater i forhold til hverandre innad på en skjermflate.
• Tydeliggjøre relasjon og sammenheng mellom informasjon på tvers av et helt nettsted.
• Intuitivt hjelpe den besøkende til å forstå og bruke nettstedet uten å måtte l-e-s-e seg frem til innhold og logikk.

Det er opp til interaksjonsdesigneren og forsterke logikken og nytten av nettstedet, mens det er opp til den grafiske designeren og forsterke disse egenskapene gjennom visuell merkevarebasert kommunikasjon. En interaksjonsdesigner skal altså ikke bestemme farger og gradienter, men skal dokumentere for den grafiske designeren hvor det er viktig at farger brukes.

En interaksjonsdesigner burde bruke farger i wireframene og ta ansvar for den styrken visuelle virkemidler har inn i den strategiske delen av nettdesign. Så får det heller bare kreve en runde ekstra med forklaring i møte de første gangene.

Vedlagt ligger et utkast/wireframe med fargene inkludert. Her bruker vi farger (rødt) for å illustrere søkeapplikasjonens fokus på tvers av alle sider/maler, samt at vi tydeliggjør at der skal brukes farger som merkelapper (blått, gult og grønt) på de ulike underkategoriene for å hjelpe kunden med å identifisere de ulike kategoriene. Vi har også lagt et eget fargelag (lyseblått) bak ”Rådgivning”bolken til høyre for å understreke at denne må visuelt skilles fra det omliggende designet ved hjelp av en bakgrunnsfarge. (pdf )

En av måtene vi forsøker unngå sammenblandingen av wireframes og design er ved å bruke være egne (Objectware) sine profilfarger i alle modeller og verktøy, og unngår derfor å strekke opp noen referanser til kundens profil eller trå inn på den grafiske designerens fagdomene.