6 oblikuju UX uzorke - i kada ih treba izbjegavati

Oblikujte UX uzorke

Dosadni, dosadni oblici. Volite ih ili ih mrzite (i suočimo se s tim da ih mrzite), oni su neizostavni dio gotovo svake izrade weba i bez obzira gradite li cjelovite internetske trgovine (poput naših inspirativnih primjera web stranice za e-trgovinu ) ili jednostavne korporativne web stranice (možda pomoću izvrsne graditelj web stranica ), prije ili kasnije morat ćete izraditi neke obrasce.

Teško možemo kriviti dizajnere što su pokušali smisliti inovativne načine kako bi ih učinili zanimljivijima, ali koliko se ovih trendova oblika zapravo drži u pogledu upotrebljivosti? Pogledajmo neke uobičajene UX obrasce obrazaca, počevši od obrazaca unutar modalnih oblika.

Tražite više savjeta za web dizajn? Pogledajte naš izbor vrha web hosting usluge.



01. Obrasci modaliteta

Postavljanje obrazaca unutar modaliteta i njihovo dinamično pojavljivanje čini se očitim rješenjem inače previše složene situacije. Napokon, obrasci ne zauzimaju značajnu količinu prostora, pa zašto im onda treba vlastiti namjenski URL? Zapravo postoji nekoliko razloga.

Pristupačnost. Najvažniji je razlog ako ih činimo dostupnima (a očito bismo to trebali činiti), onda ih treba lako odbaciti pritiskom na tipku ESC ili klikom na bijeli prostor. Sad kad bi se modali lako odbacili, bila bi neugodnost (a da ne spominjemo protupristupačnost) slučajno odbaciti modal (i podatke o nepodnesenom obrascu) na pola ispunjavanja obrasca.

macbook pro 13 dizajn tvrdog kućišta

Korisnička podrška. Osim pristupačnosti, kombiniranje obrazaca s modalima i u osnovi nepridržavanje obrasca na namjenskom URL-u znači da se predstavnici korisničke službe ne mogu povezati s tim obrascima tijekom komunikacije, što otežava stvari i kupcima i predstavnicima korisničkih službi.

Menadžeri lozinki (bilo u pregledniku ili kao samostalne aplikacije) ponekad se sjećaju detalja za prijavu od zaslona do zaslona, ​​pa ako se korisnik može prijaviti s bilo kojeg mjesta u aplikaciji ili na web mjestu, možda će biti teško doći do svojih podataka za prijavu detalji ako su navedeni detalji spremljeni kad je korisnik bio na drugom URL-u.

Riješenje: nemojte prikazivati ​​obrasce u modalima. Renderiranje obrazaca u modalima ima više problema nego što ih rješava, a iako su neki obrasci toliko osnovni da zaslon izgleda gotovo prazno, korisnicima koji ispunjavaju obrasce vjerojatno neće biti stalo. I vi ste korisnik, pa već znate da je trenutni odgovor na obrazac: 'Nadam se da ovo neće potrajati', ne, 'ovaj obrazac ne izgleda dovoljno zanimljivo'. Dajte prioritet pomoći korisnicima da prijeđu na ono zbog čega su stvarno došli.

02. Nesemantička oznaka

Uzorak UX obrazaca: Nesemantičko označavanje

Fokusirana polja e-pošte na mobilnom uređaju prikazivat će verziju tipkovnice u kojoj je simbol @ odmah dostupan, a polja URL .com

Nisu svi elementi stvoreni jednaki. Semantička oznaka osigurava postojanje različitih oznaka koda za svaku priliku; na primjer, iako standardno polje za unos može izgledati isto kao polje e-pošte, dobavljači aplikacija i preglednika znaju razliku i njihovo je ponašanje ispravno prilagođeno ovisno o očekivanom unosu.

Fokusirana polja e-pošte na mobilnom uređaju prikazat će verziju tipkovnice gdje je simbol @ odmah dostupan, dok se standardna polja za unos neće ponašati ovako. Samo da pojačaju koncept, polja lozinke vidljivo će zamijeniti unos korisnika zvjezdicama - iz sigurnosnih razloga -, a polja URL prikazat će se .com na tipkovnici, radi praktičnosti.

