Hvordan lage et flott brukergrensesnitt
Når du designer en webapp, er funksjonalitet ofte plassert over alt annet. For det meste er dette en god ting.
Folk (for det meste) bruker programmer fordi de er nyttige, ikke fordi de ser pen ut. Men det betyr ikke at du kan ignorere god UI-design, eller bare slå sammen et generisk utseende brukergrensesnitt. God UI-design legger til den generelle brukertilfredsheten til enhver webapp.
God UI-design er på mange måter likt det gode webdesignet. Prinsipper for fargeteori, negativ plass og layout gjelder fortsatt. Men UI-design krever litt mer tanke i mange tilfeller på grunn av den interaktivitet det krever.
Besøkende vil ikke bare se på nettstedet ditt; de vil samhandle med det, noen ganger på måter du ikke hadde forventet. Det er viktig at du tar deg tid til å virkelig utforske UI-design før du begynner på et webappdesign.
Nedenfor finner du en rekke prinsipper og ideer for å designe et flott brukergrensesnitt.
Konsistens er Vital
I brukergrensesnittdesign er sammenheng mellom sider, funksjoner og alternativer avgjørende. Brukere kommer til å forvente bestemte ting som de bruker programmet, og hvis disse tingene endres fra en side til den neste, er det både forvirrende og frustrerende.
Hvis du for eksempel på hjemmesiden for programbrukerne dine navigerer mellom sider med en toppnavigasjonslinje, må du sørge for at samme toppnavigasjonslinje vises på påfølgende sider, og at sidene som er koblet fra den, vises i samme rekkefølge.
Andre ting som må holdes konsistente, inkluderer fargevalg og generelle oppsett, samt lenker til viktige sider som kanskje ikke brukes direkte i programmet (for eksempel en kontoside eller en FAQ).
Dine brukere vil gjøre feil
Uansett hvor nøye du designer brukergrensesnittet ditt og hvor intuitivt det er, vil brukerne gjøre feil i noen tilfeller. Noen ganger er det bare fordi de ved et uhell klikket da de ikke mente det. Andre ganger er det fordi de ikke virkelig var oppmerksom på hva de gjorde, eller ikke leser innholdet på siden.
I begge tilfeller er det viktig at brukerne enkelt kan angre feilene de gjør.
Du vil legge merke til på en rekke webapper, inkludert Google Dokumenter, at nesten hvilken som helst gang du gjør noe, vises en lenke for å angre den siste handlingen. På andre apper må du kanskje bruke en meny for å angre en handling, men de beste webappene gjør det fortsatt lett og tilgjengelig for å gå tilbake et trinn eller to når som helst.
Marker endringer
Når endringer gjøres under bruk av en web-app, er det nyttig for brukerne dine hvis du markerer disse endringene. Hvis for eksempel appen din inneholder en feed av informasjon fra en rekke kilder eller brukere, er det en nyttig funksjon å markere nytt innhold slik det vises.
Det finnes flere måter du kan markere innhold på. En av de mest populære er å sette en skyggefull bakgrunn bak nytt innhold.
Andre apper bruker ikoner for å indikere nytt innhold. Uansett hva du bestemmer deg for å gjøre, må du kontrollere at indikatorene for nyinnhold ikke forstyrrer lesbarheten av innholdet. Det er også viktig å gjøre disse varslene unintrusive, for ikke å distrahere brukere som ikke for øyeblikket er opptatt av å endre innhold.
TitanPad bruker fargekoding for å indikere endringer som er gjort av hver bruker.
Aktiver tastatursnarveier
Ikke alle brukere der ute, kommer til å bruke hurtigtaster, selv om du gjør dem tilgjengelige. Men for prosentandelen brukere som er vant til hurtigtastene, kan ikke de inkludere dem, ha en katastrofal effekt på brukertilfredshet.
Tenk på de vanligste handlingene brukerne skal utføre på nettstedet ditt og sørg for at hurtigtaster er tilgjengelige for dem.
Pass på at alle tastaturgenveier du bruker er logiske. Enkelte snarveier brukes allerede for visse funksjoner (for eksempel Ctrl + Z for å angre eller Ctrl + V for å lime inn), så sørg for at de fortsetter å fungere som de gjør i andre programmer.
Velg tastene som brukes i snarveiene dine logisk, slik at de er enkle å huske for brukerne. Pass på at du også inkluderer dem i noen rullegardinmenyer ved siden av deres respektive handlinger.
Bruk kjente standarder og konvensjoner
Bredt brukte applikasjoner har satt visse standarder for måten ting forventes å fungere på i et program. For eksempel er folk vant til å se et mappeikon for "Åpne", eller et utklippstavle for "Lim inn".
De er også vant til å ha visse alternativer og handlinger vises under spesifikke applikasjonsmenyer (å opprette et nytt dokument eller en fil ligger nesten alltid under rullegardinmenyen "Fil", kopiering og liming er nesten alltid funnet under rullegardinmenyen "Rediger" -menyen) .
Tenk på etablerte programmer som gjør lignende ting til hva appen din skal gjøre, og se på hvordan de organiserer handlinger og hvilke ikoner de bruker.
Hvis du ser konsistenser mellom ulike programmer, bør du vurdere å bruke samme eller lignende ikoner for din egen app. Det gjør det mer intuitivt for brukere som bytter fra en annen app til deg, og vil forbedre deres erfaring.
Tilbyr tilpassingsalternativer
Mange webapps lar brukere gjøre tilpasninger på kontoen sin. Enkelte nettsteder lar deg justere fargeskjemaet eller laste opp tilpasset grafikk. Andre lar deg omorganisere oppsettet eller det som vises når du logger på. Enda andre lar deg lage egendefinerte sider eller lignende innhold som viser informasjonen du er opptatt av.
Tenk på mulige tilpasninger som ville forbedre både funksjonaliteten og brukeropplevelsen til appene dine.
Noen apps kan ikke være til stor nytte av tilpassinger, mens andre er fylt med muligheter. Selv enkle ting som at brukerne kan laste opp egen logo eller endre fargeskjema eller skrift som passer deres personlige preferanser, kan ha en drastisk innvirkning på brukeropplevelsen og tilfredsheten.
Highrise lar brukerne tilpasse fargeskjemaet på dashbordet. Små tilpasningsalternativer som dette kan i stor grad legge til brukertilfredshet.
Bruk verktøytips og integrerte hjelpemeldinger
Mange app-utviklere inkluderer omfattende dokumentasjon for bruk av sine apper, noe som er utrolig nyttig for nye brukere. Men i mange tilfeller holdes denne dokumentasjonen i sin egen, separate seksjon på nettsiden. For å få tilgang til det, må brukerne effektivt forlate programmet.
Selv om omfattende dokumentasjon fortsatt er en god ide for kompliserte apper, øker bruk av verktøytips og integrerte hjelpemeldinger i modale vinduer eller i en sidebjelke på siden brukbarheten for de fleste brukere.
Det er en sømløs måte å tilby hjelp mens noen faktisk bruker søknaden din, noe som sparer dem tid og gjør hele opplevelsen morsommere.
Bruk Tabbed Navigation og Knapper for handlinger
Tabbed navigering har en rekke fordeler over knapper eller tekstkoblinger. Det viktigste er imidlertid den subtile psykologiske effekten den har.
Faner fremkaller ved hjelp av en notatbok eller bindemiddel. Hver fane angir en ny seksjon eller et emne. Det samme er sant på nettet. Faner gjør at folk ubevisst tenker på å flytte fysisk til en ny del av et nettsted eller en app.
Knapper på den annen side fremkaller en handling. Å bruke knapper for ting som å sende inn et skjema, er fornuftig psykologisk, som folk forbinder å trykke på en knapp med å gjøre noe. Så for optimal brukeropplevelse, husk faner = navigasjon, knapper = handling.
Skygge alt bak et modalt vindu
Dette er en av de virkelig grunnleggende tingene som noen ganger blir oversett. Når du åpner et modalvindu, må du sørge for at du skygger ut alt i bakgrunnen bak vinduet. Dette gjør at vinduet skiller seg ut og eliminerer distraksjoner.
Et godt eksempel på et modalt vindu med en skyggefull bakgrunn.
Bruk relevante ikoner og etiketter
Mange utviklere velger å bruke ikoner i appene sine uten å merke disse ikonene. Annet enn de absolutt vanligste ikonene, er dette ofte en feil og forvirrer kun brukeren.
Å legge til i alt-koder som vises når ikoner er svevet over, er ikke en god løsning for å unngå forvirring, da det fortsatt krever for mye innsats fra brukerens side.
Plassering av etiketter ved siden av ikonene betyr at de umiddelbart kan gjenkjennes. Som brukere blir kjent med betydningen av hvert ikon, kan de raskere finne det de leter etter, og til da kan de lett se nøyaktig hva hvert ikon står for.
Et annet alternativ er å gjøre det mulig for brukerne å skjule etikettene, men sørg for at standardalternativet er at de skal vises.
Hold ting enkelt
De beste grensesnittene er like enkle som de effektivt kan være. Ikke legg til klokkene og plystre for å legge til klokkene og fløyter. Hvis en funksjon har et klart formål, legger du til det. Hvis det ikke gjør det, gjør det ikke.
Det samme gjelder designelementer. Hvis det er et formål med et element, er det greit å legge til det. Men unngå å legge til ting som bare ser pen ut. De vil bare legge til visuell rot og forvirre brukerne. Velg den enkleste løsningen som får jobben gjort.
Dette betyr ikke nødvendigvis at appen din må være minimalistisk. Men husk at de fleste bruker apps for deres funksjonalitet, ikke for deres design. Så lenge utformingen ikke forstyrrer deres evne til å bruke appen din effektivt, er det lite sannsynlig at de selv betaler stor oppmerksomhet til de visuelle elementene i appen.
Effektiv arbeidsflyt
Når du designer et brukergrensesnitt, må du vurdere arbeidsflyten til brukerne. Folk har forhåndsbestemte måter de bruker bestemte typer programvare og bestemte apper, og du må designe grensesnittet for å overholde disse mønstrene.
For eksempel, hvis bestemte handlinger vanligvis blir tatt i forbindelse med hverandre, grupperer du dem sammen i samme område av appen.
Studier arbeidsflyten til en rekke brukere for å se hva som synes å være i veien for deres effektive gjennomføring av oppgaver, og finne ut hvordan du kan forbedre brukergrensesnittet for å imøtekomme behovene sine. I enkelte tilfeller kan UI alene ikke løse disse problemene, men noen ganger kan det.
15 Eksempler på gode brukergrensesnitt
Det er hundrevis eller tusenvis av web-apps der ute med fantastiske brukergrensesnittdesign. Her er mer enn et dusin for å gi deg noen ideer.
Shoply
Shoply gjør det ganske enkelt for brukerne å slette, redigere eller se produkter de allerede har lastet opp, samt legge til nye produkter.
Invoicera
Invoicera bruker fanebladnavigering og knapper til å utføre handlinger. Det holder også en relativt enkel og rett frem plan og fargeskjema.
Pandora
Det er åpenbart at designerne bak Pandora tok hensyn til grensesnittene som er tilstede på MP3-spillere og andre medieenheter i utformingen av brukergrensesnittet. Det er et intuitivt og brukervennlig design med praktisk talt ingen læringskurve.
Wufoo
Wufoo s skjemaet design grensesnitt er omtrent like intuitivt som en app kan få. Hjelpemeldinger vises når du begynner å designe et nytt skjema for å forklare nøyaktig hva du skal gjøre uten å måtte forlate siden.
Grooveshark
Grooveshark bruker ikoner for å hjelpe med navigering og funksjonalitet. Vanlige anerkjente ikoner som "spill" og "hopp" -knappene er ikke merket, men andre, som ikonene Hjem og Favoritter, er.
Wridea
Wridea bruker et intuitivt grensesnitt som lar deg redigere alt bare ved å klikke på det. De bruker også menyer som bare utvides når du svinger over en ide, noe som reduserer visuell rot, og de lar brukerne velge mellom to fargeskjemaer.
Ryggsekk
Ryggsekk bruker knapper for handlinger og faner for navigering, noe som gjør det mer intuitivt å bruke.
Husk melken
Husk melken bruker faneblad navigasjon og knapper for handlinger. De inkluderer også nyttige notater som for det meste negerer behovet for egen dokumentasjon.
Ta-da Liste
Ta-da Lists holder grensesnittet så enkelt som mulig. Det er ingen ekstra informasjon, bare oppgaven ved hånden. Det er utrolig intuitivt og gir en utmerket brukeropplevelse.
Relenta
Relenta bruker faneblad navigasjon og merkede ikoner. De holder seg også til standardkonvensjoner for e-postprogrammer, så det er praktisk talt ingen læringskurve for sine brukere.
Viviti
Viviti bruker et intuitivt brukergrensesnitt som tar hensyn til behovene til sine ikke-designer brukere. Tips er gitt når du logger på, og dokumentasjonen er lett tilgjengelig og brukervennlig, slik at du kan velge hvilken type hjelp du vil ha før du faktisk forlater siden du jobber med.
Sprette
Bounce er grensesnittet er veldig rett frem og enkelt. De tilgjengelige verktøyene er intuitive (bare dra over et område for å lage et notat, skrive tilbakemelding og deretter dele).
Meetifyr
Meetifyr bruker et slikt intuitivt grensesnitt som nesten ingen dokumentasjon er nødvendig. Ser over appen, det tar bare sekunder å umiddelbart gjenkjenne både hvordan du bruker det og hva de forskjellige ikonene og fargekodene betyr.
DoingText
DoingText forenkler bruken ved ikke å kreve noen form for registreringsprosess. Dokumenter er rett og slett URL-baserte, og samarbeidspartnere trenger bare nettadressen. Det gjør samarbeidet en nesten øyeblikkelig prosess.
Writeboard
Writeboard inkluderer nyttig stylinghjelp i sidelinjen ved siden av hovedinnholdsområdet.
Skrevet utelukkende for WDD av Cameron Chapman .
Hva er din favoritt UI-design? Har du noen andre tips for å designe utestående brukergrensesnitt? Vennligst del dem i kommentarene!