Opprettholde konsistens i ditt UI-design

/2016-03-05 00:35:41/
Camella
/Grafikk/

Konsistens i UI-design er et old school-prinsipp og noe glemt i noen av dagens web- og applikasjonsdesign. Det virker som om designere velger å utelate konsistens fra grensesnittene.

Når det gjelder design av mobil applikasjoner, velger noen designere å oppfinne, gjenopprette eller til og med fullstendig bryte maskinvarens standardinteraksjoner med sine egne unike grensesnittmønstre. Selv om det å bryte konsistensen mellom maskinvare-brukergrensesnittreglene og appopplevelsen din kanskje ikke er en dårlig idé, kan det være en ødeleggelse av din egen apps konsistens.

Tre trinn for konsekvent UI-design

Det er i utgangspunktet tre typer konsistens du bør tenke på når du designer web- og mobilapp-design:

1. Hold konsistent med retningslinjene og virkemåten for brukergrensesnittet til enheten
2. Hold deg konsekvent med andre lignende nettsteder eller applikasjoner
3. Hold deg konsekvent med ditt eget design

For denne artikkelen vil jeg fokusere mer på den tredje - holde konsistensen i ditt eget brukergrensesnitt. Dette er litt viktig, hovedsakelig fordi du ikke vil forvirre eller overraske brukerne dine i din egen app.

Du vil ikke at en bruker skal gå fra hjemmesiden din til en underside og se annen styling eller til og med enormt forskjellige brukerinteraksjoner. Denne typen ting kan overraske brukere eller til og med skremme dem bort. Konsistens er ikke bare en stor del av nettstedets generelle brukbarhet, det kan også øke konverteringen også.

Konsistent struktur og interaksjoner

Dette er nøkkelen til å skape et konsistent brukergrensesnitt. Noen ganger når vi utvikler oss glemmer vi hvordan strukturen og samhandlingen kommer til å påvirke den totale brukeropplevelsen. Men akkurat som blåkopiering og oppretting av planer er viktig når du bygger et hjem eller en bygning, er det også viktig for å lage et konsistent, brukbart brukergrensesnitt. Det er noen få ting å tenke på og planlegge i forkant før du begynner å skrive kode.

1. Vurder hvordan du konsekvent plasserer elementer på nettstedet eller appen din.
2. Tenk på hvilke brukergrensesnitt som du bruker.
3. Planlegg hvilke inngangselementer du trenger.
4. Finn ut hvilke ikoner du trenger, og velg eller designe et godt ikonsett som dekker dem alle.

Elementplassering er en enorm måte å redusere overraskelse hos brukeren og skape konsistente, pålitelige forventninger. Hold navigeringene dine på samme sted, ingenting irriterer en bruker raskere enn å flytte eller forsvinne navigasjonselementer. Oppbevar også logoer og andre merkevarer på samme sted gjennom nettstedet.

"Ingenting irriterer en bruker raskere enn å flytte eller forsvinne navigasjonselementer"

Hvis du bruker en sidefelt, må du ikke riste opp sidelinjen for mye ved å endre det som finnes i dem fra side til side. Noe av dette kan være relevant for innholdet på siden, men unngå å fjerne eller til og med flytte importerte overordnede elementer som søkeskjemaer. En stor ting å holde plassert konsekvent er innloggings- og brukerinnstillingslenker eller -knapper.

Vurder UI-mønstre

Planlegg fremover og tenk på hvilke UI-mønstre du trenger. Skal du trenge et galleri? Modals? Trekkspill? Sidefelt? Å planlegge designmønstre på forhånd vil ikke bare hjelpe deg med å utvikle og designe appen din raskere, men å tenke på hvilke designmønstre du trenger, hjelper også med å finne ut innholdet ditt på forhånd - noe som også kan spare deg for mye tid.

Dette vil også løse problemer og svare på spørsmål på forhånd, på denne måten når du kommer til en seksjon eller side på nettstedet ditt som krever en UI-avgjørelse, har du allerede gjort det, og du vil ikke bli fanget med å lage en uhell med designmønstre gjennom nettstedet ditt.

Tenk på skjemaene dine før hånd også. Planlegg ut hvilke formelementer du trenger, og finn ut elementene du ikke trenger eller som du kan erstatte. Formelementer kan være skumle eller til og med vanskelige for brukere å navigere uansett, så hvis du kan eliminere eller bytte ut noen innganger som kan være snublesteiner, gjør det.

"Hvis du kan eliminere eller bytte ut noen innganger som kan være snublesteiner, gjør det."

Dette er også en flott måte å fjerne beslutningen fra utviklingsprosessen. Å holde formene konsistente i både stil, struktur og samhandling kan noen ganger gjøre eller ødelegge en konverteringsfrekvens.

Igjen, planhode. Planlegg ut hvilke ikoner du vil trenge på forhånd. En super rask måte å skru ut konsistensen på er å være halvveis gjennom utviklingen av appen din når du finner ut at du trenger utskriftsikoner, og så innse at du ikke kan huske hvor du har ikonene dine, eller selv om du kan finn et utskriftsikon som samsvarer med resten av ikonene dine.

