Kelluva toimintopainike (FAB) on ympyröity kuvake, joka kulkee käyttöliittymän yläpuolella. Sen muoto, sijainti ja väri varmistavat sen erottuvan muusta käyttöliittymästä. FAB julkaistiin Googlen Material Design -periaatteiden julkaisemisen yhteydessä vuonna 2014. Tämän julkaisun jälkeen FAB: n käyttöliittymäelementti on laajalti käytössä web- ja mobiilisuunnittelussa.

Vaikka FAB: tä voidaan pitää pienenä, ilmeisesti vähäpätöisenä UI-komponenttina, sen vaikutukset voivat olla tärkeitä. Koska kuvio on käytetty oikein, sen on tarkoitus olla välittömästi tunnistettavissa ja helposti saatavilla.

image15

Floating Action -painike Android-sovelluksessa

1. Edusta Hallmark-toiminta

Ihannetapauksessa FAB: n tulisi korostaa tärkeimpiä tai usein käytettyjä toimintoja, ja sitä olisi käytettävä sovelluksissa, jotka ovat sovelluksen ensisijaisia ​​ominaisuuksia. Jos aiot käyttää FAB: tä sovelluksessasi, sovelluksen suunnittelua on harkittava huolellisesti ja käyttäjän mahdolliset toiminnot on keitetyt yhteen näkyvään ominaisuuteen. Esimerkiksi musiikkisovelluksella voi olla FAB, joka edustaa "Toista / Pysäytä". Instagram-tyyppisellä sovelluksella voi olla FAB, joka edustaa "Ota valokuva".

image3

Kelluva toimintopainike edustaa ensisijaista toimintaa sovelluksessa. Toiston keskeyttäminen tai jatkaminen tällä näytöllä kertoo käyttäjille, että se on musiikkisovellus.

Tutkimuksen mukaan Steve Jones , FAB osoittaa lievän negatiivisen käytettävyyden vaikutusta, kun käyttäjät käyttävät nappia ensin. Kuitenkin kun käyttäjät suorittavat tehtävän FAB: n avulla, he voivat käyttää sitä tehokkaammin kuin perinteinen toimintopainike.

2. Olkaa Way Finding Tool

FAB on luonnollinen vihje kertoa käyttäjille, mitä seuraavaksi. Googlen tutkimus osoittaa, että tuntemattomien näytöksien kohdalla monet käyttäjät käyttävät FAB: ää navigoimaan. Näin FAB on erittäin hyödyllinen merkkinä siitä, mitä seuraavaksi.

image14

Kelluva toimintopainike Twitterissä kannustaa sinua lähettämään sisältöä

3. Tarjoa joukko toimia

Joissakin tapauksissa on sopivaa, että painike siirtyy ulos ja paljastaa muutamia muita vaihtoehtoja, kuten alla olevassa Evernote-esimerkissä voidaan nähdä. FAB voi korvata itselleen joukon tarkempia toimintoja ja voit suunnitella ne käyttäjille asiayhteyteen. Nyrkkisääntönä, anna vähintään kolme vaihtoehtoa painalluksella, mutta enintään kuusi (mukaan lukien alkuperäisen kelluvan toimintopainikkeen kohde).

image12

Muista myös, että näiden toimintojen täytyy liittyä ensisijaiseen toimintaan, jota FAB itse ilmaisee ja olla yhteydessä toisiinsa: älä käsittele näitä paljastuneita toimintoja itsenäisinä, koska ne voivat olla, jos ne sijoitetaan työkalupalkkiin.

image17

Älä: "Missä minä olen" -toiminto ei ole merkityksellinen sisältötoimien luomisessa.

4. Olkaa konteksti tietoisia

Kontekstilla on tärkeä rooli käyttäjän vuorovaikutuksessa. Joskus käyttäjät haluavat kuluttaa sisältöä, joskus he haluavat tehdä toimia. Kaikki riippuu kontekstista. Käyttämällä jotain asiayhteyteen liittyvää käyttäytymistä voisi tuoda FAB: n parhaat mahdolliset sovellukset UX: ään. Katsotaanpa Google+ esimerkkinä. Google+ näyttää -painikkeen, kun käyttäjä ottaa yhteyttä streamiin ja piilottaa sen, kun sitoutuminen on peruutettu. Nämä kaksi valtiota ovat riippuvaisia ​​kontekstista: kun käyttäjät käyttävät sosiaalista streamia, ensisijainen toiminto on vierittää, joten ei ole tarvetta FAB: lle, ja kun käyttäjät lopettavat vierityksen, he saattavat haluta lähettää jotain.

image19

5. Yhdistä kaksi valtiota yhdessä

FAB ei ole vain pyöreä painike, sillä on joitakin muuntuva ominaisuuksia, joiden avulla voit helpottaa käyttäjiä näytöstä ruudulle. Kun muutat kelluva toimintopainiketta, tee siirtyminen kahden tilan välillä loogisesti. Seuraavien esimerkkien animaatio ylläpitää käyttäjän suuntautumista ja auttaa käyttäjää ymmärtämään muutoksen, joka on juuri tapahtunut näkymän ulkoasussa, mikä on aiheuttanut muutoksen, ja miten aloittaa muutos myöhemmin myöhemmin.

image18

Kuvahinta: Ehsan Rahimi

image16

Kuvahinta: Dribbble

johtopäätös

Jotkut saattavat sanoa, että FAB on huono UX. On houkuttelevaa sanoa, koska käyttäjät ja suunnittelijat eivät ole tottuneet siihen. Käytämme tuttuja työkalurivejä ja FAB: n käsite on vielä melko uusi meille. Me kaikki tiedämme, miten nämä uudet asiat ovat kovat, mutta samalla ne kannustavat entistä huolellisemmin suunniteltua käyttäjäkokemusta. Käytetty oikein, FAB voi olla hämmästyttävän hyödyllinen malli loppukäyttäjälle.