#PrzemoPatterns: Modal
2 min czytania

#PrzemoPatterns: Modal

#PrzemoPatterns: Modal

­čĄö Co to jest?

Modal to po prostu wyskakuj─ůce okienko czekaj─ůce na interakcj─Ö z┬áu┼╝ytkownikiem.

Ôťů Kiedy stosowa─ç?

U┼╝yj gdy chcesz przerwa─ç bie┼╝─ůcy widok u┼╝ytkownika, aby przyci─ůgn─ů─ç jego pe┼én─ů uwag─Ö na co┼Ť wa┼╝niejszego, np.:

  • dodanie nowego elementu,
  • edycj─Ö,
  • subskrypcj─Ö,
  • potwierdzenie destrukcyjnej akcji (ostrze┼╝enie)

ÔŁî Kiedy unika─ç?

Nie u┼╝ywaj w celu pokazania b┼é─Ödu, sukcesu czy ostrze┼╝enia. W┬áten spos├│b blokujesz ca┼é─ů┬átre┼Ť─ç i interackj─Ö z elementami pod modalem. Nie┬áu┼╝ywaj go do┬áczysto informacyjnych kwestii.

Ôä╣´ŞĆ Wskaz├│wki

Co powinien zawiera─ç dobrze zaprojektowany modal?

  1. Przejrzysty, prosty tytu┼é wyja┼Ťniaj─ůcy akcj─Ö w modalu.
  2. Zrozumia┼éy przycisk dzia┼éania (z ang. call to action -┬áCTA): u┼╝ytkownicy powinni zawsze wiedzie─ç, co si─Ö wydarzy po klikni─Öciu w dany przycisk, nie┬ástosuj button├│w w stylu ÔÇťOKÔÇŁ. Zamiast tego u┼╝yj "Usu┼ä" czy "Zapisz".
  3. Kolory CTA: zadbaj o odpowiednie rozr├│┼╝nienie kolorystyczne powi─ůzane z┬áprzeznaczeniem danej akcji (tryb informacyjny, destruktywny lub pozytywny). Pssst! Oczywi┼Ťcie mo┼╝e to tak┼╝e zale┼╝e─ç od samej warstwy wizualnej produktu, kt├│ry tworzysz. Przyk┼éad: dla aplikacji PeoPay od Pekao S.A. przyciski potwierdzaj─ůce s─ů... czerwone. Bo to ich kolor "primary".
  4. Mo┼╝liwo┼Ť─ç wyj┼Ťcia z okna modalnego: dodaj przycisk "X" w┬áprawym g├│rnym rogu lub przycisk "Zamknij"; klikni─Öcie poza modalem powinno r├│wnie┼╝ automatycznie go zamkn─ů─ç.
  5. RWD: we┼║ pod uwag─Ö r├│┼╝ny rozmiar modala na poszczeg├│lnych urz─ůdzeniach. Dla mobile warto powi─Ökszy─ç okno modalne do pe┼énego ekranu, aby uzyska─ç wi─Öcej miejsca.
  6. Zmiana t┼éa poza modalem: przyciemnij lub rozmyj t┼éo poza oknem modalnym, aby to na nim skupi─ç ca┼é─ů uwag─Ö.
  7. Opis (opcjonalnie): je┼Ťli uznasz, ┼╝e u┼╝ytkownikowi przyda si─Ö wi─Öcej informacji, aby zrozumie─ç wag─Ö podejmowanej decyzji - dodaj opis pod tytu┼éem.

Przykład dobrze zaprojektowanego okna modalnego:

┼╣r├│d┼éo: system ÔÇťContraÔÇŁ by ITTI

Podoba Ci si─Ö? Daj zna─ç ­čśë

Pami─Ötaj prosz─Ö, ┼╝e te tipy s─ů du┼╝ym uog├│lnieniem, a┬áka┼╝dy przypadek trzeba traktowa─ç indywidualnie.

Czasami np. klikni─Öcie w t┼éo poza modalem nie powinno go zamkn─ů─ç. Taki zabieg mo┼╝e mie─ç na celu unikni─Öcie przypadkowych wyj┼Ť─ç z┬áokna. U┼╝yty w┬áspos├│b ┼Ťwiadomy i┬ácelowy przyczyni si─Ö do polepszenia UX aplikacji.

Je┼Ťli chcesz poczyta─ç wi─Öcej o dobrych praktykach w Modalach, podrzucamy Ci ┼Ťwietny artyku┼é spod szyldu UX Planet:
https://uxplanet.org/best-practices-for-modal-window-design-627f7aba57f1

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.