Hovedelementer og nøglebegreber.
User-centered design (UCD)
Responsivt webdesign handler om at bruge HTML og CSS til automatisk at ændre størrelse, skjule, formindske eller
forstørre et websted for at få det til at se godt ud på alle enheder (computere, tablets og telefoner).
Brugercentreret design (UCD) er en designfilosofi, det vil sige en metode til design,
hvor der er stor opmærksomhed på brugerens behov og ønsker omkring det endelige produkt,
men også dets begrænsninger.
Brugercentreret design er særligt vigtigt i design af hjemmesider, grænseflader og applikationer.
Begrebet brugercentreret design definerer også processen med
design, der tager denne filosofi til sig, og hvor slutbrugerne også er involveret for at sikre behagelig og tilfredsstillende brug.
- Brugeroplevelse: fra strategi til planlægning (kognitiv, usability, ...)
- Brugergrænseflade: visuelt design, der giver os mulighed for at garantere en brugbar grænseflade for brugerne takket være de oplysninger, der indsamles fra brugeroplevelsen
Kilde: W3School Hjemmesiden - W3School.com.
Usability
Definition: effektivitet, effektivitet og tilfredshed, hvormed visse brugere kan nå bestemte mål
i bestemte brugsmiljøer.
Usability er den grad, i hvilken et produkt kan bruges af bestemte brugere til at opnå bestemte mål med effektivitet, effektivitet og tilfredshed i en specifik brugssammenhæng.
Husk:
Funktionalitet: nøjagtighed, hvormed brugerne opnår mål
Effektivitet:de ressourcer, der bruges på at nå målet
Tilfredshed: brugerkomfort under oplevelse
Lærbarhed:let at lære (for nybegyndere)
Mindeværdighed: let at huske (for afslappede brugere)
Kilde: Rold, M. (2021). Interfacedesign: Fra idé til digital prototype. 1. udgave, 2. oplag. København: Samfundslitteratur, fra side 14.
Usability.
Kilde: Rold, M. (2021). Interfacedesign: Fra idé til digital prototype. 1. udgave, 2. oplag. København: Samfundslitteratur, side 16.
Noter om centrale elementer
Meta Tag til Viewport
For en responsiv hjemmeside er det vigtigt at tilføje meta-tagget til viewporten i hovedet på HTML-dokumentet. Dette tag giver
dig mulighed for at styre visningen på mobile enheder og tilpasse siden korrekt til skærmstørrelsen.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
width=device-width: Indstil sidebredden, så den passer til enhedens skærmbredde.
initial-scale=1.0: Indstil det oprindelige zoomniveau til 1 uden forstørrelse.
Media Queries
Media Query er et af de vigtigste værktøjer til responsivt design.
De giver dig mulighed for at anvende forskellige CSS-stile afhængigt af skærmstørrelsen eller andre enhedsegenskaber. Hver medieforespørgsel er en betingelse, der giver dig mulighed for at anvende specifikke CSS-regler på forskellige skærmstørrelser.
Eksempel:
/* Medieforespørgsel til små skærme (mobil) */
@media (maks. bredde: 768px) {
.container {
polstring: 10px;
}
/* Medieforespørgsel til meget store skærme (desktop) */
@media (min-bredde: 1024px) {
.container {
bredde: 70 %;
}
Responsive billeder
illeder skal passe til skærmstørrelsen for at undgå at blive for store eller for små.
For at gøre dette kan du bruge attributten max-width: 100% i CSS,
som forhindrer billeder i at overskride bredden af deres container.
Responsiv typografi
Typografi skal kunne tilpasses skærmstørrelse.
Du kan bruge relative måleenheder såsom em, rem eller vw for at få teksten til at flyde.
Husk: Tekster: rem er ligesom ems en måleenhed, der multiplicerer den måling,
den refererer til, men er relativ til rodelementets skriftstørrelse.
1 rem=16px
Hvordan implementeres RWD?
I sitedesignfasen er det vigtigt at definere de såkaldte breakpoints.
Et breakpoint er et punkt på en ideel linje, der starter fra 0,
hvor der sker en ændring af sidelayoutet.
Breakpointer er defineret med numeriske værdier og måleenheder (normalt px), der repræsenterer de opløsninger, som layoutet skal ændres i forhold til.
Hver medieforespørgsel er struktureret med:
- type medie, som reglen gælder for: skærm
- regeludløser: når reglen udløses. Normalt minimum/maksimum bredde af browservinduet (min-whidt)
- regeludløserværdi: lig med en specifik værdi (480px, 768px osv. ).
Et breakpoint-diagram fungerer som et kvalificeret gæt på, hvor vi forestiller os, at det giver mening at have breakpoints i layoutet (Hay 2013: 92).
DESIGN MOBILE FIRST
Tilgangen til multi-enheds UX og UI design kan være:
- Lodret : udvikler individuelle applikationer, der er optimeret til det miljø, de vil blive brugt i;
- Tværgående : en enkelt tilpasningsdygtig løsning afvist til forskellige enheder – responsivt design.
Og det giver os grænser og nye muligheder:
- Forskellige skærmstørrelser (og dermed visningsporte) og forskellige enheder (medieforespørgsler til genkendelse af enhed og visningsportstørrelse)
- Værktøjer såsom kamera, mikrofon, accelerometer, gyroskop og kompas, GPS
- Tryk (større unøjagtighed) / fingerbrugbarhed (knapstørrelser)
- Gestik (tryk, dobbelttryk, træk, svirp, knib, spred, tryk)
User scenarios
Enhedens specifikke indhold skal vurderes ud fra konteksten:
hvad vil brugeren sætte mest pris på i en given situation og i et givet miljø?
Den bedste måde at planlægge disse problemer på på forhånd er at lave såkaldte brugerscenarier
FORESTIL DIG ALTID, HVORDAN BRUGERNE VIL OPFØRE I EN GIVET SITUATION
Se på det relaterede projekt
Mobile-first design eksempel.
GRUNDLÆGGENDE PRINCIPPER:
- Tilpas layoutet til det størst mulige antal skærmopløsninger
- Juster størrelsen på billederne
- Forenkle layoutet
- Skjul ikke-væsentlige genstande
- Giv en grænseflade, der er egnet til berøringsinteraktion
Nogle vigtige forskelle
User Experience (UX):
Fokuserer på den overordnede brugeroplevelse, når man interagerer med et produkt, system eller service. Det omfatter faktorer som brugervenlighed, effektivitet, tilfredshed og følelser.
Formål:
Gør interaktionen enkel, effektiv og behagelig. Målet er at løse problemer og tilfredsstille brugernes behov.
Hovedaspekter:
Brugerundersøgelser (interviews, undersøgelser, markedsanalyser).
Design af navigationsflowet (brugerflow).
Informationsarkitektur.
Usability test.
Praktisk eksempel
Beslutter, hvordan en flybooking-app skal fungere, og sikrer, at brugeren kan gennemføre reservationen i nogle få trin.
User Interface (UI):
Omhandler de visuelle og interaktive elementer i en grænseflade, såsom layout, knapper, farver, typografi og grafisk design.
Formål:
Skab en grænseflade, der er æstetisk tiltalende og nem at bruge, hvilket sikrer, at alle visuelle elementer er konsistente og intuitive.
Hovedaspekter:
Valg af farver, skrifttyper og ikoner.
Oprettelse af high-fidelity prototyper.
Animationer og visuelle interaktioner.
Visuel sammenhæng (f.eks. brug af designsystemer).
Praktisk eksempel
Design knappen "Bestil nu", så den er synlig, iøjnefaldende og strategisk placeret.
Personlig refleksion:
De grundlæggende principper for at skabe et responsivt websted i HTML og CSS inkluderer
brugen af metatags til viewporten, flydende layouts, medieforespørgsler, responsive billeder og typografi og mobilvenlig navigation.
Ved at implementere disse koncepter kunne jeg se, at hjemmesiden
er i stand til effektivt og optimalt at tilpasse sig en række forskellige enheder og skærmopløsninger.
Ydermere er det vigtigt, inden man begynder at kode og designe en hjemmeside,
at stille sig selv nogle grundlæggende spørgsmål i forhold til indholdet.
Faktisk er det baseret på indholdet, at vi skal organisere og administrere vores rum.
INDHOLDSPRIORITET
1. Hvilket indhold indsætter vi på siden?
2. Medtager vi det samme indhold til mobile enheder?
3. I hvilken rækkefølge placerer vi indholdet?
4. Hvordan håndterer vi overflødigt indhold?
Løsning: Lav en liste over alt det indhold,
der skal præsenteres, og sorter listen fra de vigtigste elementer til de mindst vigtige for hver enhed.
Alle emner