este un asistent ușor, elegant, dinamic, rapid și eficient, menit să sprijine navigarea de bază și implicarea utilizatorului. Fiind doar un mic element circular care se mișcă odată cu utilizatorul, planând independent peste întreaga structură de design și, în general, lipindu-se de partea dreapta, este capabil să extindă funcționalitatea fiecărui ecran, precum și să facă programul mai convenabil.

După cum sugerează specificațiile Google, butonul ar trebui să aibă un ton constructiv și să ofere acces rapid la instrumente importante. Acest element ar trebui să fie simplu și plăcut pentru ochi, să conțină o grafică intuitivă și ușor de înțeles, un design viu și luminos, dar în același timp să evite funcțiile distructive. Am adunat o mică colecție de concepte mobile proaspete interfața cu utilizatorul care a stăpânit această nouă tendință.

Reproiectarea materialului Instagram

Acest design conține un mic buton rotund cu o umbră subtilă, colorat într-un ton de bleumarin asortat. Oferă acces rapid la fotografii și oferă, de asemenea, proprietarilor funcționalitate suplimentară. Însoțește majoritatea ecranelor.

Ecosistem de aplicații Android și Wear

Designerul Stefan Castro folosește un buton rotund plutitor care contrastează puternic cu conținutul datorită tonului său roșu. Deblochează cinci pictograme indicii minuscule, tot în culori strălucitoare, aranjate de jos în sus.

Magnet.me

Aici se folosește aceeași tehnică ca în exemplul anterior. În primul rând, este doar un buton rotund obișnuit care se lipește în partea de jos a paginii. Când utilizatorul îl apasă, dezvăluie fără probleme alte trei pictograme plasate vertical una după alta.

UI de colorat

Designerul Lois Yan demonstrează buna treaba opțional paleta de culori pentru element dat. Interfața site-ului este destul de grea în conținut. Un fundal roșu solid și strălucitor combinat cu umbre subtile separă pictograma de fluxul de informații, atrăgând discret atenția.

Salivarea de Henrique Ferreira

Aici butonul plutitor este susținut de un ecran translucid elegant suprapus. Ecranul este necesar pentru a atrage atenția asupra pictogramelor și titlurilor, deoarece nucleul aplicației este plin de imagini mari și suculente. O mică abatere de la traiectorie adaugă poftă designului.

Butoane de adăugare media flotante

Butonul de acțiune în formă de O este prezent în partea de jos a paginii și include patru CTA-uri aranjate într-un cerc. Din acest motiv, sunt disponibile rapid. Fiecare pictogramă are o dimensiune relativ mare, o culoare strălucitoare și un simbol clar și ușor de citit.

UI zilnic 010

Aici butonul este legat de o bară laterală mare care iese din partea dreaptă și împinge conținutul ușor spre stânga. În legătură cu social media, include toate portalurile populare: Pinterest, Twitter, Facebook, Google etc.

Aplicație de Alex Ryabushko

Butonul de acțiune și CTA sunt proiectate într-un mod excelent. stil plat si intr-o singura culoare. Cu toate acestea, starea de hover este vesel culoarea portocalie implicit este albastru. Glifele uriașe din interiorul cercurilor sunt intuitive și ușor de citit. Elementul oferă indicii vizuale utilizatorilor pentru a atinge rapid obiectivele.

Șablon PSD aplicație de design material (de Daniel De Santis)

UI este creată în cele mai bune tradiții ale specificațiilor moderne Google. Butonul flotant clasic afișează un panou mare care ocupă aproape întregul ecran și acoperă acțiunile necesare pentru a funcționa în secțiunea Inbox.

Interfața de utilizare mobilă (de Smiley)

Artistul demonstrează numeroase concepte de ecran funcționale. După cum puteți vedea, aproape fiecare pagină are propriul său buton de acțiune. Acesta din urmă aduce un panou mic, dar destul de înalt, care este situat în stânga și ocupă aproximativ cincisprezece la sută din spațiu.

Buton de acțiune plutitor de Tyler Berry

Această variație este diferită de majoritatea exemplelor enumerate în colecția noastră. Nu numai că are culori suculente și umbre minunate, dar dezvăluie și pictograme într-o linie în partea de sus a interfeței.

Butoane de acțiune plutitoare de Giulio "bart172" Smedile

