Material Design to język projektowania wprowadzony przez rok google back, co jest odważną próbą firmy stworzenia ujednoliconego doświadczenia użytkownika na wszystkich urządzeniach i platformach. Charakteryzuje się to odważnymi kolorami, liberalnym, ale zasadniczym wykorzystaniem cieni do wskazywania poziomów interfejsu użytkownika oraz płynnymi animacjami, które zapewniają dość dobre doświadczenie interakcje na Androidzie (i niektórych aplikacjach Google na iOS).
Jednak jedna rzecz w Material Design dręczyła mnie odkąd została wprowadzona w zeszłym roku: pływający przycisk akcji.
FAB (pływające przyciski akcji), według Google, to okrągłe przyciski unoszące się nad interfejsem użytkownika i „służące do promowania akcji”. Działają jak przyciski wezwania do działania, które mają wykonywać czynności, które użytkownicy najczęściej wykonują na tym ekranie.
A ze względu na odważny styl wizualny Material Design, FAB jest dość trudny do zignorowania – i na tym polega problem. O ile w praktyce, w idealnych warunkach, FAB wydaje się zapewniać dobry UX, to nadużywanie FAB będzie szkodliwe dla UX aplikacji jako całości. Oto kilka powodów.
Efekt zanurzenia pochodzi z doświadczenia
FAB wyróżniają się wizualnie – są dosłownie na wierzchu dowolnego elementu interfejsu użytkownika na ekranie. Ponadto dodanie FAB automatycznie skutkowałoby mniej wciągającym UX, zwłaszcza w przypadku aplikacji (lub ekranów), których celem jest zapewnienie interaktywnego efektu.
Jednym z przykładów jest nowa aplikacja do zdjęć od Google.
Aplikacja do zdjęć otwiera się jako galeria z pływającym przyciskiem wyszukiwania. Ale chodzi o to, że kiedy otwieram aplikację do zdjęć, chcę po prostu… zobaczyć moje zdjęcia. W ten sposób pływający przycisk wyszukiwania odwraca uwagę użytkownika od wciągającego oglądania zdjęć, co jest głównym celem aplikacji. Wprowadzone inteligentne wyszukiwanie to wyjątkowa funkcja aplikacji fotograficznej Google. Ale czy to oznacza, że trzeba mu nadać najwyższy poziom, stały FAB w aplikacji? (Myśle że nie.)
Co dziwne, Google zgadza się ze mną. Na stronie FAB Material Design Google wyjaśnia, że „nie każdy ekran wymaga pływającego przycisku polecenia”.
A potem dodaje, że „główną czynnością jest dotknięcie obrazu w galerii, w tym przypadku przycisk nie jest potrzebny.
Wyróżniają się i stoją na drodze.
To może wydawać się drugą stroną medalu, ale jest jeszcze inna, więcej ważna własność FAB stoi na przeszkodzie jego użyteczności. Zajmuje miejsce na ekranie FAB faktycznie blokuje treść.
No cóż, FAB to tylko mały okrągły przycisk, prawda? Ile treści może zablokować?
Jeśli spojrzysz na zrzut ekranu aplikacji do robienia zdjęć, zdasz sobie sprawę, że wyszukiwarki FAB blokują około 50 procent miniatury – z pewnością wystarczy, by zakryć kilka twarzy. Zasadniczo stwarza to potrzebę jednego dodatkowego przewijania na co czwartą miniaturę. ostatni wiersz na ekranie. A to nie jest najgorsze.
FAB blokuje przycisk „Ulubione” i datę. Użytkownik Dumazy opublikował post na Giełdzie Stosów Projektów Graficznych o problemie, który napotkał, gdy FAB zablokował gwiazdkę „ulubionych”, a także czas wyświetlania jego aplikacji. Ilustruje to problem ze wszystkimi aplikacjami widoku listy i staje się szczególnie problematyczny, gdy ostatnia pozycja na liście nie może się dalej przewijać. Oznacza to, że należy poświęcić całą kolumnę (zmieniając położenie gwiazdki itp.), aby zapewnić odpowiednią użyteczność ekranu.
W związku z tym FAB zajmuje znacznie więcej powierzchni ekranowych, niż sugeruje jego wielkość.
Promowanie akcji prawdopodobnie nie jest używane tak często.
Projektując UX, pamiętaj o zasadzie 80/20, która mówi, że użytkownicy będą korzystać z 20% funkcji przez 80% czasu. Innymi słowy, najwięcej wysiłku należy włożyć w zaprojektowanie kilku elementów, z których będą korzystać użytkownicy. bardzo czas.
FAB faktycznie to robi – teoretycznie. Ale co, jeśli „Akcja promocyjna” nie jest używana tak często?
Weź na przykład aplikacja google Gmaila.
FAB Gmail w aplikacji to przycisk tworzenia, który zakłada, że podstawową czynnością użytkownika jest napisanie wiadomości e-mail.
Ale czy tak jest?
Wiele badań wykazało, że co najmniej 50% e-maili jest czytanych na urządzeniu mobilnym i prawie żaden nie mówi tego samego o tworzeniu e-maili. Innymi słowy, jak potwierdza nasze codzienne doświadczenie, większość użytkowników urządzeń mobilnych zwykle używa swoich aplikacji pocztowych do czytania wiadomości e-mail.
Wiele osób może używać urządzeń mobilnych do odpowiadania na wiadomości e-mail, ale dzieje się to dopiero po otwarciu wiadomości e-mail (pamiętaj, że oznacza to, że ominą FAB). Takie zachowanie użytkowników, prawdopodobnie spowodowane raczej niedoskonałym mechanizmem wprowadzania danych wirtualne klawiatury i automatyczne zastępowanie, co oznacza, że głównym działaniem podejmowanym przez użytkowników jest czytanie (i odpowiadanie na) e-maile, a nie tworzenie nowych.
Co więc robi przycisk „Utwórz e-mail” w FAB? W rzadkich przypadkach daje przyjemność użytkownikom, gdy chcą stworzyć wiadomość e-mail za pomocą tej aplikacji. Ale przez resztę czasu zajmuje tylko miejsce na ekranie, blokuje „gwiazdę” i czas oraz stale rozprasza jaskrawoczerwony kolor.
Czy chcemy FAB? Usuń poprzedni – czy w ogóle go potrzebujemy?
Oczywiście nie wszystkie aplikacje FAB umniejszają doświadczenie korzystania z aplikacji Material Applications. Tam jest trochę jasne przykłady FAB-y, które mają sens i poprawiają UX tych aplikacji.
mapy Google to świetny przykład prawidłowo zastosowanego FAB. Główną czynnością, jaką użytkownicy wykonują w Mapach, jest uzyskiwanie wskazówek dojazdu, więc dobrze jest użyć do tego celu FAB.
Pamiętaj jednak, że Mapy są dość specjalny przypadek, gdy użytkownicy treści są prawie zawsze zainteresowani dotarciem do środka ekranu (tam, gdzie znajduje się niebieska kropka, oznaczająca pozycję). Jednak w większości aplikacji widok siatki lub listy oznacza, że użytkownicy wchodzą w interakcję z treściami znajdującymi się w dowolnym miejscu na ekranie, w tym tam, gdzie normalnie znajdują się bloki funkcjonalne.
Zwróć też uwagę, że powyższe zrzuty ekranu przedstawiają tylko część historii: w rzeczywistym użyciu FAB pozostają na swoim miejscu, nawet gdy użytkownik przewija (przez większość czasu). Jak Google wielokrotnie podkreślał w Material Design, projektowanie ruchu jest tak samo ważne jak projektowanie interfejsu użytkownika.
Brak ruchu – nacisk na przestrzeń ekranu – w kontekście przesuwania treści tworzy więcej wysoki poziom rozproszenie, którego zrzuty ekranu nie mogą w żaden sposób pokazać.
Skoro więc nie mamy prawie żadnych przykładów dobrego wdrożenia FAB, pojawia się pytanie: czy są one potrzebne?
Kiedy spojrzymy na wady posiadania FAB-ów w aplikacjach, możemy to sprowadzić do prostego zrozumienia: użytkownicy nie tylko wykonują czynności w aplikacjach, ale także konsumują treści.
Projekt FAB w Material Design opiera się na założeniu, że użytkownicy wykonują określoną czynność przez większość czasu, dlatego należy im nadać podwyższony status w postaci przycisku najwyższego poziomu. Ale w wielu aplikacjach użytkownicy skupiają się również na konsumowaniu treści: w aplikacji do zdjęć użytkownicy chcą oglądać zdjęcia; w aplikacji Gmail użytkownicy chcą czytać swoje e-maile; a w aplikacji Facebook użytkownicy chcą czytać wiadomości swoich znajomych.
FAB jest więc filozofią projektową (a przynajmniej wyborem projektowym), która podporządkowuje optymalną konsumpcję treści działaniu. I musimy zadać sobie pytanie: czy taki kompromis jest konieczny? Czy w ogóle chcemy iść na taki kompromis?
Kiedy FAB przez większość czasu prowadzi do słabego UX, kiedy trudno jest określić pojedynczą najczęściej używaną akcję w aplikacji i kiedy musisz znaleźć objazdy (gdy FAB znika przy przewijaniu lub nakłada się na inne elementy przy przesunięciu), powiedziałbym, że odpowiedź brzmi nie.
Google Material Design to całkiem niezły, zunifikowany, oparty na zasadach język projektowania, ale FAB nie jest w tym najlepszy.
Do tej pory stał się odkryciem dla tych, którzy pracują z aplikacjami na platformie Android, a także projektują interfejsy użytkownika. Został przedstawiony Google kilka lat temu. Celem Material Design było stworzenie języka wizualnego, który łączyłby zasady klasycznego designu z innowacją.
Pomysł wydaje się bardzo obiecujący i obiecujący. Projekt materiału to ostatnia próba uczynić user experience (UX) wygodnym i efektywnym jednocześnie. Google zrobiło fantastyczna praca w tym zakresie: wykorzystują minimalny zestaw elementów designu, stosują unikalne komponenty, żywe kolory, animację i stworzenie przyjaznego dla użytkownika środowiska.
Wraz z tym projektanci ćwiczą tak zwany pływający przycisk akcji (FAB). To jest okrągły przycisk wygląd zewnętrzny który jest dobrze znany użytkownikom Androida. Jest to kolejny charakterystyczny element projektu materiałowego. FAB pojawia się na górze interfejsu aplikacji i motywuje użytkowników do podjęcia określonej akcji.
W rzeczywistości FAB jest, ponieważ jego celem jest przekonanie osoby do zrobienia czegoś (na przykład pobrania lub przesłania określonej treści). Przycisk akcji pływającego celu jest zwykle umieszczony w prawym rogu ekranu. Bardzo trudno go nie zauważyć, ponieważ ma jasny i atrakcyjny wygląd. FAB motywuje użytkownika do wykonywania najpopularniejszych akcji w aplikacji. Jednak podczas korzystania z tych przycisków występują pewne problemy.
Co jest nie tak z pływającymi przyciskami akcji celu?
FAB-y to sprytne podejście do motywowania użytkownika do działania, ponieważ trudno je przegapić. Mogą jednak być ogólnie złym rozwiązaniem w projektowaniu doświadczeń użytkownika. Poniżej przedstawiamy kilka powodów, dla których pływające przyciski akcji mogą mieć negatywny wpływ na UX.
FAB-y mogą przeszkadzać użytkownikom
Jak wspomniano powyżej, przyciski akcji pływających celów są zwykle umieszczane w prawym dolnym rogu ekranu. W większości przypadków są one umieszczane nad zawartością aplikacji, zachodząc na pewną jej część.
Oczywiście rozmiary FAB są naprawdę niewielkie, przez co ukrywają przed oczami użytkownika tylko niewielką część treści. Jednak spójrz na aplikację Zdjęcia Google (zrzuty ekranu poniżej), gdzie pływający przycisk akcji celu obejmuje znaczną część zdjęcia.
Aby zobaczyć, co jest ukryte pod przyciskiem, użytkownik będzie musiał przewinąć stronę w dół. Ale co, jeśli jest już na samym dole strony? Wtedy przewijanie będzie niemożliwe, a użytkownik będzie musiał dodać trochę treści, aby ukryta część zdjęcia była widoczna.
Należy pamiętać, że pływający przycisk akcji celu, pomimo niewielkich rozmiarów, może ukryć część zawartości aplikacji przed ludzkimi oczami. Może mieć Negatywne konsekwencje dla doświadczenia użytkownika.
Ich konstrukcja zapobiega całkowitemu zanurzeniu
Pływające przyciski akcji celu wyraźnie wyróżniają się na tle ogólnego tła. W wielu przypadkach stwarza to przeszkody we wdrożeniu najważniejsza cecha doświadczenie użytkownika - pełne zanurzenie w atmosferę aplikacji.
Ponownie aplikacja Zdjęcia Google służy jako przykład. Kiedy ktoś go otwiera, wchodzi do galerii użytkownika, gdzie może po prostu przeglądać zdjęcia. W tej sytuacji funkcja wyszukiwania, którą reprezentuje FAB, może być przydatna, ale nie jest priorytetem.
Pływający przycisk akcji celu odwraca jego uwagę od intensywnego oglądania zdjęć, zajmując miejsce na ekranie i blokując niektóre części obrazów. W takich przypadkach przycisk nie powinien tak bardzo się wyróżniać.
Mogą być bezużyteczne
Jak wyjaśniają sami eksperci Google, pływający przycisk zachęca użytkownika do podjęcia ukierunkowanego działania. Jednak programiści czasami zapominają, jak często dana osoba wykonuje tę czynność podczas korzystania z aplikacji.
Złota zasada projektowania doświadczeń użytkownika polega na tym, aby ważne i często używane elementy były widoczne, a rzadko używane elementy prawie niewidoczne. Jednak, jak widzimy w przykładowej aplikacji Gmail (zrzut ekranu powyżej), twórcy nie wzięli tej zasady pod uwagę.
Na ekranie aplikacji widzimy przycisk, po kliknięciu którego użytkownik może szybko przejść do pisania e-mail. Jednak według ostatnich badań około połowa użytkowników przegląda pocztę tylko za pomocą urządzeń mobilnych. Innymi słowy, rzadko piszą listy za pomocą smartfonów lub tabletów.
Pływający przycisk jest nowy sposób dodaj ankietę, ogłoszenie lub inną dodatkową treść bez wprowadzania zmian w projekcie strony. Funkcjonalność tego wszystkiego jest zaimplementowana jako pływający przycisk w Twojej witrynie, a po kliknięciu przycisku otworzy się dodatkowe okno modalne z niezbędną treścią. Aby poprawić użyteczność, możesz skorzystać z panelu administracyjnego, ustawień i opcji nawigacji, a także niektórych danych do statystyk i analiz.
Wtyczka przycisku wordpress o nazwie Pływający przycisk doda taki pływający przycisk do Twojej witryny.
Instalacja wtyczki
Wtyczka jest instalowana w taki sam sposób, jak każda inna: przejdź do sekcji „Wtyczki” - „Dodaj nowy”. Następnie w pasku wyszukiwania wjeżdżamy w przycisk Pływający i instalujemy go.
Ustawienie
Po instalacji po prawej stronie w konsoli zarządzania Twojej witryny na WordPressie pojawi się dodatkowa zakładka Pływający przycisk:
Kliknij i zacznij konfigurować pływający przycisk:
1. Stan przycisku - włączanie i wyłączanie wyświetlania przycisku;
2. Źródło ustawień - to ustawienie odpowiada za dalszą funkcjonalność wtyczki. Jeśli wybierzesz „Ustawienia lokalne”, funkcjonalność będzie bardzo ograniczona, dlatego zaleca się wybranie drugiej opcji „Ustawienia z probtn.com”;
3. Teraz musisz zarejestrować się na stronie twórców wtyczek - nie zajmie to dużo czasu, ale funkcjonalność przycisku wordpress znacznie się rozszerzy.
Rejestracja na stronie dewelopera
Wejdź na stronę https://admin.probtn.com/login/new i wpisz adres E-mail, nazwę i hasło i kliknij przycisk „Utwórz”:
To kończy rejestrację, przechodzimy do dalszych ustawień wtyczki, ale już bezpośrednio na stronie, na której właśnie się zarejestrowaliśmy.
Po zarejestrowaniu się i wejściu na stronę widzimy następującą stronę:
Dwa przyciski na dole odpowiadają za utworzenie pływającego przycisku, drugi za stworzenie ankiety, która pojawi się po kliknięciu pływającego przycisku.
Zacznijmy od tworzenia, więc kliknij „Utwórz pływający przycisk”. Najpierw podajemy nazwę przycisku:
Pamiętaj, że możesz wybrać ikonę z komputera lub podać łącze do obrazu. Dla urody zaleca się użycie zdjęcia z przezroczyste tło mały rozmiar.
W kolejnym etapie wybieramy platformę do wyświetlania przycisku. Zainstalowaliśmy wtyczkę na stronie, więc wybierzemy opcję wyświetlania na domenie, którą określimy:
Początkową konfigurację kończymy, naciskając przycisk „Prześlij”.
Określ akcję po kliknięciu pływającego przycisku i kontynuuj konfigurowanie wtyczki
Po utworzeniu nasz przycisk wyświetla się w konsoli po lewej stronie:
W sekcji NARZĘDZIE określ adres, który zostanie otwarty w wyskakującym okienku po kliknięciu przycisku:
Lub określamy ankietę, którą można utworzyć, klikając łącze „Utwórz ankietę”:
Na każdym kroku zapisujemy wszystkie zmiany. Pływający przycisk zainstalowany na stronie może wyglądać tak:
A kiedy na nią klikniesz, pojawi się następujące wyskakujące okienko:
Istnieje wiele opcji korzystania z tej wtyczki WordPress: możesz utworzyć osobną stronę, na której można umieścić reklamę, ankietę lub dowolne informacje, które nie pasują do projektu witryny. Ogólnie wszystko!
ps jeśli potrzebujesz pomocy przy konfiguracji lub instalacji, napisz swoje pytania w komentarzach. Pomoc jest bezpłatna!
