🎨 uxowy.dev #74: Ukryć czy disablować... oto jest pytanie
na wstępie chciałbym Cię przeprosić za straaszną nieregularność wysyłek. No cóż, mam po prostu mniej czasu na newsletter. Ale zawsze podświadomie ciągnie mnie do tych tematów, więc możesz być pewien/pewna, że co jakiś czas na pewno coś dostaniesz 😉
A co dzisiaj?
- jedno pytanie, na które trzeba sobie odpowiedzieć, żeby wiedzieć czy coś ukryć 👁️ czy disablować 🚫
- smaczki UI, które dodają magii 🪄
Zapraszam ⬇️
Ukryć czy disablować... oto jest pytanie
Jako developerzy często spotykamy się z sytuacją, gdzie przez logikę coś jest dostępne w pewnych okolicznościach, a w innych nie. Klasyka.
I teraz pytanie - ukryć to, czy disablować...?
Z pomocą przychodzi Vitaly Friedman w jednym ze swoich mailingów (btw. bardzo polecam obserwować tego Pana).
W skrócie:
Wystarczy odpowiedzieć sobie na jedno zaje****e ważne pytanie #laska:
"Czy użytkownik będzie kiedykolwiek mógł wejść w interakcję z tym elementem?"
Jeśli TAK, daj disabled:
- dla tymczasowych ograniczeń
- gdy wartość lub status czegoś jest istotny, ale nie można tego edytować
- gdy akcja nie jest jeszcze dostępna, np. loading...
Jeśli NIE, ukryj:
- przez brak uprawnień lub bezpieczeństwo danych,
- jeśli jakieś elementy są dostępne dopiero po zaznaczeniu checkboxa/toggla lub kliknięciu "Więcej opcji..." / "Zaawansowane"
WAŻNE:
Jeśli jakiś element jest disabled to zadbaj o to, aby użytkownik wiedział dlaczego jest disabled i jak może to zmienić. Nie ma nic gorszego niż wyłączony przycisk "Submit" niewiadomo z jakiego powodu.
A jak jesteśmy już przy disabled - czasami lepiej umożliwić kliknięcie użytkownikowi w element, ale zamiast wykonania akcji, pokazać komunikat co jest nie tak.
Dobrym przykładem jest wyżej wspomniany przycisk Submit formularza. Lepiej umożliwić wywołanie Submit, nawet jeśli wiemy na froncie, że formularz jest nieprawidłowo wypełniony. Pokazujemy wtedy błędy walidacyjne przy odpowiednich polach. ✅
Smaczki, które nadają UI'owi magii
Wiadomo, że UX aplikacji jest o wiele lepszy jak mamy jakieś fajne mikrointerakcje. Takie smaczki, np. animacja po naciśnięciu przycisku "lubię to", które sprawiają, że aż chce się klikać i używać tych aplikacji 🙂
To tutaj zarzucam zbiór takich smaczków:
designspells.com
Polecam 👆
To wszystko na dziś!
Pozdrawiam i dobrego weekendu! 🥳 🚀
Mikołaj Waśkowski
uxowy.dev