7 Grensesnittdesignteknikker for å forenkle og deaktivere grensesnittene dine

Hva er enkelhet? Enkelhet er kvaliteten på å være naturlig, ren og lett å forstå. Det er ikke overraskende da blir enkelheten ofte trives i brukergrensesnittdesign. De fleste mennesker liker naturlig ikke kompleksitet i enheter og programvare. Ja, noen mennesker finner glede i å finne ut hvordan noe fungerer, men for de fleste av oss er det ikke mulig å drive en enhetsleder til bortkastet tid og frustrasjon, og det er ikke bra.

Hvis du kan ta en kompleks enhet eller et program og på en eller annen måte omorganisere, omorganisere og omkonstruere grensesnittet for å gjøre det enkelt å bruke og forstå, så er du godt på vei til å levere en bedre brukeropplevelse .

I denne artikkelen skal jeg snakke om 7 praktiske teknikker som du kan bruke i webdesign for å gjøre websider eller webapplikasjoner enklere og mindre rotete.

1. Modale vinduer.

Jeg er sikker på at du kan huske dager før popup-blokkere ble introdusert i nettlesere, da du måtte kjempe med en svarm av små vinduer som altfor ofte bestemte seg for å dukke opp over toppen av nettleservinduet, tilsynelatende med sålen Formålet med å irritere deg. Ingen likte disse popup-vinduene, og blokkerende teknologier ble introdusert for å stoppe dem. Men i dag ser vi en ny rase popup-vinduer på nettet som er mye renere og fungerer mye bedre på deres hensikt. Dette er modale vinduer.

Modale vinduer er som popup-vinduer, men i stedet for å vises i et eget nettleservindu, vises de rett innenfor den nåværende, over toppen av innholdet. Modale vinduer krever samhandling for å fortsette, slik at innholdet under er vanligvis mørkret for å indikere dette, samt å blokkere innholdsforstyrrende støy og skifte visuell fokus på vinduet over .

Så hvorfor ville du bruke modale vinduer og hvordan forenkler de ditt grensesnitt? Vel, hvis du ser på alternativet, blir deres formål mye klarere. Alternativet til å bruke noe som et modalvindu er vanligvis å laste inn en ny side. For eksempel, noen nettsteder har en innstillingsside for kontoen din. Når du klikker på innstillingslenken, blir du tatt til en ny side. Men hva om det var bare noen få innstillingsalternativer - er det virkelig verdt å omdirigere brukeren til en ny side?

I mange tilfeller kan ting som innstillinger, redigere bokser og påloggingsskjema vises i et modalvindu over innholdet. Dette sparer brukeren en returtur til en annen side . Det letter også belastningen på webserveren fordi den har å håndtere færre forespørsler.

ActionMethod , en prosjektledelsesapp, viser modale vinduer i hele applikasjonen. Her er vurderingsskjemaet.

2. Bøye kontroller.

Å sette færre ting på tallerkenen ville også gjøre parabolen lettere å svelge. Hvis søknaden din har mange kontroller, må brukerne skanne gjennom de fleste av dem for å finne det de leter etter. Sjansene er at noen av kontrollene er mindre viktige enn andre, og noen av kontrollene brukes mye mindre enn andre . Den enkleste tingen du kan gjøre er å kaste bort og skjule disse kontrollene fra standardvisningen.

En smart måte å gjøre dette på er å skjule kontrollene, men vis dem da brukeren svinger over bestemte områder. Disse er sveverkontroller. For eksempel viser Twitter, en populær mikrobloggingapp, en feed av hva alle på listen din har nylig sagt. Hver melding er innkapslet i sin egen lille boks. Det er to handlinger du kan utføre på hver melding: Legg den til i favorittene dine eller svar på den.

