cbs gui-guide

Graphic User Interface Guide

© 2008

copenhagen business schoolGUI - GraphIc User Interface GUIde

creuna 2008

2

GUI-guidens formål

Denne gui-guide (graphic user interface) er en konceptbeskrivelse til brug for design af skærm-billeder i cbs’s interne og eksterne systemer og websider. Kort sagt er den:

en overordnet og bærende idé•et overblik over form og indhold•en anskueliggørelse af et designperspektiv•

Den har til formål at skabe konsistens og ensartet-hedidesign,grafiskudtrykogbrugervenlighedpåtværs af cbs’ digitale univers.

gui-guiden beskriver elementer, der kan imple-menteres i Microsoft sharepoint 2007 og på sigt i andre systemer. Den er dog retningsgivende frem for udtømmende. Det vil sige, at den beskriver en række visuelle og brugervenlighedsmæssige prin-cipper, der bør danne grundlag for videre udvikling og brug.

gui-guiden henvender sig primært til systemad-ministratorer, kommunikationsmedarbejdere og andre medarbejdere på cbs med ansvar for op-bygning af websider og applikationsvinduer. Derfor beskriver gui-guiden ikke, hvordan brugerne skal anvende et system eller bestemt funktioner på en side.DennebeskrivelseskalfindesiCBS’bruger-manualer.

2

3

4

5

6

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

28

GUI-guidens formål

Indholdfortegnelse

principper for design & layout

Visuelt udgangspunkt

principper for god brugervenlighed

Grids

skriftvalg

farver

Ikoner

topbarre

Bundbarre

Knapper, links & dropdowns

tekstformattering

Billedfelter

Listevisning

Indholdselementer Organisatoriske / personlige

formularer

selvbetjening

hårstreger

pop-up

eksempler

Supplerende grafiske elementer

Indholdsfortegnelse


creuna 2008

4

principper for design & layout

Genkendelighed

når gui-elementer skal implementeres i cbs’ di-gitale univers er det ambitionen, at hvert element bidrager til en homogen og konsistent brugerop-levelse og et ensartet visuelt udtryk. Dette sikrer, at alle, der har berøring med cbs’ websider og systemer, oplever et sammenhængende univers, hvor de genkender elementer, når de går fra side til side, system til system. Med denne genkende-lighed på tværs af websider og systemer skabes en brugervenlighed og visuel konsistens i en organisatorisk kontekst.

Venstrestil elementerskærmbilleder med kun et element i indholdsom-rådet skal altid venstrestille dette element. hvis eksempelvis en formular skal indsættes på en side, er der tale om ét element i et skærmbillede, og derfor skal dette element venstrestilles.

top- og bundbar på alle sidealle sider skal implementere en top- og bund-bar for at fastholde en ensartet brugeroplevelse. Dette giver brugeren mulighed for at navigere hen tilallesideruanset,hvorbrugerenbefindersig.


creuna 2008

5 cbs’ Visuelle identitetVisuelt udgangpunkt

Visuelt udgangspunkt

strukturerne der er blevet designet til gui-guiden, tager afsæt i cbs’ visuelle identitetsprogram. Den visuelle identitet består af få, men karakteristiske designelementer. Disse elementer varieres for at opnå den ønskede variation i udtrykket.

cbs’ visuelle identitet er karakteristisk ved sit grafiskudtryk,derfremstårenkeltogklassisk.De visuelle grundelementer er konstrueret af geometriske kassert med én dominerende farve.For at skabe kontrast og dynamik i det visuelle udtryk benyttes en beskæring af logoet som grafiskelement.

Farver bruges til at adskille kommunikationen for forskellige funktioner og instanser i organisationen. Farver bruges enkeltvis, hvilket understøtterdengrafiskeklarhed.Udtoningeraf farven bruges til sekundære elementer for at forbedre navigation på siderne.

layoutet er styret af balancen mellem de dominerende farvekasser og det hvide rum.


creuna 2008

6

fejlfeedback

uanset hvor godt et design er skruet sammen, ender brugerne altid med at handle uforudsigeligt. Derfor må designet tage højde for, at brugerne kan udføre handlinger, som er uhensigtsmæssige. hvis brugeren ikke kan korrigere den ”forkerte” handling eller overkomme den på anden vis, opleves designet som intolerant.god fejlfeedback giver derfor brugeren mulighed for at korrigere sine fejl.

GuidelinesDer skal altid være en udgang og/eller en •tilbage-knap.beskriv hvad fejlen er og hvor den er opstået.•Marker fejlbesked og område med samme •farve for at skabe sammenhæng mellem fejl og område.Fejlhåndtering kan med fordel designes som •kontekstuel feedback (se nedenfor).

Kontekstuel feedback

en webside eller et system bør altid fortælle brugeren, om en handling er korrekt eller forkert. at give visuel feedback i konteksten – i samme skærmbillede, hvor handlingen er udført – gør brugeren opmærksom på, hvilke konsekvenser en handling har for dette skærmbillede. Med andre ord fortæller kontekstuel feedback brugerne, hvad de behøver at vide, hvor de behøver at vide det.

Guidelines:Angivmedenklargrafiskmarkering,hvor•fejlen er opstået og dermed også, hvor den kanrettes.Dengrafiskemarkeringskalarvefarve fra fejlfeedback-beskeden og skal suppleres af tekst om, hvad fejlen er, og hvordan den kan rettes.Vedkorrektionaffejlenskalengrafisk•markering af den succesfulde handling markeres ud for feltet, f.eks. med et grønt flueben.

Kontekstuel navigation

en webside eller et system bør altid tage udgangspunkt i brugernes arbejdsgang og tilbyde relevante funktioner i relevant kontekst. Kontekstuel navigation tilbyder brugerne funktioner og handlingsmuligheder, der er relevant i en given brugssituation.

GuidelinesBrugerensprofilskalbestemmetilgængelige•funktioner.navngivning af funktioner, overskrifter, felter •etc. skal afspejle arbejdsområder.indholdselementer skal tilpasses brugerens •profil.

primære og sekundære handlinger

Der er ofte mere end én handlingsmulighed i et skærmbillede, men gerne én handling er primær. Det er god brugervenlighed, når brugeren bliver

motiveret til en bestemt handling eller guidet i en bestemt retning. Visuel forskellighed på de forskellige handlemuligheder hjælper brugeren til at træffe ”gode” valg. eksempelvis er ”annullér” en sekundær handling, som gerne skulle anvendes mindre end den primære handling ”godkend”. Derfor skal den visuelle vægtning reduceres for at minimere chancen for, at nogle brugere vælger den uintentionelt.

i prioriteringen skelnes mellem primære og sekundære handlinger:

primære handlinger motiverer brugeren til •attræffe”gode”valgietworkflow.Primærehandlinger er f.eks. ”godkend”, ”send”, ”Fortsæt” og ”afslut”. sekundære handlinger er alternativer til •primære handlinger. sekundære handlinger er f.eks. ”annullér”, ”Tilbage” og ”nulstil”.

Guidelinesovervej nøje relevansen af sekundære •handlinger i et skærmbillede.Der skal være en klar visuel forskel på •primære og sekundære handlinger.begræns den visuelle vægtning af sekundære •handlinger.

Overblik

brugerne skal altid have mulighed for at se, hvor de er på en webside. Med andre ord: angiv altid hvor brugeren er.

Guidelinesangiv en tydelig feedback fra de valgte •menupunkter.indsæt en brødkrumme.•

usability guidelinesprincipper for god brugervenlighed


creuna 2008

7

Multiple indgange

Multiple indgange tilbyder mange forskellige indgange til samme information. De forbinder en kompleks digital infrastruktur og de utallige brugs-situationer. i en kompleks digital infrastruktur med en meget differentieret målgruppe og et utal af brugssituationer skaber multiple indgange mulig-heder for en differentieret brug, der passer til de enkelte brugerbehov.

