馃帹 uxowy.dev #19
4 min czytania

馃帹 uxowy.dev #19

COVID szaleje i zbiera 偶niwa 馃 Ale bez obaw, my mieli艣my maseczki, jak pisali艣my tego maila 馃槀 Tak偶e mo偶esz czu膰 si臋 bezpieczny(a). Nie no, bez jaj... ale trzeba doda膰 troch臋 humoru do tych wzmagaj膮cych depresj臋 czas贸w, co nie? 馃槢

A co dzisiaj w uxowy.dev?

  1. A11Y Checklist - ogarnij, czy nie zapomnia艂e艣 o czym艣 z聽WCAG
  2. #PrzemoPatterns: Toast
  3. Kogo warto obserwowa膰 馃憖
  4. My艣lisz, 偶e zrobienie test贸w A/B b臋dzie trudne i聽czasoch艂onne? No...聽nie聽- zobacz聽film
  5. R贸b przej艣cia mi臋dzy stronami "like a boss"

Paczaj dalej! 馃憞


A11Y Checklist - ogarnij, czy nie zapomnia艂e艣 o聽czym艣 z聽WCAG

UX, Accessibility | 藕r贸d艂o

Ostatnio wysy艂ali艣my Design Checklist, aby nie zapomnie膰 o聽dobrych praktykach podczas projektowania danego elementu / strony. Dzi艣聽przysz艂a pora na uk艂on w聽stron臋 accessibility i WCAG (Web Content Accessibility Guidelines).

Chyba nikt z nas nie lubi ogarnia膰 suchych dokumentacji pisanych takim formalnym j臋zykiem...

Tutaj mamy pi臋knie przedstawion膮 list臋 rzeczy, o聽kt贸rych musimy pami臋ta膰 z聽podzia艂em na elementy UI lub dziedzin臋.

Nie ma lania wody i zb臋dnych teorii, jest kr贸tko i na temat.

Zobacz przyk艂ad dla obrazk贸w:

殴r贸d艂o

Mamy listy dla element贸w / zagadnie艅:

  • Content
  • Global code
  • Keyboard
  • Images
  • Headings
  • Lists
  • Controls
  • Tables
  • Forms
  • Media
  • Video
  • Audio
  • Appearance
  • Animation
  • Color contrast
  • Mobile and touch

Oblukaj i koniecznie zapisz do zak艂adek:
https://www.a11yproject.com/

Ciekawostka: sk膮d wzi膮艂 si臋 zapis "a11y"?
Pomi臋dzy "a" i "y" w s艂owie "accessibility" jest dok艂adnie 11 znak贸w. To聽co艣 jak "i18n"聽馃槈


#PrzemoPatterns: Toast

馃 Co to jest?

Toast to ma艂e, wyskakuj膮ce powiadomienie, s艂u偶膮ce do wy艣wietlenia informacji o聽operacji, kt贸r膮 wykonali艣my.

殴r贸d艂o: UXPlanet.org

Charakterystyczne jest to, 偶e toast znika automatycznie po up艂ywie danego limitu czasu. Mimo to, dla niecierpliwych, warto zaimplementowa膰 mo偶liwo艣膰 wcze艣niejszego, manualnego zamkni臋cia.

Mo偶emy te偶 doda膰 podr臋czne akcje, kt贸re pozwalaj膮 wycofa膰 si臋 z - by膰 mo偶e - pochopnie wykonanych czynno艣ci:

Gmail i jego "Undo" po wys艂aniu emaila.

Czym jeszcze wyr贸偶nia si臋 dobrze zaprojektowany toast?

