馃帹 uxowy.dev #33
4 min czytania

馃帹 uxowy.dev #33

Mam nadziej臋, 偶e u Ciebie wszystko dobrze i - bez zb臋dnego przed艂u偶ania - mo偶emy przej艣膰 do tre艣ci dzisiejszego wydania newslettera 馃敟

A co dzisiaj?

  1. Cards - jak zrobi膰 je dobrze?
  2. Web component <Tabs> tworzony od zera - o聽czym warto pami臋ta膰?
  3. Nagradzaj usera - odpal np. confetti na koniec procesu

Gotowy/a?
3... 2... 1... START!


Cards - jak zrobi膰 je dobrze?

UX, UI | 藕r贸d艂o
Karty to bardzo popularny komponent w naszych aplikacjach. 殴r贸d艂o

Zacznijmy od szybkiego wst臋pu.
Co to jest i co zawiera Card?

Przyk艂ad Carda z opisem jego element贸w. Komponent ten mo偶e bardzo si臋 r贸偶ni膰, w zale偶no艣ci od zastosowania. 殴r贸d艂o
  1. Zdj臋cie / grafika / ilustracja - co艣, co przyci膮ga wzrok
  2. Tytu艂 / nazwa przedmiotu / artyku艂u itd.
  3. Kr贸tki opis
  4. CTA (call to action)
  5. Podtytu艂
  6. Ikony

A teraz czas na szybkie tipy:

1. Przykuj uwag臋 - u偶yj w艂a艣ciwej grafiki / zdj臋cia

Wybierz takie, kt贸re nie jest nudne i przyci膮gnie uwag臋 u偶ytkownika. 殴r贸d艂o

2. Pami臋taj o wizualnej hierarchii

Manipuluj rozmiarem i kontrastem element贸w, aby 艣wiadomie ustali膰 wizualn膮 hierarchi臋. 殴r贸d艂o

3. Mniej znaczy... lepiej 聽

Card powinien zawiera膰 tylko niezb臋dne informacje. Takie, kt贸re jasno okre艣l膮, czego u偶ytkownik mo偶e si臋 spodziewa膰 po klikni臋ciu w ten element. I jednocze艣nie takie, kt贸re go zach臋c膮 do klikni臋cia. 殴r贸d艂o

4. Unikaj link贸w w tre艣ci

Nie dodawaj aktywnych link贸w do Carda. Karta sama w sobie powinna by膰 klikalna lub powinna mie膰 przycisk(i) na dole wzywaj膮ce do jakich艣 akcji. 殴r贸d艂o

5. Odr贸偶nij od siebie akcje (CTA)

Card maj膮cy wi臋cej ni偶 jedn膮 akcj臋 powinien mie膰 np. primary i secondary action. Unikaj umieszczania wielu przycisk贸w z akcj膮 na tym samym poziomie w hierarchii wizualnej. 殴r贸d艂o

6. Nie u偶ywaj linii do dzielenia contentu

Utrzymaj porz膮dek i czysto艣膰. Unikaj zb臋dnych element贸w wprowadzaj膮cych zb臋dne zamieszanie. 殴r贸d艂o

7. (Trend) U偶yj zaokr膮glonych rog贸w

Zaokr膮glone rogi s膮 bli偶sze przedmiotom obecnym w realnym 艣wiecie, s膮 te偶 dla nas "przyja藕niejsze" w odbiorze. 殴r贸d艂o

8. (Trend) Dodaj lekki cie艅 lub border

Poka偶esz dzi臋ki temu, 偶e karta jest klikalna. Podbijesz j膮 tak偶e jej pozycj臋 w wizualnej hierarchii (element z cieniem jest "bli偶ej" u偶ytkownika). Unikaj tutaj czystego koloru "black" z jakim艣 opacity, dodaj odrobin臋 koloru. 殴r贸d艂o

Przyk艂ady dobrych Card贸w:

Blog / post card. 殴r贸d艂o
e-commerce / karta produktu. 殴r贸d艂o
Profile card. 殴r贸d艂o
Dashboard cards. 殴r贸d艂o
Daily activities cards (Kanban). 殴r贸d艂o

Web component <Tabs> tworzony od zera - o聽czym warto pami臋ta膰?

UX, Development | 藕r贸d艂o

Je艣li musia艂e艣 kiedy艣 robi膰 komponenty tego typu od zera, to wiesz, 偶e to wcale nie jest takie proste...

A je艣li my艣lisz, 偶e jest, to tym bardziej zerknij do artyku艂u poni偶ej 馃槢
(nie umieszczam tutaj ca艂ego opisu, bo trzeba wej艣膰 w szczeg贸艂y i zobaczy膰 kody 藕r贸d艂owe, animacje itd.)

Zobacz, o co warto zadba膰 tworz膮c web component typu tabs:
https://darn.es/building-tabs-in-web-components/


Nagradzaj usera - odpal confetti na koniec procesu

Resources | 藕r贸d艂o
Zrzut ekranu z filmiku o dodaniu confetti. 殴r贸d艂o

Chyba wszyscy lubimy by膰 nagradzani.
I lubimy, jak kto艣 cieszy si臋 z osi膮gni臋cia naszego celu. 聽

Dajmy userowi jaki艣 instant gratification w naszej aplikacji. My艣l臋, 偶e dobrym pomys艂em jest np. dodanie confetti na ekranie ko艅cz膮cym jaki艣 d艂u偶y proces / osi膮gni臋cie celu.

Z tego co pami臋tam, ju偶 ca艂kiem dobrze rozkr臋cona platforma EasyCart ma tego rodzaju confetti na stronie potwierdzaj膮cej kupno produktu/us艂ugi w聽koszyku.

Tutaj link do skrypciku, dzi臋ki kt贸remu mo偶emy doda膰 taki efekt konfetti na nasz膮 stron臋 w 5 minut:


To wszystko, co przygotowa艂em na dzi艣.
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 馃帹 uxowy.dev? 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 naszej spo艂eczno艣ci programist贸w, kt贸rzy chc膮 robi膰 aplikacje z lepszym UI/UX! 馃殌

Pozdrawiam i do nast臋pnego! 馃憢
...w przysz艂y pi膮tek!

Miko艂aj Wa艣kowski

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.