Hej, her på siden kan du læse om nogle af de vigtigste ting, man skal have fokus på for, at lave en god og brugervenlig hjemmeside.
Klik på en af nedenstående knapper, for at blive ført til det du gerne vil læse mere om.
Det er vigtigt at udføre brugertest på din hjemmeside. Dette er for at kunne ændre og optimere de ting, som ens målgruppe mener er gode eller skal gøres bedre.
Der er udført en brugertest på denne hjemmeside, under konstuktionen af hjemmesiden. Udfra denne brugertest er svarende taget i betragtning, og nogle af problemerne blev løst.
Nogle af de ting som blev ændret, var tekststørrelsen, samt linjeafstanden. En ting testpersonerne godt kunne have tænkt sig var, at de selv kunne skrue op og ned for skriftstørrelsen, dette er dog ikke kommet med på hjemmesiden.
Det som der skal ændres er lidt mere på det responsive, fordi når man når ned på små skærme, så bliver teksten blev meget småt og afstanden mellem alle afsnittende bliver meget store og ødelægger flowet på siden, dette har dog ikke været muligt at kunne rette op på.
I designverdenen er der fire centrale principper, der udgør rygraden i enhver vellykket grafisk komposition: Contrast, Repitition, Alignment og Proxmity, som omtales som CRAP principperne. Man bruger disse principper, som en vejledning til at lave et visuelt effektiv kommunikationsmiddel.
På denne hjemmeside, er CRAP principperne blevet brugt vejledene.
Kontrast går ud på at fremhæve forskellige elementer. Kontrast er gælder helt fra tekst farve, til farven der ændre sig på din knap.
Ved at anvende kontrast kan man fremhæve vigtige elementer og skabe et visuelt hierarki. Dette kan opnås ved at skabe en foreskel i farve, størrelse, form og tekstur.
På denne hjemmeside, kan man se et eksempel på kontraster. Der er brugt en blå farver i samme farveskala, bare gjort mørkere og lysere.
Derudover kan man se at når man holder musen over, eller klikker på en af knapperne, så skifter den farve til orange.
Dette er for at indikerer at man kan trykke på den og selvom man er farveblind, så kan man se en smule forskel i farven, da orange og blå er modsætninger på farveskalaen.
Repitition er gentagelser, hvilket handler om at skabe enhed og konsistens i et design ved at gentage elementer.
Dette kan være alt fra at gentage farver, former eller mønstre, hvilket giver designet en sammenhængende og enkel fremtoning.
Repitition kan man se er brugt på hjemmesiden her i form af af knapperne er ens, hvilket gør det simpelt, samtidigt med at farverne læner sig op af hindanden, og skaber en rolig fornemmelse i øjnene.
Der er også blevet gentaget med de blå og hvide striber der indeholder et nyt emne, for at gøre det let overskueligt at der er startet noget nyt.
Repitition er også brugt på teksten, da det giver et meget bedre og mere roligt udtryk, at teksten er den samme slags hele vejen.
Alignment refererer til justeringen af elementer, i et design, i forhold til hinanden, for at skabe orden og bedre overblik for brugeren.
Dette gælder både vandret og lodret justering af tekst, billeder og andre grafiske elementer.
Man kan også sige det er en måde at gruppere den tekst og de billeder der befinder sig på siden, således at den tekst og det billede der passer sammen, foreksempel er vandret med hinanden.
Eller at dine klikbare emner, bliver grupperet i en lodret eller vandret navigationsbar.
Målet med alignmentpunktet er at skabe visuelt orden og harmoni, så øjet nemt kan følge og forstå indholdet.
Hvis du ligger mærke til det, så er dette emne om CRAP principperne i en blå sektion, hvilket opdeler det fra de to andre punkter på siden, det er dette man kigger på i alignmentpunktet, altså skal det være nemt at kunne se hvad der høre sammen.
Det samme er det med de tre emne knapper, som ligger vandret under Emner På Denne Side, da de er i en gruppe for sig, bliver det overskuligt da de ligger sammen og man forudser at de har meget samme funktion.
Proximity, altså afstand på dansk, handler meget om det samme, som punktet Alignment.
I Proximity går placeringen mere ud på, at øjet nemt og hurtigt kan se hvad der hører sammen. Altså eksempelvis at tekststykker, som har det samme fokuspunkt og eventuelt et billede, sidder tættere sammen, end nogle af de andre ting, som befinder sig på siden.
Dette gør, at man hurtigt ved, at den tekst og det billede hører sammen.
På denne måde undgår man forvirring og eventuelt misinformation til brugeren.
Dette punkt er igen meget det samme som i Alignment, derfor er det også meget de samme ting man kan se på hjemmesiden her.
Altså at emner og knapper er indelt i hver sin sektion, for at man nemt og tydeligt kan se hvad der hører sammen
POUR-principperne er retningslinjer inden for webtilgængelighed. Principperne er defineret af World Wide Web Consortium (W3C), gennem Web Content Accessibility Guidelines (WCAG).
Principperne er der, fordi man sigter mod at gøre digitale ressourcer mere tilgængelige, for alle personer uanset deres evner og behov.
POUR står for Perceivable (Opfattelig), Operable (Brugbar), Understandable (Forståelig) og Robust (Robust).
Det er ofte ikke noget man ligger mærke til, med mindre man har et andre behov eller nedsatte evner af en art. Det er nemlig noget der ligger i kodningen, og små elementer i dit design, som kan være med til at optimere brugervenligheden ydeligere.
For at opfylde dette princip skal information og brugsgrænseflader præsenteres på en måde, der er opfattelig for alle brugere, uanset deres sanselige evner.
Dette omfatter foreksempel at lave alternativer til ikke-tekstbaseret indhold, såsom billedbeskrivelser for synshandicappede, teksttranskriptioner til lydindhold og tilbyde justerbare skrifttyper og farvekontraster.
Man skal sætte sig ind i hvordan ens målgruppe bevæger sig rundt online. Altså så skal man tage hensyn til en skærmoplæser læser alt den har fået fortalt den skal læse, derfor er det vigtig som den der koder, at man sørger for at alt vigtigt kan blive læst op.
På samme side skal man også sørge for at alt udnødvendigt ikke bliver læst op, foreksempel hvis du har et pyntebillede, som ingen relevans har, så skal man udlade at udfylde en 'alt-text' i sin kodning.
På denne hjemmeside, kan man godt nok ikke visuelt se eksempler på alternativer til ikke-tekstbaseret indhold, medmindre man har en skærmoplæser.
Men det er lavet sådan at, header og footer billederne, ikke har en alternativ tekst, da de udelukket er blevet brugt, som pyntebilleder for et æstetisk pænt udseende.
Header og footer billederne er ikke vigtig information, derfor undlades den alternativetekst, da det kun ville forvirre en med en skærmoplæser.
Dog har billedet ved brugertesten en alternativtekst, da det fortæller hvad der sker i forbindelse med brugertesten, altså at man sætter sig ned sammen og gennemgår hjemmesiden.
Brugbarhedsprincippet er afgørende for at sikre, at alle brugere kan interagere effektivt med de digitale ressourcer.
Dette indebærer at gøre navigationsmekanismer og interaktive elementer tilgængelige via tastatur eller andet input, så personer med motoriske begrænsninger har samme mulighed for at bevæge sig rundt online, som en person uden begrænsinger.
Forståelighedsprincippet fokuserer på, at information og betjening af digitale ressourcer, så som hjemmesider eller apps, er klare og letforståelige for alle brugere, uanset deres baggrund og evner.
Den nemmeste måde at få en smule af forståelighedsprincippet ind på sin hjemmeside, er ved at være meget klar og enkel i ens sprog, samt sørge for at fejlmeldinger uddybende beskriver hvad der er galt
Ens hjemmeside skal være tydelig og ensartet i layoutet, navigationen og designet, da det hjælper med at skabe en mere forudsigelig brugeroplevelse.
Altså hjælper det meget hvis indholdet på en hjemmeside er logisk organiseret, da dette gør det nemt for brugerne at finde det, de leder efter, da de vil kigge efter det de leder efter, hvor det giver mest mening.
Det er også her CRAP-principperne kommer i spil, da en velstruktureret navigation og tydelig hierarki, i form af tekst, farver og grupperinger, hjælper brugere med at orientere sig og forstå forholdet mellem forskellige dele af indholdet.
Som sagt er det her man ser CRAP-principperne komme i spil, og ligesom beskrevet oppe ved CRAP-principperne, så er der brugt få forskellige farver, og meget simpel tekst opstilling, med tydelige mellemrum og farveændring.
Deruover er sproget noget der ville kunne forståes af mange, uanset baggrund.
Robusthedsprincippet er der for at sikre, at alle digitale hjælpemidler vil forblive brugbare og effektive uanset teknologien, browseren og enheden man befinder sig på.
Dette princip sørger for at risikoen for ændringer i standard teknologi, bliver mindsket sådan at webindhold stadig vil være tilgængelig for dem som har brug for ekstra værktøjer for at udføre handlinger online.
For at opfylde robusthedsprincippet på sin hjemmeside, skal man altså sørge for, at man har opmærket sin kode rigtigt, sådan så brugernes hjælpeværktøjer kan aflæse koden korrekt.
Dette princip er ikke noget man tydeligt kan se, er emplementeret på denne hjemmeside, da det er noget, som foregår i kodningen.
I kodningen er der blevet brugt en slags overskrifter, som dikterer i hvilken rækkefølge tingene er vigtigst, altså er en h1 vigtigere end en h2, da h1 altid bliver brugt, som den størte overskrift på hjemmesiden.
Dette hjælper skærmoplæseren til at finde ud af hvilken rækkefølge den skal læse tekten op i.
Derudover er teksten delt op i sektioner, sådan så skærmoplæseren ved hvornår der er et afsnit.
