馃帹 uxowy.dev #31
4 min czytania

馃帹 uxowy.dev #31

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

殴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 馃槈

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.