UI – User Interface – Brukergrensesnittet
Sjansen er veldig stor for at du ikke fortsetter å lese fordi teksten er så rotete lagt ut.
Det handler om hvordan ting ser ut: knapper, farger, ikoner, tekst og layout. UI er det visuelle designet som brukeren ser og samhandler med.
Det er viktig at brukeren får gode opplevelser når hun/han besøker en nettside eller en app. La oss se nærmere på brukergrensesnitt og så etterpå brukeropplevelsen.
UI
Farger og tekst
Kan du se tallene?
Knapper
Hvordan er din opplevelse med følgende……?
Farger og tekst / typografi
Denne teksten er noe vanskelig å lese fordi det er for lite kontraster.
Denne teksten er lettere å lese fordi kontrasten er tydeligere. Jeg gjør også teksten fet for å gjøre det enda tydligere å lese. Men mørke farger slik som dette er ikke så bra å bruke.
Med å forske litt på fargene så er det lettere å lese denne teksten fordi bakgrunnsfargen er mye lysere enn selve teksten. Så legger jeg også til fet tekst.
Veldig liten tekst.
Endring av størrelsen på teksten.
Enda større tekst.
En veldig liten overskrift med dårlig kontrast.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. Det er ikke lett å lese ovenfor tekst fordi det er latinsk men også fordi det står i en stor klump.
En overskrift
Jeg bruker https://loremipsum.io/generator/?n=8&t=p for å genere noe tekst for å vise frem hvordan en kan sette opp teksten på forskjellige måter.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.
Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Det er heller ikke lett å lese ovenfor tekst men det er luft i mellom som gjør til at teksten kommer frem tydeligere.
Kan du se alle tallene?
Knapper
Hvordan er opplevelsen?
Sett 1
Sett 2
Nøkkelprinsipper med god UI – Brukergrensesnitt
Konsistent
Samme type elementer burde se like ut og oppføre seg likt overalt.
Kontrast
Viktige elementer må skille seg ut. God lesbarhet er kritisk.
Gi det luft
Tom plass / luft gir elementene rom til å puste og gjør designet mer ryddig.
UX = User Experience – Brukeropplevelsen
Det handler om hvordan det er å bruke løsningen: Er det enkelt? Er det intuitivt? Eller blir man forvirret og frustrert? UX er følelsen brukeren sitter igjen med.
UI Problemer:
Ekstremt kaotisk layout, ingen struktur, tilfeldige farger.
UX Problemer:
Det er vanskelig å finne produkter, ingen søk, forvirrende navigasjon.
UI Problemer:
Utdatert 90-talls design, ingen visuell hierarki, kjedelige farger
UX Problemer:
Forvirrende kategorier, dårlig søk, lite mobilvennlig.
Eksempel på navigering i en mobil app.
Inspirasjonskilder
UI Styrke:
Vakre bilder, rent design og god bruk av luft.
UX Styrke:
Intuitive søkeprosess, klare filtre, trygg booking flyt.
UI Styrke:
Fargerikt, lekent, tydelig framdrift
UX Styrke:
Motiverende opplevelse, små bite-sized leksjoner, umiddelbar feedback
UI Styrke:
Premium følelse, store bilder, god mellomrom mellom elementer/spacing.
UX Styrke:
Klare produktforskjeller, smidig sammenligningskjøp, få distraksjoner.
Analyser et dårlig eller bra nettsted
UI: Hva legger du merke til i designet? Farger, fonter, layout, knapper?
UX: Hvordan føles det å bruke siden? Er det lett å finne det du leter etter?
To og to kommer sammen. Ser på noen nettsider. Så kommer opp og forklarer hva som er bra og hva som er dårlig med UI og UX.
- 1.UI Problemer: List opp 3-5 konkrete designfeil (farger, layout, typografi)
- 2.UX Problemer: Hva gjør det vanskelig å bruke? Hva er frustrerende?
- 3.Løsninger: Hvordan ville DU forbedret siden? Tegn/beskriv dine ideer
Flere nettsider å ta en titt på.
https://open.spotify.com/
https://stripe.com/
https://www.notion.com/
https://www.lingscars.com/
https://www.art.yale.edu/
https://www.berkshirehathaway.com/
https://www.spacejam.com/1996/