馃帹 uxowy.dev #30
5 min czytania

馃帹 uxowy.dev #30

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

殴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

馃 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!

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.