🎨 uxowy.dev #25
8 min czytania

🎨 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?

  1. #PrzemoPatterns: Breadcrumbs
  2. 21 tipów, jak uprościć UI aplikacji (i poprawić UX)
  3. Kogo warto obserwować 👀
  4. Co zrobić, aby szybko poprawić swoje skille w UI?

Start!


#PrzemoPatterns: Breadcrumbs

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.

Źródło: justinmind.com

21 tipów, jak uprościć UI aplikacji (i poprawić UX)

UX, UI | źródło

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:

The Laws of Simplicity, John Maeda, Źródło

A teraz, czas na listę tipów, które uproszczą UI i poprawią UX Twojej aplikacji:

1. Skup się na core-value

Czy to prawda, że "do wszystkiego, to do niczego"? Źródło

2. Usuń wszystko, co zbędne i odciąga od celu

Najłatwiejszym sposobem wydaje się być po prostu usunięcie elementów. Uważaj jednak co usuwasz. Bądź ostrożny i badaj kolejne wersje UI. Źródło
“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

Pomyśl, na czym zależy użytkownikowi i dostarcz mu to w jak najlepszej formie. Źródło

4. Ogranicz czas i wysiłek potrebny do podjęcia decyzji

Im więcej opcji, tym większy wysiłek naszego mózgu i tym więcej czasu potrzebujemy na podjęcie decyzji. Więcej o prawie Hick'sa. Źródło

5. Zbyt dużo wyborów przeraża

Słynny "The Jam Experiment" - duży wybór smaków dżemików spowodował spadek w sprzedaży. Im mniej opcji, tym łatwiej nam podjąć jakąś akcję związaną z tym wyborem. Źródło
Pokaż mniej opcji na raz. Źródło

6. Rekomenduj, pokaż preferowane opcje

Ma być łatwo. Wyraźnie pokaż różnice i ułatw wybór podpowiadając np. "najczęściej wybierany". Źródło

7. Przykuwaj uwagę do właściwych elementów

Na przykładzie po prawej nie ma wątpliwości, co mamy nadusić 😛. Po lewej mamy kilka "primary actions". Źródło

8. Twórz wizualną hierarchię

Użyj odpowiednich kolorów i wielkości elementów, aby świadomie zbudować wizualną hierarchię. Źródło

9. Organizuj content, pozwól skanować

Spróbuj policzyć kropki na przykładzie po lewej i po prawej? Gdzie poszło Ci szybciej? No właśnie... Źródło

10. Grupuj content

Do poczytania: Gestalt psychology - Proximity, Similarity, Continuity, Closure, and Connectedness. Źródło

11. Podziel duże zadania na małe części

Ogranicz ilość rzeczy do zrobienia/ogarnięcia na raz do minimum. Źródło

12. Jasno pokaż, gdzie user jest i co właśnie robi

Było o tym już tyle razy, że nie powinniśmy o tym pisać 😛 Źródło

13. Oblicz, co możesz

Ogranicz potrzebę wytężania mózgownicy i podaj wszystko jak na tacy. Źródło

14. Ukryj, co możesz

Pokaż szczegółowe opcje ficzera dopiero po włączeniu głównego switcha. Źródło

15. Polegaj na patternach

Użytkownicy oczekują, że dany ficzer będzie działał podobnie lub tak samo jak wcześniej spotykany na innych stronach / aplikacjach. Źródło

16. Wprowadź w produkt, łagodnie

Użytkownik oczekuje pomocy dopiero jak zajdzie taka potrzeba (ang. on demand), a nie wielkiego samouczka jeszcze zanim zobaczy interfejs aplikacji. Źródło

17. Weź pod uwagę to, jak produkt będzie używany

Upewnij się, że najczęściej używane elementy są duże i są łatwo dostępne dla użytkownika. Źródło

18. Pozwól na inline-edit, podpowiadaj

Zredukuj ilość kroków potrzebnych do wykonania akcji do minimum, albo usprawnij ich przejście. Źródło

19. Wypełnij, co się da

Oblukaj termin "Smart defaults". Źródło

20. Zapobiegaj błędom

Zaimplementuj auto-check. Komunikuj o błędzie w sposób prosty i powiedz, jak naprawić błąd. Zadbaj o właściwy ton - nie obwiniaj usera: "Podałeś błędne hasło", użyj pozytywnego języka: "Ups - hasło się nie zgadza". Źródło

21. Accessibillity (a11y)

Spraw, aby Twoja aplikacja była dostępna dla wszystkich. Da to wiele korzyści - nie tylko osobom z niepełnosprawnościami, np. semantyczny HTML i prawidłowe oznakowanie elementów ma pozytywny wpływ na indeksowanie strony przez roboty (wyszukiwarkę Google). Źródło

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ć?

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?

Źródło

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ę

Źródło

Oblukaj, jak ktoś wcześniej zrobił dany ekran / stronę. Najlepsze źródła do inspiracji:

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

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.