Material Design je dizajnový jazyk predstavený spoločnosťou rok google back, čo je odvážny pokus spoločnosti o vytvorenie jednotného používateľského zážitku naprieč všetkými zariadeniami a platformami. To sa vyznačuje výraznými farbami, liberálnym, ale zásadným používaním tieňov na označenie úrovní používateľského rozhrania a plynulými animáciami, ktoré poskytujú dobrá skúsenosť interakcie v systéme Android (a niektorých aplikáciách Google v systéme iOS).
Jedna vec na Material Design ma však trápi už od jeho predstavenia minulý rok: plávajúce akčné tlačidlo.
FAB (Floating action buttons), podľa Google, sú kruhové tlačidlá, ktoré sa vznášajú nad používateľským rozhraním a „používajú sa na podporu akcie“. Fungujú ako tlačidlá s výzvou na akciu určené na vykonanie akcie, ktorú používatelia vykonávajú na tejto obrazovke najčastejšie.
A kvôli odvážnemu vizuálnemu štýlu Material Design je dosť ťažké ignorovať FAB - a v tom je problém. Zatiaľ čo v praxi sa zdá, že za ideálnych podmienok FAB poskytuje dobré UX, nadmerné používanie FAB bude škodlivé pre UX aplikácie ako celku. Tu je niekoľko dôvodov.
Účinok ponorenia pochádza zo skúsenosti
FAB vynikajú vizuálne - sú doslova navrchu akéhokoľvek prvku používateľského rozhrania na obrazovke. Pridanie FAB by tiež automaticky malo za následok menej pohlcujúce UX, čo by ovplyvnilo najmä aplikácie (alebo obrazovky), ktorých účelom je poskytnúť interaktívny efekt.
Jedným z príkladov je nová aplikácia pre fotografie od spoločnosti Google.
Aplikácia fotografií sa otvorí ako galéria s plávajúcim tlačidlom vyhľadávania. Ide však o to, že keď otvorím aplikáciu na fotografie, chcem len... vidieť svoje fotky. Plávajúce tlačidlo vyhľadávania teda odvádza pozornosť používateľa od pohlcujúceho prezerania fotografií, čo je hlavným účelom aplikácie. Predstavené inteligentné vyhľadávanie je jedinečnou funkciou aplikácie Google pre fotografie. Znamená to však, že mu treba dať v žiadosti najvyšší stupeň, trvalé FAB? (Myslím, že nie.)
Napodiv, Google so mnou súhlasí. Na stránke Material Design FABs Google vysvetľuje, že „nie každá obrazovka potrebuje plávajúce príkazové tlačidlo“.
A potom dodáva, že „hlavnou akciou je dotknúť sa obrázka v galérii, v tomto prípade tlačidlo nie je potrebné.
Vyčnievajú a stoja v ceste.
Môže sa to zdať ako druhá strana mince, no je tu ešte jedna, viac dôležitý majetok FAB stojí v ceste jeho užitočnosti. Zaberá miesto na obrazovke FAB v skutočnosti blokuje obsah.
No, FAB je len malé okrúhle tlačidlo, však? Koľko obsahu môže zablokovať?
Ak sa pozriete na snímku obrazovky fotografickej aplikácie, zistíte, že vyhľadávacie nástroje FAB blokujú približne 50 percent miniatúrneho obrázka - určite dosť na to, aby pokryli niekoľko tvárí. To v podstate vytvára potrebu jedného rolovania navyše pre každú štvrtú miniatúru. posledný riadok na obrazovke. A to nie je to najhoršie.
FAB blokuje tlačidlo „Obľúbené“ a dátum. Používateľ Dumazy uverejnil príspevok na burze Graphic Design Stack Exchange o probléme, s ktorým sa stretol, keď FAB zablokoval „obľúbenú“ hviezdu, ako aj čas strávený pred obrazovkou jeho aplikácie. Toto ilustruje problém so všetkými aplikáciami na zobrazenie zoznamu a stáva sa obzvlášť problematickým, keď sa posledná položka v zozname nemôže posúvať ďalej nahor. To znamená, že sa musí obetovať celý stĺpec (zmena umiestnenia hviezdičky atď.), aby sa zabezpečila správna použiteľnosť obrazovky.
V dôsledku toho FAB zaberá oveľa viac obrazovky, ako naznačuje jej veľkosť.
Propagačná akcia sa asi tak často nepoužíva.
Pri navrhovaní UX nezabúdajte na pravidlo 80/20, ktoré hovorí, že používatelia budú využívať 20 % funkcií 80 % času. Inými slovami, väčšina úsilia by sa mala venovať návrhu niekoľkých prvkov, ktoré budú používatelia používať. najviacčas.
FAB to v skutočnosti robí - teoreticky. Ale čo ak sa „Promoting Action“ nepoužíva tak často?
Vezmite si napríklad aplikácia google gmail.
FAB Gmail aplikácie je tlačidlo na písanie, ktoré predpokladá, že primárnou činnosťou používateľov je napísanie e-mailu.
Ale je to tak?
Viaceré štúdie ukázali, že najmenej 50 % e-mailov sa číta na mobilnom zariadení a takmer žiadny nehovorí to isté o vytváraní e-mailov. Inými slovami, ako potvrdzuje naša každodenná skúsenosť, väčšina používateľov mobilných zariadení má tendenciu používať svoje e-mailové aplikácie na čítanie e-mailov.
Môže existovať množstvo ľudí, ktorí používajú mobilné zariadenia na odpovedanie na e-maily, ale to sa deje až po otvorení e-mailu (všimnite si, že to znamená, že obídu FAB). Toto správanie používateľov je pravdepodobne spôsobené dosť nedokonalým vstupným mechanizmom virtuálne klávesnice a automatické nahradzovanie, čo znamená, že hlavnou činnosťou používateľov je čítanie e-mailov (a odpovedanie na ne), nie vytváranie nových.
Čo teda robí tlačidlo FAB „napísať e-mail“? V zriedkavých prípadoch poteší používateľov, keď chcú pomocou tejto aplikácie vytvoriť e-mail. Ale zvyšok času zaberá iba miesto na obrazovke, blokuje „hviezdu“ a čas a neustále odvádza pozornosť jasnou červenou farbou.
Chceme FAB? Vymazať predchádzajúcu - potrebujeme ju vôbec?
Samozrejme, nie všetky aplikácie FAB znižujú zážitok z používania materiálových aplikácií. Existujú nejaké svetlé príklady FAB, ktoré dávajú zmysel a zlepšujú UX týchto aplikácií.
Google Mapy toto je skvelý príklad správne aplikovaného FAB. Hlavnou činnosťou, ktorú používatelia vykonávajú na Mapách, je získať trasu, takže je dobré použiť FAB práve na tento účel.
Ale majte na pamäti, že Mapy sú dosť špeciálny prípad, keď používatelia obsahu majú takmer vždy záujem dostať sa do stredu obrazovky (kde je vaša modrá bodka označujúca polohu). Vo väčšine aplikácií však zobrazenie mriežky alebo zoznamu znamená, že používatelia interagujú s obsahom umiestneným kdekoľvek na obrazovke, vrátane miest, kde by sa normálne nachádzali FAB.
Všimnite si tiež, že vyššie uvedené snímky obrazovky vypovedajú iba časť príbehu: pri skutočnom používaní FAB zostávajú na svojom mieste, aj keď používateľ roluje (väčšinu času). Ako Google opakovane zdôraznil v Material Designe, pohybový dizajn je rovnako dôležitý ako dizajn používateľského rozhrania.
Nedostatok pohybu – dôraz na priestor na obrazovke – v kontexte pohybujúceho sa obsahu vytvára viac vysoký stupeň rozptýlenie, ktoré snímky obrazovky nemôžu žiadnym spôsobom zobraziť.
Takže, keďže nemáme takmer žiadne príklady dobrej implementácie FAB, vyvstáva otázka: sú potrebné?
Keď sa pozrieme na nevýhody FAB v aplikáciách, môžeme to zredukovať na jednoduché pochopenie: používatelia nielen vykonávajú akcie v aplikáciách, ale aj konzumujú obsah.
Dizajn FAB v Material Design je založený na predpoklade, že používatelia väčšinu času vykonávajú určitú akciu, a preto by mal dostať zvýšený status vo forme tlačidla najvyššej úrovne. V mnohých aplikáciách sa však používatelia zameriavajú aj na konzumáciu obsahu: vo fotoaplikácii si používatelia chcú prezerať fotografie; v aplikácii Gmail chcú používatelia čítať svoje e-maily; a v aplikácii Facebook chcú používatelia čítať správy svojich priateľov.
FAB je teda filozofia dizajnu (alebo aspoň voľba dizajnu), ktorá podriaďuje optimálnu spotrebu obsahu akcii. A musíme si položiť otázku: je takýto kompromis potrebný? Chceme vôbec urobiť takýto kompromis?
Keď FAB väčšinou vedú k zlému používateľskému prostrediu, keď je ťažké zistiť jedinú najpoužívanejšiu akciu v rámci aplikácie a keď musíte nájsť obchádzky (keď FAB zmizne pri posúvaní alebo prekrýva iné prvky pri prejdení prstom), povedal by som, že odpoveď je nie.
Material Design od Google je celkom dobrý jednotný, principiálny dizajnový jazyk, ale FAB na tom nie je najlepšie.
Teraz sa stal objavom pre tých, ktorí pracujú s aplikáciami na platforme Android a tiež navrhujú používateľské rozhrania. Bol predstavený Google Pred niekoľkými rokmi. Cieľom materiálového dizajnu bolo vytvoriť vizuálny jazyk, ktorý by spájal princípy klasického dizajnu s inováciami.
Myšlienka vyzerá veľmi sľubne a sľubne. Materiálové prevedenie je posledný pokus aby bola používateľská skúsenosť (UX) pohodlná a zároveň efektívna. Google urobil fantastická práca v tejto oblasti: používajú minimálny súbor dizajnových prvkov, používajú jedinečné komponenty, svetlé farby, animácie a vytvorte užívateľsky príjemné prostredie.
Spolu s tým dizajnéri praktizujú takzvané plávajúce akčné tlačidlo (FAB). Je to okrúhly gombík vzhľad ktorý je dobre známy používateľom Androidu. Ide o ďalší výrazný materiálový dizajnový prvok. FAB sa zobrazuje v hornej časti rozhrania aplikácie a motivuje používateľov, aby vykonali určitú cielenú akciu.
FAB je v skutočnosti, keďže jeho účelom je presvedčiť osobu, aby niečo urobila (napríklad stiahla alebo nahrala určitý obsah). Akčné tlačidlo plávajúceho cieľa je zvyčajne umiestnené v pravom rohu obrazovky. Je veľmi ťažké si to nevšimnúť, pretože má svetlý a atraktívny dizajn. FAB motivuje užívateľa vykonávať najobľúbenejšie akcie v aplikácii. Pri používaní týchto tlačidiel sa však vyskytujú určité problémy.
Čo je zlé na akčných tlačidlách s plávajúcim cieľom?
FAB sú šikovným prístupom, ktorý motivuje užívateľa konať, pretože je ťažké ich prehliadnuť. Vo všeobecnosti však môžu predstavovať nesprávne riešenie pre návrh používateľského prostredia. Nižšie je uvedených niekoľko dôvodov, prečo môžu mať plávajúce akčné tlačidlá negatívny vplyv na UX.
FAB môžu prekážať používateľom
Ako už bolo spomenuté vyššie, tlačidlá akcií s plávajúcim cieľom sú zvyčajne umiestnené v pravom dolnom rohu obrazovky. Vo väčšine prípadov sú umiestnené na vrchu obsahu aplikácie a prekrývajú nejakú jeho časť.
Samozrejme, veľkosti FAB sú naozaj malé, takže pred očami používateľa skryjú len malú časť obsahu. Pozrite sa však na aplikáciu Fotky Google (snímky obrazovky nižšie), kde akčné tlačidlo s plávajúcim cieľom pokrýva značnú časť fotografie.
Ak chcete vidieť, čo sa skrýva pod tlačidlom, používateľ bude musieť posunúť stránku nadol. Ale čo ak je to už úplne dole na stránke? Potom bude rolovanie nemožné a používateľ bude musieť pridať nejaký obsah, aby bola skrytá časť fotografie viditeľná.
Je dôležité si uvedomiť, že akčné tlačidlo s plávajúcim cieľom môže napriek svojej malej veľkosti skryť časť obsahu aplikácie pred ľudskými očami. Môže mať Negatívne dôsledky pre používateľskú skúsenosť.
Ich konštrukcia zabraňuje úplnému ponoreniu
Akčné tlačidlá s plávajúcim cieľom výrazne vyniknú na pozadí. V mnohých prípadoch to vytvára prekážky pri implementácii najdôležitejšia charakteristika užívateľská skúsenosť - úplné ponorenie do atmosféry aplikácie.
Ako príklad opäť slúži aplikácia Fotky od Google. Keď ho človek otvorí, dostane sa do užívateľskej galérie, kde si môže jednoducho prezerať fotografie. V tejto situácii môže byť užitočná funkcia vyhľadávania, ktorú predstavuje FAB, ale nie je prioritou.
Akčné tlačidlo s plávajúcim cieľom ho odvádza od intenzívneho prezerania fotografií tým, že zaberá miesto na obrazovke a blokuje niektoré časti obrázkov. V takýchto prípadoch by tlačidlo nemalo toľko vyčnievať.
Môžu byť zbytočné
Ako vysvetľujú samotní odborníci z Google, plávajúce tlačidlo vyzve používateľa, aby vykonal cielenú akciu. Vývojári však niekedy zabúdajú, ako často človek vykonáva túto akciu počas používania aplikácie.
Zlatým pravidlom dizajnu používateľskej skúsenosti je udržať dôležité a často používané prvky viditeľné a málo používané prvky takmer neviditeľné. Ako však môžeme vidieť na príklade aplikácie Gmail (snímka obrazovky vyššie), vývojári toto pravidlo nezohľadnili.
Na obrazovke aplikácie vidíme tlačidlo, kliknutím na ktoré môže používateľ rýchlo prejsť k písaniu email. Podľa nedávnych prieskumov však približne polovica používateľov zobrazuje poštu iba pomocou mobilných zariadení. Inými slovami, často nepíšu listy pomocou smartfónov alebo tabletov.
Plávajúce tlačidlo je Nová cesta pridajte prieskum, oznámenie alebo nejaký iný dodatočný obsah bez toho, aby ste pridali akékoľvek zmeny do dizajnu svojej webovej stránky. Funkčnosť tohto všetkého je implementovaná ako plávajúce tlačidlo na vašej stránke a po kliknutí na tlačidlo sa otvorí ďalšie modálne okno s potrebným obsahom. Na zlepšenie použiteľnosti môžete použiť administračný panel, nastavenia a možnosti navigácie, ako aj niektoré údaje pre štatistiky a analýzy.
Plugin pre tlačidlo wordpress s názvom Floating button pridá takéto plávajúce tlačidlo na vašu stránku.
Inštalácia doplnku
Doplnok sa inštaluje rovnakým spôsobom ako ktorýkoľvek iný: prejdite do časti „Pluginy“ - „Pridať nový“. Potom do vyhľadávacieho panela vložíme tlačidlo Floating a nainštalujeme ho.
Nastavenie
Po inštalácii sa na pravej strane v riadiacej konzole vášho webu na WordPress zobrazí ďalšie tlačidlo Plávajúce karty:
Kliknite naň a začnite konfigurovať plávajúce tlačidlo:
1. Stav tlačidla - zapnutie a vypnutie zobrazenia tlačidla;
2. Zdroj nastavení - toto nastavenie je zodpovedné za ďalšiu funkčnosť pluginu. Ak vyberiete "Miestne nastavenia", potom bude funkčnosť veľmi obmedzená, preto sa odporúča zvoliť druhú možnosť "Nastavenia z probtn.com";
3. Teraz sa musíte zaregistrovať na stránke vývojárov pluginu - nezaberie to veľa času, ale funkčnosť tlačidla wordpress sa výrazne rozšíri.
Registrácia na stránke vývojára
Prejdite na stránku https://admin.probtn.com/login/new a vyplňte adresu Email, meno a heslo a kliknite na tlačidlo „Vytvoriť“:
Tým je registrácia ukončená, pristúpime k ďalšiemu nastaveniu pluginu, ale už priamo na stránke, na ktorej sme sa práve zaregistrovali.
Po registrácii a vstupe na stránku sa nám zobrazí nasledujúca stránka:
Dve tlačidlá v spodnej časti sú zodpovedné za vytvorenie plávajúceho tlačidla, druhé za vytvorenie ankety, ktorá sa zobrazí po kliknutí na plávajúce tlačidlo.
Začnime s tvorbou, takže kliknite na „Vytvoriť plávajúce tlačidlo“. Najprv zadáme názov tlačidla:
Upozorňujeme, že môžete vybrať ikonu z počítača alebo poskytnúť odkaz na obrázok. Pre krásu sa odporúča použiť obrázok s priehľadné pozadie malá veľkosť.
V ďalšej fáze vyberieme platformu pre zobrazenie tlačidla. Doplnok sme nainštalovali na stránku, teda zvolíme možnosť zobrazenia na doméne, ktorú zadáme:
Úvodné nastavenie dokončíme stlačením tlačidla „Odoslať“.
Po kliknutí na plávajúce tlačidlo zadajte akciu a pokračujte v nastavovaní pluginu
Po vytvorení sa naše tlačidlo zobrazí v konzole vľavo:
V časti NÁSTROJ zadajte adresu, ktorá sa otvorí vo vyskakovacom okne po kliknutí na tlačidlo:
Alebo určíme prieskum, ktorý je možné vytvoriť kliknutím na odkaz „Vytvoriť prieskum“:
Uložíme všetky zmeny vykonané v každom kroku. Plávajúce tlačidlo nainštalované na stránke môže vyzerať takto:
A keď naň kliknete, zobrazí sa nasledujúce vyskakovacie okno:
Existuje veľa možností použitia tohto doplnku WordPress: môžete vytvoriť samostatnú stránku, na ktorú umiestnite reklamu, prieskum alebo akékoľvek informácie, ktoré sa nedajú zapadnúť do dizajnu stránky. Vo všeobecnosti čokoľvek!
ps ak potrebujete pomoc s nastavením alebo inštaláciou, napíšte svoje otázky do komentárov. Pomoc je bezplatná!
