🎨 uxowy.dev #55: Nowa strona Next.js & rage taps

Mikołaj Waśkowski -

Dziś będzie króciutko. Bo majówka wzywa 😎 Także przechodząc od razu do konkretów, dzisiaj będzie o:

  1. Nowej stronie Next.js - co jest pod jej maską?
  2. Co zrobić, żeby user nie robił tzw. rage taps?

3️⃣  2️⃣  1️⃣  0️⃣

Zaczynamy 👇 👇 👇

Co jest pod maską nowej strony Next.js?

UX | źródło
Nowa strona 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.:

Customowe przerywane linie za pomocą gradientów. Źródło
Efekt świecących kropek. Źródło
Focus state, który jest spójny dla różnych elementów. Źródło
Jak dodawać smaczki w postaci takiego apostrofu. Źródło
Jak zadbać o czytniki ekranu dla złożonych elementów. Źródło

...i jeszcze parę innych, ciekawych rozwiązań.

Sprawdź tutaj:
https://rauno.me/craft/nextjs

Crafting the Next.js Website
April 2023
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?

UX | źródło

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:
Target Sizes Cheatsheet, researched and designed by Steven Hoober. Źródło
  • postarajmy się, aby było łatwo dosięgnąć element klikalny, możemy użyć np. bottom sheeta:
Tutaj masz najważniejsze elementy pod swoim ...kciukiem. Możesz przescrollować i kliknąć, co Cię interesuje bez gimnastykowania się paluchami. Źródło
  • jeśli dajemy bottom menu to przycisk powinien mieć min. 44-46px wielkości
  • unikaj pokazywania możliwych akcji na hover, np w tabelach:
Tutaj on hover pokazują się akcje na elemencie tabeli. Lepiej dodać przycisk "akcje", który rozwinie listę możliwych akcji. Źródło
  • 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):
Dodatkowy etap wyboru kolorystyki przedmiotu. Źródło
  • maksymalizuj klikalny element:
Elementy nawigacji powinny być klikalne na całej powierzchni zajmowanego boxa, nie tylko tekst / strzałka. Źródło
Przycisk, nawet składający się z małej ikonki powienien mieć odpowiednio duży obszar klikalny. Źródło
Użycie :after do zwiększenia obszaru klikalnego. Źródło
Przykłady wielkości obszaru klikalnego dla różnych elementów. Źródło

Więcej tutaj:

Jeśli Ci się podobało...

🎨
Zapodaj info o tym newsletterze swoim devowym ziomkom! Na pewno im też przyda się trochę wiedzy o UI/UX dla developera! A ja będę bardzo wdzięczny, że dzięki Tobie to, co robię dociera do większej ilości osób!

To wszystko na dziś!
Udanej majóweczki!!!  

🎉  ☀️  🏖️

Mikołaj Waśkowski
uxowy.dev

Poprzednie wydania: