🎨 uxowy.dev #25
Spóźniony, ale jestem! Witaj w 25. wydaniu newslettera 🎨 uxowy.dev. Bez zbędnych wstępów, przechodzimy do konkretów:
Co dzisiaj?
- #PrzemoPatterns: Breadcrumbs
- 21 tipów, jak uprościć UI aplikacji (i poprawić UX)
- Kogo warto obserwować 👀
- Co zrobić, aby szybko poprawić swoje skille w UI?
Start!
#PrzemoPatterns: Breadcrumbs
![](https://uxowy.dev/content/images/2022/03/pp-10.png)
Breadcrumbs, czyli tak zwana “nawigacja okruszkowa” (zawsze bawi mnie to polskie tłumaczenie 😉 ) - to ścieżka strony internetowej, umożliwiająca użytkownikowi łatwiejszą orientację, w którym miejscu się aktualnie znajduje, a także szybki powrót do poprzednio przeglądanych podstron.
Co jakiś czas na różnych UXowych forach podnoszone jest pytanie:
"Czy breadcrumbsy są wciąż użyteczne w 2022 roku?"
Odpowiedź jest prosta: jeszcze jak!
Sprawdźcie dlaczego i w jaki sposób z nich korzystać:
🤔 Dlaczego?
1. Guru użyteczności, Jakob Nielsen jest wielkim zwolennikiem breadcrumbsów
„Nawigacja okruszkowa” nigdy nie powoduje problemów podczas testowania przez użytkowników: ludzie mogą przeoczyć ten mały element projektu, ale nigdy nie zinterpretują błędnie funkcji jaką pełni” — pisze Nielsen.
Całkiem niedawno Fortune opublikował listę 10. największych amerykańskich przedsiębiorstw pod kątem przychodów (m.in. Apple, GM, czy CVS Health). Przyjrzałem się ich stronom i aż 6 na 10 korzysta z breadcrumbsów!
2. Breadcrumbsy poprawiają SEO
Co prawda największe wyszukiwarki na rynku mają w zwyczaju dość często zmieniać swoje zasady, niemniej jednak Google wciąż oficjalnie rekomenduje korzystanie z breadcrumbsów jako jednego z kilku sposobów „ulepszenia atrybutów witryny”.
✅ Kiedy używać?
- Używaj breadcrumbsów podczas projektowania stron internetowych o zagnieżdżeniu trzech lub więcej poziomów
- Umieść “nawigację okruszkową” bezpośrednio nad lub obok tytułu strony (wg. badań to najbardziej skuteczne miejsce)
- Korzystaj ze strzałek (chevron) — nie ukośników, ani pionowych linii — aby wskazać ruch między stronami lub wskazać powrót do poprzedniej
- Zaznacz bieżącą stronę, ale nie linkuj jej
- Nawet w przypadku korzystania z breadcrumbsów nadal należy używać konwencjonalnego menu nawigacyjnego
Jak się okazuje, w nowoczesnej erze projektowania UX, breadcrumbsy nadal oferują wartość, w tym potencjał poprawy doświadczenia użytkownika.
![](https://uxowy.dev/content/images/2022/03/image-5.png)
21 tipów, jak uprościć UI aplikacji (i poprawić UX)
![](https://uxowy.dev/content/images/2022/03/image-7.png)
Nasz cel jest taki: postarajmy się usunąć wszelkie przeszkody, jakie napotyka użytkownik podczas realizacji swojego zadania/obranego celu.
Warto wspomnieć: John Maeda, w książce The Laws of Simplicity, podsuwa nam 10 praw na osiągnięcie złotego środka - pomiędzy prostotą a skomplikowaniem. W biznesie, technologii i ...designie:
![](https://uxowy.dev/content/images/2022/03/How-to-simplify-your-design.-20--easy-to-follow-illustrated-examples---by-UX-Magazine---Feb--2022---Medium-2022-03-13-21-45-48.png)
A teraz, czas na listę tipów, które uproszczą UI i poprawią UX Twojej aplikacji:
1. Skup się na core-value
![](https://uxowy.dev/content/images/2022/03/image-10.png)
2. Usuń wszystko, co zbędne i odciąga od celu
![](https://uxowy.dev/content/images/2022/03/image-11.png)
“Simplicity is not the absence of clutter, that’s a consequence of simplicity. Simplicity is somehow essentially describing the purpose and place of an object and product. The absence of clutter is just a clutter-free product. That’s not simple.” — Jonathan Ive
3. Pokaż dane w łatwym do ogarnięcia formacie
![](https://uxowy.dev/content/images/2022/03/image-12.png)
4. Ogranicz czas i wysiłek potrebny do podjęcia decyzji
![](https://uxowy.dev/content/images/2022/03/image-13.png)
5. Zbyt dużo wyborów przeraża
![](https://uxowy.dev/content/images/2022/03/image-14.png)
![](https://uxowy.dev/content/images/2022/03/image-15.png)
6. Rekomenduj, pokaż preferowane opcje
![](https://uxowy.dev/content/images/2022/03/image-16.png)
7. Przykuwaj uwagę do właściwych elementów
![](https://uxowy.dev/content/images/2022/03/image-17.png)
8. Twórz wizualną hierarchię
![](https://uxowy.dev/content/images/2022/03/image-18.png)
9. Organizuj content, pozwól skanować
![](https://uxowy.dev/content/images/2022/03/image-19.png)
10. Grupuj content
![](https://uxowy.dev/content/images/2022/03/image-20.png)
11. Podziel duże zadania na małe części
![](https://uxowy.dev/content/images/2022/03/image-21.png)
12. Jasno pokaż, gdzie user jest i co właśnie robi
![](https://uxowy.dev/content/images/2022/03/image-22.png)
13. Oblicz, co możesz
![](https://uxowy.dev/content/images/2022/03/image-23.png)
14. Ukryj, co możesz
![](https://uxowy.dev/content/images/2022/03/image-24.png)
15. Polegaj na patternach
![](https://uxowy.dev/content/images/2022/03/image-25.png)
16. Wprowadź w produkt, łagodnie
![](https://uxowy.dev/content/images/2022/03/image-26.png)
17. Weź pod uwagę to, jak produkt będzie używany
![](https://uxowy.dev/content/images/2022/03/image-27.png)
18. Pozwól na inline-edit, podpowiadaj
![](https://uxowy.dev/content/images/2022/03/image-28.png)
19. Wypełnij, co się da
![](https://uxowy.dev/content/images/2022/03/image-29.png)
20. Zapobiegaj błędom
![](https://uxowy.dev/content/images/2022/03/image-30.png)
21. Accessibillity (a11y)
![](https://uxowy.dev/content/images/2022/03/image-31.png)
To wszystko.
Jeśli chcesz wiedzieć więej, tutaj link do pełnej treści artykułu:
https://uxmag.medium.com/how-to-simplify-your-design-80d2a4ebf057
Kogo warto obserwować?
![](https://uxowy.dev/content/images/2022/03/observe-25.png)
Smashing Magazine
To źródło, które po prostu musisz znać i subskrybować. Istna skarbnica wiedzy dla Front-end developera i UXowca (lub połączenia tych dwóch roli 😉).
Jeśli nie znasz, polecamy wejść na smashingmagazine.com i po prostu pozwiedzać. Uwaga! Nie wchodź, jeśli nie masz min. 1 h na poczytanie - ilość przydatnych rzeczy i interesujących materiałów jest niebezpieczna dla upływającego czasu 😂
Web: smashingmagazine.com
Medium: @uxmag
YouTube: Smashing Magazine
Co zrobić, aby szybko poprawić swoje skille w UI?
![](https://uxowy.dev/content/images/2022/03/image-6.png)
Jako developerzy nie mamy nie wiadomo ile czasu, żeby stworzyć jakiś sensowny interfejs użytkownika z dobrym UX.
Poniżej parę info, jak możemy szybko zwiększyć swoje skille w UI designie:
1. Inspiruj się
![](https://uxowy.dev/content/images/2022/03/image-32.png)
Oblukaj, jak ktoś wcześniej zrobił dany ekran / stronę. Najlepsze źródła do inspiracji:
- Dribbble
- Awwwards
- UI movement
- Mobbin.design
- Behance z wieloma case-study
- Figma community z wieloma ui-kitami i design systemami
2. Wyciągaj wnioski z inspiracji
Wiele rzeczy się powtarza, formują się jakieś reguły.
Po przeglądaniu inspiracji możesz wyciągnąć wnioski na temat:
- spacingów
- kolorów
- typografii
- gridów / layoutu
- patternów
Wykorzystaj te reguły, aby zdefiniować swój widok.
3. Poznaj podstawowe prawa i ograniczenia
Każde środowisko ma jakieś predyspozycje, prawa i ograniczenia, np.: zalecenie używania ograniczonej ilości fontów, kolorów z dobrym kontrastem itd.
Przestrzeganie ich pomoże Ci w uniknięciu podstawowych (/głupich) błędów.
4. Obczajaj trendy
![](https://uxowy.dev/content/images/2022/03/image-33.png)
Nie chcemy, żeby nasza aplikacja wyglądała jak z poprzedniej epoki, co nie? Musimy wiedzieć, co jest trendi na rynku i upewnić się, że jesteśmy "na czasie".
5. Działaj
Regularnie. Po prostu rób te interfejsy, a z czasem będzie co raz lepiej. Możesz wziąć udział w Daily UI Challenge, jeśli masz problem z systematycznością.
6. Proś o feedback
Dołącz do miejsc w sieci, gdzie jest dużo doświadczonych designerów i proś o opinię. Nie bój się oceny. W końcu każdy, kto zobaczy Twój interfejs i tak dokona osądu - w swojej głowie 😉
To wszystko na dziś.
Trzymaj się! 👋
Kontynuujemy prośbę o wsparcie dla Ukrainy:
https://www.pah.org.pl/wplac
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.