Lille grå tekst på en rodet baggrund. Dine øjne anstrenger sig, før du er færdig med den første sætning. Den følelse er grunden til, at UI i forhold til UX betyder noget for dit brand. Når layout og farver kæmper mod budskabet, går folk uden at fortælle dig hvorfor.
UI i forhold til UX sammenligner udseende af grænsefladen med den samlede oplevelse og succes med at gennemføre opgaver. Her forklarer vi, hvad det betyder i et enkelt sprog, hvorfor det påvirker din hjemmeside og marketing, og hvordan du bruger det uden at fare vild i jargon. Du ser også, hvordan begrebet UX design passer ind i det samme billede. Lad os gå det igennem trin for trin.
Sådan forstår du UI i forhold til UX
UI i forhold til UX sammenligner udseende af grænsefladen med den samlede oplevelse og succes med at gennemføre opgaver.
Hvad UX design er, og hvad UI er, overlapper på små hjemmesider, men er delt i apps.
Stærke produkter har brug for både flows, der kan bruges, og klare visuelle elementer.
Sådan vælger du det, der passer til dit brand
Ret forvirrende trin i kassen, før du finpudser farver på knapper.
Sammenlign din nuværende hjemmeside med test af brugervenlighed og principper for UI design for hurtigt at se huller.
Skriv to regler ned, du vil følge på hver ny side, så beslutninger forbliver konsistente.
Praktisk tjekliste, du kan bruge i dag
Ret forvirrende trin i kassen, før du finpudser farver på knapper.
Når du gennemgår en side, så spørg, om UI i forhold til UX er synlig inden for den første scrolling på mobil. Hvis ikke, så omarranger sektioner, før du finpudser detaljer.
Gem skærmbilleder før og efter ændringer, så du lærer, hvad der flyttede noget for UI i forhold til UX på din hjemmeside.
Del den tjekliste med alle, der opdaterer din hjemmeside, så begrebet UX design forbliver konsistent på tværs af nye sider.
Vælg én måling at følge denne måned, som tid på siden eller påbegyndte formularer, så ændringer i design knytter sig til resultater for forretningen og ikke kun smag.
Hvordan det emne hænger sammen med dit bredere brand
Visuelle valg bor sjældent kun på én side. Hvad UX design er, og hvad UI er, overlapper på små hjemmesider, men er delt i apps.
Dine opslag på sociale medier, e-mails og trykte stykker bør ekkoe det samme hierarki, de samme farver og de samme regler for skrift, du bruger på nettet.
Når visuelle elementer for brandet driver fra hinanden, føler kunder en subtil uoverensstemmelse, selv om de ikke kan forklare den.
Brug design centreret om brugeren til at sammenligne noter med et relateret kapitel i dette modul.
Stærke produkter har brug for både flows, der kan bruges, og klare visuelle elementer.
Almindelige spørgsmål, folk overser
Sekundære udtryk som begrebet UX design, begrebet UI design hjælper dig med at søge efter dybere eksempler og sammenligne dit arbejde med almindelige standarder.
Hvad UX design er, og hvad UI er, overlapper på små hjemmesider, men er delt i apps.
Skriv én ændring før og efter ned, du vil teste på en live side i denne uge. Små målte rettelser slår vage planer.
Hvis du lærer dit team et fælles ordforråd om UI i forhold til UX, mindsker det runder med revision med designere og bureauer.
Værktøjer, der gør visuelle opdateringer lettere
Du behøver ikke egen kode for at forbedre mange problemer med layout og stil. En visuel editor lader dig justere luft, farver og typografi, mens du ser forhåndsvisninger på mobil og computer.
WEMASY indeholder en hjemmesidebygger med visuel redigering, så du kan udgive ændringer uden at vente på en udvikler ved hver justering. Åbn hjemmesidebyggeren, når du er klar til at bruge det, du har lært.
Når du udgiver opdateringer, så tjek igen test af brugervenlighed og principper for UI design, så modulet forbliver forbundet i din hukommelse.
Du har nu en linse til UI i forhold til UX, der virker. Brug den, når du gennemgår din hjemmeside, godkender materialer til marketing eller briefer en designer. Fortsæt med principper for UI design og design centreret om brugeren for at holde momentum i dette modul.
At lære UI i forhold til UX er en færdighed, der kommer gradvist. Vend tilbage til dette kapitel, når du har leveret én forbedring, så idéerne går fra læsning til vane. Små gentagne gennemgange slår at proppe hver regel i på én gang. Hold noter om det, der virkede for din målgruppe, så den næste opdatering går hurtigere.
Ofte stillede spørgsmål
Hvor lang tid tager det at forbedre UI i forhold til UX?
De fleste små virksomheder ser klarere sider inden for få fokuserede sessioner, når de bruger det grundlæggende fra dette kapitel. Start med din forside, og brug så de samme regler på sider om tjenester og kontakt.
Har du brug for en designer til at arbejde med UI i forhold til UX?
En designer hjælper ved komplekse omlægninger af brandet, men mange rettelser omkring UI i forhold til UX kan du selv gøre, når du ved, hvad du skal lede efter. Brug test af brugervenlighed sammen med dette kapitel for relateret vejledning.
Kan WEMASY hjælpe dig med at bruge UI i forhold til UX på din hjemmeside?
WEMASY indeholder en visuel editor i hjemmesidebyggeren, så du kan justere layout, farver og typografi uden kode. Åbn hjemmesidebyggeren for at opdatere skabeloner og se ændringer i forhåndsvisning på mobil.
Hvad er den mest almindelige fejl med UI i forhold til UX?
Folk prøver at rette alt på én gang i stedet for én side ad gangen. Vælg en enkelt prioritet, som læsbarhed eller kontrast, og tjek så principper for UI design for den næste forbedring.
Hvordan hænger UI i forhold til UX sammen med SEO?
Klart visuelt hierarki og skrift, der kan læses, holder besøgende på siden længere, hvilket understøtter signaler om engagement, søgemaskiner holder øje med. Kombinér rettelser af design med solid struktur i indholdet for de bedste resultater.
Hvor bør du lære næste gang efter UI i forhold til UX?
Fortsæt med test af brugervenlighed og principper for UI design i denne bog for at bygge et komplet visuelt system til dit brand online.