Deși majoritatea butoanelor din acest design sunt similare cu altele, ele sunt conectate la o tastatură sterling. Autorul profită la maximum de acest mic ajutor plutitor. De asemenea, oferă un efect de tranziție lină între două stări.

Explorare UX

În acest design, butonul plutitor arată un set de CTA aranjate într-un rând. Ocupă toată partea de jos a ecranului. Colorarea în două tonuri, pânzele monocrome solide, glifele perfecte pentru pixeli și umbrele creează o estetică clasică.

Thumb User Interface (de Jochem van der Veer)

Conceptul acestui design este de a folosi un buton de acțiune plutitor, similar cu majoritatea. Se lipește de partea dreaptă, are un aspect simplu și atrage imediat privirea. În unele cazuri, butonul merge mână în mână cu o versiune în miniatură a logo-ului.

Buton magic plutitor

Aceste butoane plutitoare sunt minimaliste din punct de vedere al funcționalității. Sunt folosite doar pentru a oferi utilizatorilor acces rapidîntr-un spațiu de lucru în care vă puteți crea cărțile. Designul respectă standardele și corespunde dispoziției aplicației.

theScore Android

Aici, butonul CTA arată elegant, sofisticat și sofisticat. Stilul liniar, combinat cu o schemă frumoasă în două tonuri în care predomină albastrul, creează o estetică remarcabilă și, de asemenea, transformă acțiunile în puncte focale.

FAB pentru implicarea utilizatorilor

Dezvoltatorul folosește un buton de acțiune, al cărui design ecou ușor panoul de sus navigare. Acesta își propune să mențină utilizatorii implicați și confortabil cu întregul proiect. Butonul face ecoul ferestrei pop-up din colțul din dreapta jos și captează întregul ecran.

Alternacare

Autorul acestui design ascunde filtrele sub butonul de acțiune plutitor, permițând utilizatorilor să sorteze informațiile redundante și să atingă obiectivul în câteva secunde. Cu o privire îndrăzneață și culoare aprinsa, butonul nu se potrivește cu conținutul și atrage imediat atenția.

Aplicația Swipi

Conceptul Swipii App se bazează pe mai multe soluții proaspete. Butonul plutitor este unul dintre ele. Își servește bine scopul, ușurând viața utilizatorului. Butonul este situat în colțul fiecărei pagini și afișează o pagină pop-up cu un cod QR.

Buton de acțiune care curge de Shu Makino

Acest design este scurt gif animat demonstrează fluxul de lucru standard al butoanelor de acțiune flotantă. El este puternic în a lui tranziții netedeși include șapte elemente cu formă elegantă care apar unul după altul și se lipesc de partea dreaptă.

In concluzie…

Butoanele de acțiune plutitoare se pot transforma cu ușurință în elemente de interfață necesare. Acesta este un mod elegant și destul de simplu de a-l îmbunătăți. Oferirea utilizatorilor cu acces rapid la vital funcții importante aplicatii mobile, ei lovesc la fața locului și sunt capabili să facă utilizarea aplicației rapidă, eficientă și productivă.

Butonul plutitor este nouă cale adăugați un sondaj, un anunț sau orice altul continut suplimentar fără a adăuga modificări la designul site-ului dvs. web. Funcționalitatea tuturor acestora este implementată ca un buton plutitor pe site-ul dvs., iar după ce faceți clic pe buton, un alt fereastra modală cu conținutul cerut. Pentru a îmbunătăți gradul de utilizare, puteți utiliza panoul de administrare, setările și opțiunile de navigare, precum și unele date pentru statistici și analize.

Pluginul pentru buton wordpress numit Buton plutitor va adăuga un astfel de buton plutitor pe site-ul dvs.

Instalare plugin

Pluginul este instalat la fel ca oricare altul: accesați secțiunea „Plugins” - „Add New”. Apoi, în bara de căutare, conducem butonul Floating și îl instalăm.

Setare

După instalare, o filă suplimentară Buton flotant apare în partea dreaptă în consola de management a site-ului dvs. pe WordPress:

Faceți clic pe el și începeți configurarea butonului plutitor:

1. Stare buton - pornește și dezactivează afișajul butonului;

2. Sursa setărilor - această setare este responsabilă pentru funcționalitatea ulterioară a pluginului. Dacă selectați „Setări locale”, atunci funcționalitatea va fi foarte limitată, așa că este recomandat să selectați a doua opțiune „Setări din probtn.com”;

