Visuell webkommunikasjon. Nettredaktørskolen, sommer 2016

Transkript

1 Visuell webkommunikasjon Nettredaktørskolen, sommer 2016

2 Jakob Thyness Partner, Webgruppen AS Utdannet art director Over 25 års designerfaring Erfaring med web/digitale medier siden 1993

3 Hvordan ender brukeren opp på nettstedet ditt? Brukeren starter ofte med et uttalt ønske eller behov. 89% av slike brukere starter på en søkemotor, og baserer seg på søkeresultatet de får der. I 75% av tilfellene ender de opp på en annen side enn forsiden. Eksisterende kunder går gjerne rett til nettstedet via bokmerke eller ved å skrive inn URL en i nettleseren. Kilde: Nielsen/Norman group

4 Hvor lang tid tilbringer brukeren på nettstedet ditt? Brukeren er på det endelige nettstedet i gjennomsnittlig 2 min. 34 sek. På veien tilbringer han gjennomsnittlig 1 min. 42. sek. på andre nettsteder. Brukeren er 25 sek. på forsiden, og 32 sek. på undersider. Kilde: Nielsen/Norman group

5 De første 10 sekundene er kritiske I løpet av de første 10 sekundene bestemmer brukeren seg for å bli værende eller gå et annet sted. Her spiller designet en stor rolle. Hvis du ønsker at brukeren skal tilbringe flere minutter på nettstedet ditt, må du derfor kommunisere verdien av nettstedet tydelig innen disse 10 sekundene. Kilde: Nielsen/Norman group

6 5% Sannsynlighet for å forlate siden nå 4% 3% 2% 1% 0% Tid tilbrakt på siden hittil (sekunder)

7 Hvilken rolle spiller design? Designets hovedoppgave er ikke å gjøre nettstedet visuelt tiltalende (selv om det også går an). 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.

8 Mål for nettsiden Distribuere informasjon Selge produkter Drive markedsføring Avlaste ekspedisjonen Understøtte andre aktiviteter...

9 Webdesign vs. tradisjonell design For at målene for et nettsted skal oppfylles kreves handling fra bruker. Alle nettsteder er bygd opp forskjellig - bruker vet ikke på forhånd hvordan nettstedet fungerer. Tradisjonell design er ikke beregnet på å møte disse utfordringene, og vektlegger derfor ting som en webbruker ikke har nytte av.

10 Webdesign Webdesign har to hovedoppgaver: 1. Vise hvordan nettstedet er bygd opp og hvordan det fungerer. 2. Gjøre innholdet/funksjonaliteten på nettstedet tilgjengelig for bruker. Hvis man mislykkes med én av disse tingene, oppnår man ikke nettstedets målsetting.

11 Push Tradisjonell massekommunikasjon. Det samme budskapet går ut til et stort antall brukere, hvorav de fleste er uinteresserte. Trenger en «stopp-effekt» for å påkalle og holde på publikums oppmerksomhet. Selv om man klarer å levere budskapet er dette ingen garanti for konvertering.

12

13 Pull Bruker leter selv aktivt opp informasjon. Stopp-effekt er unødvendig, brukeren er allerede kommet til vårt nettsted, og vi har hans fulle oppmerksomhet. Hvis vi kan gi brukeren det han leter etter, er konvertering mye mer sannsynlig.

14

15 Bilder signaliserer formålet Hva slags bilder du bruker på nettstedet ditt signaliserer hva slags nettsted det er snakk om. Bruker oppfatter bildene før teksten, så hva slags bilder du bruker er med på å bestemme om bruker skal bli værende eller gå et annet sted.

16 Bildebruk

17 Tenk på hva du vil oppnå med bildet.

18 Bilder har et formål Bilder er ikke bare pynt. Vi bruker bilder der de gjør jobben bedre enn tekst. Da må vi ha et bevisst forhold til hva bilder gjør og hvordan bildekommunikasjon virker. Bilder egner seg godt til noen kommunikasjonsoppgaver og mindre godt til andre.

19 Å si ting som er vanskelig å si med ord Ting som er lettere å vise enn å forklare er gode bildekandidater: Hvordan noe ser ut eller er satt sammen Prosesser Visualisering av tekst/tallinformasjon Ting som skal dokumenteres eller settes i en bestemt sammenheng

