Hva er moderne brukergrensesnittdesign? 10 tips og eksempler

Sjansen er stor for at du kanskje ikke kan liste estetikken til et moderne brukergrensesnitt, men du vet sikkert når du lander på et nettsted som ikke bruker et. Det føles bare datert.

Moderne brukergrensesnittdesign hjelper deg med å etablere troverdighet for nettstedet eller merkevaren din fordi den har en stil som passer det de fleste til å være en aktuell visuell estetikk. Dette kan omfatte visuelle trender, tilpasse seg brukbarhetsstandarder og mønstre, og bruke utviklingsteknikker som passer for dagens brukere.

Her skal vi se på elementer som du finner i moderne brukergrensesnitt. Forhåpentligvis virker de fleste av disse eksemplene ganske kjente, men hvis ikke, kan det være på tide å planlegge litt nettoppdatering.

1. Konsistens

Et konsistent brukergrensesnitt er enkelt å bruke og forstå. Folk trenger ikke å tenke så hardt på hvordan de kan engasjere seg på nettstedet ditt, noe som gjør det mer sannsynlig at det blir brukt.

Du vil at elementer i designet skal være konsistente med hverandre

Det kan være best å tenke på konsistens på to måter.

Først vil du at grensesnittet skal se og oppføre seg konsekvent fra en enhet til en annen. (Dette er grunnen til at responsiv design er så viktig.)

For det andre vil du at elementer i designen skal være i samsvar med hverandre - knapper som har samme farge, størrelse og på vanlige steder, for eksempel - og følger vanlige bruksmønstre. Denne typen designkonsistens gjør grensesnittet ditt moderne og brukbart.

Interaction Design Foundation sier at brukergrensesnittet er viktig fordi:

• Det kan redusere læringstiden: Konsistens begrenser antall måter handlinger og operasjoner er representert, og sikrer at brukerne ikke trenger å lære nye representasjoner for hver oppgave.
• Det kan eliminere forvirring: Brukere har en tendens til å anvende regler de har opplevd utenfor nettstedet eller produktet ditt, noe som gir et sett med egne forventninger. Når vi vet det, må vi være oppmerksom på om vi forårsaker forvirring og fremmedgjøring eller ikke når vi avviker fra designstandarder og konvensjoner.

2. Forløp og dybde

Moderne grensesnitt bruker farge for å skape dybde og hjelpe folk til å forstå hvordan de skal samhandle med designet.

Forløp og subtile fallskygger er populære teknikker. Gradvis fargebruk er ganske trendy og gir en interessant visuell for å trekke oppmerksomhet. Dropskygger er ikke så åpenbare for det generelle øyet, men tilsynelatende løfter elementer fra bakgrunnen for å oppmuntre til samhandling.

3. Målrettet animasjon

Animasjon er nesten overalt når det gjelder design av nettsteder, noe som gjør det enda viktigere at denne teknikken ikke blir overforbrukt.

Moderne grensesnitt animerer bare elementer når det er en grunn til det. Hensiktsmessig animasjon kan hjelpe en bruker å klikke på en knapp, gi signaler om navigasjon, gi instruksjoner eller tjene som en enkel herlig funksjon.

For å sikre at animasjonene på nettstedet ditt har et formål og ikke er ren dekorasjon, bør du tenke på målet for det animerte elementet og hvordan det fungerer som en del av det generelle designet.

4. Lett å lese fontstørrelser

Du har sikkert lagt merke til at standardstørrelsene for brødtekst sakte har økt. Øyne overalt takker deg.

Små, nesten uleselige skriftstørrelser er en av de første tingene som vil dateres brukergrensesnittet ditt. Folk har blitt vant til større, mer lesbare skrifttyper.

Det kan være 14- til 16-punkts brødtekst på nettstedet ditt. Selv om den kan føles stor til å begynne med, er denne størrelsen mer iøynefallende, konverteres til en mobilskjerm i en lesbar størrelse og har blitt ganske standard. (Bare glem ikke å justere linjeavstanden til et passende mål også.)