3. Acum trebuie să vă înregistrați pe site-ul dezvoltatorilor de pluginuri - acest lucru nu va dura mult timp, dar funcționalitatea butonului wordpress se va extinde semnificativ.

Înregistrare pe site-ul dezvoltatorului

Accesați pagina https://admin.probtn.com/login/new și completați adresa E-mail, numele și parola și faceți clic pe butonul „Creați”:

Aceasta finalizează înregistrarea, accesați personalizare ulterioară plugin, dar deja direct pe site-ul pe care tocmai ne-am înregistrat.

După înregistrare și intrare pe site, vedem următoarea pagină:

Cele două butoane din partea de jos sunt responsabile pentru crearea unui buton plutitor, al doilea pentru crearea unui sondaj care va apărea când faceți clic pe butonul plutitor.

Să începem cu crearea, așa că faceți clic pe „Creați butonul plutitor”. Mai întâi, specificăm numele butonului:

Rețineți că puteți selecta o pictogramă de pe computer sau puteți furniza un link către o imagine. Pentru frumusete, este recomandat sa folositi o poza cu fundal transparent mărime mică.

În etapa următoare, selectăm platforma pentru afișarea butonului. Am instalat pluginul pe site, așa că vom alege opțiunea de afișare pe domeniu, pe care o vom specifica:

Completam configurare inițială prin apăsarea butonului „Trimite”.

Specificați acțiunea după ce faceți clic pe butonul plutitor și continuați configurarea pluginului

După creare, butonul nostru este afișat în consola din stânga:

În secțiunea TOOL, specificați adresa care va fi deschisă într-o fereastră pop-up după ce faceți clic pe butonul:

Sau specificăm un sondaj care poate fi creat făcând clic pe linkul „Creează sondaj”:

Salvăm toate modificările făcute la fiecare pas. Un buton plutitor instalat pe site ar putea arăta astfel:

Și când faceți clic pe el, apare următoarea fereastră pop-up:

Există multe opțiuni pentru utilizarea acestui plugin WordPress: puteți crea pagină separată, pe care să plasați o reclamă, un sondaj sau orice informație care nu poate fi introdusă în designul site-ului. In general, orice!

ps dacă aveți nevoie de ajutor pentru configurare sau instalare, scrieți-vă întrebările în comentarii. Ajutorul este gratuit!

Leadback are un numar mare de setări care vă permit să organizați aproape orice algoritm al widget-ului sună din nou. Primele setări se referă la logica apariției widget-ului pe site.

Primirea apelurilor timp de muncă — numerele introduse în timpul orelor nelucrătoare vor fi distribuite între manageri în timpul programului de lucru. Managerul va primi un apel și un robot telefonic îl va informa că un apel a fost comandat în afara programului de lucru și va intra în legătură cu un potențial client.

Prinde vizitatorul la ieșire- widget-ul determină momentul în care vizitatorul urmează să părăsească site-ul tău și îi oferă să contacteze managerul în 27 de secunde.

Buton telefon plutitor- mereu online anumit loc este vizibil un buton, atunci când este apăsat, puteți introduce un număr și contacta departamentul de vânzări. Vă recomandăm să utilizați această funcție.

Personalizarea ferestrei widget- Puteți alege 2 opțiuni pentru afișarea widget-ului: opțiunea „Fereastră” și opțiunea „Ecran complet”. La fel, alegeți schema de culoriși schimbați legenda de pe widget. Vă recomandăm să folosiți informații despre reduceri și promoții pentru a motiva clientul să lase un număr de contact.

Widget pentru apel invers „Ecran complet”

Configurare buton plutitor - secțiunea în care configurăm aspectși schema de culori a butoanelor. Disponibil următoarele opțiuni: telefon care sună, buton rotund cu receptor, butonul pătrat cu tub si buton elegant cu un tub care amintește de econok-ul „mesagerilor” populari.

Vă rugăm să rețineți că culoarea butonului poate fi aleasă în funcție de schema de culori a site-ului dvs. și puteți plasa butonul oriunde. Există setări suplimentare pentru aceasta.

Permite mai multe apeluri pentru un client Același client vă poate suna de mai multe ori? DA/NU Clientul este determinat de browser.

Schimbați ora „Vă vom suna înapoi în... sec”- Puteți schimba timpul pentru care promiteți să suni clientul în sus sau în jos.

Oferiți un apel unui client nu mai mult de o dată pe...- dacă ai activată funcția „Prindă vizitatorul la ieșire”, atunci poți specifica intervalul pentru a nu enerva vizitatorul cu o fereastră pop-up de fiecare dată.