Å vise favoritt- og svarknappene på alle meldingene vil føre til rot. Du vil ikke reagere på alle meldinger i feedet, og enda mindre sannsynlig at du vil legge dem alle sammen til favorittene dine. Så Twitter viser bare kontrollene i riktig sammenheng - når du svinger over meldingen. Dette fører til et enklere grensesnitt og ingen tap i funksjonalitet . Det er fare for at nye brukere ikke ser disse kontrollene når de er skjulte. Imidlertid har mange mennesker en tendens til å musen over ting de ser på, så gitt svingerområdene er store nok, disse kontrollene vil sannsynligvis bli oppdaget raskt.

Twitter viser tilføy til favoritter og svarknapper for hver melding mens du svinger over den.

3. Kontroller på etterspørsel.

En annen måte å skjule ting på er å bruke Javascript og vise et sett med kontroller når brukeren klikker et eller annet sted. For eksempel kan du ha en søkeboks på nettstedet ditt som gjør det mulig for noen egendefinerte filtre eller avanserte søk. I stedet for å vise disse alternativene som standard, kan du gjemme dem bort og gjøre dem tilgjengelige via en knapp på slutten av søkefeltet. Hvis du klikker på denne knappen, kan det vises et sett med alternativer eller filtre. Dette betyr at du beholder den avanserte funksjonaliteten for de brukerne som trenger den, og samtidig forenkler grensesnittet for folk som bare trenger å bruke det enkle søket.

Ikke alle bruker noen av de mer avanserte eller spesialiserte kontrollene på nettstedet ditt. Hvis du gjemmer dem, gjør du grensesnittet renere og lettere å forstå, fordi nye brukere har færre elementer å behandle og finne ut. Å velge hva du skal skjule og hva du skal beholde er ikke en lett oppgave skjønt, og det er din jobb som designer å finne en passende balanse.

Kontain , en blogging-app, gir avanserte søkefiltre for deres søk, skjult i en rullegardinmeny på slutten av søkefeltet.

4. Utvidelse av skjemaer.

Jeg er sikker på at du er kjent med filopplastingsfeltet vi ofte ser i webskjemaer. Det er vanligvis en liten bar med en bla gjennom-knappen ved siden av. Tenk deg en situasjon der brukeren sannsynligvis vil laste opp flere filer samtidig. Du kan vise flere filopplastingsfelter, men det er ikke ideelt fordi det vil koble grensesnittet, og det er ingen måte å fortelle hvor mange felt brukeren trenger. En god løsning i dette tilfellet ville være å bruke en utvidende form .

Når brukeren laster opp en fil, vises et annet filopplastingsfelt under, klar til å godta mer. Du kan implementere samme teknikk for et annet inngangsfelt. For eksempel, kanskje dette skjemaet har en mengde e-postadresser for folk du vil invitere til et lag eller et annet formål. I stedet for å ha mange tekstfelter, kan du bare ha ett eller et par, og da brukeren fyller dem inn, blir nye opprettet under . Å utvide skjemaet på denne måten er en fin måte å spare plass på og forenkle grensesnittet .

Gmail Viser bare ett vedleggsfelt når du skriver en ny melding. Du kan klikke på koblingen "Legg ved en annen fil" for å åpne mer når du trenger dem.

5. Etiketter i innsendingsskjemaer.

Skjemaer kan bli kompliserte raskt. Du har tekstfelt, etiketter, tekstområder, drop downs, avkrysningsbokser og så videre og så videre. I tillegg er det vanligvis ikke veldig morsomt å fylle ut skjemaer, slik at prosessen blir raskere og enklere å gjøre skjemaene enklere og enklere å bruke. En teknikk du kan bruke til å gjøre skjemaene enklere, er å flytte etikettene utenfor innsatsområdene innover. Så, i stedet for å vise en etikett ved siden av det aktuelle tekstfeltet, vis det som en ferdigfylt verdi inne i tekstfeltet .

Dette reduserer på plass betydelig, krymper den totale størrelsen på skjemaet. Mindre ting virker enklere , så skjemaet skal se enklere ut. Det kan ikke være mulig å gjøre dette for mer kompliserte former der du har en rekke inngangstyper (avmerkingsbokser, radioknapper, nedtrekk), men hvis du har Noen tekstfelter er det vel verdt å vurdere, for eksempel et påloggingsskjema.

