7 Interface Design Teknikker til at forenkle og de-Clutter Dine Interfaces
Hvad er enkelhed? Enkelhed er kvaliteten af at være naturlig, ren og let at forstå. Det er ikke overraskende, at enkelheden ofte trives i brugergrænseflade design. De fleste mennesker synes naturligvis ikke om kompleksitet i enheder og software. Ja, nogle mennesker finder glæde ved at finde ud af, hvordan noget virker, men for de fleste af os er det umuligt at betjene en enhed fører til spildt tid og frustration, og det er ikke en god ting.
Hvis du kan tage en kompleks enhed eller et program og på en eller anden måde omorganisere, omorganisere og omkonstruere grænsefladen for at gøre det nemt at bruge og forstå, så er du godt på vej til at levere en bedre brugeroplevelse .
I denne artikel skal jeg tale om 7 praktiske teknikker, som du kan bruge i webdesign til at gøre dine hjemmesider eller webapplikationer enklere og mindre rodet.
1. Modale vinduer.
Jeg er sikker på, at du kan huske dage før popup-blokkere blev introduceret i webbrowsere, da du måtte kæmpe med en sværm af små vinduer, der alt for ofte besluttede at dukke op over toppen af dit browservindue, tilsyneladende med sålen Formålet med at irritere dig. Ingen kunne lide disse pop-up-vinduer, og blokeringsteknologier blev introduceret for at stoppe dem. Men i dag ser vi en ny serie popup-vinduer på nettet, der er meget renere og fungerer meget bedre til deres formål. Disse er modale vinduer.
Modale vinduer er som pop op-vinduer, men i stedet for at blive vist i et separat browservindue, vises de lige inden for den nuværende, over toppen af indholdet. Modale vinduer kræver interaktion for at fortsætte, så indholdet nedenfor er normalt mørkret for at indikere dette, samt at blokere indholdets distraherende støj og skifte visuel fokus på vinduet ovenfor .
Så hvorfor ville du bruge modale vinduer og hvordan forenkler de din grænseflade? Nå, hvis du ser på alternativet, bliver deres formål meget klarere. Alternativet til at bruge noget som et modalt vindue er normalt at indlæse en ny side. For eksempel har nogle websteder en indstillingsside for din konto. Når du klikker på indstillingslinket, er du taget til en ny side. Men hvad hvis der kun var få indstillinger for indstillinger - er det virkelig værd at omdirigere brugeren til en ny side?
I mange tilfælde kan ting som indstillinger, redigeringsbokse og loginformularer vises i et modalt vindue over indholdet. Dette sparer brugeren en returflyvning til en anden side . Det letter også belastningen på webserveren, da den har at håndtere færre anmodninger.
ActionMethod , en projektstyringsapp, viser modale vinduer i hele applikationen. Her er formularen Vurdering.
2. Bøjle kontroller.
At sætte færre ting på pladen ville også gøre parret lettere at sluge. Hvis din ansøgning har mange kontroller, skal dine brugere scanne igennem de fleste af dem for at finde det, de leder efter. Chancerne er, at nogle af kontrollerne er mindre vigtige end andre, og nogle af kontrollerne bruges meget mindre end andre . Det enkleste, du kan gøre, er at gemme væk og gem disse kontroller fra standardvisningen.
En smart måde at gøre dette på er at skjule kontrollerne, men så vise dem, når brugeren svæver over bestemte områder. Disse er svømmerkontroller. For eksempel viser Twitter, en populær mikroblogging-app, et feed af, hvad alle på din følgeseddel for nylig har sagt. Hver besked er indkapslet i sin egen lille boks. Der er to handlinger, du kan udføre på hver besked: Tilføj den til dine favoritter eller svar på den.
Visning af favorit- og svarknapperne på alle meddelelser vil føre til rod. Du vil sandsynligvis ikke reagere på alle meddelelser i feedet, og endnu mindre tilbøjelige til at tilføje dem alle til dine favoritter. Så Twitter viser kun kontrollerne i den rigtige kontekst - når du svæver over meddelelsen. Dette fører til en enklere grænseflade og intet tab i funktionalitet . Der er fare for, at nye brugere ikke bemærker disse kontroller, når de er skjulte; Men mange mennesker har en tendens til at musen over de ting, de ser på, så i betragtning af at svæveområderne er store nok, vil disse kontroller sandsynligvis blive opdaget hurtigt.
Twitter viser tilføjelsen til favoritter og svarknapper for hver besked, mens du svæver over den.
3. Kontrol efter behov.
En anden måde at skjule tingene på er at bruge Javascript og vise et sæt kontroller, når brugeren klikker et eller andet sted. For eksempel kan du have en søgefelt på dit websted, der giver mulighed for nogle brugerdefinerede filtre eller avancerede søgninger. I stedet for at vise disse indstillinger som standard kan du gemme dem væk og gøre dem tilgængelige via en knap i slutningen af søgefeltet. Hvis du klikker på denne knap, kan du afsløre sæt af muligheder eller filtre. Det betyder, at du beholder den avancerede funktionalitet til de brugere, der har brug for det, og samtidig forenkler grænsefladen for folk, der bare skal bruge den enkle søgning.
Ikke alle bruger nogle af de mere avancerede eller specialiserede kontroller på dit websted. Hvis du gemmer dem, gør du grænsefladen renere og lettere at forstå, fordi nye brugere har færre elementer til at behandle og regne ud. Det er ikke en nem opgave at vælge hvad man skal skjule, og hvad man skal holde, og det er dit job som designer at finde en passende balance.
Kontain , en blogging-app, indeholder avancerede søgefiltre til deres søgning, skjult i en rullemenu i slutningen af søgefeltet.
4. Udvidelse af formularer.
Jeg er sikker på, at du er bekendt med filoverførselsfeltet, vi ofte ser i webformularer. Det er normalt en lille bar med en fil gennemse knap ved siden af. Forestil dig en situation, hvor brugeren sandsynligvis vil uploade flere filer på en gang selv. Du kan vise flere filuploadfelter, men det er ikke ideelt, fordi det vil rodde grænsefladen, og der er ingen måde at fortælle, hvor mange felter brugeren skal bruge. En god løsning i dette tilfælde ville være at bruge en udvidende formular .
Når brugeren uploader en fil, vises et andet filoverførselsfelt nedenunder, klar til at acceptere mere. Du kan implementere den samme teknik til ethvert andet inputfelt. For eksempel har denne formular måske en flok emailadresser til personer, du vil invitere til et hold eller et andet formål. I stedet for at have mange tekstfelter, kan du bare have et eller et par, og så når brugeren fylder dem ind, oprettes der nye . Udvidelse af formularen på denne måde er en fantastisk måde at spare plads på og forenkle din grænseflade .
Gmail Viser kun et vedhæftningsfelt, når du opretter en ny besked. Du kan klikke på linket "Vedhæft en anden fil" for at åbne mere, når du har brug for dem.
5. Etiketter inde i input formularer.
Former kan blive komplekse hurtigt. Du har tekstfelter, etiketter, tekstområder, drop downs, afkrydsningsfelter og så videre og så videre. Desuden er udfyldning af formularer normalt ikke meget sjovt, så det kan gøre dem mindre skræmmende og lettere at bruge hurtigere processen og gøre former enklere. En teknik, du kan bruge til at gøre formularerne mere enkle, er at flytte etiketterne uden for indgangsområderne indad. Så i stedet for at vise en etiket ud for det pågældende tekstfelt, skal du vise det som en fyldt værdi inde i tekstfeltet .
Dette skærer betydeligt ned på pladsen og formindsker formens overordnede størrelse. Mindre ting synes enklere , så formularen skal se nemmere ud. Det kan ikke være muligt at gøre dette til mere komplicerede formularer, hvor du har forskellige inputtyper (afkrydsningsfelter, radioknapper, drop-downs), men hvis du har et par tekstfelter er det værd at overveje, f.eks. en login formular.
Nu er der en ulempe ved denne metode, som heldigvis kan løses med en mere grundig implementering. Når brugeren først lægger siden, så ser de felterne og vil kunne læse etiketterne. Når de klikker på et felt, vil de fleste former som dette skjule etiketten helt, så brugeren kan indtaste deres input. Men hvad hvis brugeren for tidligt klikker på et felt, og så glemmer, hvad det er, de skulle formes? De skal muligvis klikke væk fra formularen for at få etiketten til at blive vist igen (forhåbentlig).
For at adressere dette kan du, i stedet for at gemme etiketten helt, gemme den, når brugeren klikker på den og derefter skjule den helt, når brugeren begynder at skrive.
MobileMe viser etiketter inde i indtastningsfelter på deres login-skærm og dimmer dem derefter længere, når du vælger et felt.
6. Ikoner i stedet for tekst.
For at opnå enkelhed i interface design, skal du reducere og fjerne alle unødvendige eller sjældent brugte dele . Disse omfatter ikke blot kontroller, men kan også være ting som tekstetiketter. Hvis din grænseflade har mange etiketter, så kig på det og spørg dig selv - er alle disse mærker nødvendige? Er de fleste af dem blot angivende det åbenlyse? Hvis en etiket peger på noget, der er indlysende i forhold til den pågældende vare, behøver du ikke den etiket - den er forældet.
For at give dig et eksempel på dette, tænk på indlæg i en blog. Under hvert indlægs overskrift kan du have ting som dato og forfatter. Vedhæftning af etiketter inden hver enkelt som "Forfatter:" og "Dato:" er muligvis ikke nødvendig. Når nogen ser et navn og en dato under en artikels overskrift, er de meget sandsynligt at finde ud af, at dette er forfatteren, og det er datoen. Konteksten, såvel som det format, de er vant til fra at læse andre blogs, giver dine brugere alle de spor, de har brug for til øjeblikkeligt at forstå betydningen bag dataene. Stripping væk disse etiketter vil give dig en renere grænseflade .
I nogle tilfælde, hvor det ikke kan fungere, når du forlader en etiket, kan du erstatte etiketten med et ikon. Et ikon har nogle fordele i forhold til en tekstetiket. Det tager mindre plads. Det er lettere at fokusere på, da dets farve og særprægede form tiltrækker øjet lettere end tekst. I nogle tilfælde kan betydningen formidles lige så effektivt som tekst. Hvis du f.eks. Har en etiket kaldet "Tags:" efterfulgt af en liste over taglinks, kan du erstatte etiketten med et lille billede af et tag. Forudsat at du har et teknisk kyndigt publikum, skal betydningen i denne sag forblive lige så klar.
Det virker naturligvis ikke for alle tilfælde, og hvis der er fare for at være tvetydig, bør du spille det sikkert og bruge en tekstetiket. Når det er sagt, er der ingen grund til at vælge den ene eller den anden udelukkende - du kan drage fordel af ikonernes attraktive iøjnefaldende egenskaber sammen med tekstens klarhed ved at bruge dem sammen; selvom du i så fald vil handle bort fra rummet.
highrise , en CRM app, bruger et tagikon i stedet for en tekstetiket før en liste over tags.
7. Kontekstbaserede kontroller.
Der er et par tilgange, du kan bruge i interface design, der relaterer til kontekst og konsistens. Man dikterer, at du bør holde kontrollerne ensartede i dine applikationer eller websteder for at sikre, at folk ved, hvor alt er, og ikke bliver forvirret. Den anden tilgang er at ændre kontrol eller navigation baseret på sammenhængen mellem hver side eller vindue. Den kontekstbaserede tilgang er en, hvor du kun viser de ting brugeren har brug for for at fuldføre den opgave, de arbejder på i den pågældende kontekst.
En god illustration af de to fremgangsmåder kan ses i den seneste redesign af Microsoft Office-grænsefladen. Office 2003, såvel som dets ældre søskende, fulgte designprincippet for at holde tingene konsekvente. Du havde altid en masse værktøjslinjer, der blev vist på skærmen, og de ændrede sig ikke, om du arbejdede med tabeller, grafik, tekst eller billeder. Microsoft redesignede denne grænseflade til Office 2007 ved hjælp af en kontekstbaseret tilgang. Øverst ses nu et bånd - eller et sæt faner. Når du vælger, viser e- fanen et sæt kontroller, der er relevante for en given opgave , det være sig korrekturlæsning, arbejde med grafik eller simpelthen at skrive.
Den kontekstbaserede tilgang giver dig mulighed for at vise færre kontroller til enhver tid, men samtidig flere kontroller, der er relevante for opgaven ved hånden . Jeg vil ikke anbefale at bruge en kontekst-tung tilgang til generelle webdesign, fordi for de fleste hjemmesider forventer folk at se konsekvent navigation over hele verden. Dette skyldes, at hver hjemmeside er anderledes, og det ville gøre browserenfaringen meget sværere, hvis alle de enkelte sider på et bestemt websted også var forskellige.
Når det er sagt, kan dette bruges til webapplikationer, fordi de ikke bare er enkle hjemmesider - de er stykker software, der lever i skyen. Folk vil sandsynligvis bruge meget tid på en webapp og får mere mulighed for at lære, hvordan det virker . Kompleksiteten af nogle webapps betyder, at du virkelig skal bruge den kontekstbaserede tilgang, fordi hvis du ikke gør det, vil der til enhver tid være for meget på skærmen til enhver, der skal behandle. Ved at vise kun nogle få relevante kontroller til en given opgave, kan dine brugere finde ud af, hvad de skal gøre på meget mindre tid.
Freckle , en tidsporingsapp, har en switcher øverst på deres vigtigste værktøjslinje. Den skifter mellem tidsindgangskontroller og rapportkontroller, der kun viser et sæt ad gangen. Det giver mening, fordi du enten indtaster tid eller udarbejder en rapport - ikke to ting på samme tid.
For at konkludere ...
Gør din grænseflade mindre, gemmer avanceret funktionalitet og tager det oplagte er vejen til en enklere grænseflade . Langs denne vej vil du stå over for mange forhindringer. For hver funktion du skjuler eller tager væk, vil der være mennesker, der klager og kræver, at du tager det tilbage. Men hver enkelt af dine brugere har forskellige behov og bruger din webapp eller hjemmeside på en anden måde. Hvis du lytter til alle funktionsforespørgsler og behov, og går så langt som at adressere og implementere dem alle, er du usandsynligt, at du kommer frem til zenithen af software design. Mere sandsynligt vil du snuble ind i en dyb pit af bloat, hvorfra det er næsten umuligt at klatre ud.
Når du tilføjer en funktion, er det meget svært at tage det ud, fordi folk vil begynde at bruge det, og nogle vil afhænge af det. På grund af dette skal du sørge for, at hver funktion og hvert grænsefladeelement du tilføjer giver mening og tilføjer reel værdi til dit produkt . Flere funktioner betyder mere kontrol og indhold. Flere kontroller og indhold gør det sværere at gøre grænsefladen simpel og rodfri.
Enkelhed handler om at reducere og omorganisere komplekset til små og håndterbare. Hvis noget, bør du sigte på at tage væk, snarere end at tilføje. Et produkt med færre knapper er ikke nødvendigvis mindre kraftfuldt - det er sandsynligvis bare bedre designet .
Skrevet udelukkende til WDD af Dmitry Fadeyev. Han driver en blog om brugervenlighed kaldet Brugbarhed Post .
Bruger du nogen af disse teknikker i dine designs? Synes du, at de hjælper brugeroplevelsen? Del venligst dine erfaringer med os.