馃帹 uxowy.dev #55: Nowa strona Next.js & rage taps
4 min czytania

馃帹 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:

  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?

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

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:
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:

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.