20 Når vi skal vise hvordan noe ser ut Vi bruker bilder når vi skal beskrive: Personer, klær, og produkter Ting som primært er visuelle i karakter Ting som er vanskelig for leseren å se for seg

21

22

23

24 Når vi skal dokumentere Nyheter og reportasjer Plassering av avsenderen i verden, og dokumentere nærvær. Man kan også dokumentere en situasjon eller en tilstand. Dokumentasjonsbilder i sosiale medier er ferskvare.

25

26

27

28 Foto: The White House

29 Faksimile: Der Tzitung

30

31 Visualisering av tall/tekstinformasjon Hjelper leseren til å forstå informasjonen bedre. Er raskere å tilegne seg.. Brukes til å illustrere struktur, størrelser og verdier. Gjør utstrakt bruk av diagrammer og symboler. Er svært tekstavhengig for å gi mening.

32

33

34 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å.

35

36 vs.

37 Følelser

38 Bruk av følelser i bilder Følelsesmessige komponenter, både positive og negative, kan gi svært virkningsfulle bilder. Men fordi vi tolker bilder ulikt, er det ingen lett sak å få ønsket effekt. Løsningen er å holde seg til å vise så enkle følelser som mulig, eller å holde seg til tradisjonelt godtatte måter å vise dem på.

39

40

41

42 Velg motiv med omhu

43 Konkretiser! Et bilde må nesten alltid vise noe fysisk, selv om det skal illustrere noe abstrakt. Se etter ting i artikkelen som gjør den unik, og som du enkelt kan konkretisere. Enkelte abstrakte ting har etablerte symboler som det går an å bruke:

44

45

46

47 Klisjeer Etablert symbolikk er nyttig, fordi den kommuniserer tydelig. Risikoen er at kommunikasjonen kan bli klisjépreget. På den annen side må den ikke være så original at den blir vrien å forstå. Gjør kommunikasjonen enkel ved å vise kjente ting. Unngå klisjeer gjennom å velge uvante fremstillinger.

48

49 «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.

50

51

52 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.

53 «On White», Wassily Kandinsky, Kilde: Wikipedia

54 campaignforrealbeauty.com

55 Komposisjon - ikke så vanskelig som du tror!

56 Tredjedelsregelen Del bildet i tre deler horisontalt og vertikalt Plasser den viktigste delen av motivet i et av krysningspunktene Unngå å sentrere motivet i bildet

57 istockphoto.com

58 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

59 istockphoto.com

60 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

61 istockphoto.com

62 Diagonalen Legg motivet langs en diagonal linje fra hjørne til hjørne for å skape fart og liv i bildet

63 istockphoto.com

64 Perspektiv Et motiv som går innover i bildet skaper dybde og trekker tilskueren inn.

65 istockphoto.com

66 Farger kan forsterke budskapet ditt

67 Fargebruk Bevisst bruk av farger kan forsterke innholdet i bildet Farger kan ha ulik betydning i ulike kulturer Fargeassosiasjoner er alltid svært enkle

68 Varmt istockphoto.com

69 Kaldt istockphoto.com

70 Friskt istockphoto.com

71 Det er begrenset hvor mange fargeassosiasjoner vi klarer å huske av gangen.

72 istockphoto.com

73 Farger vs. svart-hvitt

74 Farger Levende Spennende Iøynefallende...men også kanskje: Glorete/billig Utdatert istockphoto.com

75 Svart-hvitt Harmonisk Stilfullt Kunstnerisk...men også kanskje: Gammeldags Kjedelig istockphoto.com

76 Størrelse og format

77 aftenposten.no

78 aftenposten.no

79 aftenposten.no

80 aftenposten.no

81 dagsavisen.no

82 dagsavisen.no

83 dagsavisen.no

84 dagsavisen.no

85

86 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 siden mobilen nå er primærfokus blir båndbredde viktig igjen!

87 Bilder på Facebook

88 Forsidebilde 851 x 315 Profilbilde 180 x

89 Forsidebildet Skal representere en person, et produkt eller en bedrift. Bruk bilder som representerer innholdet godt. Vær kreativ! Mennesker i bildet er ofte et pluss. Husk at forsidebildet er sidens «ansikt» og hjelper brukeren med å identifisere avsenderen. Hvis du bytter ut bildet ofte, pass på at det har tydelige fellestrekk med tidligere bilder. Forsidebilder er offentlige, dvs. at alle kan se dem.

90

91

92 Profilbildet Brukes på forsiden og vises i miniatyr på alle statusoppdateringer. Har som hovedoppgave å signalisere avsender. Vær oppmerksom på at variasjonen i størrelser profilbildet vises i stiller ekstra krav til tydelighet.

93 Personer

94 Selskaper

95 Bilder i delte lenker Når du deler en lenke, vil utseendet i nyhetsfeeden blant annet avhenge av størrelse og orientering på bildet. Facebook anbefaler at bilder skal være på 1200 x 630 piksler for best resultat på høyoppløselige skjermer. For at bildet skal få thumbnail i full bredde må det være minimum 600 x 315. Facebook anbefaler høyde/breddeforhold på 1,91:1.

96 1,91:1

97 Mindre bildestørrelser Mindre bildestørrelser enn 600 x 315 vises fortsatt i nyhetsfeeden, men bildene blir da vist i 158 pikslers bredde* i en boks til venstre i teaseren. Minste tillatte bildestørrelse er 200 x 200 piksler. *Mål tatt ved stikkprøver

98 158px 158px

99 Bildets oppgave på Facebook Et bilde på Facebook skal først og fremst signalisere innholdet i oppdateringen. Bildet skal gi stoppeffekt, slik at brukeren ser på det, og forhåpentligvis leser, klikker og kommenterer/deler. Hvis det er en ren bildeoppdatering, bør bildet i seg være interessant nok til at bruker klikker, kommenterer eller deler.

100 Overrask brukeren Vis brukeren noe han ikke har sett før. Eller vis brukeren noe velkjent med en uventet vri.

101

102

103 Gi brukeren noe å dele Brukeren deler gjerne bilder som: han føler beskriver hans situasjon. understøtter hans livssyn eller politiske oppfatning. han synes er morsomme eller søte. han oppfatter som viktig eller interessant informasjon

104

105

106

107 Bruk tekst over bilde Bilder med tekst over er populære å dele, og hjelper til med å fokusere budskapet. Hold teksten kort, og unngå fancy fonter. Husk 20%-regelen for tekst over bilde i promoterte innlegg.

108

109 Bruk informasjons- og annen grafikk En bildepost behøver ikke være et foto - tegninger og grafikk er også egnet for bruk på Facebook, og skiller seg i tillegg ut. Grafiske fremstillinger kan formidle mye om hva innlegget handler om, og er i tillegg fargerik.

110

111 Hvis alt annet svikter: Prøv noe søtt! Det er en grunn til at det er så mange bilder av kattunger på Facebook. De er søte og morsomme, alle kan relatere til dem, og de er egovennlige og delingsvennlige.

112

113 Bilder på Instagram

114 Standard bildestørrelse 640 x 640 Høyde/breddeforhold 1:1 Profilbilde 110 x 110 Forsiden på web viser et slideshow på 7 bilder hentet fra kontoen Thumbnail 161 x 161

115 Bildets oppgave på Instagram Siden Instagram er en bildekanal er bildet hovedbudskapet, og så godt som eneste fokus. Bildet konkurrerer med bildene til alle andre brukeren følger, og det stilles dermed enda større krav til stoppeffekt enn på Facebook. Vi ønsker likes og kommentarer, og - hvis mulig - å få brukeren inn på en konverterende nettside. Bilder på Instagram lar seg ikke dele direkte.

116 Instagram og andre sosiale medier Det er mulig å koble Instagram-oppdateringer til andre sosiale medier, fortrinnsvis Facebook og Twitter, via Instagram-appen. Instagram-bilder kan dermed deles videre fra disse mediene, og derfor oppnå en viss viral effekt.

117 Det visuelle er ekstra viktig Fordi Instagram er en ren bildekanal er de visuelle kravene til bildet høye, men det er også et krav om at bildet skal virke autentisk og personlig. Prøv derfor å holde bildekvaliteten så høy som overhodet mulig. Det er mulig å fire på kvalitetskravene der hvor bildet er personlig eller skal ha dokumentasjonseffekt, men bare litegrann.

118

119

120

121 Litt teknisk om bilder

