🎨 uxowy.dev #30

Mikołaj Waśkowski -

Daj znać, jakie treści są dla Ciebie najlepsze, a takie będziemy wysyłać 😉. Możesz to zrobić pod tym linkiem:
https://www.survio.com/survey/d/S7B1X4N9F5P2F5O2G

Wypełnione?
To lecimy. 🚀

Co dzisiaj?

  1. 10 komponentów, które muszą się znaleźć w Design Systemie. Masz je?
  2. #PrzemoPatterns: Datepicker
  3. Oblukaj nowe Human Interface Guidelines Apple'a

Start!

10 komponentów, które muszą się znaleźć w Design Systemie

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

Dodanie tych komponentów w Design Systemie powinno wymusić utworzenie pewnych współnych wzorców, np.:

  • jaki mamy styl komponentów: zaokrąglone rogi? duży spacing? duży tekst?
  • jakie design tokeny potrzebujemy?
  • jakie mamy stany tych komponentów: active, hover, focus?
  • itd.

Oto lista 10 must-have komponentów, które powinny się znaleźć w Twoim Design Systemie:

1. Button

Przycisk jeden z najważniejszych elementów. Pamiętaj o zdefiniowaniu jego wszystkich stanów: active, hover, focus, disabled, loading itd. Źródło grafiki

2. Input

Uwzględnij różne warianty np.: wyświetlanie ikony po prawej/lewej oraz różne stany, np.: loading, error, disabled, focus itd. Źródło grafiki

3. Checkbox

Checkboxa często używamy już na pierwszej stronie, z którą użytkownik ma kontakt - na stronie rejestracji. Nie twórzmy tutaj jakichś udziwnień, idźmy w klasykę - najlepiej kwadrat z "ptaszkiem". Źródło grafiki

4. Radio

Radio lub grupy przycisków - tutaj jest podobnie, jak z Checkboxem - idźmy w klasykę. Niech Radio wygląda jak radio. Źródło grafiki

5. Switch

Switch to pole wyboru, które aplikuje zmianę natychmiastowo - nie musimy potwierdzać zmiany żadnym "Save". Na pewno przyda nam się w naszej aplikacji (Settings?). Źródło grafiki

6. Dropdown menu

Jeśli mamy dużo opcji do wyboru (więcej niż 3-5), użyjmy Dropdowna. Jeśli mamy ich bardzo dużo - wspomóżmy się np. autocomplete. Źródło grafiki

7. Dialog

Okna dialogowe używane są do przykucia 100% uwagi użytkownika. Często stosowane są z jakimś tłem (overlay), aby odciąć użytkownika od tego, co jest pod spodem i wymusić na nim jakąś akcję z okna. Źródło grafiki

8. Card / section

Warto zdefiniować w jaki sposób będziemy grupować nasz content w karty / sekcje. Zdefiniować paddingi, spacingi, wielkości tekstów, cienie, zaokrąglenia itd. Te rzeczy powinny współgrać i być spójne wewnątrz całej naszej aplikacji. Źródło grafiki

9. Loading / skeleton

To ważne, żeby pokazać użytkownikowi, że coś się dzieje w naszej aplikacji. Przemyśl to dobrze jak to zrobić (zwykły loader? a może skeleton? ciekawa animacja?) i zdefiniuj w Design Systemie, aby być spójnym na wszystkich ekranach. Źródło grafiki

10. Tooltip

Czasami używamy przycisków-ikon. Problem w tym rozwiązaniu jest taki, że ikona czasami nie kojarzy się komuś bezpośrednio z akcją, którą wykona. M.in. w takim przypadku przyda się Tooltip. Już z tego powodu warto go mieć w swoim Design Systemie. Źródło grafiki

#PrzemoPatterns: Datepicker

UX | źródło

🤔 Co to?

Datepickery to selektory przedstawiające kompletny miesiąc kalendarzowy (czasami też miesiące lub lata), wykorzystywane w celu wyboru danego dnia lub przedziału czasowego.

Wyglądem zazwyczaj nawiązują do rzeczywistych kalendarzy biurkowych lub ściennych. I chyba przywykliście już do tego zdania - ten z pozoru prosty element interfejsu może napsuć wiele naszym użytkownikom, dlatego pilnujmy tych kilku, prostych zasad.

ℹ️ Wskazówki:

  • Pozwól wpisać datę ręcznie: wybór z gotowego komponentu date-pickera nie zawsze musi być przyjemny, szczególnie w momencie gdy szukamy daty z dalekiej przeszłości (np. urodziny) lub przyszłości. W takim wypadku sprawdzi się po prostu pole, w którym będziemy mogli wpisać datę ręcznie.
  • Blokuj możliwość wyboru niedostępnych dat: nawiązując do prewencyjnego zapobiegania błędom, warto zablokować i wyszarzać daty, które nie są dostępne lub pozbawione logiki (np. data powrotu przed dniem wylotu).
  • Nie wymuszaj wprowadzania znaków specjalnych: jakikolwiek separator między dniem, miesiącem i rokiem wprowadzą nasi użytkownicy (kreski, spacje, ukośniki, kropki etc.), ich dane powinny być przez nasz system rozpoznane. Najlepiej po prostu wypełnić ten element za nich. Programistycznie jest to jak najbardziej wykonalne, a ręczne poprawianie znaków specjalnych może delikatnie zirytować korzystających z naszej strony.
  • Podświetl dzisiejszą datę: nie zapomnij na kalendarzu podświetlić dzisiejszej daty (każdemu z nas zdarza się jej zapomnieć 😉) oraz w zauważalnie inny sposób dnia wybranego.
  • Pozostaw placeholder z formatem daty: w niektórych aplikacjach zdarza się tak, że placeholder z formatem daty znika po rozpoczęciu jej wpisywania. Osobiście radziłbym pozostawić dalszą część placeholderu, wtedy unikniemy sytuacji gdy użytkownik zdąży zapomnieć o oczekiwanym formacie.
Źródło: medium.com

Oblukaj nowe Human Interface Guidelines Apple'a

Resources | źródło
Zrzut ekranu strony Human Interface Guidelines.

Ostatnio Apple zaktualizowało swój Design System - Human Interface Guidelines.

We wszystkich sekcjach, oprócz szczegółowego wyjaśnienienia, znajdziesz teraz przydatne materiały, takie jak: filmy, artykuły, dokumentację API itd.

To mega dawka wiedzy p.t. "Jak powinna wyglądać interakcja człowieka z urządzeniem" wg. Apple.

Tworzona od dawna... 👀

I na bieżąco aktualizowana 🚀

Info, co się zmieniło:
https://developer.apple.com/news/?id=v8a3aetj

Human Interface Guidelines:
https://developer.apple.com/design/human-interface-guidelines

Zapowiada się słoneczny weekendzik, także...

🏖 🍻

Aaa, zapomniałbym o memiku 😂

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!