DESIGN OG BILDEBRUK FOR NETTREDAKTØRER JAKOB THYNESS

Transkript

1 DESIGN OG BILDEBRUK FOR NETTREDAKTØRER JAKOB THYNESS

2 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)

3 Dirty Design

4 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

5 Godt eller dårlig design?

6

7

8

9 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!

10 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

11 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

12 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

13 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

14 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

15 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

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

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

18

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

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

21

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

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

24

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

26

27 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!

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

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

30

31 Applikasjon Behandling/manipulasjon av data på en nettside. Nettbaserte applikasjoner finnes i to varianter: enkeltoppgave-applikasjoner og fleroppgaveapplikasjoner

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

33

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

35

36 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)

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

38

39

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

41 Tilgang til innholdet

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

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

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

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

46

47 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

48

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

50

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

52

53 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!

54

55 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

56 Bilder

57 1. Tenk på hva du vil oppnå med bildet

58 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

59 Når bruker vi bilder?

60 1. Når vi vil utdype en historie

61 elle.no

62 2. Når vi vil understreke et poeng

63 climatecrisis.net

64 3. Når vi vil dokumentere noe

65 Foto: Adnan Hajj/Reuters

66 Foto: Adnan Hajj/Reuters

67 aftenposten.no

68 Foto: The White House

69 Faksimile: Der Tzitung

70

71

72 aftenposten.no

73 4. Når vi vil vise sammenhenger

74

75 5. Når vi vil skape en stemning

76 istockphoto.com

77 2. Velg motiv med omhu

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

79 Hva slags bilder fanger oppmerksomheten? Brukeren ser på bilder som inneholder relevant informasjon. Brukeren overser pyntebilder, merkevarebyggende bilder og åpenbare stockfotos.

80 Motivtyper Personer Situasjoner Gjenstander Prosesser Informasjonsgrafikk

81 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

82 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

83 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!

84 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!

85 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

86 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

87 vs.

88 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

89 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!

90

91

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

93

94

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

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

97 campaignforrealbeauty.com

98 3. Komposisjon - ikke så vanskelig som du tror

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

100 istockphoto.com

101 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

102 istockphoto.com

103 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

104 istockphoto.com

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

106 istockphoto.com

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

108 istockphoto.com

109 4. Farger kan forsterke budskapet

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

111 Varmt istockphoto.com

112 Kaldt istockphoto.com

113 Friskt istockphoto.com

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

115 istockphoto.com

116 5. Farger eller svart-hvitt?

117 Farger vs. svart-hvitt

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

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

120 6. Bilder og sidelayout

121 aftenposten.no

122 aftenposten.no

123 aftenposten.no

124 aftenposten.no

125 dagsavisen.no

126 dagsavisen.no

127 dagsavisen.no

128 dagsavisen.no

129

130 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!

131 7. Vær faktaorientert

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

133 dagbladet.no

134 8. Vær relevant

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

136 nho.no

137 9. Håndtér personer riktig

138 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

139

140 dagbladet.no

141 dagbladet.no

142 dagbladet.no

143 dagbladet.no

144 dagbladet.no

145 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

146 dagbladet.no

147 R dagbladet.no

148 dagbladet.no

149 10. Vær redelig - selv om det kan være kjedelig

150 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

151 dagbladet.no

152 dagbladet.no

153 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

154 dagbladet.no

155 dagbladet.no

156 dagbladet.no

157 dagbladet.no

158 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

159 Takk for meg.!