Guidelinesopret multiple indgange i brugssituationer, •hvor information fra en side er afhængig af information fra en anden side.opret multiple indgange til just-in-time og just-•in-place information. Det er information, bru-gerne ikke er klar over, at de har brug for, men som bliver præsenteret i et opportunt øjeblik. F.eks. kan brugerne efter de har udfyldt en blanket, blive præsenteret for den næste, der ligeledes skal udfyldes.

Gør teksten læsbar

Det skal være muligt at læse teksten på skær-men, så brugerne ikke behøves at printe en tekst uanset dens længde.

Guidelinesundgå at teksten løber over mere end to spal-•ter i gui’ens grid.bredden på tekstelementer skal låses fast, •så læsbarheden ikke forringes, hvis brugeren udvider vinduet og siden dermed skaleres.

flow

Det er vigtigt for brugeroplevelsen, at sammen-hængende dialoger ikke isoleres men i stedet samles. Flow opstår når en brugerdialog ikke fragmenteresoverflereskærmbilleder.

GuidelinesDesign brugerdialoger i en samlet dialog •med én samlet afslutningshandling (’send’, ’upload’ etc.). F.eks. kan tilføjelse af tekst til en blog eller et tekstområde på en web-sidebeståafflerehandlingstrin,dersamlesisamme dialog og visning med én tilhørende handlingsknap.hvis en brugerdialog skal opdeles, er det vig-•tigt, at der skabes en sammenhæng i enkelte visninger, f.eks. med en procesindikator.

Vejledende formularer

Formularer er sjældent spændende at udfylde. Derfor er det vigtigt, at det udover at være kede-ligt ikke også bliver en brugermæssig barriere.Vejledende formularer guider brugeren gnidnings-løst igennem indtastningen. De sikrer et sikkert datainput, der overholder en standard, der er let at behandle af andre systemer og/eller brugere.

GuidelinesVejled brugerne gennem indtastningen med •fornuftige overskrifter.opdel indtastningsfelter, f.eks. cpr-nummer i •to felter.undgå for mange fritekstfelter. brug i stedet •drop-down lister og/eller auto complete.

Obligatoriske felter

brugerne bør altid vide hvilke felter, der er obli-gatoriske og hvilke, der er valgfrie, når de skal udfylde en formular.Guidelines

Hvisdeflestefeltererobligatoriskeanvendda•betegnelsen ”(Valgfri)” til højre for overskriften for feltet.Hvisdeflestefelterervalgfrieanvendda*•(hævet stjerne) til højre for overskriften for feltet.Markeringer anvendes kun, hvis ikke alle felter •er enten obligatoriske eller valgfrie.supplér gerne markeringer med forklarende •tekst i toppen af formularen.


creuna 2008

8

Grids

For at skabe en stram struktur, der kan styre elementermedfastplaceringsamtdefinereetområde for elementer med vilkårlige placeringer, eretstandardgriddefineret.Dettestandardgridindeholder en topbar med navigationsmenu, et indholdsområde og en bundbar.

alle sider er baseret på en 1-3 kolonne struktur, der er designet til at blive vist i en 1024 x 768 opløsning som minimum.

sidestrukturen vil i udgangspunktet have en vari-able bredde og højde, men i visse tilfælde vil det være nødvendigt at låse elementer til en bestemt størrelse. Det gælder områder med meget tekst, hvor det vil gå udover læsbarheden, hvis teksten fårlovatløbeoverflerekolonner.

sidestrukturGrids


creuna 2008

9

arial regulararial regular anvedes som brødtekst, manchettekst, mellemrubrikker, trompet, og overskrifter i mindre rubrikker.

arial Italicanvendes til citater og billedtekster.

arial Boldanvendes til rubrikker, knapper og andre tekster eller ord der skal fremhæves.

arial Bold Italicanvendes til citater og billedtekster.

The quick brown fox jumps over the lazy dog

arial regular

Arial Italic

arial Bold

Arial Bold Italic