No budući da su ove razlike tako suptilne, na semantiku se često zaboravlja, posebno kod dizajnera koji nisu svjesni tih razlika jer nisu uključeni u 'stranu koda'.

Riješenje: provesti semantičku oznaku. Bez upotrebe semantičkog označavanja, korisnici nisu u stanju iskoristiti ove uštede vremena, što je korisnost korisnosti, zbog čega uvijek preporučujem dizajnerima da programerima komuniciraju kako bi se pojedini elementi korisničkog sučelja trebali ponašati, bilo tijekom primopredaje ili na neki drugi način.

Programeri i dizajneri također bi se trebali čuvati skrivanja polja za unos (tj. ili ekvivalent), koncept koji se koristi za postupno otkrivanje ili prikupljanje podataka koji su dostupni bez da ih korisnik izričito nudi (poput lokacije, pristupa se na strani poslužitelja). Skrivena polja za unos u trenutku kada automatsko popunjavanje stupi na snagu nemaju tip, što rezultira preskakanjem u potpunosti.

03. Split obrasci

UX obrasci obrasca: Dijeljenje obrazaca

Prisiljavanje korisnika da prolaze kroz dva koraka kada je u svakom koraku samo jedno polje (e-pošta i lozinka) je nepotrebno

Podijeljeni oblici su dugi oblici raščlanjeni na dijelove; na primjer, jedan odjeljak za adresu za dostavu i drugi odjeljak za podatke o naplati. Ovaj koncept zapravo ima potpuni smisao i koristi se (uspješno) već jako dugo.

Naravno, glavna korist od razdvajanja oblika je smanjenje kognitivnog preopterećenja; međutim zlouporaba cijepanja oblika zapravo može imati nepovoljan učinak. Na primjer, kada se implementira s obrascima za prijavu, prisiljavanje korisnika da prolaze kroz dva koraka kada u svakom koraku postoji samo jedno polje (e-pošta i lozinka) nije potrebno, a da ne spominjemo činjenicu da krši prednosti samodovršavanja.

Samodovršavanje radi u skladu s ostalim poljima unosa. Na primjer, kada korisnici upišu svoju adresu e-pošte za prijavu, polje lozinke prikladno će se samodovršavati ispravnom kombinacijom spremljenom za tu adresu e-pošte, ali kada dijeli povezana polja u različite korake, preglednik ne može sam dopuniti ono što nema. Automatsko popunjavanje može uštedjeti dan, ali ishod stvarno ovisi o tome da preglednik donosi točne pretpostavke (tj. Ako korisnik ima više prijava za isto web mjesto ili aplikaciju, preglednik može odabrati pogrešnu kombinaciju).

kako nacrtati ptičji kljun

Riješenje: Neka obrasci budu dosadni!

Oblici su dosadni i uvijek će biti. Umjesto da ih pokušavamo učiniti zanimljivima, najkorisnija dizajnerska odluka koju možemo donijeti o obrascima jest učiniti ih bržim i lakšim za upotrebu. Što se tiče razdvajanja oblika, najbolja primjena tehnike je koristiti je samo pri dijeljenju nepovezanih polja.

Obrazac UX obrasci: Čarobne poveznice

Uz čarobne veze, nakon unosa adrese e-pošte, korisniku se putem e-pošte šalje veza koja će ga automatski prijaviti

Ostajući na temi obrazaca za prijavu, čarobne poveznice novi su trend u kojem se nakon unosa adrese e-pošte korisniku e-poštom šalje veza koja će ih automatski prijaviti. Ako ste ikada koristili Slack, već ćete biti upoznati s konceptom koji na mobitelu štedi da morate unijeti lozinku.

Neki mogu reći da je koncept pomalo zamoran, jer korisnik zapravo mora prebaciti aplikaciju da se prijavi, iako je doduše protok UX malo bolji od primanja privremenih podataka za prijavu koje korisnik treba kopirati u spomenutu aplikaciju da bi se mogao prijaviti Osim kršenja automatskog popunjavanja i / ili automatskog dovršavanja, nepoznate konvencije mogu zbuniti korisnike.

