UI12: Fire retningslinjer for visuell organisering

Konferanseopplevinga mi starta med heildagsworkshop om “Site Seeing: Communicating Successfully with Visual Design” med Luke Wroblewski. Luke W heldt òg workshop på Yggdrasil i år. Han deler visuell design inn i visuell organisering/design av informasjonen og personlegheit. Den visuelle organiseringa skal visa forholdet mellom interaksjonselement og legga til rette for interaksjonsdesign og informasjonsdesign. Personlegheiten til sida er font, fargar og bilete og skal kommunisera merkevareverdien til produktet. Dette er en svært nyttig oppdeling når me skal diskutera wireframes med oppdragsgjevarane våre.

I følgje LukeW skal ei nettside gi gode svar på tre spørsmål: kva er dette – nytteverdien til sida, korleis brukar eg den – brukarvenlegheiten, og kvifor skal eg gidda å bruka det – kor attraktiv er sida. Gjennom gruppearbeid, som i biletet over, og gjennom foredrag, gir Luke W gir oss følgjande fire råd for å få dette til:

• Prioritering: Kva er det viktigaste ein skal gjera på sida? Den biten med informasjon eller den oppgåva ein skal utføra bør vera det som ein først ser på sida.
• Visuell organisering: Det som er viktigast må koma tydeleg fram. Dersom ein ser på sida i 3 sekundar, skal det vera det viktigaste ein har fått med seg. For å få til eit hierarki av informasjon på sida kan ein bruka fargar, kontrastar, plassering og storleikar. Dersom det til dømes er eit flyselskap, bør ein raskt få auge på korleis ein skal bestilla bilettar. Informasjon om spesialtilbod eller flytypar bør vera vekta ned.
• Ikkje bare leggja til informasjon, men like viktig å fjerna informasjon: Tenk på kva som er nødvendig å ha med i skjermbiletet, og prøv å forenkla visninga av informasjonen til bare det som må vera der.
• Personlegheit: Kva tenker brukarane når dei ser sida di? Eigenskapar som farge, skrifttypar, bilete og form kan vera med på å forma personlegheita til sida. Det kan til dømes vera passande med glade fargar og runde former til ei side retta mot barn, men kven vil stola på ein rosa og rund nettbank?

Så korleis får ein til dette?

• Les boka til Luke W, her er det fleire nyttige tips
• Hold tunga rett i munnen og skil mellom den visuelle organiseringa og personlegheiten til sida
• Lag ei liste med innhaldet og funksjonane som skal inn på kvar side og prioriter denne lista. Få beslutningstakarar til å godkjenna lista.
• Lag den visuelle organiseringa i ein wireframe og få beslutningstakarane til å godkjenna denne. Slik heng dei seg ikkje opp i fargebruken og om det er brukt raudt eller grønt.
• Til slutt legg ein på fargar og fontar. Dette skal støtta opp om den visuelle organiseringa av sida og kommunisera personlegheita til sida.