Primiți apeluri din CSI și din Europa- Dacă lucrezi doar pentru piata ruseasca, vă recomandăm să nu activați această funcție. Dacă aveți nevoie de clienți din alte țări, atunci porniți-l. Pentru alte țări (cu excepția Rusiei), se va percepe un minut de conversație: Ucraina - 3 minute, Kazahstan - 2 minute, Belarus - 4 minute, toate celelalte țări - 5 minute.

Raportează numele widgetului- Dacă utilizați mai multe widget-uri pe același domeniu.

Va apărea un mesaj. Vă rugăm să rețineți că codul de pe site nu trebuie actualizat!

Configurarea widget-ului a fost finalizată

După finalizarea setărilor din dvs cont personal Leadback în secțiunea widget-uri, va apărea primul dvs. widget.

Widget în contul personal

Acum trebuie să instalați codul widget pe site-ul dvs.

Clientul nu a dorit să conecteze o astfel de funcționalitate. Avea nevoie doar de un buton, după ce apăsa pe care, ar apărea o fereastră modală cu un formular de comandă. Butoanele de apel invers sunt foarte lucru util. Datorită lor, o persoană poate comanda un apel către sine fără a-și cheltui banii, ceea ce este important pentru persoana noastră :). De fapt, un astfel de buton poate fi realizat atât pentru revenirea în partea de sus a paginii, cât și pentru butonul de ajutor etc. Element principal va exista - animație, efect pulsatoriu.

09/09/2016 Adăugat buton nou, efectul de ondulare din noul Chrome nu a funcționat pe cel vechi.

Instalarea unui buton animat pe site-ul tău este foarte ușoară. Toată animația este făcută cu css, fără a conecta scripturi și plugin-uri suplimentare. Deși există mult cod, totul este destul de simplu.

DRAGĂ MAESTRE! Ai o conștiință dacă folosești acest buton, apoi măcar încărcați o poză cu un receptor de telefon pe găzduirea dvs. și nu copiați prostește linkul către site-ul meu. Voi slăvi astfel de meșteri și site-urile lor pe tot Internetul 🙂

Mai întâi trebuie să adăugați Marcaj HTML. O vom avea link obișnuit. LA locul potrivit pe site-ul tău, în antet sau subsol, inserăm o astfel de linie.

Butonul este conceput pentru a conecta o fereastră modală dintr-un alt articol. Dacă conectați linkuri terță parte, atunci butonul în sine are un eveniment în codul său HTML

onclick="return false"

Acum trebuie să adăugăm stilurile la fișierul de stil. css.

