🎨 uxowy.dev #31

Mikołaj Waśkowski -

Dzisiaj mam dla Ciebie mniej materiału, ale (jak pokazały wyniki ostatniej ankiety) ważna jest regularność. Puszczam więc, co mam 😉 i... zaczynamy weekend! 🏖 🚀

Co dzisiaj?

  1. Perfekcyjny Button - czyli jaki?
  2. Ciekawe efekty parallax z użyciem tylko CSS

Ruszamy!

Perfekcyjny Button - czyli jaki?

UX, UI | źródło

Przycisk to jeden z najważniejszych elementów UI. Ważne, aby zaprojektować i wdrożyć go prawidłowo.

Główne zasady, zaciągnięta od Google - button musi być:

  • identifiable - łatwo rozpoznawalny (wygląd, pozycja)
  • findable - łatwy do znalezienia (tekst, pozycja)
  • clear - jasny w przekazie

Zobaczmy, czego ekipa Wix.com się nauczyła i jakie wprowadziła zmiany.

Zacznijmy od końca:

1. Clear

Przycisk musi jasno komunikować co robi. Tutaj nie ma miejsca na złe interpretacje i testowanie co robi przycisk przez jego kliknięcie. Źródlo
Ikona z folderem nie była oczywista w znaczeniu. Źródlo
Dodano tekst opisujący akcje i zauważono wzrost kliknięć tego przycisku. Źródlo

2. Findable

Akcje muszą się znaleźć tam, gdzie user tego oczekuje. Zrób najpierw research, gdzie dobrze umieścić np. wyszukiwarkę, gdzie nawigację, filtry itd.

Podstawowe akcje, takie jak "Dodaj" powinny być zawsze widoczne. Inne, takie jak "Usuń", mogą być ukryte w jakimś sub-menu. Źródlo
"Category Manager" jest tutaj z czapy. User oczekuje tutaj więcej akcji dot. jakiegoś elementu. Unikaj zestawiania listy przycisków z akcjami, z tymi, które przenoszą nas po prostu na jakąś stronę. Źródlo

3. Identifiable

Dobrze jest wyraźnie oddzielić tekst/element statyczny od tego, którego można kliknąć - czy to kolorem, czy pozycją. A najlepiej to i to. 😉 Źródlo
Podkreślony tekst na kolorowych tłach wydaje się być wystarczająco jasny, że jest actionable. Źródlo

4. Dodatkowo

Tekst przycisku jest bardzo istotny. Zacznij od czasownika - akcji, co robi przycisk. Używaj prostego języka. Takiego, aby zrozumiała go każda grupa docelowa, niezależnie od np. wieku. Źródlo
W testach A/B próbowano ukryć labelki. Fail - użycie tych narzędzi spadło. Połączenie "label + ikona" w testach okazało się najlepszym rozwiązaniem. Źródlo
"Yes" / "No" - ale co? Źródlo
"Move to trash" jest znacznie lepsze. Źródlo
Dodanie strzałek do elementów nawigacji wielopoziomowej podniosło ich klikalność. Dzięki temu user wiedział, że rozwinie nową sekcję, a nie opuści aktualną stronę i przejdzie na nową. Źródlo
Zadbaj o odpowiednią hierarchię - najważniejsze przyciski "Save" i "Cancel" są zawsze widoczne i łatwe do znalezienia. Źródlo

Ciekawe efekty parallax z użyciem tylko CSS

UI | źródło
Źródło

Na blogu Netlify pojawił się wpis dot. ciekawych animacji parallax scroll z użyciem tylko CSS'a.

Przykłady:

Więcej efektów i ich kod:
https://www.netlify.com/blog/fun-parallax-scrolling-css-for-matterday

To wszystko na dziś.
Weekend czas zacząć 🙂 🍻

Memik na zakończenie:

Zassane z kanału #memy-it społeczności Zaprogramuj Życie ❤️

Pomóż innym wiedzieć więcej

Znasz kogoś, kto powinien dołączyć do naszej społeczności? Jeśli tak, to wyślij do tej osoby link do skrótu z ostatnich wysyłek: uxowy.dev/lista. I niech dołączy do 🎨 uxowy.dev!

Pozdrawiam i do następnego! 👋
...w przyszły piątek 😉