Dodirnite za odbacivanje

Dizajn pristupačnih izlaznih otvori za modaliste

Razgovarajmo o velikim uspjesima. Nije čarobno poput Houdinijevih lisica ili Thorhovog bifrota, umjesto toga vrlo uobičajena - interaktivna ikona za uklanjanje neugodnih skočnih prozora s vašeg željenog sadržaja. Ako su modaliteti, dijalozi, skočni prozori ... kako god ih želite zvati neophodno zlo za prolazni sadržaj, moramo izgraditi pristupačne otvori za bijeg.

Vizualni dizajn

Uobičajeni ux uzorak za e-x-iting prilično je jednostavan, vidite li što sam tamo učinio? Povijest [x] seže do 1970. računalnog dizajna. Prvo pojavljivanje vjerovatno je bio Atari TOS izbornik - popis akcija vezanih uz slova i simbole tipkovnice. [x] bila je naredba za Exit. Tada ga je koristio NeXT, koji je nadahnuo Windows, i postao standardni simbol za približavanje masovnom prihvaćanju Windowsa širom svijeta 1995. Sve ovo treba reći da ovdje nema potrebe za ponovnim izumom kotača, upotrijebite simbol svi u cijelom svijetu očekuju.

Pristupačan dizajn

Počet ćemo s osnovama - [x] treba uvijek pružiti, čak i ako korisnik može dodirnuti pozadinu, prijeći prstom ili upotrijebiti nativni gumb za povratak da biste također odbacili modal.

Ikona u obliku slova

Dizajnirajte ikonu, umjesto da koristite tipografski oblik slova, što je u skladu s ostatkom vašeg ikonografskog skupa. Treba ga jasno shvatiti kao [x] sa sva četiri dodatka jasno odvojena. Osobno volim dizajn pod kutom od 90 ° i težinu prilagodim postavljenoj.

Visoki kontrast u odnosu na nizak

Boja bi trebala biti neutralna i zadovoljiti a11y preporučeni omjer kontrasta 4: 1. Naravno, skočni prozori djeluju astronomski bolje kad je [x] jedva svijetlo siva, ali to, moji prijatelji, nazivamo tamnim uzorkom. Čineći da je [x] jedva vidljiv, mi upozoravamo korisnika da vrši glavnu radnju čineći ga obaveznim u bijegu. To dovodi do frustrirane korisničke baze i lažnih pozitivnih rezultata za posao.

Sadrži vs samostalan

Ikona bi trebala biti sadržana tako da označava relativnu veličinu cilja slavine i razlikuje interaktivne ikone od statičnih, posebno u neposrednoj blizini.

  • Ako su ikona i spremnik ispod minimalne ciljne veličine dodira (48x48dp / pt), izgradite cilj takta tako da bude veći od vizualnog prikaza gumba i ne prekrivajte ga s drugim interaktivnim elementima.
  • Ako ova ikona živi unutar interaktivne trake, poput navigacije u zaglavlju, tada traka već stvara ovaj prostor koji možete dodirnuti - huoray!

plasman

Pop-up sadržaj nije obavezan, ne bi ga trebalo blokirati, a način za bijeg trebao bi biti lako prepoznat kao akcija povezana s skočnim prozorom. Iako započinje dosljedno u gornjem desnom dijelu većine Windows softvera, danas i Appleov HIG i Googleov materijalni dizajn postavljaju ikoničnu navigaciju u lijevo gornje lijevo. Nijedan sustav ne daje jasan smjer kad je riječ o modalitetu.

Glavna izdanja revizije

Modalni položaj

Većina modalnog sadržaja nije obavezna, osim Upozorenja, tako da ne bi trebali osjećati blokiranje. Iako se tradicionalni modal koji se pojavljuje na sredini ekrana, postoji noviji trend da se modaliteti manje blokiraju tako da ih postavite na dno zaslona. Ovisno o sadržaju koji je najvjerojatnije pod modal, možete ga umetnuti sa strana… ili ne.

Dno vs Centar

[x] Položaj

Iznutra vs Preklapanje vs izvana

Iznutra se pojavljuje modal. Ovo najočitije povezuje [x] s modalnim i dobro funkcionira s estetikom ravnog dizajna, no dodaje složenost unutarnjem izgledu naslova unutar modalnog.

Preklapanje preklapa modal. Prekid u kontinuiranoj liniji privuče najviše pažnje na [x], ali dolazi s izrazitim vizualnim stilom dizajna koji dodaje vizualnu složenost i osjeća se manje profinjenim.

Izvana se pojavljuje izvan modalnog. Ovo čisti dizajn modala, no [x] se može zbuniti s korisničkim sučeljem ispod.

Desno vs lijevo. Ikone Meg Robichaud

Kraj (desno) Postavljanje [x] na desnu stranu bolje je za dodirnuti palac desne ruke i ne uspoređuje se sa statičkom ikonografijom.

Početak (lijevo) Postavljanje [x] na lijevu stranu slijedi trenutnu navigacijsku paradigmu, no ona povećava vertikalnu visinu modaliteta zbog blizine lijevo ikonografije poravnane i to je daljnji cilj dodira na velikim telefonima.

Ovo je za LTR jezike. "Start" je mjesto na kojem korisnik započinje čitati sadržaj, a "kraj" gdje se zaustavi. Na jezicima RTL-a trebali biste je okrenuti lijevo.

Optimalni raspored

Objedinjujući sve sada - naš trenutni optimalni raspored je modal prema dnu s unutarnjim, gornjim desnim bočnim dijelom s ikonografskim prikazom [x].

Samo tekst, slika i ikona

Posljednje misli

Želim potvrditi da možete koristiti i dva gumba vodoravno naslagana na mjestu gdje je jedno "odbacivanje". Ovo je sjajna alternativa i toplo preporučuje Material Design, ali u slučaju kada ne želite da otkaz bude tako istaknut, slučajan dodirnite ili imate problema s prijevodima lokalizacije, gumb [x] je sjajno univerzalno rješenje.

Ja sam Linzi Berry, trenutno voditeljica dizajnerskih sustava u Lyftu. Ja znojim detalje pa ne morate. Moja se nada u dokumentiranju razmišljanja i procesa dizajniranja sustava doprinijeti i učiti od dizajnerske zajednice općenito. Pretplatite se!