Graphic User Interface Guide
Š 2008
copenhagen business school GUI - graphic user interface guide Creuna 2008
GUI-guidens formål Denne GUI-guide (Graphic User Interface) er en konceptbeskrivelse til brug for design af skærmbilleder 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 ensartethed i design, grafisk udtryk og brugervenlighed på tværs af CBS’ digitale univers. GUI-guiden beskriver elementer, der kan implementeres 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 principper, der bør danne grundlag for videre udvikling og brug. GUI-guiden henvender sig primært til systemadministratorer, kommunikationsmedarbejdere og andre medarbejdere på CBS med ansvar for opbygning af websider og applikationsvinduer. Derfor beskriver GUI-guiden ikke, hvordan brugerne skal anvende et system eller bestemt funktioner på en side. Denne beskrivelse skal findes i CBS’ brugermanualer.
2
Indholdsfortegnelse
GUI-guidens form책l
2
Indholdfortegnelse
3
Principper for design & layout
4
Visuelt udgangspunkt
5
Principper for god brugervenlighed
Tekstformattering
15
Billedfelter
16
Listevisning
17
6
Indholdselementer Organisatoriske / Personlige
18
Grids
8
Formularer
19
Skriftvalg
9
Selvbetjening
20
Farver
10
H책rstreger
21
Ikoner
11
Pop-up
22
Topbarre
12
Eksempler
23
Bundbarre
13
Supplerende grafiske elementer
28
Knapper, links & dropdowns
14
copenhagen business school GUI - graphic user interface guide Creuna 2008
Principper for design & layout Genkendelighed Når GUI-elementer skal implementeres i CBS’ digitale univers er det ambitionen, at hvert element bidrager til en homogen og konsistent brugeroplevelse 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 genkendelighed på tværs af websider og systemer skabes en brugervenlighed og visuel konsistens i en organisatorisk kontekst. Venstrestil elementer Skærmbilleder med kun et element i indholdsområ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 side Alle sider skal implementere en top- og bundbar for at fastholde en ensartet brugeroplevelse. Dette giver brugeren mulighed for at navigere hen til alle sider uanset, hvor brugeren befinder sig.
4
CBS’ Visuelle identitet Visuelt udgangpunkt
copenhagen business school GUI - graphic user interface guide
5
Creuna 2008
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 grafisk udtryk, der fremstår enkelt og klassisk. 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 grafisk element. Farver bruges til at adskille kommunikationen for forskellige funktioner og instanser i organisationen. Farver bruges enkeltvis, hvilket understøtter den grafiske klarhed. Udtoninger af 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.
Usability guidelines Principper for god brugervenlighed 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. Guidelines • Der 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: • Angiv med en klar grafisk markering, hvor fejlen er opstået og dermed også, hvor den kan rettes. Den grafiske markering skal arve farve fra fejlfeedback-beskeden og skal suppleres af tekst om, hvad fejlen er, og hvordan den kan rettes. • Ved korrektion af fejlen skal en grafisk 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. Guidelines • Brugerens profil skal bestemme tilgæ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
copenhagen business school GUI - graphic user interface guide
6
Creuna 2008
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 at træffe ”gode” valg i et workflow. Primære handlinger 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”. Guidelines • Overvej 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. Guidelines • Angiv en tydelig feedback fra de valgte menupunkter. • Indsæt en brødkrumme.
copenhagen business school GUI - graphic user interface guide Creuna 2008
Multiple indgange
Flow
Obligatoriske felter
Multiple indgange tilbyder mange forskellige indgange til samme information. De forbinder en kompleks digital infrastruktur og de utallige brugssituationer. I en kompleks digital infrastruktur med en meget differentieret målgruppe og et utal af brugssituationer skaber multiple indgange muligheder for en differentieret brug, der passer til de enkelte brugerbehov.
Det er vigtigt for brugeroplevelsen, at sammenhængende dialoger ikke isoleres men i stedet samles. Flow opstår når en brugerdialog ikke fragmenteres over flere skærmbilleder.
Brugerne bør altid vide hvilke felter, der er obligatoriske og hvilke, der er valgfrie, når de skal udfylde en formular. Guidelines • Hvis de fleste felter er obligatoriske anvend da betegnelsen ”(Valgfri)” til højre for overskriften for feltet. • Hvis de fleste felter er valgfrie anvend da * (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.
Guidelines • Opret 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 justin-place information. Det er information, brugerne 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ærmen, så brugerne ikke behøves at printe en tekst uanset dens længde. Guidelines • Undgå at teksten løber over mere end to spalter i GUI’ens grid. • Bredden på tekstelementer skal låses fast, så læsbarheden ikke forringes, hvis brugeren udvider vinduet og siden dermed skaleres.
Guidelines • Design 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 webside bestå af flere handlingstrin, der samles i samme dialog og visning med én tilhørende handlingsknap. • Hvis en brugerdialog skal opdeles, er det vigtigt, 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 kedeligt ikke også bliver en brugermæssig barriere. Vejledende formularer guider brugeren gnidningsløst igennem indtastningen. De sikrer et sikkert datainput, der overholder en standard, der er let at behandle af andre systemer og/eller brugere. Guidelines • Vejled 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.
7
Sidestruktur Grids
copenhagen business school GUI - graphic user interface guide
8
Creuna 2008
Grids For at skabe en stram struktur, der kan styre elementer med fast placering samt definere et område for elementer med vilkårlige placeringer, er et standardgrid defineret. Dette standardgrid indeholder 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 variable 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år lov at løbe over flere kolonner.
Grundelementer Skriftvalg
copenhagen business school GUI - graphic user interface guide Creuna 2008
The quick brown fox jumps over the lazy dog
Arial Regular Arial Regular anvedes som brødtekst, manchettekst, mellemrubrikker, trompet, og overskrifter i mindre rubrikker.
Arial Regular
Arial Italic Anvendes til citater og billedtekster. Arial Bold Anvendes til rubrikker, knapper og andre tekster eller ord der skal fremhĂŚves. Arial Bold Italic Anvendes til citater og billedtekster.
Arial Italic
Arial Bold
Arial Bold Italic
9
Grundelementer Farver
copenhagen business school GUI - graphic user interface guide Creuna 2008
PrimærE farver
Primærfarver Mørkegrå R: 90 G: 90 B: 90
Blå R: 37 G: 58 B: 135
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 organisatoriske behov.
Lysegrå R: 231 G: 231 B: 231
Primærfarve CBS’ primære farve er den blå. Denne bruges både internt og externt som en stærk identitetsmarkør.
Gradients Blå R: 46 G: 63 B: 136
10
R: 46 G: 63 B: 136
Grå R: 190 G: 190 B: 190
R: 210 G: 210 B: 210
Lys grå R: 230 G: 230 B: 230
SEKUNDÆRE farver
R: 245 G: 245 B: 245
Der er valgt to grå farver til GUI-elementerne, idet det gør udskiftning af primærfarven til en nem manøvre.
Sekundærfarver
R: 115 G: 137 B: 161
R: 0 G: 190 B: 255
R: 150 G: 50 B: 150
R: 250 G: 150 B: 0
R: 203 G: 80 B: 51
R: 70 G: 220 B: 70
Den sekundære farvepalette indeholder to muligheder. Enten en ramme for at erstatte den primære blå farve, eller som et supplement af accenter der muliggør en mere ubesværet navigation. Bemærk hvorledes den lyseblå og orangerøde optræder som henholdsvis link-farve og til primære handlinger.
Grundelementer Ikoner
copenhagen business school GUI - graphic user interface guide
11
Creuna 2008
Der er udviklet en række standard-ikoner til centrale funktioner.
5
31
Ikonernes formsprog er valgt ud fra den betragningerne, 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 applikations specifikke ikoner.
Hovednavigation Topbarre
copenhagen business school GUI - graphic user interface guide
12
Creuna 2008
Topbaren indeholder logo, brugerprofil, søgefelt, menu samt skillelinje med overskrift og brødkrumme. Topbaren optræder på alle sider. Logo CBS’ digitale logo anvendes. Brugerprofil Brugerinformation består af brugerens navn, log ind/ud funktion og funktion til redigering af brugerprofil. Søgefunktion Søgefunktionen består af et søgefelt, en default søgetekst og en søgeknap. Navigationsmenu Navigationsmenuen består af en række horisontale menupunkter og en række vertikale undermenupunkter i en drop down menu. Navigationen er således to niveauer dyb. Behøves et dybere navigationshierarki kan undermenupunkterne rubriceres under sigende overskrifter. Navngivningen af menupunkter skal altid reflektere det præcise indhold af undersiden, og navnene må ikke være for lange. Horisontal skillelinje Den horisontale skillelinje indeholder en overskrift for de respektive sider og en brødkrumme. Brødkrummen er ordnet således: Home/Side/Undersider. For ESDH-systemet er Home lig med en pågældende Dossier: Dossier/Sag.
Hovednavigation Bundbarre
copenhagen business school GUI - graphic user interface guide
13
Creuna 2008
Bundbaren indeholder en skillelinje med en brødkrumme, menupunkter og kontaktinformation. Horisontal skillelinje Den horisontale skillelinje indeholder en brødkrumme. Brødkrummen er ordnet således: Home/ Side/Undersider. For ESDH-systemet er Home lig med en pågældende Dossier: Dossier/Sag. Menupunkter Listen over menupunkter er en 1:1 kopi af menustrukturen samlet i et site map. Kontaktinformation Kontaktinformation kan være alt fra CBS’ adresse til en henvisning til webmasterens e-mail.
Lokale navigationselementer Knapper, links & dropdowns
copenhagen business school GUI - graphic user interface guide
14
Creuna 2008
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/ eller udøver indflydelse på, f.eks. en Godkendknap.
Knapper Primære handlinger Knapper 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 Bold Størrelse: 12 Roll over effekt: Underscore Sekundære handlinger Knapper til sekundære handlinger er alternativer til primære handlinger, f.eks. Annullér, Fortryd og Tilbage, og derfor er de grafisk vægtet mindre end primære handlinger.t Disse knapper placeres til venstre for den primære handling. Font: Arial Regular Størrelse: 12 Roll over effekt: Underscore
Links Navigation Navigationslinks henviser til undersider. De placeres typisk som selvstændige links i et indholdselementer eller i forbindelse med en andre links, tekst eller grafisk element. 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 finde relaterede historier. Font: Arial Regular Størrelse: 11 Roll over effekt: Lys blå Læs mere Læs mere links henviser brugeren til yderligere information typisk i forbindelse med et tekstelement. De placeres i forlængelse af en manchettekst. Font: Arial Regular Store bogstaver Størrelse: 10 Roll over effekt: Lys blå / Underscore Handling Handlingslinks placeres i forlængelse af redigerbare indholdselementer. Det kunne være et link til en redigeringsside for Mine Feeds, hvor brugeren kan ændre fødekilden. De adskiller sig fra navigationslinks 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 lister Drop 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. Inputfelter Inputfelter anvendes typisk i formularer eller anden form for inputdialog, hvor der er behov for at kunne indtaste fritekst. Tjekboks Tjekbokse anvendes typisk i formularer eller anden form for inputdialog, hvor der er behov for at angive en boolesk enhed.
Indholdselement Tekstformattering
copenhagen business school GUI - graphic user interface guide
15
Creuna 2008
Tekster kan præsenteres i tre formater: Kort format: Mellemrubrik, Manchettekst og Læs mere link Halvlangt format: Rubrik, Trompet, Mellemrubrik, Manchettekst og Læs mere link Fuldt format: Rubrik, Trompet, Mellemrubrik, Artikeltekst og eventuelt links til relateret information
Funktioner Artikeloverskrift Font: Arial Bold Størrelse: 36 px Farve: Mørkegrå Manchettekst Manchettekst er en kort sammenfatning af en tekst og anvendes typisk i en liste over f.eks. nyheder. Manchetteksten indeholder en trompet og en sammenfattende tekst på maksimum 3 linjer. Efter manchetteksten placeres et Læs mere link. Font: Arial Regular Størrelse: 16 px Farve: Mørkegrå Underoverskrift i artikler Font: Arial Bold Størrelse: 11 px Farve: Mørkegrå
Trompet Trompet er en markering af f.eks. en artikelkategori. Den placeres typisk før en underoverskrift eller manchettekst. Font: Arial Regular Baggrundsfarver: CBS Blå Størrelse: 10 px Farve: Hvid Brødtekst Brødtekst definerer standardtekst for nyheder, information, manchettekst og lignende. Font: Arial Regular Størrelse: 11 px Farve: Mørkegrå Artikeloverskrift i mindre rubrikker Anvendes til overskrifter på artiklers manchettekst.Kan også anvendes som underoverskrift på artikler på artiklens hovedside. Font: Arial Regular Størrelse: 16 px Legend- / listeoverskrift Anvendes som overskrift på lister og tabeller. Font: Arial Bold Størrelse: 14 Farve: CBS Blå Liste rubrik Listerubrik anvendes som overskrift på lister, f.eks. listen Relaterede artikler eller Mest læste nyheder. Font: Arial Bold / Store bogstaver Størrelse: 9 Roll over effekt: Underscore
Indholdselementer Billedfelter
copenhagen business school GUI - graphic user interface guide Creuna 2008
1
Billed- og grafikelementer
2
Billed- og grafikelementer er en række fast definerede standardelementer, hvori billeder og grafik kan placeres.
3
3
4
1
3
1
Disse elementer skal så vidt muligt anvendes for at sikre konsistens i billed- og grafikvisningen. Er der behov for afvigelser fra standardelementerne kan højden varieres eller specielle layoutfelter anvendes. Følgende formater anvendes Grafik: GIF Billeder: JPEG Animationer: Flash
Størrelser 1
16
2
Standardelement #1 Bredde: 286 px Højde: 100 px Standardelement #2 Bredde: 592 px Højde: 100 px Standardelement #3 Bredde: 286 px Højde: 218 px Standardelement #4 Bredde: 593 px Højde: 218 px
Indholdselement Listevisning
copenhagen business school GUI - graphic user interface guide
17
Creuna 2008
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).
Indholdselementer Organisatoriske / Personlige
copenhagen business school GUI - graphic user interface guide
18
Creuna 2008
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 indholdet med en hürstreg.
Personlige Personlige indholdselementer indeholder personaliseret indhold, f.eks. favoritlinks og favorit feeds. Personlige indholdselementer kan indeholde et handlingslink nederst i elementet adskilt fra indholdet med en hĂĽrstreg.
Indholdselementer Formularer
copenhagen business school GUI - graphic user interface guide
19
Creuna 2008
Formularer Formularer centrerer sig om brugerinput, f.eks. selvbetjeningsdialoger. De indeholder indtastningsfelter og overskrifter og kan suppleres med drop down lister og tjekbokse. Ved lange formularfelter bør en opdeling overvejes, 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).
Indholdselementer Selvbetjening
copenhagen business school GUI - graphic user interface guide
20
Creuna 2008
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 selvbetjeningsløsningen suppleres af en procesbar, der udgøres af overskrifter på de enkelte sider. Selvbetjeningsløsninger skal indlejres i indholdsområdet på siden. Den må ikke optræde i en pop-up.
Indholdselementer Hårstreger
copenhagen business school GUI - graphic user interface guide
21
Creuna 2008
Hårstreger Hårstreger er et strukturelt indholdselement, der bruges til at adskille eller gruppere indholdselementer. Eksempelvis en liste (se illustration) Hårstreger kan være horisontale eller vertikale. Hårstreg Tykkelse: 1 pixel Farve: R:90, G: 90, B: 90
Outlook formular Pop-up
copenhagen business school GUI - graphic user interface guide
22
Creuna 2008
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 inputdialoger, men har inden brødkrumme.
Eksempler
copenhagen business school GUI - graphic user interface guide Creuna 2008
23
Eksempler Intranet forside
copenhagen business school GUI - graphic user interface guide Creuna 2008
24
Eksempler Artikelside
copenhagen business school GUI - graphic user interface guide Creuna 2008
25
Eksempler Listevisning
copenhagen business school GUI - graphic user interface guide Creuna 2008
26
Eksempler ESDH / Dossierforside
copenhagen business school GUI - graphic user interface guide Creuna 2008
27
Supplerende grafiske elementer
copenhagen business school GUI - graphic user interface guide Creuna 2008
28
Lister Tabeller
copenhagen business school GUI - graphic user interface guide Creuna 2008
29
Lister Statistiske diagrammer
copenhagen business school GUI - graphic user interface guide Creuna 2008
30
Lister Procesdiagrammer
copenhagen business school GUI - graphic user interface guide Creuna 2008
31
Indholdselementer Bannere
copenhagen business school GUI - graphic user interface guide Creuna 2008
592 px X 100 px
286 px X 100 px
286 px X 218 px
32