DRDR.dk'sdesign fundament

Her kan du læse DRs designprincipper for digitale platforme. Gennem dokumentation, retningslinjer og tjeklister, er hensigten med siderne, at vise hvordan vi har udviklet designet, hvilke principper vi arbejder efter og hvordan principperne konkretiseres.

Siderne vil løbende blive tilpasset og udbygget i takt med udrulningen af designet på dr.dk.

Nøgleord:

  1. Enkelt Enkeltheden tilstræbes i både sidernes indholdsopbygning, og i de designgreb der anvendes, for at skabe en naturligt og afbalanceret læseoplevelse.
  2. Prioriteret Indholdet på siderne skal være klart prioriteret, så det er tydeligt hvad der er vigtigst i det enkelte skærmbillede. Brugeren skal nemt kunne danne sig overblik udfra indholdsprioriteringen og på den vis nemt tilgå det ønskede indhold.
  3. Konsistent Sider og enkelte elementer skal være opbygget konsistent i form og funktion, så du får en ensartet oplevelse og nemt kan orientere dig på tværs af dr.dk.
  4. Relevant Vi tilstræber, at siderne altid vil have mere indhold som frister, og leder brugeren naturligt videre til andet relevant indhold på tværs at dr.dk. Beslægtet indhold placeres tæt på sidens kerneindhold, og indhold af mere tværgående karakter placeres længere væk.

Målsætning

DR ønsker at præsentere brugerne for at mere enkelt og let tilgængeligt dr.dk. På nettet og på øvrige terminaler med adgang til internettet via en browser.

Denne manual omfatter principper for visuelt design, navigitions- og interaktionsprincipper, tilgængelighed, loadtider, m.m.

Alt sammen skal det sikre, at brugerne møder et dr.dk, der hænger sammen på tværs, når det gælder design, arkitektur, navigation og interaktions-principper.

Målet er, at dr.dk fremstår mere enkelt og tilgængeligt, så dr.dk i brugernes bevidsthed får en klarere profil som et sammenhængende netsted i stedet for en portal med mange forskellige hjemmesider.

Samtidig skal principperne sikre, at dr.dk lever op til standarder for tilgængelighed, herunder loadtid, samt at siderne er skalerbare til terminaler med mindre skærme, andre browsere og andre styresystemer.

Målet med denne manual er at give producenter af sider og indhold til dr.dk en overskuelig og opdateret guide til, hvordan der produceres til dr.dk. Guiden er dermed også en værktøjskasse, der indeholder en række elementer, som direkte kan bruges i produktionen. Værktøjskassen skal sikre en høj grad af genbrug og best practice, så kræfterne kan bruges på unikt indhold.

Designsystem

Med det nye design ønsker vi at dr.dk fremstår enkelt, for at skabe større fokus på indholdet og for at hjælpe brugeren med at få overblik og blive inspireret. Desuden giver et enkelt og konsistent design os større fleksibilitet, så vi kan genbruge komponenter og indhold på tværs af dr.dk og andre digitale platforme.

TJEKLISTE

  1. Topområde: Sidens øverste 20% skal kommunikere ident klart og entydigt. Spiller titel, evt. baggrundsbillede og logo godt sammen?
  2. Sidernes helhed: Er designgrebene vel doseret? Har siden en god visuel dynamik?
  3. Identitet og egenart: Understøtter designløsningen områdets identitet?
  4. 20 px. margin og padding: Mellem alle elementer er der en margin på 20 px., der også bruges som padding i elementer med baggrund.
  5. Undgå brug af skygger og 3D effekter. Designet består af få, enkle elementer – typografi, streger og farver.
  6. Bruges typografien som ønsket? (Disponering af overskrifter, spottekster, teasertekster, metadata, brødtekst - Gibson / Georgia)
  7. Bruges farver hensigtsmæssigt? (Læsbarhed, identitet) Evt. baggrunde - fall-back farve til de skaleret versioner?
  8. Bruges ikoner som tiltænkt?

