DESIGN OG BILDEBRUK FOR NETTREDAKTØRER JAKOB THYNESS
Jakob Thyness Partner, Webgruppen AS Utdannet art director Mer enn 20 års designerfaring Erfaring med web/digitale medier siden 1993 Medlem av Grafill, Dataforeningen (BITS) jakob@webgruppen.no
Dirty Design
Hva skal vi med design? Design er et verktøy for å utstyre nettstedet med egenskaper vi ønsker Hvis vi skal kunne vurdere om et design er godt eller dårlig, må vi ha en klar målsetting med nettstedet Dersom designet hjelper til å oppnå denne målsettingen, har vi et godt design
Godt eller dårlig design?
Design er et middel, ikke et mål! Design skal skape verdi for brukeren ved å la ham oppnå målene sine på enklest mulig måte Ved å skape verdi for brukeren, skapes også verdi for avsender Husk: webdesign likner mer på industridesign enn på grafisk design!
Branding - en interessekonflikt Branding er til for avsenderen, ikke for brukeren Branding er et produkt av tradisjonelle massemedier, og har redusert relevans på web Brandbasert design går på tvers av brukerens behov og kaster bort tiden hans
Forskjellen på glatt og dirty glatt Gjør visuelle elementer mer like hverandre for å lage en helhetlig identitet dirty Understreker forskjeller for å fremheve funksjonalitet og innhold Visuelt konsekvent Funksjonelt konsekvent Avsenderfokusert Brukerfokusert Push Pull
Hva betyr dette for designet? Dirty Design starter med prioritering av innhold Design i henhold til et overordnet visuelt konsept er sjelden optimalt Det er forskjellen mellom elementene som tillater brukeren å orientere seg på nettstedet Hvis man understreker egenarten til hvert element bir det lettere for brukeren å finne både det han er ute etter, og det du ønsker at han skal se
Content is (still) king Nøkkelen til en vellykket brukeropplevelse er innholdsbasert design Webinnhold kan deles inn i forskjellige innholdstyper, som alle har spesielle krav til design Å overse disse kravene er risikabelt
Innholdstyper Transaksjon - å utføre en handling Informasjon - å finne spesifikke opplysninger Dialog - å utveksle informasjon Oppdatering - å få opplysninger om nye ting som skjer Opplevelse - å bli underholdt Applikasjon - å behandle data
Innholdstyper Innholdstype Bruksområde Tjeneste/nettsted Kjennetegn Informasjon Lokalisere spesifikke opplysninger Offentlige nettsteder, oppslagstjenester, arkivtjenester Hierarkisk/emnebasert oppbygging, navigasjon via meny eller søk Oppdatering Orienteres om siste nytt Nettaviser, nyhetstjenester, sosiale medier Kronologisk/saksbasert oppbygging, navigering via overskrifter Dialog Informasjonsutveksling med en annen part Nettfora, chat, sosiale medier Kronologisk el. hierarkisk oppbygging, avhengig av type Transaksjon Samhandling med en annen part Nettbutikk, kommersielle nettsteder, nettbank Horisontal prosess som omfatter ett el. flere trinn og gjør bruk av formularer Applikasjon Behandling/manipulasjon av data Sky-tjenester, kommersielle nettsteder Applikasjonsgrensesnitt skreddersydd for spesifikke oppgaver Opplevelse Rekreasjon og underholdning Spilltjenester, underholdningstjenester Varierer med tjeneste
Informasjon Oppbygningen av informasjon er emnebasert og hierarkisk. Brukeren trenger en meny for å navigere mellom emner og nivåer i hierarkiet. Menyen hjelper også brukeren å få oversikt over innholdet, slik at han kan danne seg en mening om hvor den informasjonen han etterspør er å finne.
Emneinndelingen bør være i henhold til relativ viktighet for majoriteten av brukerne. Toppmenyer/venstremenyer fungerer gjerne best. Innholdet bør være skumlesbart. Bruk mellomtitler, kulepunkter, og uthev relevante ord i teksten.
Oppdatering Oppdatering er uspesifikk informasjonsinnhenting. Brukeren er som regel ikke ute etter særskilt informasjon, men vil vite hva som er siste nytt. Informasjonen er kronologisk og saksbasert. Det gjøres lite bruk av menyer, navigasjonen foregår hovedsaklig via klikkbare overskrifter.
Jo nyere en sak er, jo nærmere toppen av siden bør den plasseres. Jo viktigere en sak er, jo større plass bør den få. Det er viktigere med bredde i informasjonen enn dybde (heller mange ulike saker enn mye om én sak). Navigasjon skjer hovedsaklig i «stjernemønster», med forsiden som navet.
Dialog Dialog er utveksling av informasjon med en annen part, og finnes i to hovedformer: kronologisk og emnebasert. Kronologisk dialog omfatter bl. a. chat og sosiale medier, emnebasert dialog finner man bl. a. i nettbaserte diskusjonsfora.
Kronologisk dialog Kronologisk dialog kan være spesifikk eller uspesifikk. Eksempler på uspesifikk kronologisk dialog er Facebook og Twitter, et eksempel på spesifikk kronologisk dialog er chat. I kronologisk dialog plasseres siste innlegg øverst.
Emnebasert dialog Nettbaserte diskusjonsfora benytter seg av emnebasert dialog. Emnebasert dialog trenger en informasjonsarkitektur for å fungere, og følgelig er det også nødvendig med en meny som tillater brukeren å navigere mellom de ulike emneområdene. Avhengig av størrelsen og kompleksiteten av informasjonsstrukturen kan man velge å gå over til kronologisk organisering innenfor de enkelte emneområdene.
Transaksjon Her samhandler man med en annen part. Det kan f. eks. dreie seg om kjøp i en nettbutikk, bruke nettbank, eller å oppgi e-postadresse for å motta et nyhetsbrev. Siden transaksjoner ofte er delt i flere ledd, må bruker få vite hva som kreves for å gjennomføre en vellykket transaksjon før den igangsettes. Ikke la forhåndsregistrering være et krav for gjennomføring!
Vær nøye med hvor mange og hva slags spørsmål du stiller i formularet. Del opp lange formularer om nødvendig, men vis tydelig hvor mange trinn transaksjonen har, og hvor brukeren befinner seg i prosessen. Del opp transaksjonen på en måte som gir mening for brukeren. Husk at det er ryddig å spre transaksjonen over flere sider, men konverteringene øker når man fjerner utfyllingskrav! Når brukeren gjør feil, vis tydelig hvor feilen ligger, og gi brukeren anledning til å rette det opp.
Rekkefølgen må gi mening for brukeren - gi relevant info tidlig, og plasser utfyllingsfeltene logisk, så er det mer sannsynlig at brukeren fullfører transaksjonen! Unngå valideringskoder og andre «bevis» på at brukeren er et menneske. Prøv å ha så få distraksjoner for brukeren som mulig.
Applikasjon Behandling/manipulasjon av data på en nettside. Nettbaserte applikasjoner finnes i to varianter: enkeltoppgave-applikasjoner og fleroppgaveapplikasjoner
Enkeltoppgave-applikasjoner Skal løse bare én oppgave. Ofte basert på at brukeren selv utfyller enkle variabler i et skjema. Valgmuligheter og opsjoner bør begrenses til et minimum. Ideelt sett bør oppgaven løses i ett enkelt skjermbilde. Eksempel på enkeltoppgave-applikasjoner: Google translate, valutakalkulator, ruteopplysninger etc.
Fleroppgave-applikasjoner Fungerer mer som tradisjonell software, og har et tilsvarende mer komplekst grensesnitt. Krever mer av brukeren, som imidlertid er villig til å investere både tid og penger (er ofte betalte tjenester) for å bruke applikasjonen. Brukeren vender tilbake flere ganger over tid, og har derfor muligheten til å lære. Eksempler på fleroppgave-applikasjoner: Google Docs, MailChimp, Slideshare.
Opplevelse Omfatter alle typer innhold som brukes til underholdning og rekreasjon, og er derfor en lite homogen innholdstype. Felles for dem alle er at de bruker et webgrensesnitt til å gi tilgang til innhold. Innholdet kan være interaktivt (spill el. andre virtuelle interaktive opplevelser) eller passivt (tekst, bilder, video, musikk)
Webgrensesnittet som gir tilgang til innholdet må følge normale konvensjoner for web. Hvis innholdet er passivt, har dette gjerne også konvensjoner som må følges (standard betjening for musikk- og videoavspilling f. eks.) Tilgang til og visning av tekst og bilder følger også normale konvensjoner for web. Interaktivt innhold kan følge sin egen interne logikk etter start, men almenn betjening (ikke f. eks. oppgaver som skal løses i et spill) bør også følge konvensjoner brukeren er vant med fra før.
Start med innholdet Ta utgangspunkt i de ulike innholdstypene når du designer nettsteder Design for hver innholdstype separat Når alle enkeltdelene av nettstedet fungerer optimalt vil også nettstedet som helhet gjøre det, uavhengig av om det ser pent ut eller ikke 2011 Jakob Thyness. All rights reserved.
Tilgang til innholdet
Menyer Menyen er brukerens inngangsportal til innholdet. Brukeren bruker menyen for å finne ut hva som er tilgjengelig på nettstedet. Menyen er også viktige for søkemotorsynlighet, siden den forekommer på alle sider.
Menyens tekniske oppbygning Menypunktene skal alltid bestå av ren tekst (viktig for søkemotorsynlighet) Menyen skal være tilpasset informasjonsarkitekturen og informasjonsmengden. Bruk ALDRI Flash, og unngå javascript - disse skaper problemer med søkemotorer.
Innhold i menyen Bruk mest mulig trigger-ord. Vær så konkret som mulig. Beskriv produktene hvis du selger produkter. Beskriv tjenestene hvis du selger tjenester. Beskriv informasjonen hvis du formidler informasjon.
Menyens lengde Lange menyer er ikke nødvendigvis farlig. Lengre meny = flere trigger-ord = lavere avstøting = flere som finner det de leter etter. Bruk eventuelt...-trikset. Lag eventuelt kategorioverskrifter.
Vertikale menyer Vanlig menytype for innholdsrike nettsteder. Plassøkonomisk, kan inneholde et stort antall menypunkter. Kan håndtere stort antall nivåer. Ikke begrenset av sidens dimensjoner. Kan brukes som en del av en kombinasjonsmeny
Kombinasjonsmeny Kombinasjon av horisontal og vertikal meny, hvor den horisontale inneholder hovedkategoriene, og den vertikale brukes som undermeny. Kombinerer fordelene fra hver menytype. Kan lett håndtere store mengder innhold. Forenkler arkitekturer med mange nivåer.
Megameny Likner kombinasjonsmenyen, men viser mesteparten av strukturen i et eneste nedtrekkbart menypanel. Kan være effektivt, men stiller større krav til informasjonsarkitektur og kategori-inndeling. Fungerer best med maksimalt 2 nivåer.
Søk som navigasjon? Ja - hvis innholdet på sidene (dvs. produktene, tjenestene eller informasjonen) er så omfattende at søk er den naturlige navigasjonsformen Ellers: prioriter å lage en god, klikkbar tekstbasert meny, og evt. ha søk som tillegg (plassering øverst til høyre) De aller fleste nettsteder bør unngå søk som hovednavigasjon Husk at søk forutsetter at brukeren vet navnet på det han skal søke etter!
Slik lager du Dirty Design Prioriter riktig - ikke la viktig innhold forskyves av trivielt innhold. Bruk tekstbaserte menyer, og la lenker være blå og understreket. Formater teksten riktig. Bruk kulepunkter og mellomtitler, og gjør teksten skumlesbar. Pass på at bildene er relevante. Generiske og profilerende bilder blir ignorert av brukeren. Hvis du vil utløse handlinger, ha klare og tydelige calls to action
Bilder
1. Tenk på hva du vil oppnå med bildet
Hvorfor bruker vi bilder? Et bilde sier mer enn tusen ord Et bilde sier noe annet enn tusen ord Et bilde sier det på kortere tid enn tusen ord
Når bruker vi bilder?
1. Når vi vil utdype en historie
elle.no
2. Når vi vil understreke et poeng
climatecrisis.net
3. Når vi vil dokumentere noe
Foto: Adnan Hajj/Reuters
Foto: Adnan Hajj/Reuters
aftenposten.no
Foto: The White House
Faksimile: Der Tzitung
aftenposten.no
4. Når vi vil vise sammenhenger
5. Når vi vil skape en stemning
istockphoto.com
2. Velg motiv med omhu
Konkretiser! Et bilde må nesten alltid vise noe fysisk. Se etter ting i artikkelen som gjør den unik, og som skiller den fra andre artikler. Start alltid med det spesielle, og gå videre til det generelle etter hvert.
Hva slags bilder fanger oppmerksomheten? Brukeren ser på bilder som inneholder relevant informasjon. Brukeren overser pyntebilder, merkevarebyggende bilder og åpenbare stockfotos.
Motivtyper Personer Situasjoner Gjenstander Prosesser Informasjonsgrafikk
Personer Ansikter lar oss identifisere personen - blikket faller naturlig på ansiktet i bilder. Kroppen må ha noe spesielt ved seg for å være like interessante (bevegelser, klær, fysiske attributter). Øyekontakt skaper nærhet. istockphoto.com
Situasjoner Et bilde kan aldri vise hele situasjonen, og må ha tekstlig forklaring. Dette gjelder enten situasjonen utspiller seg over tid, eller er over på et øyeblikk. istockphoto.com
Bruk av situasjonsbilder Bilder som er tatt under et opptrinn er det beste - men pass på å få med ting som hjelper leseren å sette det i sammenheng. Hvis hendelsen er over, er åstedet for hendelsen et godt alternativ, så lenge det forteller noe om hva som er skjedd. Hvis det er snakk om en spesiell hendelse, unngå bilder fra andre tilsvarende hendelser!
Situasjonsbilder og tekst Situasjonsbilder er svært avhengige av tekst for at leseren skal forstå dem. Situasjonsbilder blir nesten alltid sett i forhold til en overskrift. Disse må derfor henge sammen!
Gjenstander Det må være tydelig hva gjenstanden er. Gjenstander i bruk er mer visuelt interessante (og ofte mer informative). Enkeltstående gjenstander avslører flere detaljer. istockphoto.com
Prosesser Prosessbilder illustrerer fremgangsmåter eller tidsforløp. Hvert trinn i prosessen bør ha et separat bilde. Inkluder gjerne grafiske elementer som piler o.l. Tegninger er en god måte å fjerne uønsket «visuell støy» på. istockphoto.com
vs.
Informasjonsgrafikk Brukes til å illustrere struktur, størrelser og verdier. Gjør utstrakt bruk av diagrammer og symboler. Er svært tekstavhengig for å gi mening. istockphoto.com
Bruk av informasjonsgrafikk Hold diagrammer så enkle som mulig - ikke gå overbord med skygger, 3D-effekter og liknende. Bruk stor og tydelig tekst, og reduser tekstmengden til et minimum. Unngå bruk av foto - rene grafiske symboler og diagrammer fungerer ofte best. ExCel er ikke alltid ideelt!
www.infogr.am
www.canva.com
«Etterslep» Siden vi tolker bilder og symboler ut fra vårt eget erfaringsgrunnlag reagerer vi mest pålitelig på ting vi har sett før. Dette betyr at ting som gir mening for oss ofte har et visst «etterslep», fordi vår generelle ide om dem ble dannet for lenge siden.
Når erfaringsgrunnlaget mangler Hvis vi ikke kjenner igjen eller kan relatere til det vi ser, er det stor sannsynlighet for at kommunikasjonen mislykkes. Derfor er det vanskelig å kommunisere nye eller avanserte ideer i bilder.
«On White», Wassily Kandinsky, 1923. Kilde: Wikipedia
campaignforrealbeauty.com
3. Komposisjon - ikke så vanskelig som du tror
Tredjedelsregelen Del bildet i tre deler horisontalt og vertikalt Plasser den viktigste delen av motivet i et av krysningspunktene Unngå å sentrere motivet i bildet
istockphoto.com
Det gyldne snitt Del bildet i to ulike deler Den minste av delene skal forholde seg til den største som den største forholder seg til helheten Plasser fokus i bildet på delelinjen
istockphoto.com
Forgrunn/bakgrunn Hovedmotivet så stort som mulig i forgrunnen Tydelig forskjell mellom forgrunn og bakgrunn skaper spenning i bildet Ikke prøv å få med alt på én gang
istockphoto.com
Diagonalen Legg motivet langs en diagonal linje fra hjørne til hjørne for å skape fart og liv i bildet
istockphoto.com
Perspektiv Et motiv som går innover i bildet skaper dybde og trekker tilskueren inn.
istockphoto.com
4. Farger kan forsterke budskapet
Fargebruk Bevisst bruk av farger kan forsterke innholdet i bildet Farger kan ha ulik betydning i ulike kulturer Fargeassosiasjoner er alltid svært enkle
Varmt istockphoto.com
Kaldt istockphoto.com
Friskt istockphoto.com
Det er begrenset hvor mange fargeassosiasjoner vi klarer å huske av gangen.
istockphoto.com
5. Farger eller svart-hvitt?
Farger vs. svart-hvitt
Farger Levende Spennende Iøynefallende...men også kanskje: Glorete/billig Utdatert istockphoto.com
Svart-hvitt Harmonisk Stilfullt Kunstnerisk...men også kanskje: Gammeldags Kjedelig istockphoto.com
6. Bilder og sidelayout
aftenposten.no
aftenposten.no
aftenposten.no
aftenposten.no
dagsavisen.no
dagsavisen.no
dagsavisen.no
dagsavisen.no
Hvor store bør bilder være? Bilder bør være store nok til at det er enkelt å se hva de forestiller...men ikke så store at de fortrenger annen og viktigere informasjon Husk at med økende bruk av mobiltelefoner og surfebrett blir båndbredde viktig igjen!
7. Vær faktaorientert
Fakta Forsikre deg om at bildet faktisk viser det du tror det gjør.
dagbladet.no
8. Vær relevant
Relevans Bildet må se ut som om det har noe med saken å gjøre! Pass på at tonen i bildet passer til saken! Hvis du må velge mellom å relatere bildet til brødteksten eller overskriften, så relater alltid bildet til overskriften.
nho.no
9. Håndtér personer riktig
Personer Hvis enkeltpersoner blir omtalt, så bruk bilder av dem hvis det er mulig Pass på at måten personene framstilles på i bildet samsvarer med innholdet Fall ikke for fristelsen til å bruke bilder av perifere personer
dagbladet.no
dagbladet.no
dagbladet.no
dagbladet.no
dagbladet.no
Roller Hvis en artikkel omhandler roller, som f.eks. sjef singel, eller byråkrat, unngå for enhver pris å vise bilder av identifiserbare personer (selv om de har riktig rolle) Roller er generelle, personer er spesifikke - personlighet er derfor alltid sterkere enn roller
dagbladet.no
R dagbladet.no
dagbladet.no
10. Vær redelig - selv om det kan være kjedelig
Generelle saker Hvis artikkelen omhandler en personuavhengig sak, så bruk generelle emneillustrasjoner Pass på at disse er relevante både i forhold til sak og målgruppe
dagbladet.no
dagbladet.no
Produkter og firmalogoer Enkelte produkter er like gjenkjennelige som personer En logo er ansiktet til et selskap Disse brukes derfor bare der de omtales spesielt
dagbladet.no
dagbladet.no
dagbladet.no
dagbladet.no
Oppsummering - innholdskriterier Bildene må gjenspeile målgruppen Bildet må være relevant i forhold til saken Relater bildet til overskriften Bruk bilder av enkeltpersoner bare der de blir omtalt Unngå å illustrere roller med bilder av gjenkjennelige personer Bruk generell saksillustrasjon til personuavhengige saker Spesifikke produkter avbildes bare når de omtales spesielt
Takk for meg.! E-mail: jakob@webgruppen.no Twitter: @JakobT