122 Hvor stort er bildet? Størrelsen på et webbilde måles i piksler. Et piksel er en av de små fargede firkantene bildet er bygd opp av. Et bilde beregnet på web kan være f. eks. 850 x 350 piksler. De fleste kameraer lager bilder som er for store for bruk på web. Før vi kan bruke det, må bildet da skaleres og/eller beskjæres.

123 Skalering Å skalere et bilde er å redusere høyde og bredde på bildet, slik at det samme bildet inneholder færre piksler. Vi reduserer vanligvis høyde og bredde like mye, slik at bildet ikke strekker seg. Vi kan skalere bilder nedover i det uendelige uten at det blir uskarpt, men ikke oppover.

124 Nedskalering 100% 50% Reduserer vi bildet med 50% har det bare en fjerdedel så mange piksler som originalen.

125 Beskjæring Å beskjære et bilde er å redusere antallet piksler i bildet ved å kappe bildekantene. Vi kan velge å beskjære høyde og bredde like mye for å bevare det opprinnelige formatet, eller vi kan endre det når vi beskjærer.

126 Beskjæring Før Etter Beskjæring reduserer også antallet piksler i bildet.

127 Vi trenger ofte begge deler Ofte må bildet både beskjæres og skaleres. Da er det ofte lurt å gjøre beskjæringen før vi skalerer, så vi er sikre på at vi får med det vi skal i bildet.

128 Hvor tungt er bildet? En annen viktig variabel er filstørrelsen på bildet. Bilder på web trenger å være så lette som mulig, dvs. at filstørrelsen bør være minst mulig. Filstørrelsen bestemmes delvis av hvor mange piksler som er i bildet, og dels hvilket lagringsformat bildet er lagret i. Vi har tre lagringsformater for bilder på web, hvert med sitt bruksområde: GIF, JPEG og PNG.

129 GIF (Graphics Interchange Format) Det eldste grafikkformatet på web Ikke-destruktiv filkomprimering (lossless) Maksimalt antall farger: 256 Komprimeringsmetoden og det lave antallet farger gjør at bilder med rene fargeflater og få farger er best egnet for GIF-formatet

130 Komprimering - GIF

131 Komprimering - GIF

132 JPEG (Joint Photographer s Expert Group) Utviklet for å omgå svakhetene til GIF-formatet Variabel, men destruktiv filkomprimering (lossy) Maksimalt antall farger: Det store antallet farger gjør at JPEG egner seg godt for fotografier, men komprimeringsmetoden gjør at det forsvinner informasjon fra bildet når dette formatet brukes. Bildene kan bli svært lette.

133 Komprimering - JPEG

134 Komprimering - JPEG

135 JPEG-råte Fordi filkomprimeringen fjerner informasjon fra bildet, kan JPEG-filer rammes av progressivt kvalitetstap (JPEG-råte) Dette skjer når en JPEG-fil lagres på nytt og på nytt med samme filnavn.

136 Original Lagret som JPEG 10x

137 Alltid rene bilder Forminsking (JPEG) Originalbilde (Photoshop-format) Svart-hvitt (GIF) Nytt utsnitt 1 (JPEG) Én original - mange versjoner Nytt utsnitt 2 (JPEG)

138 PNG (Portable Network Graphics) Nyeste formatet på web Utviklet som en erstatning for GIF Ikke-destruktiv komprimering (lossless) Maksimalt antall farger: Fungerer godt i stedenfor GIF. Kan også brukes istedenfor JPEG, men bildene blir en del tyngre.

139 JPEG slår GIF til foto GIF - 57 Kb JPEG - 8 Kb

140 GIF slår JPEG på grafikk GIF - 8 Kb JPEG - 12 Kb

141 5 bildetips

142 1. Vær faktaorientert!

143 Fakta Forsikre deg om at bildet faktisk viser det du tror det gjør.

144 dagbladet.no

145 2. Vær relevant!

146 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.

147 nho.no

148 3. Håndter personer korrekt

149 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

150 dagbladet.no

151 dagbladet.no

152 dagbladet.no

153 dagbladet.no

154 dagbladet.no

155 4. Rollen spiller en rolle!

156 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

157 dagbladet.no

158 R dagbladet.no

159 dagbladet.no

160 5. Vær redelig! (Selv om det kan være kjedelig)

161 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

162 dagbladet.no

163 dagbladet.no

164 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

165 dagbladet.no

166 dagbladet.no

167 dagbladet.no

168 Takk for meg.