Transcript interkulturel erhvervskommunikation – ikek.dk

interkulturel
erhvervskommunikation
ikek 11
Viral markedsføring
Webdesign
Den der har leget mest når han dør, har vundet
11 Viral
Ekstern oplægsholder: Andreas K. Thomsen
Markedsføring
Synopsis
Webdesign
Webdesign
Viral kommunikation
4/8/2015
ikek 11 Viral markedsføring Webdesign
2
Ikek synopsis
Synopsis ved mundtlig eksamen har som formål at tillade eksaminanden at
fremlægge og diskutere et særligt studeret problemfelt inden for et større
emneområde.
Ved en synopsis forstås et skriftligt oplæg (maksimalt 4 normalsider), der
indeholder:
1. En beskrivelse af det udvalgte emne/problemfelt og dets afgrænsning i relation
til hele emneområdet.
2. En redegørelse for den generelle (gruppe) problemformulering samt
metodisk/teoretisk indfaldsvinkel.
3. En punktvis opstilling af de forhold, den studerende ønsker at komme ind på
under eksaminationen gerne førende til operationelle forslag.
Synopsis afleveres i 3 eksemplarer til instituttets eksamenskontor senest 14 dage
før aflæggelse af den pågældende eksamen.
4/8/2015
ikek 11 Viral markedsføring Webdesign
4
Designanalyse. De tre aspekter
• Det praktiske, tekniske aspekt. Funktionalitet (såvel for
slutbrugeren som for producenten): Ergonomi, sikkerhed,
brugervenlighed, masseproduktion, osv. Hvordan det
virker.
• Det æstetiske aspekt. Farver og former. Hvordan det ser
ud.
• Det symbolske aspekt. Værdier. Hvad det fortæller.
4/8/2015
ikek 11 Viral markedsføring Webdesign
5
De tre aspekter for Webdesign:
• Det funktionelle aspekt: det skal virke, det skal være
logisk, det skal være hurtigt.
• Det æstetiske aspekt: det skal være kohærent ’se
godt ud’ (farvevalg, layout, billeder, effekter).
• Det symbolske aspekt: Livsstilen, tonen, historien
(neutral, troværdig, behagelig, hyggeligt,
spændende, provokerende, eksperimenterende; alt
efter målgruppen).
4/8/2015
ikek 11 Viral markedsføring Webdesign
6
4/8/2015
ikek 11 Viral markedsføring Webdesign
7
4/8/2015
ikek 11 Viral markedsføring Webdesign
8
4/8/2015
ikek 11 Viral markedsføring Webdesign
9
4/8/2015
ikek 11 Viral markedsføring Webdesign
10
Definitioner
Hjemmeside (Home page)
•
Startsiden på et netsted. Den vigtigste side:
Indgangssiden. Visitkortet.
Netsted (websted, website, site)
•
Et sted på nettet hvor det samlede antal sider
under et domænenavn kan findes. Et byggeplads på
nettet.
4/8/2015
ikek 11 Viral markedsføring Webdesign
11
webterminologi
Web site W3 http://www.w3.org/1999/05/WCA-terms/01#PRIMITIVE
A collection of interlinked Web pages, including a host page,
residing at the same network location.
Home page Webopedia http://webopedia.com/
The main page of a Web site. Typically, the home page
serves as an index or table of contents to other
documents stored at the site.
4/8/2015
ikek 11 Viral markedsføring Webdesign
12
webterminologi
(Hyper)links:
• Anker: linker til andet sted på selve siden (#navn)
• Interne (relative) links: linker til anden side i samme
websted (navn.htm)
• Eksterne (absolutte) links: linker til andet websted
(http://www.navn.extension)
• Mail links: linker til en @ adresse (maito:navn)
4/8/2015
ikek 11 Viral markedsføring Webdesign
13
webterminologi
Andet interaktivitet:
• Rollover: område der skifter udseende ved mouse over
• Disjointed rollover: område der skifter udseende ved
mouse over andetsteds
• Hotspot: interaktivt område
• Drop-down og pop-up menuer: menuer der åbnes ved
en behavior som mouse over eller click
• Sitemap: en (grafisk) oversigt over netstedet
4/8/2015
ikek 11 Viral markedsføring Webdesign
14
Krav til webstedet
kommunikation og strategier på nettet
Følgende aspekter skal være kohærente.
• Visuel identitet, designprogrammet:
Overensstemmelse mellem image (hvordan vil vi
opfattes) og identitet (hvordan vi ren faktisk er)
• Indhold: Skal være professionel og ærlig. Vi skal sige
hvad vi er gode til, intet andet
• Brugervenlighed: Skal være tilpasset målgruppen
Mission, vision og værdier skal præge webstedet
• Mission: hvorfor er vi her?
• Vision: Hvor vil vi hen?
• Værdier: Hvad er vigtigt for os?
4/8/2015
ikek 11 Viral markedsføring Webdesign
15
Internettet i dag: Fra signal- til nytteværdi
Set fra virksomhederne
Har ledelsen en klar indstilling?
Anser ledelsen webstedet for at være et strategisk
værktøj?
Er kommunikationsfunktionen en del af direktionen?
Stabsfunktion?
Politikker (Personale-, kommunikations-, uddannelsesm.m.)
Er medarbejderne involveret?
4/8/2015
ikek 11 Viral markedsføring Webdesign
16
Internettet i dag: Fra signal- til nytteværdi
Set fra brugerne
• Millioner af websteder og over 5 milliarder computer
tilsluttet
• Google (og de andre søgetjenester)
• Brugerne shopper, er utro, er utålmodige, stiller krav
• Sociale medier
4/8/2015
ikek 11 Viral markedsføring Webdesign
17
SEO - Search Engine Optimization –
søgemaskineoptimering.
Søgetjenester er dynamiske (forbedrer løbende deres
systemer) og opererer på forskellige måder:
• Metatags (søgeord/beskrivelse i <head>, der beskriver
virksomhederne og/eller dens produkter/ydelser)
• Søgeord i overskrifter og/eller brødtekst
• Søgeord i dokumentnavn
• Links (til og fra)
• Betalte links som Googles adwords
4/8/2015
ikek 11 Viral markedsføring Webdesign
18
4/8/2015
ikek 11 Viral markedsføring Webdesign
19
kommunikation og strategier på nettet
Løbende kvalitetskontrol af et netsted
• (Definér formål mål og historien
– Hvorfor skal vi på nettet? Prioriterede formål
– Hvad vil vi opnå? Prioriterede mål
– Hvordan skal organisationens/virksomhedens
personlighed skildres? Superfortællingen inkl. mvv.)
• Hvad skal brugerne få ud af det?
• Primære og sekundære målgruppe(r)
• Analyse af konkurrenternes netsteder
4/8/2015
ikek 11 Viral markedsføring Webdesign
20
kommunikation og strategier på nettet
Vedligeholdelse af webstedet
Webdesign og content management er rekursive processer
• Webstedet skal løbende opdateres :
– Virksomheden udvikler sig
– Nye produkter, nye markeder eller målgrupper
– Medarbejdernes profil og ambitioner ændrer sig
– Omverdenen ændrer sig (f.eks. lovgivning)
– Nye tekniske muligheder på nettet
– Links skal løbende tjekkes
• Et websted er som en cykel: Hvis det ikke bevæger sig,
falder det (Tak, Che).
4/8/2015
ikek 11 Viral markedsføring Webdesign
21
Brugervenlighed - Usability
Brugervenlighed (Usability + Accessibility)
•
•
•
•
•
•
4/8/2015
hurtig downloadtid
logisk opbygning
funktionel navigation
interaktivitet
handikapvenlighed (Alt-tekst)
MEN usability er også det symbolske,
målgruppeafhængige.
ikek 11 Viral markedsføring Webdesign
22
Brugervenlighed - Usability
Hjælp brugerne:
• Logisk og essentiel hjemmeside (forside) tilpasset
målgruppen
• Brug netsprog (korte sætninger; simpel sprogbrug)
• Minimér downloadingstiden (optimér grafik)
• Sitemap
• Opdateret og ’taknemmelig’ søgemaskine
• Brug pladsen: stor typografi, store aktive felter
• Til sidst men ikke mindst: undersøg hvilken indhold
brugerne har behov for og hvilken livsstil de identificerer sig
med!
4/8/2015
ikek 11 Viral markedsføring Webdesign
23
layout
Layout
Kend din målgruppes foretrukne skærmopløsning
Check layoutet i forskellige opløsninger
(brug f.eks
http://www.markhorrell.com/tools/browser.shtml )
Brug evt. flydende layout
Centrér frossen layout
4/8/2015
ikek 11 Viral markedsføring Webdesign
24
4/8/2015
ikek 11 Viral markedsføring Webdesign
25
layout
Layout elementer
Logo på alle sider
Home knap på alle sider (gerne + Logo)
Navigation på alle sider
Anker på lange sider samt gentagne ’op-pile’ +
eller scroll bar +
Overvej ulemper ved ny browservindue +
4/8/2015
ikek 11 Viral markedsføring Webdesign
26
layout
Menuer og menustruktur
Mellem 5 og 8 knapper
Gør hele knapoverfladen aktiv
Brug roll-over effekter - gør knapper synlig upover-down
Overvej at erstatte drop-down menuer med
hovedmenu/undermenu +
Brug indent
Koncis tekst på knapper af samme størrelse
4/8/2015
ikek 11 Viral markedsføring Webdesign
27
layout
Sideforløb
Undgå tvungne lineære forløb
Site-maps
Brug (grafiske) site-maps
4/8/2015
ikek 11 Viral markedsføring Webdesign
28
4/8/2015
ikek 11 Viral markedsføring Webdesign
29
4/8/2015
ikek 11 Viral markedsføring Webdesign
30
funktionelt design - typografi
Typernes opbygning
•
•
•
•
4/8/2015
Store bogstaver kaldes MAJUSKLER eller VERSALER
Små bogstaver er minuskler
Seriffer er fødder, ører og faner på Antikva fonte
Fonte uden seriffer kaldes sans serif eller Grotesk
ikek 11 Viral markedsføring Webdesign
31
funktionelt design - typografi
Typografivalget afhænger af funktionen
•
skal fange
opmærksomheden
• Læse-typografi skal kunne …læses
• Konsultativ typografi skal have signalværdi
Tips:
- til brødtekst brug sans serif
- undgå kursiv (dog gerne som billedtekst) og fed
(dog gerne som link) i brødtekst
- markér overskrifter og rubrikker tydeligt
4/8/2015
ikek 11 Viral markedsføring Webdesign
32
funktionelt design - farver
Farver og baggrunde
• Komplementær-farver ’skriger’ til hinanden
• Baggrunde skal stå i kontrast til skriften dog bør
kontrasten ikke være for hård.
• Brug (meget) lyse baggrunde til mørk skrift og
omvendt
• Undgå billeder som baggrund
4/8/2015
ikek 11 Viral markedsføring Webdesign
33
4/8/2015
ikek 11 Viral markedsføring Webdesign
34
Læsbarhed
funktionelt design - tekst
Spatiering. Bogstav-mellemrum. Problemer undgås ved at bruge
system-skrifter (default) fra editor. Eksempel: VATPIND.
Linielængde. Tommelfingerregel: brug max. 45 anslag, gerne
mindre.
Opsætning af tekst.
• Løs bagkant giver ensartede ordmellemrum i modsætning til
fast bagkant.
• Centreret tekst egner sig til billedtekst, citater og indledninger –
bør ellers undgås.
• Undgå løs forkant og figursats på nettet.
Linieafstand. Skydning. Sørg for nok mellemrum mellem linierne.
Hellere dele teksten op over flere sider end at knibe teksten.
Brug min. 10/12 (20% mellemrum).
Tekststørrelse. Tillad Brugeren at skifte tekststørrelse.
4/8/2015
ikek 11 Viral markedsføring Webdesign
35
funktionelt design - tekst
Tekstmængde
• Afhænger selvfølgelig af dokumenttype. Generelt gælder
det, at webtekster skal være korte, inddelt i afsnit med
mellemrubrik indeholdende et enkelt aspekt.
• Brug punktopstilling hvor det er muligt.
• For at luge ud i tekstmængden brug journalistens trekant:
Konklusion
Essensen
Uddybende detaljer
Sekundære detaljer
4/8/2015
ikek 11 Viral markedsføring Webdesign
36
funktionelt design - tekst
Tekstmængde
• Forhold mellem tekst og grafik (værende overskrifter, grafik
og tom plads) bør normalt ikke overstige 60/40.
• Teksttunge dokumenter til print på PDF. Tekster der
forventes læst på skærmen skal ikke på PDF, men skal
omredigeres. Brug den omvendte pyramide: konklusionen
først. Brug lister.
• Overvej at bruge link til Word dokument.
4/8/2015
ikek 11 Viral markedsføring Webdesign
37
psykologisk design – visuel identitet
Logo
• Logoet bør være det centrale element i jeres
visuelle identitet.
• Brug det aktivt (home-knap, vandmærke på tom
plads, favicon).
• Logoet bør være distinktiv; adskille sig fra
konkurrenternes. ’Positionere’ sig.
• Logoet bør være deskriptiv; fortælle hvad I gør.
• Logo skal kunne huskes og kunne beskrives af
målgruppen.
4/8/2015
ikek 11 Viral markedsføring Webdesign
38
Storytelling
Storytelling
Er ikke kun et buzz-word, men dækker et behov i det
hyperkomplekse (postmoderne) samfund fordi gode
historier huskes længere og forklarer bedre en
hensigtserklæringer.
Alle mennesker er en film værd – og alle virksomheder
består først og fremmest af mennesker.
Storytelling er meningsskabelse. Den viser tilbage til
fortiden, forklarer nutiden.
Den skaber sammenhæng, især internt. Den
personaliserer virksomheden, giver den sin ‘human
touch’.
4/8/2015
ikek 11 Viral markedsføring Webdesign
39
Storytelling
Storytelling
Tips
•Brug citater og interviews.
•Fortsæt fortællingerne.
•Sørg for at der er konsistens og gensidighed i hele
virksomhedens designprogram.
•Inddrag den medskabende bruger vha. nyhedsbreve,
blog, spil, quizzer og lignende.
En historie er effektiv kommunikation når den
•huskes
•er troværdig
•har værdier som målgruppen deler.
4/8/2015
ikek 11 Viral markedsføring Webdesign
40
Konklusion
Webdesign – konklusion
1. Det er svært at være objektiv overfor ens egen arbejde.
Gå derfor ofte tilbage til din målgruppe. Brug kvalitative
og kvantitative markedsanalyser. Vores personlige
mening er uvæsentlig – det er brugerne der er
dommerne.
2. Fortæl straks hvad I kan og hvad brugeren kan få ud af
netstedet.
3. Vær opmærksom på at du sandsynligvis har flere
målgrupper samt stakeholders. Der skal tænkes på dem
alle sammen.
4/8/2015
ikek 11 Viral markedsføring Webdesign
41
Konklusion
4.
Analysér ofte dine konkurrenters netsteder. Hold øje med
redesign og nye konkurrenter. De kan bruges som
inspiration gennem gode idéer, men - lige så vigtigt – kan de
vise dig hvordan du ikke skal gøre tingene.
5.
Brugervenlighed er ikke kun funktionalitet. Lad ikke dit
websted blive for ’mainstrean’ og kedelig.
6.
Udnyt al den plads I har til rådighed.
7.
Overvej løbende om træstrukturen skal optimeres.
4/8/2015
ikek 11 Viral markedsføring Webdesign
42
Konklusion
8. Skab klarhed ved hjælp af transparent navigation. Brugerne
kommer ikke for navigationens skyld men for indholdet.
9. Webdesign har (som design generelt) tre aspekter der skal
analyseres separat:
– Det funktionelle aspekt: det skal virke, det skal være
logisk, det skal være hurtigt
– Det æstetiske aspekt: det skal se godt (’rigtigt’) ud
– Det symbolske aspekt: det skal ramme den forventede
tone, reflektere brugerens tilstræbte livsstil, fortælle en
relevant historie.
4/8/2015
ikek 11 Viral markedsføring Webdesign
43
Konklusion
10. Webdesign er en rekursiv proces; gennemfør hyppig
kvalitetskontrol:
– Hvad var det vi ville?
– Opnår vi det?
– Hvorfor / hvorfor ikke
– Tilpas jeres formål og mål
4/8/2015
ikek 11 Viral markedsføring Webdesign
44
Links
ang. SEO
• http://searchenginewatch.com
ang. terminologi
• http://webopedia.com
ang. usability
• http://www.netsteder.dk/
• http://www.useit.com
ang. accessibility
• http://www.w3.org/WAI/
• http://www.macromedia.com/macromedia/accessibility/
• http://www.netsteder.dk/
• ang. Skærmopløsning
• http://www.markhorrell.com/tools/browser.shtml
4/8/2015
ikek 11 Viral markedsføring Webdesign
45
Links
• ang. farver/farveplader/farveblindhed
• http://dx.sheridan.com/advisor/cmyk_color.html
• http://web.forret.com/tools/color.asp
• http://www.yoyodesign.org/outils/ncolor/ncolor8.html.en
ang. webdesign brief
• www.ddc.dk
ang. læsevaner
• http://www.poynterextra.org/et/i.htm
• http://www.usatoday.com/tech/news/2001-05-15-webusability-research.htm
ang. storytelling
• http://www.kommunikationsforum.dk/
• ang. sub-pixel rendering
• http://grc.com/ctwhat.htm
4/8/2015
ikek 11 Viral markedsføring Webdesign
46