Nå er det en ulemper med denne metoden, som heldigvis kan løses med en grundigere gjennomføring. Når brukeren først laster siden, ser de feltene og vil kunne lese etikettene. Når de klikker på et felt, vil de fleste skjemaer som dette gjemme etiketten helt, slik at brukeren kan skrive inn sine innspill. Men hva om brukeren for tidlig klikker på et felt, og så glemmer hva det er de var ment å skrive? De må kanskje klikke bort fra skjemaet for å få etiketten til å vises igjen (forhåpentligvis).

For å adressere dette, i stedet for å gjemme etiketten helt, kan du redusere den når brukeren klikker på den, og deretter skjule den helt når brukeren begynner å skrive.

MobileMe viser etiketter i innsendingsfeltene på påloggingsskjermen, og demper dem videre når du velger et felt.

6. Ikoner i stedet for tekst.

For å oppnå enkelhet i grensesnittdesign, må du redusere og ta bort alle unødvendige eller sjeldent brukte deler . Disse inkluderer ikke bare kontroller, men kan også være ting som tekstetiketter. Hvis grensesnittet ditt har mange etiketter, se på det og spør deg selv - er alle disse etikettene nødvendige? Er de fleste av dem bare å si det åpenbare? Hvis en etikett peker på noe som er tydelig gitt konteksten til det aktuelle elementet, trenger du ikke den etiketten - den er foreldet.

For å gi deg et eksempel på dette, tenk på innlegg i en blogg. Under hvert innleggs overskrift kan du ha ting som dato og forfatter. Det er ikke nødvendig å legge på etiketter før hver enkelt som "Forfatter:" og "Dato:". Når noen ser et navn og en dato under en artikkel overskrift, er de veldig sannsynlig å finne ut at dette er forfatteren, og det er datoen. Konteksten, samt formatet de er vant til fra å lese andre blogger, gir brukerne alle ledetråene de trenger for å umiddelbart forstå betydningen bak dataene. Å fjerne disse etikettene vil gi deg et renere grensesnitt .

I noen tilfeller der det ikke kan fungere å forlate en etikett, kan du erstatte etiketten med et ikon. Et ikon har noen fordeler over en tekstetikett. Det tar mindre plass. Det er lettere å fokusere på, ettersom fargen og særegen form tiltrekker øyet lettere enn tekst. I noen tilfeller kan betydningen formidles like effektivt som tekst. Hvis du for eksempel har en etikett som heter "Tags:" etterfulgt av en liste med tagkoblinger, kan du erstatte etiketten med et lite bilde av en tagg. Forutsatt at du har et teknisk kunnskapsrikt publikum, skal betydningen i dette tilfellet forbli like klar.

Selvfølgelig vil det ikke fungere for alle tilfeller, og hvis det er fare for å være tvetydig, bør du spille det trygt og bruke en tekstetikett. Når du har sagt dette, er det ingen grunn til å velge den ene eller den andre utelukkende - du kan dra nytte av de attraktive iøynefallende egenskapene til ikoner sammen med tekstens klarhet ved å bruke dem sammen; selv om du i så fall skal handle utenfor plass.

Highrise , en CRM-app, bruker et tagikon i stedet for en tekstetikett før en liste over tagger.

7. Kontekstbaserte kontroller.

Det er et par tilnærminger du kan bruke i grensesnittdesign som relaterer til kontekst og konsistens. Man dikterer at du bør holde kontrollene konsistente i alle applikasjoner eller nettsteder for å sikre at folk vet hvor alt er og ikke blir forvirret. Den andre tilnærmingen er å endre kontroller eller navigering basert på konteksten til hver side eller et vindu. Kontekstbasert tilnærming er en hvor du bare viser de tingene brukeren trenger for å fullføre oppgaven de jobber med i den aktuelle konteksten.

