🎨 #51: Słownik inny niż wszystkie, procesy w Booking & tipy CSS

czy Ty też czujesz już zbliżającą się wiosnę? 🌳 🏕️ 🥾 Ja już nie mogę się doczekać - wyjazdów, spacerów i większej aktywności na świeżym powietrzu 😍. Czas się obudzić z zimowego snu 😄.

A tymczasem... w ostatni weekend zimy, zapraszam Cię do rzucenia okiem na:

  1. UX glossary: słownik pojęć inny niż wszystkie
  2. Jak zrobili multi-platform design system i proces w Booking
  3. 10 tipów jak robić lepszy CSS transitions & animations

⬇️ ⬇️ ⬇️ ⬇️ ⬇️


UX glossary: słownik pojęć inny niż wszystkie

UX | źródło
UX glossary

Słownik - niby nudna rzecz...
Ale ten jest inny.

Wystarczy przejrzeć kilka pojęć, aby zobaczyć wartość:

Pojęcia z kategorii Design principles.
  1. Przy definicji jest krótkie wyjaśnienie
  2. Po kliknięciu mamy bardziej szczegółowy opis
  3. Są zdjęcia, dobre praktyki i przykłady z realnych produktów

Z UX glossary możemy się dowiedzieć m.in. tego, że:

  • im więcej użytkownik ma opcji do wyboru, tym więcej czasu zajmie mu podjęcie ostatecznej decyzji - Hick's Law
  • powyżej 400ms czekania, user zaczyna tracić zainteresowanie - Doherty Threshold
  • ból związany ze stratą jest psychologicznie dwa razy silniejszy niż przyjemność związana z zyskiem - Loss Aversion
  • ludzie mają tendencję do zostawiania domyślnych opcji; zmiana wymaga wysiłku i pewności, że podejmujemy dobrą decyzję - Default Bias

Na liście znajdują się na prawdę przydatne rzeczy.

Obczaj:
https://builtformars.com/ux-glossary

The UX psychology glossary 🧠
A collection of psychological biases, design principles and UX concepts that affect the product experience.

Jak zrobili multi-platform design system i proces w Booking

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

Ciekawy artykuł o tym, w jaki sposób poradzili sobie z problemami rozjazdów na wielu platformach w Booking.com.

Ogarnęli to dzięki m.in.:

  • design tokenom - definicje kolorów, typografii, spacingu itd.
  • design API - dostarczanie spójnych danych do wszystkich miejsc
  • pluginowi Themer - customowy plugin do Figmy, bazujący na tym pluginie
  • Asset Service - narzędzie, które dostarcza wszędzie dostępne ikony, illustracje, zdjęcia itd.

Ciekawy jest proces do jakiego doszli:

  1. Design assessment 💡
  2. Handoff 📙
  3. Tech assessment 🔎
  4. Kickoff 🤝
  5. Implement 💻🤖📱
  6. Design & accessibility review ✅
  7. Release & share 📣

Przeważnie proces ten wygląda tak, że po designach (1.) następuje handoff (2.) i od razu przechodzi się do implementacji (5.) i release (7.).

Ale nie w Booking.

Zobacz:
How we built our multi-platform design system at Booking.com

How we built our multi-platform design system at Booking.com
Building a design system that works is a challenge at any scale. Building a design system for 150+ product teams, used by 200+ designers…

10 tipów jak robić lepszy CSS transitions & animations

Development, UX | źródło

Animacje są takim smaczkiem, które mogą bardzo pozytywnie wpłynąć na UX aplikacji.

A w tym artykule znajdziesz 10 tipów jak robić je lepiej, m.in:

  • rób animacje krótsze niż Ci się wydaje
  • zamiast zmieniać opacity z 0 do 1, lub przesunięcie o 60px, używaj bardziej subtelnych wartości, np. opacity z 0.4 do 1, przesunięcie o 5-40px
  • używaj własnych easingów cubic-bezier zamiast tych wbudowanych typu "ease-in"
  • zmiana transform i opacity będzie miało lepszy performance niż np. zmiana height/width, które wymaga update layoutu
  • rozważ "delay" jeśli animujesz kilka elementów na jednym widoku
  • używaj will-change aby zwiększyć performance animacji, ale z rozwagą

Przykład użycia poniżej - ta sama animacja, ale...
Bez stosowania porad z artykułu po lewej.
Po ich zastosowaniu po prawej.

Codepen: https://codepen.io/collinsworth/pen/jOvaYxK

Feeling jest bez porównania lepszy.

Treść artykułu:
https://joshcollinsworth.com/blog/great-transitions

Ten tips for better CSS transitions and animations
Creating high-quality, polished web animations is both a science and an art. This post covers the best things I’ve learned over the last decade of crafting web UIs.

To wszystko na dziś!

Pozdrawiam i dobrego weekendu! 🥳 🚀

Mikołaj Waśkowski
uxowy.dev

❤️
Chcesz pomóc swoim devowym ziomkom?
Jeśli podoba Ci się to, co wysyłamy w uxowym, to jest duża szansa, że im też się spodoba 😉. Zapodaj tam link do ostatnich wysyłek i niech ogarniają ten UX/UI dla developera razem z Tobą!

Poprzednie wydania: