🎨 uxowy.dev #55: Nowa strona Next.js & rage taps
Dziś będzie króciutko. Bo majówka wzywa 😎 Także przechodząc od razu do konkretów, dzisiaj będzie o:
- Nowej stronie Next.js - co jest pod jej maską?
- Co zrobić, żeby user nie robił tzw. rage taps?
3️⃣ 2️⃣ 1️⃣ 0️⃣
Zaczynamy 👇 👇 👇
Co jest pod maską nowej strony Next.js?
Next.js ostatnio zaktualizowało swoją stronę główną.
A poniżej mamy artykuł od osoby, która zajmowała się wdrożeniem tej strony - rauno.
Dowiemy się z niego, jak zrobiono m.in.:
...i jeszcze parę innych, ciekawych rozwiązań.
Sprawdź tutaj:
https://rauno.me/craft/nextjs
Rauno Freiberg
Ogólnie polecam też obczajenie innych prac rauno na jego stronie:
https://rauno.me/
☝️ bardzo inspirujące!
Co zrobić, żeby user nie robił tzw. rage taps?
O rage taps możemy mówić podczas przypadkowego kliknięcia w inny element albo wielokrotnego klikania bez widocznego efektu. Może prowadzić do frustracji i błędów użytkowników.
Rage taps najczęściej spowodowane są:
- elementami interfejsu, które są zbyt małe i trudno je kliknąć/tapnąć lub znajdują się zbyt blisko siebie.
- jeśli nie dodaliśmy np. stanu loading na buttonie i user klika go kilka razy, bo nie wie, że coś tam dzieje się w tle
- mamy stan aplikacji, w którym nie możemy nic zrobić - nie możemy przerwać procesu, nie ma akcji wstecz albo np. aplikacja się zmuliła i nie reaguje na polecenia użytkownika
- kliknięciem w element, który wypier*** naszą aplikację 🐛 i wszystko przestało działać (to bardziej dla śmiechu 😂)
Jak możemy temu zapobiec?
- odpowiednia wielkość elementu klikalnego - jest kluczowe dla zapewnienia dostępności i użyteczności aplikacji:
- postarajmy się, aby było łatwo dosięgnąć element klikalny, możemy użyć np. bottom sheeta:
- jeśli dajemy bottom menu to przycisk powinien mieć min. 44-46px wielkości
- unikaj pokazywania możliwych akcji na hover, np w tabelach:
- jeśli klikalne elementy muszą z jakiegoś powodu być małe, rozważ dodatkowy krok, aby użytkownik pewnie mógł kliknąć w pożądany element (czasami dodatkowe kliknięcie nie jest takie złe):
- maksymalizuj klikalny element:
Więcej tutaj:
- Smashing Magazine: Accessible Target Sizes Cheatsheet
- Enhancing The Clickable Area Size
- WCAG Target Size (AAA)
Jeśli Ci się podobało...
To wszystko na dziś!
Udanej majóweczki!!!
🎉 ☀️ 🏖️
Mikołaj Waśkowski
uxowy.dev
Poprzednie wydania:
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.