koja je razlika između radne površine i radne stanice

Riješenje: Neka čarobne poveznice budu opcionalne ili sekundarne. S čarobnim vezama nema puno pogrešaka i one zasigurno mogu biti korisne mobilnim korisnicima koji radije ne bi tipkali; međutim konvencija iznosi previše pretpostavki o tome kako korisnik postavlja svoju e-poštu. Da biste osigurali najbolje rezultate, čarobne poveznice učinite neobaveznim.

05. Dvofaktorska autentifikacija

Dvofaktorska autentifikacija (ili 2FA) nešto je poput mača s dvije oštrice. S jedne strane, povećava sigurnost tražeći od korisnika da odobre pokušaje prijave putem SMS-a, e-pošte ili neke vrste 2FA aplikacije za provjeru autentičnosti; s druge strane, prisiljava korisnike da odobravaju pokušaje prijave putem SMS-a, e-pošte ili neke vrste 2FA aplikacije za provjeru autentičnosti - urgh!

Kao što nam nalaže ljudska psihologija, više smo zabrinuti problemima koje imamo trenutno, pa je teško brinuti o prednostima sigurnosti dok naš račun zapravo ne bude hakiran. Većina korisnika ne želi 2FA dok im ne zatreba.

Riješenje: Nemojte provoditi 2FA ili, u najmanju ruku, nudite prikladne načine za njegovo provođenje, poput WiFi-a ili e-pošte.

Ako 2FA nije potreban, barem ga učinite neobaveznim (tj. Korisnik ga mora uključiti putem postavki navedene aplikacije ili web mjesta).

Recimo da je korisnik u inozemstvu. Neće imati pristup svakodnevnim mobilnim podacima; međutim, oni mogu imati pristup Wi-Fi-ju, pa bi e-pošta ili aplikacija 2FA autorizacije poput Google Authenticator bila puno prikladnija od autentifikacije temeljene na SMS-u. A ako ga korisnik može privremeno isključiti, još bolje!

06. Dinamična rezervirana mjesta

Oznake za unos imaju zaista nepravednu reputaciju jer mogu učiniti da oblici izgledaju nezgrapno, a mi smo naučeni vjerovati da je manje više. Ali ovo nije jedno od onih vremena. Uobičajeni trend dizajna korisničkog sučelja tijekom posljednjih nekoliko godina je da tekst rezerviranog mjesta prijeđe u naljepnicu kada se klikne na polje za unos. Međutim, rezervirana mjesta i naljepnice zapravo služe za dvije vrlo različite funkcije i jedna ne može zamijeniti drugu, bez obzira na to što mislite da animacija izgleda cool.

Rezervisari se koriste kako bi se korisniku pokazalo što se smatra prihvatljivom vrijednošću, dok je naljepnica samo kratki opis čemu služi polje za unos. Evo primjera kombinacije:

Oznaka: 'Ime' Rezervirano mjesto: 'John Doe'

Ako vaše kratkotrajno pamćenje nije fantastično, vjerojatno ste u nekom trenutku zaboravili što ste trebali otkucati na pola ispunjavanja polja obrasca. To je vrlo čest scenarij.

Riješenje: Uvijek imajte barem naljepnicu vidljivom. Držeći naljepnicu vidljivom, možete osigurati da polja obrazaca ostaju jednostavna za ispravno popunjavanje, čak i za korisnike s različitim potrebama pristupačnosti ili za pojedince pod povećanim kognitivnim opterećenjem u bučnom, ometajućem ili stresnom okruženju.

Imate hrpu novih ideja? Čuvajte ih unutra pohrana u oblaku .

super stvari koje možete raditi s javascriptom

Ovaj je članak izvorno objavljen u broju 318 od neto , najprodavaniji svjetski časopis za web dizajnere i programere. Kupite izdanje 318 ovdje ili pretplatite se ovdje .

Povezani članci: