W ubiegłym tygodniu zaprezentowaliśmy Wam pierwszą część wpisu „Jak tworzyć atrakcyjne UI? Przypominamy zasady.” Dziś, zgodnie z obietnicą, serwujemy drugą, ostatnią już część.
Używaj kolorów! Są ważne, wywołują emocje
Otaczają nas kolory. Poprzez kolory przekazujemy informacje. Kolory wywołują określone emocje… Czerwone światło oznacza, że mamy się zatrzymać. Zielony to kolor nadziei, działa na nas relaksująco, budzi pozytywne skojarzenia. Barwy decydują o tym, jak odbieramy rzeczywistość wokół nas.
Podobne, jeśli nie identyczne znaczenie mają barwy stosowane na stronach. Loga banków są niebieskie, czasem zielone a znaki ostrzegawcze czerwone i jaskrawe. Dlatego projektanci UI muszą wiedzieć, jak ich używać.
- Czerwony – alertiveness – to siła, pasja;
- Pomarańczowy – wesołość, może kojarzyć się z łatwością obsługi, przystępnymi cenami – jest mniej stymulujący niż czerwone, ale nadal energiczny;
- Żółty – szczęście, energia, ale też lekki niepokój – przyciąga uwagę, może ostrzegać, ale też zachęcać do interakcji;
- Zielony – wzrost, waga, bogactwo – to środkowy kolor tęczy, oddaje piękno równowagi, balans;
- Niebieski – godny zaufania, uspokajający – najbardziej popularny kolor w Internecie, podoba się chyba wszystkim, dlatego często wykorzystują go np. firmy świadczące usługi finansowe, banki organizacje prospołeczne, fundacje etc.;
- Purpurowy – tajemniczy, luksusowy, pobudzający kreatywność – kolor królewski, kojarzący się z luksusem, wyjątkowością;
- Biały – prosty, sterylny – powiązany ściśle z branżą medyczną, ale też pojęciem świętości, duchowości, biały to dla web designerów także droga do projektowania dyskretnego tła i dążenie do minimalizmu;
- Czarny – wyrafinowany, ostry, dominujący – najmocniejszy kolor dla witryny, jeśli jest nadużywany może wzbudzać w odbiorcy uczucia negatywne.
Zainteresowanych tematyką kolorów zachęcamy do przeczytania ebooka na ten temat.
Zachowaj spójność
Nie wystarczy zbudować interfejs, który będzie jedynie atrakcyjnie wyglądał. Owa atrakcyjność musi zostać konsekwentnie utrzymana w całym serwisie, ponieważ spójność jest najważniejsza. Jeśli wszystko działa poprawnie, nikt o niej nie mówi, jeśli nie – wszyscy wytykają jej brak.
Dlatego pamiętaj o spójności w takich obszarach jak:
- Typografia – czcionki, rozmiary, odstępy itp. dla każdego elementu (nagłówki, podrozdziały).
- Zestaw elementów UI – nie mieszajmy! Przyciski, pola tekstowe, pola tekstowe w formularzach itp. muszą być jednolite, co podniesie ich poziom użyteczności.
- Kolor – kolory przypisane do określonych tematów lub funkcji przyzwyczają użytkownika i sprawią, że dana funkcjonalność będzie mu się kojarzyła zakreślonym działaniem. Zadziała to jednak tylko wtedy, gdy projektant zadba o spójność na każdej podstronie serwisu.
Korzystaj z białej przestrzeni!
W tworzeniu stron internetowych nie chodzi o to, żeby wypełnić każdą wolną przestrzeń, jaka się pojawia. Przeciwnie – czasami witrynie trzeba po prostu pozwolić oddychać i nie zapełniać jej żadnym, nawet najbardziej według nas atrakcyjnym contentem.
Biała powierzchnia to kwintesencja projektowania w myśl minimalistycznej maksymy less is more, o której już wspominaliśmy. Sztuką jest tak odejmować elementy, żeby strona pozostała piękna – i efektywna.
Jak korzystać z białej przestrzeni?:
- Przykuwaj uwagę – im więcej białej przestrzeni wokół jednego elementu, tym więcej uwagi będzie zwracać;
- Typografia – dzięki wolnej przestrzeni tworzy się hierarchia między pozycjami, podpozycjami, a całym contentem strony;
- Czytelność – w ramach bloków tekstu, odpowiednie odstępy między akapitami, linie, a nawet listowanie zwiększa czytelność i tym samym komfort użytkownika;
- Elegancja – biała przestrzeń pokazuje, że właściciel strony ma wysublimowany gust i wie, że są sytuacje, kiedy lepiej pokazać mniej niż więcej;
- Grupowanie relacji – mniejsze odstępu i grupowanie elementów blisko siebie sugeruje ich podobną funkcjonalność (bądź tematykę).
Wzbudzaj zaufanie
Żeby zatrzymać użytkownika na stronie – lub klienta w sklepie – trzeba być wiarygodnym. Umieszczaj zdjęcia, które mają odpowiednie opisy, sprzedawaj produkty, które na obrazku wyglądają dokładnie tak samo jak po rozpakowaniu ich z opakowania. Pochwal się certyfikatami bezpieczeństwa strony, dołącz referencje od zadowolonych klientów, pokaż siebie i swój zespół. Nie bądź anonimowy.
Czytaj więcej:
„Jak tworzyć atrakcyjne UI? Przypominamy zasady cz.1”
„Stwórz produkt idealny! Projektuj z myślą o user experience i pracuj zespołowo”