5. Stemmegrensesnitt

Har nettstedet ditt informasjon som det er lett å finne brukere når de kommuniserer med tale? Interaktive stemmegrensesnitt er kanskje et av de raskt voksende segmentene innen design av brukergrensesnitt.

Du kan designe nettstedet ditt på en slik måte at det gjør det enklere for stemmegrensesnitt og folk å få tilgang til innholdet ditt. Still og svar på vanlige spørsmål, gi verdifull informasjon i små biter, bruk eksempler for å skape en intensjon og bruk visuell tilbakemelding når grensesnittet lytter.

Meldingen fra Interaction Design Foundation er:

For å designe flotte brukergrensesnitt for stemmene, må du finne en elegant måte å gi brukerne manglende informasjon om hva de kan gjøre og hvordan de kan gjøre det uten å overvelde dem.

6. Sømløs interaksjon

Nettverkets interaksjoner må være sømløse på en enkelt enhet så vel som fra en enhet til en annen.

Brukere vil ha den samme opplevelsen når de går fra side til side. De vil også at et nettsted skal se og handle på samme måte på stasjonære datamaskiner og telefoner.

Alle moderne brukergrensesnitt overholder disse retningslinjene. Hvis nettstedet ditt ikke trenger du å begynne å tenke på nettstedsmodellen og planlegge med en gang.

7. Smarte skjemaer / innganger

Borte er dagene med massive online skjemaer som ber om for mye informasjon. Moderne grensesnitt bruker korte former som bare ber om det som trengs for å respektere og ære hver enkelt brukers tid (og kort oppmerksomhetsspenn).

Moderne grensesnitt bruker smarte former og innganger. Dette betyr at bare informasjonen du trenger blir bedt om (bruk hvis-da-logikk for skjemafelt der det er aktuelt) og valider data. Det siste er så viktig på mindre enheter, spesielt fordi det er enkelt å skrive feil og opprette feil. datavalidering forteller brukeren at noe er galt umiddelbart og forhindrer frustrasjon senere i prosessen.

8. Sikker og pålitelig

Denne sier seg selv nærmest, men nettstedet ditt må være sikkert og pålitelig.

Brukere ser ofte etter den sikre låsen når du handler og surfer, noe som gjør SSL og HTTPS til et must. Noe annet er så i 2010.

9. Tilpasses og tilpasses

Flere grensesnitt tilbyr mer tilpassede, tilpassede tjenester for brukere.

Det er normen å bruke verktøy som bestemmer brukerens plassering for språk- og valutastøtte, informasjonskapsler som holder handlekurver i noen dager, eller pålogginger som lar brukerne skape en mer personlig opplevelse.

Tilpasning og tilpasning blir et poeng av differensiering som vil hjelpe folk til å velge nettstedet ditt fremfor andre når de har valget. Disse små detaljene kan gjøre mye forskjell.

10. utvikler seg

Du må ha et design som kan utvikle seg og endre seg over tid.

Vi pleide å si at du trenger en ny webdesign hvert tredje til femte år; nå trenger du kanskje et nettsted justering hver sjette måned for å holde deg frisk og relevant. (Teknologien beveger seg så raskt.)

Fra små designendringer til oppdateringer om brukervennlighet, er det viktig å ta hensyn til hva du ser på andre nettsteder og tenke på hvordan disse endringene og fremskrittene kan være gunstige på egen hånd.

Konklusjon

Selv om det kan virke som om det først, er det ikke rakettvitenskap å lage et moderne brukergrensesnitt. Det er mer en studie av brukeratferd og mønstre og designvalgene som påvirker dem.

Det er en fin linje mellom trend og moderne grensesnittdesign. Sistnevnte har en tendens til å holde seg lenger og er litt mer forankret i funksjon og brukbarhet, der førstnevnte for det meste er estetisk.

Begynn med et tankesett om at webdesign alltid endrer seg. Så tenk på positive og minneverdige nettopplevelser og vurder disse teknikkene i fremtidige revisjoner av grensesnittene dine.