馃帹 uxowy.dev #28
7 min czytania

馃帹 uxowy.dev #28

Maj贸weczka ju偶 unosi si臋 w powietrzu... 馃彆鉀碉笍馃尦 聽a聽do Twojej skrzynki聽l膮duje w艂a艣nie UXowe mi臋sko do poczytania w聽wolnej chwili. Je艣li tak膮 znajdziesz...

Te偶 tak masz, 偶e zamiast wykorzysta膰 wolne i troch臋 odpocz膮膰, to b臋dziesz klepa艂(a) jaki艣 sw贸j side-project? 馃ぃ Haha

Ok, o czym dzisiaj?

  1. 10 rzeczy, kt贸rych user oczekuje od Twojej aplikacji
  2. #PrzemoPatterns: Strona "Kariera"
  3. Trendi interfejsy z illustracjami dla inspiracji
  4. Co ten mobajl? by zebza

Szkoda czasu, ruszamy! 馃憞


10 rzeczy, kt贸rych user oczekuje od Twojej aplikacji

殴r贸d艂o

Ciekawa lista 10. wzorc贸w zachowa艅 (ang. behavior patterns), kt贸rych u偶ytkownik oczekuje od Twojej aplikacji. Oczywi艣cie nie jest to must have, ale na pewno spe艂nienie niekt贸rych z poni偶szych punkt贸w polepszy UX.

1. Bezpieczna eksploracja

殴r贸d艂o
Let me explore without getting lost or getting into trouble.

Przyk艂ady:

  • przycisk wstecz zawsze przenosi nas o jeden krok wstecz
  • aplikowanie filtr贸w na zdj臋ciach z mo偶liwo艣ci膮 szybkiego cofni臋cia efektu
  • prowadzenie historii (wpis贸w, plik贸w...)
  • przycisk "Cofnij" w wy艣wietlanym komunikacie

2. Natychmiastowa gratyfikacja

殴r贸d艂o
I want to accomplish something now, not later.

Przyk艂ady:

  • natychmiastowe info o "dopasowaniu" w aplikacji randkowej
  • odpalenie konfetti po zako艅czeniu zadania
  • zamawianie ubera z natychmiastow膮 reakcj膮 - ju偶 kto艣 do nas jedzie
  • naci艣ni臋cie "drzemka" w budziku 馃槀

3. Prostota

殴r贸d艂o
This is good enough. don鈥檛 want to spend more time learning to do it better.
People are willing to accept 鈥済ood enough鈥 instead of 鈥渂est鈥 if learning all the alternatives might cost time or effort.

Przyk艂ady:

  • 艂atwo skanowalny interfejs
  • pokazanie pierwszej opcji jako np. tej najczesciej wybieranej
  • daj proste opcje do wyboru i zapewnij bezpieczne cofni臋cie wyboru / poprawy je艣li to mo偶liwe

4. Zrobi臋 to p贸藕niej

Anything that isn鈥檛 100% necessary should be skippable. 殴r贸d艂o
I don鈥檛 want to answer that now; just let me finish!

Najwa偶niejsze:

  • unikaj wieeelu krok贸w
  • pozw贸l u偶ytkownikowi "pomin膮膰" etap
  • jasno oznacz / oddziel obowi膮zkowe etapy od tych mniej wa偶nych
  • pozw贸l u偶ytkownikowi doda膰 / zmieni膰 rzeczy p贸藕niej

5. Przyzwyczajenia

That gesture works everywhere else; why doesn鈥檛 it work here, too? 殴r贸d艂o
Jak my艣lisz, gdzie u偶ytkownicy sp臋dzaj膮 95% czasu w Internecie? Nie na Twojej stronie! Jednocze艣nie ucz膮 si臋 tam i przyzwyczaj膮 do typowych zachowa艅. Nie zawsze warto wynajdowa膰 ko艂o na nowo!

Przyk艂ady:

  • CTRL + S, CTRL + Z
  • Przeci膮gni臋cie ekranu w prawo lub w lewo pozwala na przej艣cie do lub nast臋pnej strony
  • przycisk "X" do zamykania okna modalnego
  • poci膮gni臋cie w d贸艂 w celu od艣wie偶enia listy

6. Pami臋膰 przestrzenna

殴r贸d艂o
I swear that button was here a minute ago. Where did it go?

Przyk艂ady:

  • grupowanie aplikacji w foldery
  • uk艂adanie ikon/plik贸w na pulpicie
  • dostosowanie dashboardu do swoich potrzeb

7. Social Proof

殴r贸d艂o
What did everyone else say about this?

Przyk艂ady:

  • Oceny na Allegro, Amazonie itd.
  • lajki, reakcje, komentarze, liczba followers贸w, liczba wy艣wietle艅
  • rekomendacje / polecenia
  • komunikaty typu: "48 Twoich znajomych lubi t臋 stron臋"

8. Usprawnianie powtarzalnych rzeczy

If your users are continuously repeating the same command or action 鈥 make a shortcut or workflow for it to make their life easier. 殴r贸d艂o
I have to repeat this how many times?

Przyk艂ady:

  • autouzupe艂nianie wpisywanej frazy
  • automatyzacja powtarzalnych proces贸w
  • akcje typu: "Zaznacz wszystko" / "Usu艅 wszystkie"

9. "Wr贸c臋 do tego"

殴r贸d艂o
I鈥檓 putting this here to remind myself to deal with it later.

Przyklady:

  • zostawianie otwartego okna, aby do niego za chwil臋 wr贸ci膰
  • oznaczanie maila jako nieprzeczytany / oznaczanie go gwiazdk膮
  • dodawanie stron do zak艂adek / reading list

10. Wype艂nianie kr贸tkiej luki czasowej

Your interface should encourage users to use it in the spare 2 minutes they have on the elevator. 殴r贸d艂o
I鈥檓 waiting for the train. Let me do something useful for two minutes.

Przyk艂ady:

  • przescrollowanie feeda (fb, insta etc.)
  • oblukanie news贸w
  • gierka
  • odpowied藕 na wiadomo艣ci
  • sprawdzenie maila

To wszystkie punkty. Warto doda膰, 偶e zosta艂y one sporz膮dzone na podstawie tresci w ksi膮偶ce: Designing Interfaces: Patterns for Effective Interaction Design.


#PrzemoPatterns: Strona "Kariera"

Dzi艣 pozwol臋 sobie na lekkie od艣wie偶enie formu艂y #PrzemoPatterns. Oczywi艣cie wci膮偶 skupi臋 si臋 na dobrych wzorcach, natomiast tym razem nie opisz臋 konkretnego elementu UI, lecz ca艂膮 podstron臋.

Materia艂 przyda si臋 szczeg贸lnie programistom, kt贸rzy opiekuj膮 si臋 stron膮 swojego pracodawcy - mo偶ecie mocno zaplusowa膰 wprowadzaj膮c zaledwie kilka usprawnie艅 do podstrony 鈥淜ariera鈥, czyli miejsca aktualnych rekrutacji.

I nie mylicie si臋, tak偶e i taka podstrona, by zapewni膰 u偶ytkownikowi dobre wra偶enia, powinna zawiera膰 informacje, kt贸rych prawdopodobnie b臋dzie tu szuka艂.

Zatem co powinni艣my w tym miejscu zaprezentowa膰?