grundelementerskriftvalg


creuna 2008

10

sekundærfarver

Den sekundære farvepalette indeholder to mu-ligheder. enten en ramme for at erstatte den primære blå farve, eller som et supplement af accenter der muliggør en mere ubesværet naviga-tion.

bemærk hvorledes den lyseblå og orangerøde op-træder som henholdsvis link-farve og til primære handlinger.

primærfarver

Farve bruges i cbs’ visuelle identitet til at adskille organisatoriske og uddannelsesmæssige områder. Derfor er gui-designet tilrettelagt således, at den bærende farve vil kunne udskiftes efter organisa-toriske behov.

primærfarvecbs’ primære farve er den blå. Denne bruges både internt og externt som en stærk identitets-markør.

Der er valgt to grå farver til gui-elementerne, idet det gør udskiftning af primærfarven til en nem manøvre.

prIMære farVer

seKUndære farVer

GradIents

Blår: 37g: 58b: 135

Blår: 46g: 63b: 136

r: 46g: 63b: 136

Grår: 190g: 190b: 190

r: 210g: 210b: 210

Lys grår: 230g: 230b: 230

r: 245g: 245b: 245

r: 115g: 137b: 161

r: 250g: 150b: 0

r: 70g: 220b: 70

Mørkegrår: 90g: 90b: 90

r: 0g: 190b: 255

r: 203g: 80b: 51

Lysegrår: 231g: 231b: 231

r: 150g: 50b: 150

grundelementerfarver


creuna 2008

11 grundelementerIkoner

315

Der er udviklet en række standard-ikoner til cen-trale funktioner.

ikonernes formsprog er valgt ud fra den be-tragningerne, at et enkelt og konkret formsprog understøtter cbs’ visuelle udtryk, samt gør det nemt at udvide. ikonerne er hvide , tegnet med en mørkegrå streg.

Der skelnes mellem primære ikoner og applika-tionsspecifikkeikoner.


creuna 2008

12 hovednavigationtopbarre

Topbarenindeholderlogo,brugerprofil,søgefelt,menu samt skillelinje med overskrift og brødkrum-me. Topbaren optræder på alle sider.

Logocbs’ digitale logo anvendes.

Brugerprofilbrugerinformation består af brugerens navn, log ind/ud funktion og funktion til redigering af bruger-profil.

søgefunktionsøgefunktionen består af et søgefelt, en default søgetekst og en søgeknap.

navigationsmenunavigationsmenuen består af en række horison-tale menupunkter og en række vertikale under-menupunkter i en drop down menu. navigationen er således to niveauer dyb. behøves et dybere navigationshierarki kan undermenupunkterne ru-briceres under sigende overskrifter.

Navngivningenafmenupunkterskalaltidreflekteredet præcise indhold af undersiden, og navnene må ikke være for lange.

horisontal skillelinjeDen horisontale skillelinje indeholder en overskrift for de respektive sider og en brødkrumme.

brødkrummen er ordnet således: home/side/un-dersider. For esDh-systemet er home lig med en pågældende Dossier: Dossier/sag.


creuna 2008

13

bundbaren indeholder en skillelinje med en brød-krumme, menupunkter og kontaktinformation.

horisontal skillelinjeDen horisontale skillelinje indeholder en brød-krumme. brødkrummen er ordnet således: home/side/undersider. For esDh-systemet er home lig med en pågældende Dossier: Dossier/sag.

Menupunkterlisten over menupunkter er en 1:1 kopi af me-nustrukturen samlet i et site map.

KontaktinformationKontaktinformation kan være alt fra cbs’ adresse til en henvisning til webmasterens e-mail.

hovednavigationBundbarre


creuna 2008

14 lokale navigationselementerKnapper, links & dropdowns

lokale handlingselementer er links, knapper, drop downs og er kendetegnet ved ikke at være en del af top- og bundbar. De placeres i sammenhæng med de indholdselementer, de er relateret til og/ellerudøverindflydelsepå,f.eks.enGodkend-knap.

