馃帹 uxowy.dev #21
4 min czytania

馃帹 uxowy.dev #21

Z wielk膮 ekstytacj膮 piszemy tego maila 馃槏 Dlaczego? Dowiesz si臋 w聽ostatnim punkcie. Ale najpierw mi臋sko:

  1. 10 praktycznych tip贸w UI/UX dla sign-up forms
  2. #PrzemoPatterns: Loading cz. 2
  3. WA呕NE: Og艂oszenie

Kubek w d艂o艅 i ...obczajka - start 馃憞


10 praktycznych tip贸w UI/UX dla sign-up forms

殴r贸d艂o

Co mo偶emy zrobi膰, aby poprawi膰 UX na naszych formularzach rejestracji / logowania?

1. Nie pro艣 o zbyt wiele

殴r贸d艂o

2. Daj autofocus na pierwsze pole

殴r贸d艂o

3. Pozw贸l podejrze膰 has艂o

殴r贸d艂o

4. Poka偶 wymogi has艂a

殴r贸d艂o

5. Potwierd藕, 偶e wszystko jest ok

殴r贸d艂o

6. Unikaj nazw u偶ytkownika 鈫 email

殴r贸d艂o

7. Zachowaj stan formularza

殴r贸d艂o

8. Wype艂nij za usera co mo偶esz

Uzupe艂nij co tylko si臋 da i podpowiadaj gdzie tylko si臋 da, np. na stronie odzyskiwania has艂a uzupe艂nij email, a聽na stronie okre艣lania adresu zaproponuj geolokalizacj臋 urz膮dzenia.

9. Poka偶 alert o w艂. Caps Locku

殴r贸d艂o

10. Uzywaj w艂a艣ciwych typ贸w input贸w i聽klawiatur

殴r贸d艂o

Ca艂y wpis dost臋pny tutaj:
https://blog.icons8.com/articles/10-practical-ui-ux-tips-to-improve-your-sign-up-forms/


#PrzemoPatterns: Loading聽cz.聽2

W nawi膮zaniu do poprzedniego wpisu o charakterystyce samego loadera, dzi艣 opisz臋 dwie, bardziej og贸lne porady dotycz膮ce 艂adownia danych i tego, jak uczyni膰 ten proces bardziej user-friendly.

Rozwi膮zania te s膮 cz臋sto wykorzystywane dla stron/produkt贸w, kt贸re procesuj膮 du偶e ilo艣ci danych lub na kt贸re potrzeba nieco wi臋cej czasu na przetworzenie.

Stan szkieletu strony (skeleton states)

To uproszczone wersje komponent贸w u偶ywanych podczas wst臋pnego 艂adowania strony, w celu wskazania, 偶e informacje na stronie nie zosta艂y jeszcze w pe艂ni za艂adowane. Powinny pojawia膰 si臋 tylko przez kilka sekund i znika膰, gdy sk艂adniki i tre艣膰 zape艂ni膮 stron臋.

https://pencilandpaper.io/wp-content/uploads/2021/02/Pulsing.gif 殴r贸d艂o: Pencilandpaper.io

Bardzo cz臋sto szkielet strony wykorzystuje ruch do zakomunikowania, 偶e strona nie utkn臋艂a i 偶e dane s膮 nadal 艂adowane. Mo偶e to pom贸c w zmniejszeniu niepewno艣ci u偶ytkownika.

Szczeg贸lnie warto u偶y膰 stan贸w szkieletowych dla komponent贸w opartych na kontenerach, takich jak kafelki i listy strukturalne, lub komponent贸w opartych na danych, takich jak tabele danych i karty.

Wed艂ug bada艅 przeprowadzonych przez Nielsen Norman Group, szkielet strony w tle podczas 艂adowania znacznie poprawia wra偶enie u偶ytkownik贸w czekaj膮cych na tre艣膰.

Leniwe 艂adowanie (lazy loading)

Bez wzgl臋du na z艂o偶ono艣膰 naszych komponent贸w, je艣li mamy du偶膮 ilo艣膰 danych, dobr膮 opcj膮 b臋dzie zastosowanie tzw. lazy loadingu. 鈥淟eniwe 艂adowanie" oznacza od艂o偶enie ca艂kowitego za艂adowania danych, by uruchomi膰 je tylko wtedy, gdy u偶ytkownik wyka偶e tak膮 ch臋膰.

Mo偶e si臋 to zdarzy膰 na trzy sposoby:

1. Infinite scroll: gdy wykryjemy, 偶e nasz u偶ytkownik dotar艂 do ko艅ca listy lub strony, albo jest tego bliski, wtedy dopiero zaczynamy pobiera膰 wi臋ksz膮 ilo艣膰 tre艣ci.

https://pencilandpaper.io/wp-content/uploads/2021/02/Infinite-Scroll.gif 殴r贸d艂o: Pencilandpaper.io

2. Innym sposobem jest umo偶liwienie u偶ytkownikowi decyzji poprzez klikni臋cie przycisku w stylu 鈥Za艂aduj wi臋cej鈥. W ten spos贸b nie b臋dziemy niepotrzebnie rozpycha膰 strony, chyba, 偶e u偶ytkownicy wyra藕nie nas o to poprosz膮 :)

https://pencilandpaper.io/wp-content/uploads/2021/02/Load-More.gif 殴r贸d艂o: Pencilandpaper.io

3. Paginacja to kolejna z opcji lazy lodingu. Dzi臋ki niej pozwalamy u偶ytkownikom zadecydowa膰, kiedy chc膮 zobaczy膰 wi臋cej tre艣ci (czyli przej艣膰 na kolejny widok), a tak偶e ograniczamy jej zakres do rozs膮dnej ilo艣ci widocznej na danej stronie.

https://pencilandpaper.io/wp-content/uploads/2021/02/Pagination.gif 殴r贸d艂o: Pencilandpaper.io

Tego rodzaju pattern贸w jest oczywi艣cie wi臋cej, niemniej jednak w mojej zawodowej pracy, te dwa wy偶ej wspomniane (skeleton i lazy loading) sprawdzaj膮 si臋 najcz臋艣ciej.

Ciekaw jestem jak to wygl膮da u Was :)


Og艂oszenie

Niby nic wielkiego, a jednak... uruchomili艣my zamkni臋t膮 grup臋 dla spo艂eczno艣ci uxowy.dev. Jako platform臋 do utworzenia grupy w wi臋kszo艣ci wybrali艣cie Facebooka, wi臋c to tam b臋dzie serce naszej spo艂eczno艣ci.

Po co to?

Wielu z Was cz臋sto ma pytania "a czy to dobre?", "mog臋 prosi膰 o聽feedback", "co聽m贸g艂bym poprawi膰?". A wi臋c damy Wam przestrze艅 do tego 馃檪.

B臋d膮 tam wszyscy Ci, kt贸rym zale偶y na dobrym UI/UX tworzonych aplikacji. Oczywi艣cie, my - developerzy, ale i te偶 eksperci UI/UX/Product design.

Grupa dost臋pna jest pod adresem:
www.facebook.com/groups/uxowy.dev

Do艂膮cz do grupy 艣wietnych ludzi, gotowych do pomocy i聽z聽wielk膮 misj膮 tworzenia lepszych aplikacji!

Dobrego weekendu! 鉁岋笍

PS. Nie zapomnij do艂膮czy膰 do grupy 馃槈

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.