Hvordan man designer et stort brugergrænseflade
Når du designer en webapp, placeres funktionalitet ofte over alt andet. For det meste er dette en god ting.
Folk (for det meste) bruger apps, fordi de er nyttige, ikke fordi de ser smukke ud. Men det betyder ikke, at du kan ignorere et godt UI-design, eller bare slå sammen en generisk udseende brugergrænseflade. God UI-design tilføjer den generelle brugertilfredshed af enhver webapp.
God UI-design er på mange måder ligner godt webdesign. Principper for farve teori, negativ plads og layout alle gælder stadig. Men UI-design kræver lidt mere troede i mange tilfælde på grund af den interaktivitet, det kræver.
Besøgende vil ikke bare se på dit websted; de vil interagere med det, nogle gange på måder du ikke havde forventet. Det er vigtigt, at du tager dig tid til virkelig at udforske brugergrænsefladen inden du går i gang med et webappdesign.
Nedenfor er en række principper og ideer til at designe en stor brugergrænseflade.
Konsistens er Vital
I brugergrænseflade design er sammenhæng mellem sider, funktioner og muligheder afgørende. Brugere kommer til at forvente visse ting, som de bruger dit program, og hvis disse ting ændres fra den ene side til den næste, er det både forvirrende og frustrerende.
Hvis f.eks. På hjemmesiden for dine applikationsbrugere navigerer mellem sider med en øverste navigationslinje, skal du sørge for at den samme øverste navigationslinje vises på efterfølgende sider, og at de sider, der er linket fra den, vises i samme rækkefølge.
Andre ting, der skal holdes konsistente, omfatter dit farveskema og generelle layout samt links til vigtige sider, der måske ikke direkte anvendes inden for applikationen (f.eks. En kontoside eller en FAQ).
Dine brugere vil lave fejl
Uanset hvor omhyggeligt du designer din brugergrænseflade og hvor intuitiv det er, vil dine brugere begå fejl ved en lejlighed. Nogle gange er det bare fordi de ved et uheld klikker, da de ikke betyder at. Andre gange skyldes det, at de ikke virkelig var opmærksomme på, hvad de laver, eller at de ikke læste sidens indhold.
I begge tilfælde er det vigtigt, at brugerne nemt kan fortryde de fejl, de laver.
Du vil bemærke på en række webapps, herunder Google Dokumenter, at næsten hver gang du gør noget, vises et link for at fortryde den sidste handling. På andre apps kan du muligvis bruge en menu til at fortryde en handling, men de bedste webapps gør det stadig nemt og tilgængeligt at gå tilbage et trin eller to på ethvert tidspunkt.
Fremhæv ændringer
Når der foretages ændringer under brugen af en webapp, er det nyttigt for dine brugere, hvis du fremhæver disse ændringer. Hvis din app f.eks. Indeholder et feed af oplysninger fra en række forskellige kilder eller brugere, fremhæver det nyt indhold, som det vises, en nyttig funktion.
Der er en række måder du kan fremhæve indhold på. En af de mest populære er at sætte en skyggefuld baggrund bag nyt indhold.
Andre apps bruger ikoner til at angive nyt indhold. Uanset hvad du beslutter dig for at gøre, skal du sørge for, at indikatorerne for nyt indhold ikke forstyrrer læsbarheden af indholdet. Det er også vigtigt at gøre disse meddelelser unintrusive, for ikke at distrahere brugere, der ikke i øjeblikket er interesserede i at ændre indhold.
TitanPad bruger farvekodning til at angive ændringer foretaget af hver bruger.
Aktivér tastaturgenveje
Ikke alle brugere derude kommer til at bruge tastaturgenveje, selvom du gør dem tilgængelige. Men for procentdelen af brugere, der bruges til tastaturgenveje, kan det ikke medføre katastrofale følger for brugertilfredsheden.
Tænk på de mest almindelige handlinger, brugerne udfører på din hjemmeside, og sørg for, at tastaturgenveje er tilgængelige for dem.
Sørg også for, at uanset hvilke tastaturgenveje du bruger, er logiske. Visse genveje er allerede almindeligt anvendt til visse funktioner (f.eks. Ctrl + Z for at fortryde eller Ctrl + V skal indsættes), så sørg for, at de fortsætter med at fungere som de gør i andre programmer.
Vælg de nøgler, der bruges i dine genveje, logisk, så de er nemme at huske for dine brugere. Sørg for, at du også inkluderer dem i enhver rullemenu ved siden af deres respektive handlinger.
Brug kendte standarder og konventioner
Bredt anvendte applikationer har fastsat visse standarder for måden, som tingene forventes at fungere i en ansøgning. For eksempel er folk vant til at se en mappeikon for "Åbn" eller et udklipsholder til "Indsæt".
De er også vant til at have visse muligheder og handlinger vises under bestemte applikationsmenuer (oprettelse af et nyt dokument eller en fil er næsten altid placeret under rullemenuen "Fil", kopiering og indsættelse findes næsten altid under rullemenuen "Rediger") .
Tænk på etablerede apps, der gør lignende ting til, hvad din app vil gøre, og se på, hvordan de organiserer handlinger og hvilke ikoner de bruger.
Hvis du ser sammenhæng mellem forskellige apps, bør du overveje at bruge de samme eller lignende ikoner til din egen app. Det gør det mere intuitivt for brugere, der skifter fra en anden app til din, og vil forbedre deres oplevelse.
Tilby personlige valgmuligheder
Mange webapps giver brugere mulighed for at foretage tilpasninger på deres konto. Nogle steder giver dig mulighed for at justere farveskemaet eller uploade brugerdefineret grafik. Andre giver dig mulighed for at omorganisere layoutet eller det, der vises, når du logger ind. Endnu andre kan du oprette brugerdefinerede sider eller lignende indhold, der viser de oplysninger, du er bekymret for.
Tænk på de mulige tilpasninger, som ville forbedre både dine funktionalitets funktionalitet og brugeroplevelse.
Nogle apps har muligvis ikke stor gavn af tilpasninger, mens andre er fyldt med muligheder. Selv enkle ting som at give brugerne mulighed for at uploade deres eget logo eller ændre farveskema eller skrifttype, der passer til deres personlige præferencer, kan have en drastisk indflydelse på brugeroplevelse og tilfredshed.
Highrise giver brugerne mulighed for at tilpasse farveskemaet på deres dashboard. Små tilpasningsmuligheder som denne kan i høj grad føje til brugertilfredshed.
Brug værktøjstips og integrerede hjælpemeddelelser
Mange app-udviklere indeholder omfattende dokumentation for at bruge deres apps, hvilket er utroligt nyttigt for nye brugere. Men i mange tilfælde er denne dokumentation opbevaret i sin egen, separate sektion på hjemmesiden. For at få adgang til det skal brugerne effektivt aflade ansøgningen.
Selv om omfattende dokumentation stadig er en god ide til komplicerede apps, øges brugen af værktøjstip og integrerede hjælpebeskeder i modale vinduer eller i et sidebjælke på siden for brugervenlighed for de fleste brugere.
Det er en problemfri måde at tilbyde hjælp, mens en person rent faktisk bruger din ansøgning, hvilket sparer tid og gør hele oplevelsen mere fornøjelig.
Brug Tabbed Navigation og Knapper til handlinger
Tabbed navigation har en række fordele i forhold til knapper eller tekstforbindelser. Det vigtigste er dog den subtile psykologiske virkning, den har.
Tabs fremkalde ved hjælp af en notesbog eller bindemiddel. Hver fane angiver et nyt afsnit eller emne. Det samme gælder online. Faner gør folk ubevidst tænkt på fysisk at flytte til en ny sektion af et websted eller en app.
Knapper på den anden side fremkalder en handling. Brug af knapper til ting som at indsende en formular giver mening psykologisk, som folk forbinder trykke på en knap med at gøre noget. Så for optimal brugeroplevelse, husk faner = navigation, knapper = handling.
Skygge alt bag et modalt vindue
Dette er en af de virkelig grundlæggende ting, der undertiden bliver overset. Når du åbner et modalt vindue, skal du sørge for at skygge alt i baggrunden bag vinduet. Dette gør vinduet skiller sig ud mere og eliminerer distraktioner.
Et godt eksempel på et modalt vindue med en skyggefuld baggrund.
Brug relevante ikoner og etiketter
Mange udviklere vælger at bruge ikoner i deres apps uden at mærke disse ikoner. Bortset fra de absolut mest almindelige ikoner er det ofte en fejl og forvirrer kun brugeren.
Tilføjelse i alt-tags, der vises, når ikoner svæves over, er ikke en god løsning for at undgå forvirring, da det stadig kræver for meget indsats fra brugerens side.
Placering af etiketter ved siden af dine ikoner betyder, at de er genkendeligt igen. Da brugerne bliver fortrolige med betydningen af hvert ikon, kan de hurtigere finde det, de leder efter, og indtil da kan de nemt se præcis, hvad hver ikon står for.
En anden mulighed er at gøre det muligt for dine brugere at skjule etiketterne, men sørg for, at standardindstillingen er, at de skal vises.
Hold ting simpelt
De bedste grænseflader er lige så enkle som de effektivt kan være. Tilføj ikke klokker og fløjter for at tilføje klokker og fløjter. Hvis en funktion har et klart formål, så tilføj det. Hvis det ikke gør det, så gør det ikke.
Det samme gælder for designelementer. Hvis der er et formål med et element, så er det okay at tilføje det. Men undgå at tilføje ting, der bare ser smukke ud. De vil kun tilføje visuel rod og forvirre dine brugere. Vælg den enkleste løsning, der får jobbet gjort.
Dette betyder ikke nødvendigvis, at din app skal være minimalistisk. Men husk at de fleste bruger apps til deres funktionalitet, ikke til deres design. Så længe designet ikke forstyrrer deres evne til effektivt at bruge din app, er det usandsynligt, at de endda betaler meget opmærksomhed på de visuelle elementer i appen.
Effektiv Workflow
Når du designer en brugergrænseflade, skal du overveje dine brugeres arbejdsgang. Folk har forudbestemte måder, de bruger bestemte typer software og bestemte apps, og du skal designe din grænseflade for at overholde disse mønstre.
Hvis f.eks. Visse handlinger generelt tages i forbindelse med hinanden, grupperes de sammen i samme område af appen.
Undersøg arbejdsprocessen for en række brugere for at se, hvad der synes at være i vejen for deres effektive afslutning af opgaverne, og find ud af hvordan man forbedrer brugergrænsefladen for at imødekomme deres behov. I nogle tilfælde kan UI alene ikke løse disse problemer, men nogle gange kan det.
15 Eksempler på store brugergrænseflader
Der er hundredvis eller endda tusindvis af webapps derude med fantastiske brugergrænsefladesignaler. Her er mere end et dusin for at give dig nogle ideer.
Shoply
Shoply gør det nemt for brugerne at slette, redigere eller se produkter, de allerede har uploadet, samt at tilføje nye produkter.
Invoicera
Invoicera bruger faneblad navigation og knapper til at udføre handlinger. Det holder også en relativt enkel og ret fremadrettet layout og farveskema.
Pandora
Det er indlysende, at designerne bagved Pandora tog højde for de grænseflader, der er til stede på MP3-afspillere og andre medieenheder ved udformningen af deres brugergrænseflade. Det er et intuitivt og brugervenligt design med praktisk talt ingen læringskurve.
Wufoo
Wufoo s form design interface er omtrent lige så intuitiv som en app kan få. Hjælp meddelelser vises, når du begynder at designe en ny formular for at forklare, hvad du skal gøre uden at skulle forlade siden.
Grooveshark
Grooveshark bruger ikoner til at hjælpe med navigation og funktionalitet. Fælles anerkendte ikoner som "play" og "skip" -knapperne er ikke mærket, men andre er som ikonerne Hjem og Favoritter.
Wridea
Wridea bruger en intuitiv grænseflade, der lader dig redigere alt ved blot at klikke på det. De bruger også menuer, der kun udvides, når du svæver over en ide, hvilket reducerer visuel rod, og de giver brugerne mulighed for at vælge mellem to farveskemaer.
Rygsæk
Rygsæk bruger knapper til handlinger og faner til navigation, hvilket gør det mere intuitivt at bruge.
Husk mælken
Husk mælken bruger faneblad navigation og knapper til handlinger. De indeholder også nyttige notater, der for det meste udelukker behovet for separat dokumentation.
Ta-da Liste
Ta-da Lists holder deres grænseflade så enkel som muligt. Der er ingen ekstra information, bare opgaven ved hånden. Det er utroligt intuitivt og giver en fremragende brugeroplevelse.
Relenta
Relenta bruger faneblad navigation og mærket ikoner. De holder også til standardkonventioner for e-mail-programmer, så der er næsten ingen læringskurve for deres brugere.
Viviti
Viviti bruger en intuitiv brugergrænseflade, der tager hensyn til behovene hos deres ikke-designer brugere. Der gives tips, når du logger ind, og dokumentationen er let tilgængelig og brugervenlig, så du kan vælge, hvilken type hjælp du vil have, før du faktisk forlader siden du arbejder på.
Bounce
Bounce s grænsefladen er meget ligefrem og enkel. De tilgængelige værktøjer er intuitive (bare træk over et område for at lave en note, skrive feedback og derefter dele).
Meetifyr
Meetifyr bruger en sådan intuitiv grænseflade, at næsten ingen dokumentation er nødvendig. Kigger over appen, det tager kun sekunder at genkende både hvordan man bruger det og hvad de forskellige ikoner og farvekoder betyder.
DoingText
DoingText forenkler brugen ved ikke at kræve nogen form for tilmeldingsproces. Dokumenter er simpelthen URL-baserede, og samarbejdspartnere behøver kun webadressen. Det gør samarbejdet til en næsten øjeblikkelig proces.
Writeboard
Writeboard indeholder nyttig stylinghjælp i sidepanelet ud for hovedindholdsområdet.
Skrevet udelukkende til WDD af Cameron Chapman .
Hvad er dit foretrukne UI-design? Har du andre råd til udformning af fremragende brugergrænseflader? Venligst del dem i kommentarerne!