Na co warto zwracać uwagę podczas projektowania intuicyjnych i atrakcyjnych interfejsów? Poniżej klika wskazówek od UI/UX Designera z Overlap Studio, który na co dzień zajmuje się projektowaniem użytecznych stron i aplikacji.
1. Spójność elementów graficznych
Warto zadbać o nią na samym początku, ponieważ później trudno będzie zapanować nad chaosem stylistycznym. Polecałbym dobranie jednej palety kolorów ograniczonej do np. pięciu kolorów, w tym dwóch głównych.
Ważne, żeby kolory stosować konsekwentnie i nie mnożyć kolejnych odcieni, które są do siebie podobne, a jednak posiadają inne wartości. Najlepiej dodać wybrane z nich do palety kolorów w programie, z którego korzystamy. Również ikony powinny być jak najbardziej podobne stylistycznie. Dobrą praktyką jest wybór prostej paczki ikon, czy to w stylu linear, czy filled, a następnie stosowanie ich w konsekwentny sposób. Trzeba też zwracać uwagę na równy stroke, czyli grubość kresek.
Warto również zwrócic uwagę na tzw. containery (kafle, bloki, ramki). Przykładowo, jeśli decydujemy się na zaokrąglenia rogów, to przyjmijmy to jako regułę dla większości elementów. Unikajmy też sytuacji, w których jeden element jakiejś grupy, np. zajawka opisu produktu na liście produktów, w jednym miejscu będzie miał odległość 8 px, a w drugim 16 px od drugiego (np. nazwy lub ceny produktu).
Spójność w stylistyce jest bardzo ważna nie tylko na etapie designu, lecz także już na poziomie makiet. Brak spójności może niepotrzebnie przyciągać uwagę użytkownika i wywoływać w nim lekki niepokój lub dezorientację.
2. Prawidłowe odległości i wymiary.
To jedna z kluczowych kwestii, która może całkowicie przeobrazić projekt. Istnieją pewne zasady, które dotyczą grupowania elementów, treści i rekompensowania optycznych iluzji.
Aby projekt był czytelny, powinien być w należyty sposób ustrukturyzowany. Elementy związane z daną sekcją (teksty, przyciski, nagłówki, wizualizacje) powinny znajdować się blisko siebie. Unikajmy sytuacji, w których jeden element danej grupy będzie bliżej elementów z innej grupy, niż ze swojej (np. zajawka opisu produktu na liście produktów będzie miała 16px odległości od nazwy produktu, a 8px odległości od zdjęcia innego produktu, którego nie dotyczy). Jeśli nie wiemy, jaką odległość między elementami dwóch różnych grup zastosować i obawiamy się, że elementy mogą się ze sobą zlewać, wspomóżmy się liniami separującymi albo oddzielmy takie grupy wizualnie ramką lub umieścić go w kaflu.
Matematyczna precyzja w stosowaniu odległości między elementami mogłaby wydawać się słuszna – nadaje projektom ład i harmonię. Pamiętajmy jednak, żeby nie podążać tą drogą zupełnie bezrefleksyjnie. Mimo, że dwa elementy obok siebie mają takie same wymiary, to wizualnie mogą różnić się od siebie, np. ze względu na ich wizualne ciążenie krawędzi. Dobrym przykładem jest tu kwadrat i koło – geometrycznie mogą mieć takie same wymiary, ale koło 20x20px będzie optycznie mniejsze niż kwadrat 20x20px. Warto wtedy nieco zwiększyć koło, żeby wyrównać tę optyczną różnicę. Oczywiście projekt nie składa się tylko z kółek i kwadratów, ale ta wiedza pomoże nam w przypadku problemów, które możemy napotkać np. przy optycznym zbilansowaniu ikon i mniejszych elementów UI oraz wyrównywaniu kształtów wizualizacji.
3. Przyjęcie jednego gridu dla całego projektu
Jeśli np. projektujemy stronę internetową z kilkoma podstronami lub aplikację mobilną, która ma wiele ekranów, należy zadbać o to, żeby te elementy designu (o ile nie ma innych wskazań) miały podobny układ / szkielet. Pomóc w tym może system gridu. Składa się on z linii, które pomagają pozycjonować elementy graficzne i teksty na stronie. W zależności od przeznaczenia, makieta powinna mieć dostosowaną liczbę kolumn. Na desktopie często wykorzystuje się system 12 kolumn (12 dobrze dzieli się na 12,6,4,3,2,1), który daje dużą elastyczność. Nie bójmy się oczywiście stosować nawet 8 kolumn, jeśli projekt tego wymaga. Czasem warto też uciec od gridu, by zwrócić na coś uwagę użytkownika.
4. Zadbanie o odpowiednie treści
Zastosowanie treści, które mają sens w kontekście danego projektu bardzo podnosi wartość makiet. Lorem ipsum to język, którego ani klienta ani badanego użytkownika niestety nie uczyli w szkole
Jeśli nie mamy możliwości pracy z prawdziwym tekstem, zachęcam do stosowania wtyczek typu Craft od InVision, który generuje przykładowe treści na wybrany temat.
5. White space
Przy projektowaniu stron, w przeciwieństwie do np. druku, używa się więcej przestrzeni i „oddechu”. Podczas poprawiania odległości i wymiarów należy pamiętać o tzw. white space. Początkujący projektanci bardzo boją się pustej przestrzeni, stąd też chcą upchnąć jak najwięcej elementów na jak najmniejszej powierzchni. Użytkownik może odczuwać niepokój i zdezorientowanie niemożnością skupienia się na jakimś konkretnym elemencie. Dodajmy naszym projektom trochę przestrzeni – z całą pewnością uprzyjemni to użytkownikom korzystanie z interfejsu, a zamieszczone tam treści będą bardziej czytelne.
