Część 2: Znajdź najłatwiejsze rozwiązania
Kontynuujemy nasze rozważania nad spójnością projektu. Jeżeli nie przeczytaliście jeszcze poprzedniej części, to znajdziecie ją tutaj. Tym razem przyjrzymy się wzorcom projektowym, hierarchii projektowania, wykorzystaniu elementów marki i typografii oraz elementom projektu i szablonom.
Wzorce projektowe
Jednym z kluczowych elementów udanego – i spójnego – UI/UX jest to, że użytkownik wykonuje zadania przy minimalnej liczbie działań. Innymi słowy, chodzi o to, żeby każdy na stronie mógł zrealizować zakup jak najprościej. Jeśli zadanie, które obejmuje cztery kroki, można łatwo wykonać w dwóch, interfejs użytkownika powinien być zawsze modyfikowany w celu skrócenia ilości działań. Często wykorzystuje się tutaj wzorce projektowe, które stosowane są na wielu stronach internetowych czy w aplikacjach. W końcu to ich wydajność sprawiła, że stały się wzorami.
Hierarchia projektowania
Wraz ze wzorcami projektowymi, posiadanie ustalonej hierarchii projektowej czyni cuda dla spójności UI. Niezależnie od tego, czy użytkownicy są tego świadomi, czy nie, instynktownie zwracają uwagę na kolejność i priorytet elementów, z którymi wchodzą w interakcje.
Jeśli chodzi o wygląd, dla ludzkiego oka niektóre elementy mają pierwszeństwo przed innymi (większe elementy, intensywne kolory, twarze itp.). Myślmy o wizualizacji ekranu w kategoriach tego, co ludzie zobaczą na pierwszym, drugim i trzecim planie. Zastanówmy się, co najpierw zwróci ich uwagę, kiedy wejdą na określoną podstronę. Dzięki temu będziemy wiedzieć, czy eksponowane są elementy kluczowe dla naszego biznesu. Upewnijmy się też, że użytkownicy szybciej odnajdują funkcje podstawowe, ale prezentujmy z odpowiednią starannością funkcje drugorzędne i trzeciorzędne. Sklep internetowy, w którym łatwiej jest dotrzeć do bloga o stylu niż zrobić zakupy, nie jest odpowiednio zaprojektowany. Jednocześnie jeżeli prowadzimy bloga dla naszych klientów, to również chcemy, by został on zauważony i łatwo się z niego korzystało. Wszystko wymaga odpowiedniego balansu.
Elementy marki
Przy projektowaniu należy zachować spójność z całą identyfikacją marki. Niezależnie od tego, czy mówimy tu o mniejszym przedsiębiorcy, który dopiero tworzy swoją identyfikację wizualną, czy o dużych korporacjach. Typografia, logo, prawidłowe style obrazu, schematy kolorów marki, powinny znaleźć odzwierciedlenie w aplikacji czy serwisie internetowym. Dopilnowanie, aby kolory i typografia były odwzorowane, zapewnia każdemu produktowi firmy spójny wygląd.
Typografia
Elementy o największym wpływie wizualnym, takie jak typografia, powinny zawsze być zgodne z identyfikacją wizualną i charakterem marki. Wybór typografii może wydawać się dla niektórych drugorzędny, jednak jest kluczowy.
Ten element wizualny jest szczególnie ważny, nie tylko dla hierarchii, ale także dla całego UX. Zmiana rozmiarów, czcionek i rozmieszczenia tekstu może poprawić skalowalność strony na różnych urządzeniach mobilnych, czytelność, a nawet nawigację. Przyłóżmy więc odpowiednią staranność do wyboru fontów.
Elementy projektu
Na wzorce stron składa się wiele komponentów, dlatego powinniśmy dobrze przemyśleć każdy z nich. Wiedza o tym, jak zachowuje się każdy element, zarówno we wzorze, jak i poza nim, pozwala odpowiednio uszeregować wszystkie na ekranie.
Te elementy mogą odnosić się do dowolnej liczby składników tworzących wzór, takich jak:
- Przyciski
- Karty
- Formularze
- Rozwijane listy
- Paski postępu
- Slidery
- Banery
Załóżmy, że zastanawiasz się nad dodaniem paginacji do długich list, aby użytkownik nie musiał ich przewijać. Podczas analizy strony zauważasz, że:
- jedna lista ma paginację z 20 lub więcej elementami,
- w innym miejscu lista ma paginację z 40 lub więcej elementami.
Która wersja jest poprawna? Wszystko zależy od sytuacji, jednak najważniejsze, żeby uspójnić projekt i by listy we wszystkich miejscach wyglądały i działały w ten sam sposób.
Szablony
Jeśli masz problemy ze standaryzacją witryny lub aplikacji, spróbuj użyć szablonów. Większość aplikacji i stron na to pozwala, a ponieważ układ i elementy wyglądają tak samo, usprawniają stworzenie spójnego projektu. Ponadto możemy wielokrotnie używać tych samych szablonów UI, nawet po latach.
Jeżeli sami tworzymy stronę od podstaw, potraktujmy ją jako wzór dla kolejnych realizacji naszej marki. Wiele firm ma bibliotekę wzorów lub system projektowania jako punkt odniesienia, aby wszystkie realizacje były spójne. Biblioteki wzorców i systemy projektów to zbiór reguł, do którego każdy członek zespołu może się odwoływać w dowolnym momencie. Są one niezbędne dla spójności.
Biblioteka wzorów może nie być tak solidna jak system projektowania, ponieważ jest ograniczona do konkretnych wzorów. System projektowania zawiera więcej informacji, w tym pomocną dokumentację na temat wszystkich wzorców UI/UX i różnych komponentów. Biblioteka wzorów może być również pod sekcją systemu projektowania.
Jednocześnie pamiętajmy, że nic nie jest dane raz na zawsze. Trendy w projektowaniu się zmieniają, a specjaliści od UX Designu cały czas tworzą nowe, kreatywne rozwiązania. Powstają również nowe urządzenia i technologie, które wymagają dostosowania projektów. Więc nawet mając bibliotekę wzorów czy system projektowania powinniśmy cały czas trzymać rękę na pulsie i uaktualniać go.