Dette er ikke engang et stilproblem, men et interaktivt. Brukere vil bli vant til utseendet til et bestemt ikon og raskt kunne gjenkjenne dem. Men hvis du bruker et lappeteiknsett, vil du forvirre brukeren din eller til og med gjøre det vanskelig for dem å fortelle hva bestemte ikoner representerer.

Konsistent stil

Stilen og designen til hvert UI-element er viktig, og det er viktig å opprettholde konsistensen mellom dem. Akkurat som det er viktig å ha et ensartet ikonoppsett, er det viktig at appen din har en over all designkonsistens. Du synes kanskje at visse knapper er kule, selv om de ikke kommer i nærheten av å matche nettstedets alt design eller fargevalg, men dette vil bare forvirre brukeren din og se stygg ut.

Når du designer et UI-sett, er det et par ting du må huske på for å skape konsistens:

1. Fargeskjema
2. Stil
3. Grenser
4. Skriv og skrifter
5. Størrelse
6. Bakgrunnsbilder
7. Effekter

Farger

Som jeg sa tidligere, hold brukergrensesnittfargen din i samsvar med det hele fargeskjemaet på nettstedet ditt. Selv når du utformer oppfordring til handlinger der du vil at knapper skal skille seg ut og bli lagt merke til, må du være forsiktig så du ikke gjør oppfordring til handling til et stikkende stygt kompliment til ditt fargebilde. For å hjelpe deg, bruk verktøy som Kuler eller ColorSchemer for å hjelpe deg med å velge farger som går bra sammen.

Når jeg snakker om å holde stilen din konsistent, snakker jeg om at jeg ikke bruker noen sprø gradientknapper med skygger og skråner hvis resten av sidedesignet er flatt og ikke har en skygge eller gradient på seg. I tillegg til å holde deg i samsvar med den generelle nettstedsdesignen, bør du være i samsvar med stilen til brukergrensesnittelementene dine. Hvis du bruker en bestemt farge- eller skriftstil på inputetikettene, holder du deg med den og bruker den på alle etiketter.

Borders

Ahh, grenser. Altfor ofte ser jeg nettsteder som bruker tre eller fire forskjellige knappekanttykkelser eller radier, og dette kan virkelig være forvirrende. Hold alle kantene på knapper, innganger, utvalg, gallerier, bilder og alle andre brukergrensesnittelementer i samsvar med hverandre. Dette betyr ikke at du må bruke på grensradius, du kan blande det opp ved å ha noen få verdier eller til og med bruke en stil konsekvent på hvert element.

Type og skrifter

Å bruke samme type og skrifter i elementene dine er en ganske viktig ting, spesielt når du arbeider med formelementer. Hold overskriftene konsistente, og bruk ikke mange skrifttyper selv om du kanskje liker dem alle - du kan lagre dem til andre prosjekter. Innganger og knapper skal ha skrifttyper som samsvarer med eller kompletterer hverandre, slik at skjemaer lett blir lest og forutsigbare.

Størrelse

Størrelsen på skrifter og andre elementer skal være konsistente eller komplementære. Alle topptekstene og tittelen på sidene skal forbli konsistente, slik at brukeren din vet at tekstlinjene faktisk samsvarer med overskrifter og titler. Konsistent størrelse gjelder også alle UI-elementer fra innholdsregioner, koblinger, navigasjonselementer eller sidefelt. Unngå å endre størrelsene på disse for å drastisk mellom sidevisninger, slik at brukeren kan gjenkjenne dem umiddelbart når siden lastes inn.

Bakgrunnsbilder

Forsøk å ikke endre bakgrunnsbildene dine for mye. Dette skjer ikke så mye i disse dager som det pleide å være, men det er fortsatt en god ide å unngå å endre bakgrunnsbildene fra sidevisning til sidevisning. Hvis du gjør det, kan du prøve å gjøre bildet relatert til hverandre på en eller annen måte, slik at sidene ikke mister konsistensen. Endring av bakgrunnsbilde, spesielt store, kan gjøre at nettstedet føler seg usammenhengende og få brukeren til å føle at de til og med har forlatt nettstedet ditt helt, så prøv virkelig å unngå denne fristelsen.

effekter

Effekter, viktigst av lyseffekter, kan gjøre at det som virker som et flott nettsteddesign ikke gir mening i det hele tatt for brukeren. Hvis du for eksempel bruker et utheving på knappen som det ser ut som om et lys skinner på toppen av det, kan du bruke den samme lyseffekten på avfaset tekst i knapper eller innfelte tekstinnganger.

Ærlig talt, dette er virkelig ikke et stort produkt eller bryter det med brukeren, men for den kresen seeren vil de kanskje merke inkonsekvensen av effektene dine og bli distrahert fra å gjøre det de skal gjøre med appen eller nettstedet ditt.

Ikke kjedelig

Å designe for konsistens kan føles dagligdags eller til og med kjedelig noen ganger, og du vil kanskje bare kaste noe i designen din for å kaste brukeren en overraskelse, og det er virkelig bra.

Det er bra å holde brukerne på tå, jsut rister ikke ting så mye at de blir så motløse eller forvirrede at de forlater og går et annet sted. Litt konsistens kan gå langt.