En god illustrasjon av de to tilnærmingene kan ses i det nylige redesignet av Microsoft Office-grensesnittet. Office 2003, så vel som sine eldre søsken, fulgte designprinsippet for å holde ting konsistent. Du hadde til og med en masse verktøylinjer som ble vist på skjermen, og disse endret ikke om du jobbet med tabeller, grafikk, tekst eller bilder. Microsoft redesignte dette grensesnittet for Office 2007 ved hjelp av en kontekstbasert tilnærming. På toppen ser du nå et bånd - eller et sett med faner. Når det er valgt, viser e- tabellen et sett med kontroller som er relevante for en gitt oppgave , enten det er korrekturlesing, arbeid med grafikk eller bare skriving.

Kontekstbasert tilnærming gjør det mulig å vise færre kontroller til enhver tid, men samtidig flere kontroller som er relevante for oppgaven ved hånden . Jeg vil ikke anbefale å bruke en kontekst-tung tilnærming til generell webdesign, fordi for de fleste nettsteder forventer folk å se konsistent navigasjon over hele verden. Dette skyldes at hvert nettsted er annerledes, og det ville gjøre surfingopplevelsen mye vanskeligere hvis alle de enkelte sidene på et bestemt nettsted var forskjellige også.

Etter å ha sagt dette, kan dette brukes til webapplikasjoner fordi de ikke bare er enkle nettsteder - de er stykker programvare som lever i skyen. Folk sannsynligvis vil bruke mye tid på en webapp og vil ha mer mulighet til å lære hvordan det fungerer . Kompleksiteten til noen webapper betyr at du virkelig trenger å bruke kontekstbasert tilnærming, fordi hvis du ikke gjør det, vil det være for mye på skjermen når som helst for alle som skal behandle. Ved å vise bare noen få relevante kontroller for en gitt oppgave, kan brukerne finne ut hva de skal gjøre på mye mindre tid.

fregne , en tidsporingsapp, har en bryter øverst på hovedverktøylinjen. Den bytter mellom tidsinngangskontroller og rapporteringskontroller, kun viser ett sett om gangen. Dette gir mening fordi du enten skriver inn tid eller gjør en rapport - ikke to ting samtidig.

Å konkludere…

Gjøre grensesnittet ditt mindre, gjemme avansert funksjonalitet og ta det opplagte er banen til et enklere grensesnitt . Langs denne banen vil du møte mange hindringer. For hver funksjon du skjuler eller tar bort, vil det være folk som klager og krever at du tar det tilbake. Men hver og en av brukerne dine har forskjellige behov og bruker din web-app eller nettside på en annen måte. Hvis du lytter til alle funksjonsforespørsler og behov, og går så langt som å adressere og implementere dem alle, er det lite sannsynlig at du kommer til å komme frem til programvaredesign. Mer sannsynlig, vil du snuble inn i en dyp pit av oppblåsthet som det er nesten umulig å klatre ut.

Når du legger til en funksjon, er det veldig vanskelig å ta det ut fordi folk vil begynne å bruke det, og noen vil avhenge av det. På grunn av dette må du sørge for at hver funksjon, og hvert grensesnittelement du legger til, gir mening og legger til ekte verdi for produktet . Flere funksjoner betyr flere kontroller og innhold. Flere kontroller og innhold gjør det vanskeligere å gjøre grensesnittet enkelt og rotfritt.

Enkelhet handler om å redusere og omorganisere komplekset til små og håndterbare. Hvis noe, bør du sikte på å ta bort, heller enn å legge til. Et produkt med færre knapper er ikke nødvendigvis mindre kraftig - det er sannsynligvis bare bedre designet .

Skrevet utelukkende for WDD av Dmitry Fadeyev. Han driver en blogg om brukervennlighet kalt Brukervennlighet .

Bruker du noen av disse teknikkene i designene dine? Tror du de hjelper brukeropplevelsen? Vennligst del dine erfaringer med oss.

• ← Bygg bedre nettsteder ved å fortell historier
• 10 brukervennlighetstips for webdesignere →