鈩癸笍 Wskaz贸wki

  • Historia firmy: pami臋taj o tym, 偶e do podstrony 鈥淜ariera鈥 u偶ytkownicy bardzo cz臋sto trafiaj膮 bezpo艣rednio przez wyszukiwark臋. Zatem nie ograniczaj si臋 do informacji o firmie tylko w zak艂adce 鈥淥 nas鈥. Tak偶e i w tym miejscu podziel si臋 kr贸tk膮 histori膮 przedsi臋biorstwa i jego do艣wiadczeniem na rynku.
  • Aktualne informacje: upewnij si臋, 偶e wszystkie tre艣ci s膮 aktualne, zw艂aszcza warto艣ci takie jak liczebno艣膰 zespo艂u, czas pracy itp.
  • 艢wiadczenia pracownicze: Wypunktuj benefity, kt贸re maj膮 rzeczywist膮 warto艣膰 i nie s膮 sztuczkami (u偶ytkownicy 艂atwo to wyczuj膮).
  • Struktura dzia艂贸w i zespo艂贸w: Przedstaw podstawow膮 struktur臋 zespo艂贸w i聽ich g艂贸wne obowi膮zki.
  • Oferty pracy: rzecz niezb臋dna w takim miejscu :) Spr贸buj podzieli膰 oferty pracy wed艂ug dzia艂u, u艂atwi to skanowanie ofert.
  • Miejsce pracy: zaprezentuj Twoje biuro, napisz czy oferujecie prac臋 zdaln膮.
  • Referencje pracownik贸w: co艣, co zrobi fajn膮 robot臋 ;) Dodaj historie obecnych pracownik贸w, kt贸rzy opisz膮 dlaczego uwielbiaj膮 pracowa膰 w tej firmie i czego mo偶na si臋 spodziewa膰 po zatrudnieniu.

B臋d臋 wdzi臋czny za opinie czy takie nieregularne odskocznie od prezentacji poszczeg贸lnych element贸w UI s膮 dla Was ciekawe!


Trendi interfejsy z illustracjami dla inspiracji

UI, Resources | 藕r贸d艂o

Dla ka偶dego interfejsu podane jest 藕r贸d艂o illustracji 馃槈:

Concept of a remote jobs website by Yasir Ahmad Noori with Casual Life 3D illustrations
Open sea project by Eduard Bodak with Handy illustrations
University website concept by Masud Rana with Casual Life 3D illustrations
Meeting app by David Tost with 3D Flame illustrations
Remote jobs website by Hasnur Alam Ujjol with Business 3D illustrations
Task Manager by Daniil Nikitin with Dizzy illustrations
Online Cooking Academy website by Merna Yasser with Taxi illustrations
Wallet app by Topu Roy Antu with Business 3D illustrations
E-learning app by Nur Arga Dahana with Sammy illustrations
Fruits Onboarding by Yasir Ahmad Noori with 3D Fluency illustrations
E-learning landing page by Mishu with Stripy illustrations
Microloans app concept by Dane Perring with 3D Hands illustrations
Podcast app by Daria Komendantova with Taxi illustrations
Landing page by moontek with Pablita illustrations

Co ten mobajl? by zebza

Wydanie newslettera Natalii Bienias poruszaj膮ce kwestie projektowania aplikacji na urz膮dzenia mobilne.

A w nim, mi臋dzy innymi:

  • mobile to nie tylko smartfon
  • mobile to nie ma艂y desktop
  • palec to nie kursor
  • dobre 藕r贸d艂a do nauki i linki

Link do wersji online newslettera: https://preview.mailerlite.com/f6l4w2y8s2/1927089856031232047/m8g3/

Zach臋camy te偶 do subskrypcji newslettera Natalii :)


To wszystko na dzi艣.
Komitujcie swoje ostatnie rzeczy, deplojujcie na proda i聽wio z聽d艂ugim weekendem 馃槀

Dobrej maj贸weczki! 馃憢

殴r贸d艂o

Pom贸偶 innym wiedzie膰 wi臋cej

Znasz kogo艣, kto powinien do艂膮czy膰 do naszej spo艂eczno艣ci? Je艣li tak, to聽wy艣lij do tej osoby link do skr贸tu z ostatnich wysy艂ek: uxowy.dev/lista. I聽niech do艂膮czy do 馃帹聽uxowy.dev!

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.