INFORMATIONS ARKITEKTUR

Dr.dk har fremover kun horisontal navigation med max 3 niveauer. 1. og 2. niveau er forbeholdt kerneområderne; Nyheder, TV, Radio og Mere som er placeret i topbaren. Det 3. niveau er reserveret til site-navigation. Sidernes hierarki skal være tydelig og afspejles gennem en indholdsdisponering med dynamik og klar prioritering i hver enkelt skærmbillede. Vi efterstræber en variation og rytme i grid, som understøtter prioritering og vægtning af indholdet.

På den måde guides brugernes fokus og fascination således, at brugeroplevelsen holdes levende i hele sidens længde (fokus på redaktionel prioritering og inspiration).

TJEKLISTE

  1. Navigations-elementer i 1. til 3. niveau (horisontale menu'er) må ikke linke ud af den pågældende sektion. Brugeren forbliver således i den valgte indholdskontekst OG bevarer overblikket.
  2. Indholdselementer skal som grundregel vises helt udfoldet og må ikke pakkes i lag eller skjules bag faneblade, "sliders" eller lignende.
  3. Der bør skabes en god variation mellem komponenttyper der er billedbårne og klart prioriterede som fx spots, og andre komponenter der er mere tekstbaserede som fx en "Mest læste" liste.
  4. Placer ikke ensartede indholdszoner eller billedformater over hinanden (de vil kæmpe om opmærksomhed). De skal placeres som naturlig adskillelse af indhold på siden, for at skabe variation og rytme.
  5. Afvikling af klip og udsendelser: fra DRs radiokanaler foregår i netradio med mindre andet er aftalt. (sikrer konsistens og enkelthed).
  6. Afvikling af hele udsendelser: fra DRs tv-kanaler foregår på playerside i /TV universet for at skabe en sammenhængende tv oplevelse.
  7. Afvikling af klip: skal foregå på artikelsider, og ikke i klip-playere med integrerede kliplister eller popup/overlays. På den måde kan klip genbruges i mange sammensætninger på tværs at dr.dk, og vi får unikke ulr’er så søgemaskiner nemt kan indeksere siderne.

MANUAL FOR PRODUKTION AF INDHOLD TIL DR.DK

Dr.dk er indrettet på at finde og præsentere alle de gode historier og nyheder, der ligger i radio- og tvprogrammerne. Hvordan historierne skal skrives, bliver forklaret i følgende dokument

SKALERBARHED

Dr.dk skal understøtte brug af sitet på mange forskellige typer af terminaler. Et skalerbart dr.dk tilpasser automatisk sider og indhold til mobile enheder med små skærme, og gengiver den ønskede indholdsprioritering.

Vi har defineret ét breakpoint for alternativ visning til små skærme. Et breakpoint er det punkt hvor skærmbredden når en minimumstørrelse, og det bliver nødvendigt at tilpasse indholdet, for at skabe den optimale brugeroplevelse.

TJEKLISTE

  1. Standardkomponenter: Sørg for at genbruge standardkomponenter der automatisk skaleres (se ovenstående link).
  2. Nye komponenter: Ved udvikling af nye moduler og komponenter skal der redegøres for skalering i det gældende breakpoint, samt evt. nye breakpoints der opstår under skalering for det enkelte modul/komponent på det pågældende site.
  3. Prioritering af indhold: Vær opmærksom på at rækkefølgen af komponenter i HTML vil afspejle prioritering af indholdet under skalering.
  4. Skriftstørrelser: Der skal evt. laves nogle ekstra breakpoints til skriftstørrelser.

TILGÆNGELIGHED

DRs indhold skal være tilgængeligt for alle brugere, uagtet fysiske forudsætninger og derfor arbejdes der med at gøre dr.dk til et ”tilgængeligt” website. Tilgængelige websites er et produkt af semantisk HTML, grundigt formatering og godt design og betyder fx, at man som synshæmmet faktisk kan navigere systematisk rundt på sitet, og få vejledning til at finde det indhold man søger.

Det er DRs målsætning at leve op til W3C's AA retningslinjer for web standarder. Web standarden hjælper til med at få indholdet på dr.dk gjort tilgængeligt for brugere der benytter hjælpeværktøjer - som skærmlæsere - for at få adgang til indholdet.

TJEKLISTE HTML

  1. HTML skal være struktureret så det giver semantisk mening, og afspejler den rækkefølge som det ønskes at brugeren skal læse indholdet i.
  2. Navigation som er grafisk fremstillet på sitet, skal have en alternativ vejledende tekst.
  3. Alt på sitet skal kunne styres vha. et keyboard, og det skal være muligt at navigere rundt mellem alle komponenter med keyboard, uden at blive ”fanget” i fx FLASH-playere.
  4. Det skal synsmæssigt være tydeligt hvilket element på sitet der er i fokus, når der tabuleres.
  5. Hvert site skal have en sigende overskrift (TITLE-TAG) "dr.dk + 'Sidetitel' ".
  6. Det skal være muligt at justere lydstyrke, pause og stoppe automatisk afspillende lyd der kører mere end 3 sek.
  7. Det skal være muligt at stoppe, pause og helt skjule automatisk opdaterende elementer, også udefrakommende. Fx en Live scribble.
  8. Der skal være tydelig markering i HTML’en ved ledende tekster, af inputfelters formål og generelle instrukser om brugen.
  9. Hvis et element reagerer så snart brugeren giver et input, skal brugeren være adviseret herom på forhånd. Brugeren skal gives forslag til hvordan eventuelle fejl i vedkommendes input kan afhjælpes.

TJEKLISTE DESIGN

  1. Farve som navigationsmetode: Du kan ikke bruge grafiske elementer eller tekster, der alene gennem deres farve angiver en form for information eller funktionalitet. Fx kan du ikke bruge en navigationsform, hvor en rød knap angiver en ’stop’- funktion og en grøn knap, der angiver en ’fortsæt’-funktion. Her bliver du nødt til også at skrive henholdsvis ’Stop’ og ’Fortsæt’ på knappen.
  2. Brug af typografi skal ikke tage brug af for mange variationer, men stile efter et hierarkisk og ensartet skriftbillede.
  3. Den visuelle præsentation af tekst (og billeder af tekst) som har en betydningsbærende karakter, skal have et kontrastforhold på mindst 4,5:1 *, undtagen i følgende situationer: Stor skrift: Tekst og billeder af tekst i stor skrift har et kontrastforhold på mindst 3:1; Ikke betydningsbærende: Tekst eller billeder af tekst, der udgør en del af en inaktiv brugergrænsefladekomponent, som udelukkende er ren udsmykning, som ikke er synlig for nogen, eller som udgør en del af et billede, der indeholder andet væsentligt visuelt indhold, er ikke underlagt et kontrastkrav. Logotyper: Tekst, der udgør en del af et logo eller varemærkenavn er ikke underlagt et kontrastkrav.
  4. Anfald: Indhold må ikke designes på en måde, der vides at kunne forårsage (epileptiske) anfald.

*(Kontrastforhold kan spænde fra 1-21 (skrives ofte 1:1 til 21:1). Du kan downloade et program som analyserer kontrast forholdet her

TONE OF VOICE

I vores henvendelse til brugerne vil vi formulere os i øjenhøjde. Tone-of-Voice-indsatsen på dr.dk dækker den redaktionelle og formmæssige formidling på tværs af dr.dk. Det være sig sproget, brug af overskrifter, rubrikker, billeder, links, hjælpesider, navigation, funktionsbetegnelser, ikonografi, design- og formgreb, osv.

Målet med indsatsen for Tone-of-Voice på dr.dk er at skabe sammenhæng i formidlingen. At brugerne skal opleve dr.dk som imødekommende, forståelig, genkendelig og sammenhængende i stil, tone og grundlæggende programvirksomhed - uanset hvilket undersite de befinder sig på.

TJEKLISTE

  1. Klar og ensartet terminologi og form ift. bl.a. navigation, overskrifter, links, termer og medietyper.
  2. Tal almindeligt dansk.
  3. Tal målorienteret.
  4. Tal handlingsorienteret.
  5. Tal kun om teknik hvis det er absolut nødvendigt.
  6. Lov ikke mere end du kan holde.
  7. Tag ansvar, når du (eller DR) har lavet en fejl.
  8. Tal så lidt som muligt!

PERFORMANCE

Alle sider skal opleves som værende hurtig. Siderne skal som minimum leve op til det fælles loadprincip, som i al sin enkelthed vil sige, at en side skal kunne indlæses i brugerens browser indenfor højst 1 sekund og siden må højst lave 75 server-requests pr. side.

Vi stræber dertil, at alle sider skal opnå "Grade B" i værktøjet YSlow. Yslow er et værktøjet der kan analysere loadtid på et givent website, og kommer dertil med forslag til forbedringer. Smart! Yslow kan installeres som plugin til browseren Crome.

Følgende 10 YSlow regler skal der ved udviklingen være særlig opmærksomhed omkring.

TJEKLISTE

  1. Sørg for der er så få server-requests som muligt.
  2. Undgå tomme "src" eller "href" felter.
  3. Indsæt altid CSS i toppen af siden.
  4. Indsæt Javascript i bunden af siden.
  5. Minimér brugen af JS og CSS.
  6. Fjern JS og CSS dubletter.
  7. Sørg for at snakke caching strategi.
  8. Brug GET til AJAX requests.
  9. Minimér antal af DOM elementer.
  10. Undgå at skalere billeder i HTML.

STATISTIK OG SØGEOPTIMERING

Alle sider på dr.dk skal have statistikscript så der kan foretages målinger. Siderne skal også være grundigt beskrevet, så søgemaskiner (eksterne som interne) nemt kan indeksere siderne, og præsentere sigende beskrivelser af indholdet i søgeresultatet.

Metadata bruges blandt andet af søgemaskiner i forbindelse med resultatvisning. For at indholdet på dr.dk kommer frem i relevante søgninger, er det er derfor væsentligt, at dr.dk har gode, væsentlige og læsbare metatitles og descriptions.

TJEKLISTE

  1. Meta Title: Alle sites skal have en beskrivende og unik title på max. 66 anslag - hvor det kan lade sig gøre. Sidens title skal rumme DR, sidens sektionstilhørsforhold og artikel overskrift.
    Eks.
    - DRs forside title: "DR"
    - Sektions forside title : “Kultur | DR”
    - Artikelside title : "Anmeldere: En fantastisk og optimistisk Cannes-festival | Kultur | DR"
  2. Hvor meta titles genereres automatisk, fx programmer, bruges enten dato eller afsnitsnr. til at gøre titlen unik. Den unikke identifier skal placeres indenfor de første 66 tegn.
  3. Meta Description: Alle sites skal have en beskrivende og unik metaddescription på mx. 150 tegn - hvor det kan lade sig gøre. Sidens beskrivelse skal rumme sidens væsentligste elementer og opfordre til brug af disse i bydeform.
  4. Hvor titles genereres automatisk eks. artikler, bruges artiklens manchet som description. Fx: "Søg i alle DRs tv-programmer - eller gå på opdagelse i en genre. Læs mere om programmerne og se dem når du vil lige her i DR NU".
  5. Alle websider skal have følgende script med i bunden af sidens body script:
    http://www.dr.dk/drWebStat/drWebStat.js

    Alle mobilsider skal have følgende placeret i sidens head
    http://www.dr.dk/drWebStat/drMobilStat.js