Przykładowy email

Witaj w świecie tworzenia lepszego UI/UX developerze!

Dziś mamy dla Ciebie:

  1. Proces tworzenia UI - NIGDY TAK NIE ZACZYNAJ!
  2. Zagadka 🧐
  3. W pełni darmowe ilustracje do Twojej aplikacji / strony / bloga
  4. Kogo warto obserwować 👀
  5. Loading to nie wszystko - stany aplikacji i ich obsługa
  6. 24 darmowych filmów "Learn UI" od twórcy światowych trendów takich jak neumorphism i glassmorphism - projektanta z 20-letnim doświadczeniem

Startujemy!


Proces tworzenia UI - NIGDY TAK NIE ZACZYNAJ!

UX | źródło własne
Developerzy zapier***y do swojego IDE żeby kodzić...

Często w ferworze nacisków biznesu "na kiedy to dacie radę zrobić?" siadamy, na szybko omawiamy endpointy i jebs - siadamy do kodu.

To bardzo zła praktyka.

Poniżej rozwiązanie. Traktuj je bardziej jako wskazówka a nie jako wzór, który musi obowiązywać.

Propozycja dla zespołu, który składa się tylko z developerów (ew. project managera) i przedstawiciela biznesu - brak UI/UX designerów, event-stormingów itd.:

10 kroków tworzenia nowego ficzera:

  1. Konwersacja z biznesem
  2. Zrozumienie problemu
  3. Znalezienie możliwie dużo wariantów i powiązań z innymi częściami systemu i uwzględnienie ich
  4. Propozycja rozwiązania dla biznesu:
    - dokumentacja tekstowa
    - mocki UI
    - user stories
  5. Konwersacja z biznesem, dostosowanie dokumentacji
  6. Akceptacja biznesu
  7. Dokumentacja techniczna, ustalenie sposobu komunikacji front<->backend itd.
  8. Zaprojektowanie prac na froncie i backendzie
  9. Podział prac, rozpisanie zadań, organizacja w czasie
  10. Kod

Każda większa lub wpływająca na dużą liczbę obecnych elementów w systemie zmiana powinna być wprowadzana dopiero po przejściu powyższych punktów.

Dzięki temu:

  • nie tracimy tyle czasu na poprawki
  • nie tracimy tyle czasu na uwzględnianie nie wziętych pod uwagę przypadków granicznych
  • nie tracimy tyle czasu na olśnienia biznesu (biznes też człowiek i może się mylić) i zmiany po wprowadzeniu ficzera - większość olśnień nastąpi na etapie tworzenia dokumentacji
  • cały ficzer powinien być lepiej zrobiony - został zaprojektowany, a nie zakodowany
  • mamy dokładniejszą estymację czasu potrzebnego na wykonanie zadania
  • mamy rozplanowaną pracę
  • biznes wie co będzie robione, kiedy oddane i jak to będzie działało

Powodzenia!


Chwila na zagadkę 🧐

Dzisiaj będzie proste 😀
Co tutaj jest nie tak?

UI/UX "What's wrong?" riddle

Odpowiedź znajdziesz na końcu maila.


🎨 undraw.co - w pełni darmowe ilustracje do Twojej aplikacji / strony / bloga

Materiały, UX | źródło

Zestaw nowoczesnych i świetnie wyglądających ilustracji do umieszczenia gdziekolwiek tylko chcesz, w pełni za darmo - jest to projekt Open Source. Nie trzeba umieszczać żadnych linków czy informacji o autorach.

  1. Wejdź na undraw.co/search
  2. Wpisz w wyszukiwarce np. "list" albo "404"
  3. Wybierz najlepszą ilustrację i pobierz SVG/PNG.
  4. To tyle! Żadnych rejestracji, tworzenia kont itd.

PS. Możesz zmienić kolor główny ilustracji w prawym górnym rogu strony.

Przykład:
Po lewej "klasyczna" strona 404. Po prawej, z użyciem undraw.co + 5 minut pracy w Figmie:


Kogo warto obserwować?

YouTube: Flux
Minimum 3 filmy tygodniowo, 314 tys. subskrybentów. Znajdziesz tu m.in. darmowy kurs WebDesignu, analizy stron internetowych pod kątem UI/UX, aktualne trendy w tworzeniu stron i aplikacji, a nawet kurs tworzenia stron w WebFlow. Świetny content za darmo!


Loading to nie wszystko - stany aplikacji i ich obsługa

UX, Development | źródło własne
Użytkownik aplikacji, która nie pokazuje prawidłowo aktualnego stanu.

Tworząc ekrany aplikacji jako developerzy musimy uwzględniać i pokazywać użytkownikowi wszystkie jej stany:

  1. Loading
  2. Success
  3. Error
  4. Empty

Loading

Zamiast zwykłych kręciołów możemy użyć co raz częściej spotykanych skeletonów, przykłady:

LinkedIn skeleton
LinkedIn skeleton | źródło
YouTube skeleton
YouTube skeleton | źródło
Komponenty skeleton z frameworka PrimeNG | źródło

Dla zapisu formularzy dodajmy kręcioła w buttonie:

Przykład z uxmovement.com | źródło

Success

Dla dużych zmian, np. zapisu formularzy, dobrze wyświetlić informację zwrotną.

User friendly success message example
Przykład wiadomości typu "success"

Komunikaty róbmy proste i czytelne.

Dodając ikonę, łatwiej i szybciej zrozumiemy treść komunikatu. Jest to też duża pomoc dla osób, które mają problemy w postrzeganiem kolorów.

Czasami wystarczy ukazanie zmiany na UI, która potwierdza, że system przyjął i zastosował akcję:

Facebook i reakcja na Like | Facebook

Error

Dobra walidacja i pokazywanie błędów w formularzach to podstawa:

User friendly error message example
Przykład wiadomości typu "error"

Pamiętajmy też o pokazaniu błędu przy np. pobieraniu listy elementów:

User friendly "get list" error screen
Przykład błędu przy pobieraniu listy elementów.

Empty

Nie zapomnijmy o pokazaniu stanu "brak elementów" na liście.

Czasami wystarczy informacja typu "Pusto...", czasami możemy pokusić się o dokładniejsze info:

  • dlaczego nie ma elementów na liście
  • co możemy z tym zrobić
User friendly error message example
Przykład wiadomości typu "empty"
Programując ekran z np. listą zawsze zacznij od uwzględnienia najmniej oczywistych stanów:
1. empty
2. loading
3. error
Na samym końcu napisz docelowy widok elementów listy.

24 darmowych filmów "Learn UI" - playlista YT od projektanta z 20-letnim doświadczeniem

UI | źródło
Michal Malewicz: sharing my free content in a single YouTube Playlist | źródło

Szybkie tipy i przykłady tworzenia znakomitego UI prosto od twórcy z 20 letnim doświadczeniem, autora trendów w UI takich jak neumorphism, glassmorphism i Aurora.

Autor duży nacisk kładzie na aspekty UX projektowanych interfejsów.

Zobacz tę playlistę krótkich (5-10 minutowych) filmów na YouTube i zacznij projektować UI do swoich aplikacji "like-a-pro" - z najnowszymi trendami, z naciskiem na usability:


Zagadka - odpowiedź 👇

Co tutaj jest nie tak?

UI/UX "What's wrong?" riddle - explanation
UI/UX "What's wrong?" riddle - solution

To wszystko na dziś.
3... 2... 1... weekend czas zacząć 😀

źródło


Mamy tego więcej!

Jeśli chcesz więcej takich materiałów, zapisz się na listę odbiorców uxowy.dev - newslettera dla developerów, którzy chcą robić aplikacje z lepszym UI i UX, małym nakładem pracy.

Wysyłamy jeden email tygodniowo, w piątek o godz. 12:00. Zero spamu, samo mięsko 🔥