Knapper

primære handlingerKnapper til primære handlinger anvendes, når brugeren har behov for at udføre handlinger, der har karakter af at være primære handlinger på en side, f.eks. godkend, send og opret.Disse knapper placeres til højre for den sekundære handling.

Font: arial boldstørrelse: 12roll over effekt: underscore

sekundære handlingerKnapper til sekundære handlinger er alternativer til primære handlinger, f.eks. annullér, Fortryd og Tilbage,ogderforerdegrafiskvægtetmindreendprimære handlinger.tDisse knapper placeres til venstre for den primære handling.

Font: arial regularstørrelse: 12roll over effekt: underscore

Links

navigationnavigationslinks henviser til undersider.De placeres typisk som selvstændige links i et ind-holdselementer eller i forbindelse med en andre links,tekstellergrafiskelement.De kan f.eks. optræde i en liste over mest læste nyheder eller som læs også links i forlængelse af

en tekst, hvor det vil være oplagt for en bruger at finderelateredehistorier.

Font: arial regularstørrelse: 11roll over effekt: lys blå

Læs merelæs mere links henviser brugeren til yderligere in-formation typisk i forbindelse med et tekstelement.De placeres i forlængelse af en manchettekst.

Font: arial regularstore bogstaverstørrelse: 10roll over effekt: lys blå / underscore

handlinghandlingslinks placeres i forlængelse af rediger-bare indholdselementer. Det kunne være et link til en redigeringsside for Mine Feeds, hvor brugeren kan ændre fødekilden. De adskiller sig fra navi-gationslinks og læse mere links ved ikke blot at videresende brugeren, men være en handling, der fører til en ændring af et element.

andre handlingselementer

drop down listerDrop down lister anvendes typisk i formularer eller anden form for inputdialog, hvor standardinput kan sikres ved, at brugeren vælger input fra en drop down liste.

Inputfelterinputfelter anvendes typisk i formularer eller an-den form for inputdialog, hvor der er behov for at kunne indtaste fritekst.

tjekboksTjekbokse anvendes typisk i formularer eller an-den form for inputdialog, hvor der er behov for at angive en boolesk enhed.


creuna 2008

15

Tekster kan præsenteres i tre formater:

Kort format: Mellemrubrik, Manchettekstog læs mere link

halvlangt format: rubrik, Trompet, Mellemrubrik, Manchettekst og læs mere link

fuldt format: rubrik, Trompet, Mellemrubrik, ar-tikeltekst og eventuelt links til relateret information

funktioner

artikeloverskriftFont: arial boldstørrelse: 36 pxFarve: Mørkegrå

ManchettekstManchettekst er en kort sammenfatning af en tekst og anvendes typisk i en liste over f.eks. ny-heder. Manchetteksten indeholder en trompet og en sammenfattende tekst på maksimum 3 linjer. efter manchetteksten placeres et læs mere link.

Font: arial regularstørrelse: 16 pxFarve: Mørkegrå

Underoverskrift i artiklerFont: arial boldstørrelse: 11 pxFarve: Mørkegrå

trompetTrompet er en markering af f.eks. en artikelkat-egori. Den placeres typisk før en underoverskrift eller manchettekst.

Font: arial regularbaggrundsfarver: cbs blåstørrelse: 10 pxFarve: hvid

BrødtekstBrødtekstdefinererstandardtekstfornyheder,information, manchettekst og lignende.

Font: arial regularstørrelse: 11 pxFarve: Mørkegrå

artikeloverskrift i mindre rubrikkeranvendes til overskrifter på artiklers man-chettekst.Kan også anvendes som underoverskrift på artikler på artiklens hovedside.

Font: arial regularstørrelse: 16 px

Legend- / listeoverskriftanvendes som overskrift på lister og tabeller.

Font: arial boldstørrelse: 14Farve: cbs blå

Liste rubriklisterubrik anvendes som overskrift på lister, f.eks. listen relaterede artikler eller Mest læste nyheder.

Font: arial bold / store bogstaverstørrelse: 9roll over effekt: underscore

indholdselementtekstformattering


creuna 2008

16

Billed- og grafikelementer

Billed-oggrafikelementererenrækkefastdefi-neredestandardelementer,hvoribillederoggrafikkan placeres.

Disse elementer skal så vidt muligt anvendes for atsikrekonsistensibilled-oggrafikvisningen.Erder behov for afvigelser fra standardelementerne kan højden varieres eller specielle layoutfelter anvendes.

følgende formater anvendesGrafik:GIFbilleder: Jpeganimationer: Flash

størrelser

standardelement #1bredde: 286 pxhøjde: 100 px




indholdselementerBilledfelter

1

2

3

41

1

1 2

3

3


creuna 2008

17 indholdselementListevisning

Listevisning

en listevisning kan anvendes i søgeresultatliste eller i forbindelse med indholdslister.

i en listevisning kan det korte tekstformat med fordel anvendes (Det kort tekstformat består af: underoverskrift 1, Manchettekst og læs mere link).


creuna 2008

18

Organisatoriske

organisatoriske indholdselementer er indhold, der leveres af redaktører, webmastere og andre med skriverettigheder.

personlige indholdselementer kan indeholde et handlingslink nederst i elementet adskilt fra ind-holdet med en hårstreg.

personlige

personlige indholdselementer indeholder person-aliseret indhold, f.eks. favoritlinks og favorit feeds.

personlige indholdselementer kan indeholde et handlingslink nederst i elementet adskilt fra ind-holdet med en hårstreg.

indholdselementerOrganisatoriske / personlige


creuna 2008

19

formularer

Formularer centrerer sig om brugerinput, f.eks. selvbetjeningsdialoger. De indeholder indtast-ningsfelter og overskrifter og kan suppleres med drop down lister og tjekbokse.

Ved lange formularfelter bør en opdeling over-vejes, f.eks. ved lange selvbetjeningsdialoger. Det vil resultere i en række relaterede indholdsfelter, der hver har deres eget indhold og en sigende overskrift (legend).

indholdselementerformularer


creuna 2008

20

selvbetjeningsløsning

selvbetjeningsløsninger kan indeholde de samme gui-elementer som formularer.

Ved lange selvbetjeningsløsninger bør en opdeling af sider overvejes. i sådanne tilfælde skal selv-betjeningsløsningen suppleres af en procesbar, der udgøres af overskrifter på de enkelte sider.selvbetjeningsløsninger skal indlejres i indhold-sområdet på siden. Den må ikke optræde i en pop-up.

indholdselementerselvbetjening


creuna 2008

21 indholdselementerhårstreger

hårstreger

hårstreger er et strukturelt indholdselement, der bruges til at adskille eller gruppere indholdsele-menter. eksempelvis en liste (se illustration)

hårstreger kan være horisontale eller vertikale.

hårstregTykkelse: 1 pixelFarve: r:90, g: 90, b: 90


creuna 2008

22 outlook formularpop-up

Gem dokument fra Outlook

Denne pop-up vises, når en bruger forsøger at gemme et dokument til esDh fra outlook. Den overholder samme gui-principper som andre in-putdialoger, men har inden brødkrumme.


creuna 2008

23 eksempler


creuna 2008

24 eksemplerintranet forside


creuna 2008

25 eksemplerartikelside


creuna 2008

26 eksemplerlistevisning


creuna 2008

27 eksempleresDh / Dossierforside


creuna 2008

28 supplerende grafiske elementer


creuna 2008

29 listertabeller


creuna 2008

30 listerstatistiske diagrammer


creuna 2008

31 listerprocesdiagrammer


creuna 2008

32 indholdselementerBannere

286 px X 100 px 592 px X 100 px

286 px X 218 px

cbs gui-guide

Documents

cbs websider og systemer

cbs visuelle identitetsprogram

side til side

visuelle grundelementer

tvrs af websider og

system til system

t element

visuelle identitet bestr