#popup__toggle(bottom:25px;right:10px;position:fixed;z-index:999;) .img-circle(background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content -box;) .circlephone(box-sizing:content-box;-webkit-box-sizing:content-box;bord: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px; poziție: absolut;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacitate: .5;-webkit-animation: circle-anim 2.4s infinite ease-in -out !important;-moz-animation: circle-anim 2.4s infinit ease-in-out !important;-ms-animation: circle-anim 2.4s infinit ease-in-out !important;-o-animation: circle- anim 2.4s infinit ease-in-out !important;animație: circle-anim 2.4s infinit ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition : toate .5s;tranziție: toate 0.5s;).circle-fill(box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px ;jos:0px;dreapta:35px;poziție:absolut;-webkit-border-radiu s: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz- animație: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;-o-animation: circle-fill-anim 2.3s infinite ease- in-out;animation: circle-fill-anim 2.3s infinit ease-in-out;-webkit-transition: toate .5s;-moz-transition: toate .5s;-o-transition: toate .5s;tranzitie: toate 0.5s;) -raza-chenar: 100%;-raza-chenar: 100%;raza-chenar: 100%;chenar: 2px transparent solid;opacitate: .7;) .img-circleblock(dimensiunea casetei: caseta de conținut; -dimensionarea casetei de webkit: caseta de conținut; lățime: 72 px; înălțime: 72 px; imagine de fundal: url(images/mini.png); poziție de fundal: centru centru; repetare de fundal: fără repetare ;nume-animație: aruncare;-webkit-nume-animație: aruncare;durată-animație: 1,5 secunde;-noi bkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;) .img-circle:hover(opacitate: 1;) @keyframes puls (0% (transform: scară(0,9);opacitate: 1;) 50% (transformă: scară(1); opacitate: 1 ) 100% (transform: scale(0.9);opacitate: 1;)) @-webkit-keyframes impuls (0% (-webkit-transform: scale(0.95);opacitate: 1;) 50% (-webkit-transform: scară(1);opacitate: 1;) 100% (-webkit-transform: scară(0,95);opacitate: 1;)) @keyframes tossing ( 0% (transformare: rotire(-8deg);) 50% (transformare: rotire(8deg);) 100% (transformare: rotire(-8deg);)) @-webkit-keyframes aruncare ( 0% (-webkit-transform: rotire (-8deg);) 50% (-webkit-transform: rotire (8deg);) 100% (-webkit-transform: rotiți(-8deg);)) @-moz-keyframes circle-anim ( 0% (-moz-transform: rotiți(0deg) scară (0. 5) skew(1deg);opacitate: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacitate: .1;) 30% (-moz-transform: rotire(0deg) scară (0,7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacitate: .5;) 100% (-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;)) @-webkit-keyframes circle-anim ( 0 % (-webkit-transform: rotire(0deg) scară(0,5) skew(1deg);-webkit-opacity: .1;) 30% (-webkit-transform: rotire(0deg) scară(0,7) skew(1deg); -webkit-opacity: .5;) 100% (-webkit-transform: rotiți(0deg) scară(1) skew(1deg);-webkit-opacity: .1;)) @-o-keyframes circle-anim ( 0 % (-o-transform: rotire(0deg) kscale(0,5) skew(1deg);-o-opacitate: .1;) 30% (-o-transform: rotire(0deg) scale(0,7) skew(1deg); -o-opacitate: .5;) 100% (-o-transform: rotire(0deg) scară(1) skew(1deg);-o-opacitate: .1;)) @keyframes circle-anim ( 0% (transformare) : rotire(0deg) scară(0,5) skew(1deg);opacitate: .1;) 30% (transformare: rotire(0deg) scară(0,7) skew(1deg);opacitate: . 5;) 100% (transformare: rotire(0grade) scară(1) înclinare(1grade); opacitate: .1;)) @-moz-keyframes circle-fill-anim ( 0% (-moz-transform: rotire(0deg) scară(0,7) skew(1deg);opacitate: .2;) 50% (-moz -transform: rotire(0deg) -moz-scale(1) skew(1deg);opacitate: .2;) 100% (-moz-transform: rotire(0deg) scale(0,7) skew(1deg);opacitate: .2 ;)) @-webkit-keyframes circle-fill-anim ( 0% (-webkit-transform: rotire(0deg) scară(0,7) skew(1deg);opacitate: .2; ) 50% (-webkit-transform: rotire (0deg) scară(1) skew(1deg);opacitate: .2; ) 100% (-webkit-transform: rotire(0deg) scară(0,7) skew(1deg);opacitate: .2;)) @-o- cadre cheie circle-fill-anim ( 0% (-o-transform: rotire(0deg) scară(0,7) skew(1deg);opacitate: .2;) 50% (-o-transform: rotire(0deg) scară(1) skew(1deg);opacitate: .2;) 100% (-o-transform: rotire(0deg) scară(0,7) skew(1deg);opacitate: .2;)) @keyframes circle-fill-anim ( 0% ( transformare: rotire(0grade) scară(0,7) înclinată(1grade);opacitate: .2;) 50% (transformare: rotire(0grade) scară(1) înclinare(1grade);opacitate: .2;) 100% (transformare: rotiți(0grade) scară(0,7) înclinați(1grade);opacitate: .2;))

Primele 7 linii sunt responsabile de aspectul butonului, apoi de animație. În prima linie, puteți seta locația butonului, iar în a șasea linie, specificați calea către imagine în parametru imagine de fundal:url(mini.png).

Atât ai nevoie pentru a instala un astfel de buton. Dacă înțelegeți CSS, puteți personaliza butonul și, dacă este necesar, îl puteți modifica complet pentru a se potrivi nevoilor dvs. și stilului site-ului.

Pentru a lega o fereastră modală la acest buton, articolul vă va ajuta -. Dacă faci totul conform instrucțiunilor, nu vei avea probleme.

Asta e tot, mulțumesc pentru atenție. 🙂

P.S.
Am decis să creez un plugin care vă va ajuta să obțineți rezultatul dorit. Poți merge și vezi:

Material Design este un limbaj de design introdus de anul google spate, reprezentând o încercare îndrăzneață a companiei de a crea un joint experiența utilizatorului pe toate dispozitivele și platformele. Acest lucru este marcat de culori îndrăznețe, o utilizare liberală, dar principială a umbrelor pentru a indica nivelurile interfeței de utilizare și animații netede care oferă destul de experiență bună interacțiuni pe Android (și unele aplicații Google pe iOS).

Cu toate acestea, un lucru despre Material Design m-a deranjat de când a fost introdus anul trecut: butonul de acțiune plutitor.

FAB (butoanele de acțiune plutitoare), conform Google, sunt butoane circulare care plutesc deasupra interfeței de utilizare și sunt „utilizate pentru a promova acțiunea”. Acestea acționează ca butoane de îndemn, concepute pentru a efectua acțiunea pe care utilizatorii o fac cel mai des pe acest ecran.

Și din cauza stilului vizual îndrăzneț al Material Design, FAB este destul de greu de ignorat - și aici constă problema. În timp ce în practică, în condiții ideale, FAB pare să ofere un UX bun, utilizarea excesivă a FAB va fi dăunătoare pentru UX-ul aplicației în ansamblu. Iată câteva motive.

Efectul imersiunii vine din experiență

FAB-urile ies în evidență vizual   - sunt literalmente deasupra oricărui element UI de pe ecran. De asemenea, adăugarea de FAB ar avea ca rezultat automat o UX mai puțin captivantă, afectând în special aplicațiile (sau ecranele) al căror scop este să ofere un efect interactiv.

Un exemplu este noua aplicație foto de la Google.

Aplicația foto se deschide ca o galerie cu un buton de căutare plutitor. Dar treaba este că, când deschid aplicația foto, vreau doar să... văd fotografiile mele. Astfel, butonul de căutare plutitor distrage atenția utilizatorului de la vizualizarea captivantă a fotografiilor, care este scopul principal al aplicației. Trimis, căutare inteligentă – trasatura unica poza aplicatiei google. Dar asta înseamnă că trebuie să i se acorde cel mai înalt nivel, FAB permanent în aplicație? (Cred că nu.)
Destul de ciudat, Google este de acord cu mine. Pe pagina Material Design FABs, Google explică că „nu orice ecran are nevoie de un buton de comandă plutitor”.
Și apoi adaugă că „acțiunea principală este să atingi imaginea din galerie, în acest caz butonul nu este necesar.

Ei ies în evidență și stau în cale.

Aceasta poate părea cealaltă față a monedei, dar există o alta, mai mult proprietate importantă FAB sta în calea utilităţii sale. Ocupând spațiu pe ecran FAB blochează de fapt conținutul.

Ei bine, FAB este doar un mic buton rotund, nu? Cât conținut poate bloca?
Dacă te uiți la captura de ecran a aplicației foto, îți vei da seama că motoarele de căutare FAB blochează aproximativ 50% din imaginea în miniatură - cu siguranță suficient pentru a acoperi câteva fețe. Acest lucru creează în esență necesitatea unui derulare suplimentar pentru fiecare a patra miniatură din ultimul rând de pe ecran. Și asta nu este cel mai rău.

Utilizatorul Dumazy a postat o postare pe Graphic Design Stack Exchange despre o problemă pe care a întâlnit-o când FAB a blocat vedeta „favorită”, precum și timpul de utilizare al aplicației sale. Acest lucru ilustrează problema cu toate aplicațiile de vizualizare a listei și devine deosebit de problematică atunci când ultimul element din listă nu poate derula mai departe. Aceasta înseamnă că o întreagă coloană trebuie sacrificată (schimbarea locației asteriscului etc.) pentru a oferi o utilizare adecvată a ecranului.

În consecință, FAB ocupă mult mai mult spațiu pe ecran decât sugerează dimensiunea sa.

Acțiunea de promovare nu este probabil folosită atât de des.

Când proiectați UX, amintiți-vă de regula 80/20, care spune că utilizatorii vor folosi 20% din funcții în 80% din timp. Cu alte cuvinte, cea mai mare parte a efortului ar trebui aplicată la proiectarea acestuia o suma mica elemente pe care utilizatorii le vor folosi de cele mai multe ori.

FAB chiar face asta - în teorie. Dar dacă „Promovarea acțiunii” nu este folosită atât de des?

Luați de exemplu aplicația google gmail.