鈩癸笍 Wskaz贸wki

  • Zwi臋z艂y i zrozumia艂y tekst, skupiaj膮cy si臋 na danym statusie lub聽akcji
  • Dobrym miejscem na pojawienie si臋 toasta s膮 rogi ekranu (a nie jako g艂贸wny, wy艣rodkowany element)
  • Toasty uruchamiamy po wykonaniu akcji lub eventu
  • Wykorzystujmy kolory toast贸w do generowania emocji przekazu, np. zielony toast informuje o sukcesie, czerwony o b艂臋dzie. Opr贸cz koloru mo偶na wykorzysta膰 tak偶e ikon臋
  • Toasty powinny by膰 widoczne na tyle d艂ugo, aby mo偶na je by艂o przeczyta膰, ale na tyle kr贸tko, by nie zas艂ania艂y zbyt d艂ugo innych informacji (przed implementacj膮 warto przeczyta膰 sobie ten tekst na g艂os i oceni膰 ile czasu potrzeba)

Przyk艂ad:

Przyk艂ad komunikatu "success". 殴r贸d艂o: Contra by ITTI

INFO: Przemo dostarczy艂 dla Was dzisiejsze tipy pomimo aktualnego zmagania si臋 聽COVIDem 馃挭 Brawa!聽馃憦


Kogo warto obserwowa膰?

Dmitry Bunin

Projektant i przedsi臋biorca. Sprzedaje swoje UI kity, zestawy ikon itd. Na Twitterze i swojej stronie zapodaje tipy o UI/UX w mega szybkiej do nauki formie: obrazk贸w z聽por贸wnaniem dw贸ch interfejs贸w.

Przyk艂ad z聽przyciskiem CTA:

Zobacz wi臋cej na: How to Design Striking CTA

Polecamy seri臋 wpis贸w z "Learn" - pigu艂ka wiedzy na dany temat, np. przyciski CTA, dark mode, gradienty, typografia itd. - zobacz.

Twitter: @buninux
Web: buninux.com


My艣lisz, 偶e zrobienie test贸w A/B b臋dzie trudne i聽czasoch艂onne?

Google Optimize

Za pomoc膮 Google Optimize mo偶emy zrobi膰 testy A/B naszej strony www w par臋 minut. 馃憖

Jordan z UX Tools pokazuje nam na filmiku jak to zrobi膰.
Bardzo przyjmene wideo, zobacz:


R贸b przej艣cia mi臋dzy stronami "like聽a聽boss"

UX, UI | 藕r贸d艂o

Przej艣cia mi臋dzy poszczeg贸lnymi podstronami, dodatkowo wspierane przez animacje oparte na mikrointerakcjach to co艣, co jest cz臋sto pomijane przy projektowaniu stron www. UX tworzonej aplikacji mo偶e na tym zyska膰, zapewniaj膮c do艣wiadczenie z ang. zwane "seamless", minimalizuj膮ce odczucie prze艂adowania aktualnie wy艣wietlanej zawarto艣ci i buduj膮ce wra偶enie jednej, sp贸jnej podr贸偶y.

  1. Zobacz jak wygl膮daj膮 te przej艣cia mi臋dzy stronami:
    https://pagetransitions.netlify.app/
  2. Oblukaj kod 藕rod艂owy na GitHubie:
    https://github.com/sdras/page-transitions-travelapp
  3. Przemy艣l wprowadzenie podobnych rzeczy u siebie 馃檪

PS. Damian, dzi臋ki za podes艂anie 藕r贸d艂a i inspiracj臋! Dzi臋ki Kuba za korekt臋 i zapodanie terminu "seamless". 馃嵒


To wszystko na dzi艣, dobrego pi膮teczka i weekenda!
Zdr贸wka!

...a mo偶e drineczka z naszym kumplem, Singletonem? 馃槀 馃槀 馃槀

Zassane z kana艂u #memy-it spo艂eczno艣ci Zaprogramuj 呕ycie 鉂わ笍

Aha, i prze艣lij pls swoim znajomym link do skr贸tu z ostatnich wysy艂ek: uxowy.dev/lista - niech maj膮, a co! 馃敟 I聽niech do艂膮czajo do聽uxowy.dev, aby niczego nie przegapi膰! Nied艂ugo rusza "spo艂eczno艣膰" uxowy.dev!

(na fb wrzucili艣my info o wynikach z聽ostatniej ankiety, je艣li Ci臋 to interesuje):

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.