Gmail FAB al aplicației este un buton de scriere, care presupune că acțiunea principală a utilizatorilor este să compună un e-mail.

Dar este?

Mai multe studii au arătat că cel puțin 50% dintre e-mailuri sunt citite pe un dispozitiv mobil și aproape niciunul nu spune același lucru despre crearea e-mailurilor. Cu alte cuvinte, după cum ar confirma experiența noastră zilnică, majoritatea utilizatorilor de dispozitive mobile tind să le folosească aplicații de e-mail a citi e-mailuri.

Poate că unii oameni folosesc dispozitive mobile pentru a răspunde la e-mailuri, dar acest lucru se întâmplă numai după ce e-mailul este deschis (rețineți că acest lucru înseamnă că vor ocoli FAB). Acest comportament al utilizatorilor, probabil cauzat de un mecanism de intrare destul de imperfect tastaturi virtualeși înlocuirea automată, ceea ce înseamnă că principala acțiune pe care o fac utilizatorii este să citească (și să răspundă la) e-mailuri, nu să creeze altele noi.

Deci, ce face butonul FAB „compune e-mail”? În rare ocazii, face plăcere utilizatorilor atunci când doresc să creeze un e-mail folosind această aplicație. Dar în restul timpului, ocupă doar spațiu pe ecran, blochează „steaua” și timpul și distrage constant atenția cu o culoare roșie aprinsă.

Vrem FAB? Ștergeți-o pe cea anterioară - avem nevoie de el?

Desigur, nu toate aplicațiile FAB diminuează experiența utilizării aplicațiilor materiale. Există câteva exemple grozave de FAB-uri care au sens și îmbunătățesc UX-ul acestor aplicații.

Hărți Google aceasta mare exemplu FAB aplicat corect. Principala acțiune pe care utilizatorii o fac pe Maps este să obțină indicații de orientare, așa că este o idee bună să folosiți FAB chiar în acest scop.

Dar rețineți că Maps este un caz destul de special în care utilizatorii de conținut sunt aproape întotdeauna interesați să ajungă în centrul ecranului (unde punctul tău albastru marchează poziția). În majoritatea aplicațiilor, totuși, o vizualizare grilă sau listă înseamnă că utilizatorii interacționează cu conținutul situat oriunde pe ecran, inclusiv unde ar fi amplasate în mod normal FAB-urile.

Rețineți, de asemenea, că capturile de ecran de mai sus spun doar o parte a poveștii: în utilizarea efectivă, FAB-urile rămân pe loc chiar și atunci când utilizatorul derulează (de cele mai multe ori). După cum Google a subliniat în mod repetat în Material Design, designul în mișcare este la fel de important ca și designul UI.

Lipsa de mișcare – accent pe spațiul pe ecran – în contextul mutarii conținutului creează mai mult nivel inalt distragere a atenției, pe care capturile de ecran nu le pot afișa în niciun fel.

Deci, din moment ce nu avem aproape nici un exemplu de implementare FAB bună, se pune întrebarea: sunt necesare ele?

Când ne uităm la dezavantajele de a avea FAB-uri în aplicații, ne putem rezuma la o simplă înțelegere: utilizatorii nu doar efectuează acțiuni în aplicații, ci consumă și conținut.

Designul FAB în Material Design se bazează pe premisa că utilizatorii efectuează o anumită acțiune de cele mai multe ori și, prin urmare, ar trebui să li se acorde un statut ridicat sub forma unui buton de nivel superior. Dar în multe aplicații, utilizatorii se concentrează și pe consumul de conținut: în aplicația foto, utilizatorii doresc să vadă fotografii; în aplicația Gmail utilizatorii doresc să-și citească e-mailurile; si in aplicația Facebook, utilizatorii doresc să citească mesajele prietenilor lor.

FAB este astfel o filozofie de design (sau conform macar alegerea designului) care subordonează consumul optim de conținut acțiunii. Și trebuie să ne întrebăm: este necesar un astfel de compromis? Chiar vrem să facem un astfel de compromis?

Când FAB-urile duc la un UX slab de cele mai multe ori, când este greu să dai seama care este cea mai folosită acțiune într-o aplicație și când trebuie să găsești ocoliri (când FAB dispare în derulare sau se suprapune cu alte elemente la glisare) aș spune că raspunsul este nu.

Material Design de la Google este un limbaj de design unificat, bazat pe principii destul de bun, dar FAB nu este cel mai bun la asta.