7 sposobów jak łatwo poprawić wygląd strony firmowej, żeby klienci kupowali więcej

Czym jest interfejs użytkownika

UI, czyli user interface, z języka angielskiego oznacza interfejs użytkownika.

Oznacza mniej więcej to, co ty widzisz na stronie internetowej. Kiedy otwierasz przeglądarkę czy aplikację i widzisz jak ona wygląda, jakie ma kolory, fronty, to jak wyglądają przyciski, to wszystko tworzy interfejs użytkownika.

Różni się to od UX, czyli user experience tym, że UX określa jak aplikacja się zachowuje, jakie doświadczenie ci dostarcza. Czyli, co się dzieje kiedy naciśniesz przycisk, co się dzieje kiedy przewiniesz stronę na dół. Natomiast UI, czyli interfejs, to jest tylko i wyłącznie to co widzisz i jak to wygląda.

Biznes kontra design

Właściciele biznesów mają swoje wyobrażenia na temat tego jak ich firma firmowa witryna powinna wyglądać. Mają swoje gusta i przyzwyczajenia. I gdy zlecają projektantowi zbudowanie nowej strony dla biznesu, dzielą się wówczas na dwie grupy:

• tych którzy ufają projektantowi, że zrobi dobrą pracę, że przekaże esencję, wartości i ducha firmy na stronie,
• oraz tych, którzy narzucają projektantowi swoją wizję, wymagania i swoje zachcianki.

Ja pracowałem z oboma typami klientów i wiem, że ten drugi może być bardziej wyczerpujący, a produkt finalny niekoniecznie będzie spełniał założenia i oczekiwania, bo nie jest zaprojektowany w stu procentach przez projektanta.

Kiedy klient narzuca projektantowi swoją wizję, projektant musi się zmierzyć z tym co uważa, że będzie pomocne firmie, a tym, czego żąda klient.

Dzieje się tak dlatego, że klient, jeżeli nie jest specjalistą w zakresie technologii czy projektowania stron internetowych, ma swój cel, gol, to nie do końca rozumie jakie są możliwości osiągnięcia tego celu. A projektant to wie.

Doświadczenie projektanta

Natomiast rzeczy, o których ja będę dziś mówił, dobrzy projektanci znają, bo tym się zajmują. To jest ich chleb powszedni, to jest ich profesja. Natomiast właściciele biznesu - niekoniecznie.

Jeżeli jako właściciel biznesu zrozumiesz te siedem elementów, będzie ci później łatwiej rozmawiać z projektantem, tudzież zrozumieć decyzję projektanta. Bo on chce zaprojektować Twoją stronę tak, żeby działała lepiej.

Nie przedłużając bardziej przeskakuje od razu do pierwszego zagadnienia, czyli dlaczego interfejs użytkownika jest ważny.

Dlaczego interfejs użytkownika jest ważny

Każdy z nas spędza około trzech - czterech godzin dziennie w internecie, na telefonie, przeglądając różnego rodzaju strony i aplikacje. 3 - 4 godziny dziennie to bardzo dużo. Jakby nie patrzeć, prawie pół dnia pracy. I obserwując wiele różnych stron i aplikacji wyrabiasz sobie pewien gust.

Zaczynasz zauważać co jest dobre, a co nie działa. Coś ci się podoba, coś nie. W pewnym stopniu przyzwyczajasz się do schematów, czy szablonów w projektowaniu. Spodziewasz się pewnej hierarchii na stronie internetowej.

Hierarchia

Wiesz, że ma być nagłówek. Wiesz, że ma być jakiś przycisk. Wiesz, że mają być  informacje, wiesz gdzie jest nawigacja, wiesz gdzie jest stopka. Przyzwyczaiłeś się do tego poprzez to, że oglądasz wiele stron.

Świadomość marki

Interfejs użytkownika poza tym pomaga budować świadomość marki. Dobrze zaprojektowany interfejs, pasujący do brandu, do firmy, będzie przedłużeniem świadomości marki, strategii i pozycji. Będzie budował więź z użytkownikiem.

Łatwość nawigacji

Dobry interfejs pozwala na łatwą nawigację. Czyli wiem gdzie muszę kliknąć, żeby coś osiągnąć. Jeżeli widzę przycisk podpisany "o mnie", to znaczy, że tam dowiem się czegoś o osobie, która stoi za tą firmą.

To jest proste i oczywiste, a mimo wszystko czasami proste błędy się pojawiają.

Dobry UI = dobry UX

I tak jak powiedziałem wcześniej, dobry interfejs jest również dobrym doświadczeniem. Dlatego, że interfejs i doświadczenie użytkownika idą w parze i razem tworzą coś co nazywamy dobrą stroną internetową.

W takim razie jak poprawić interfejs strony firmowej, żeby w dłuższym etapie poprawić doświadczenie użytkownika na Twojej stronie firmowej?

Kolor

Na stronie internetowej powinieneś zastosować przede wszystkim kolory marki.

Kolor marki

Czyli jeżeli podczas budowania strategii marki, wybrałeś barwy, które reprezentują twoją firmę, to te kolory powinny być zastosowane na Twojej stronie internetowej.

Jeżeli kolorami twojego brandu jest niebieski i biały, to nie zbudujesz nagle żółto zielonej strony internetowej, ponieważ będzie ona miała się nijak do twojej pozycji, do twojego kompletnego image'u.

Psychologia koloru

Poza tym kolor jest istotny ze względu na psychologię kolorów. Czym jest psychologia koloru?

Każdy z kolorów ma przypisany do siebie zestaw uczuć, które generuje, emocji jakie wytwarza. Kolor czerwony jest kolorem namiętnym. Niebieski jest kolorem zimnym. Biały, jest kolorem czystości, ale w Japonii biały to… kolor żałoby.

Kolory mają bardzo istotne znaczenie. To jak się je zestawia ze sobą, wpływa na emocje jakie strona będzie budziła. Na przykład, raczej nie zbudujesz strony całej czerwonej (nawet twój brand jest w kolorze czerwonym), bo taka strona będzie zbyt agresywna, zbyt intensywna. Natomiast chętniej wykorzystasz kolor czerwony do zaznaczenia istotnych elementów swojej strony.

Paleta kolorów

Myśląc o kolorze należy pamiętać również o palecie kolorów. Czyli o kolorach, które do siebie pasują i się nawzajem uzupełniają.

Istnieje kilka kilka teorii i praktyk łączenia i dopasowywania kolorów do siebie. To jest zupełnie inna lekcja i tym się nie będziemy zajmować dziś. Natomiast ważne, żeby kolory, które wybierzesz na swoją stronę internetową do siebie pasowały.

Czyli podsumowując, kolory muszą pasować do twojego brandu. Muszą przekazywać psychologię twojego brandu, oraz tworzyć spójną paletę kolorów.

Fonty (czcionki)

Drugim elementem, którym możesz poprawić interfejs swojej strony są fronty (tudzież czcionki jak niektórzy nazywają).

Ilość fontów

Pierwsza rzecz podstawowa to ilość fontów na stronie internetowej. Idealnie jedna rodzina fontów. Na przykład font regularny do paragrafów, a pogrubiony do nagłówków. Na przykład Helvetica regular i Helvetica bold.

Dlaczego jeden? Ponieważ łatwiej nimi zarządzać. Jeżeli masz 1 font to będzie zawsze pasował, czy jest to nagłówek czy paragraf, to te dwa elementy będą ze sobą spójne, będą ładnie razem wyglądały.

Dopasowanie i parowanie frontów to zadanie, które znowu należy do designera i  nazywa się typografią. Jest to bardziej skomplikowane zadanie gdzie musimy dopasować ze sobą dwa osobne (lub więcej) fonty tak, żeby tworzyły razem całość, a nie wyglądały jak z kompletnie różnej bajki.

Czytelność

Kolejną bardzo istotną rzeczą odnośnie fontów jest czytelność.

Czytelność, czyli jak łatwo czyta się treść na Twojej stronie internetowej. Jednym z największych błędów, które widziałem są teksty zbyt skupione ze sobą. Czyli nie ma przestrzeni pomiędzy kolejnymi liniami tekstu.

Jeżeli masz większy paragraf, np. w artykule na blogu, to czytelnik będzie miał problem, żeby przeczytać tę treść. Na ekranie czyta się zupełnie inaczej niż na papierze, dużo trudniej. Inaczej reagujesz przez światło emitowane prosto w oczy i inaczej się czyta. Dlatego ta przestrzeń pomiędzy liniami tekstu musi być większa, żeby było  łatwiej czytać.

Szerokość tekstu

Druga rzecz odnośnie czytelności, to szerokość tekstu. Nasze monitory są coraz szersze i dużo ludzi przegląda strony na komputerze z monitorem 4K (które mają rozdzielczość ponad 3800 pikseli). Ciężko jest na 28 calowym monitorze czytać tekst od lewej krawędzi do prawej, bo kiedy skończysz czytać jeden wers, nie będziesz wiedział gdzie się zaczyna następny.

Ogólnie przyjęta regułą jest, żeby blok tekstu miał maksymalnie 800 pikseli szerokości. Zwracaj uwagę na to, żeby treść na Twojej stronie internetowej nie była rozciągnięta na całą szerokość strony, ale właśnie była zamknięta w bloku o maksymalnie 800 pikseli szerokości.

Rodzaje fontów

Rodzaje fontów, czyli czy jest to font szeryfowy czy bezszeryfowy.

Jak rozpoznać font szeryfowy? Po tym, że ma takie małe kreseczki na dole i na górze literek, np. Times New Roman.

W internecie generalnie lepiej używać fontów bezszeryfowych, bo lepiej się wyświetlają na ekranie. Ale ostatnimi laty pojawiły się nowe, zaprojektowane stricte na ekrany, fonty szeryfowe, które wyświetlają się bardzo dobrze i coraz częściej takie fronty możesz spotkać.

To jest kwestia eksperymentowanie. Jeżeli nie masz wybranego fontu dla swojego brandu, porozmawiaj ze swoim designerem jaki będzie najlepiej pasował. Dobry projektant dopasuje taki font, żeby przekazać jakość twojego brandu i osobowość twojej marki.

White space

Element trzeci poprawy interfejsu na twojej stronie internetowej to white space, czyli po polsku pusta przestrzeń, lub biała przestrzeń. Zwróć uwagę, że biała przestrzeń niekoniecznie jest stricte białą przestrzenią. Nazwa jest myląca.

Białą przestrzenią jest wszystko otaczające twoje elementy graficzne na stronie internetowej. Czyli jeżeli jest np. fragment tekstu i obrazek, to przestrzeń dookoła nazywa się białą przestrzenią... OK, nazwijmy to pustą przestrzeń dla ułatwienia. Jeśli Twoja strona ma np. czarne tło, no to ta przestrzeń jest czarna.

Czym jest white space

Czym jest pusta przestrzeń? Jest miejscem pozwalającym na to, żeby elementy kontentu Twojej strony internetowej oddychały, żeby treść i grafika mogły wybrzmieć, żeby użytkownik mógł się skupić na tych konkretnych elementach.

Nie bój się white space

I zauważyłem że, właściciele biznesów nie potrafią przeżyć tego, że strona jest pusta, czyli że jest pusta przestrzeń. Traktują to tak, jakby było to marnotrawstwo przestrzeni. Że jeżeli nie wykorzystamy tej przestrzeni na obrazki, na grafikę czy tekst, to będzie to strata strony, bo użytkownik będzie myślał że tam nie ma za wiele do powiedzenia. Nic bardziej mylnego!

Strona internetowa potrzebuje takiej przestrzeni żeby oddychać właśnie. Żeby można się było skupić na treści. Ta przerwa pozwala na skanowanie strony. Jeżeli ich nie ma, wówczas użytkownik widzi jedną wielką plamę, wielki blok treści i nie jest w stanie zawiesić oka na na żadnym elemencie.

Call to action

Element czwarty to "Call to action" czyli "wezwanie do działania".

Każda strona powinna posiadać "Call to action". Co ty, jako właściciel biznesu, chcesz żeby klient/użytkownik odwiedzający Twoją stronę internetową zrobił?

Ty masz swój cel, zatem powiedz użytkownikowi o tym. Daj mu właśnie powód do akcji. Daj mu wezwanie do działania. To może być w postaci dużego przycisku. To może być w postaci linka.

Wezwanie do działania w kontraście

Żeby wezwanie do działania było widoczne i przykuwające uwagę i faktycznie działało, musi być kontrastowe do reszty elementów interfejsu. Czyli np. jeżeli Twoja strona internetowa jest w kolorze szarości bieli i czerni i powiedzmy błękitu, to przycisk możesz zrobić czerwony lub pomarańczowy. Dlatego, że są to kontrastowe kolory do palety, którą masz na stronie internetowej. Dzięki temu  przycisk będzie się wyróżniał.

Grafiki

Kolejna rzecz, piąta, to grafiki.

Czyli jakie obrazki używać na swojej stronie internetowej, żeby Twoja osiągała lepsze efekty.

Przede wszystkim używaj zdjęć autorskich. Niech to będą twoje zdjęcia. Wtedy przekazujesz ducha i osobowość Twojej firmy.

Zdjęcia wykonane przez ciebie, czy na Twoje zlecenie, reprezentują twoje biuro twoją firmę, ludzi, którzy w tej firmie pracują. Wtedy strona ma osobowość, jest naturalna, jest prawdziwa.

Firma to ludzie

Pamiętaj, że za Twoją firmą stoją ludzie i klienci/użytkownicy chcą tych ludzi zobaczyć. Pomyśl o tym w ten sposób - przeglądając  stronę internetową, patrzę na twoją firmę przez grube szkło. I nie wiem kto jest za tym grubym szkłem. Tam są jacyś ludzie, ale ja ich nie znam i nie wiem czy mogę im ufać. Jeżeli pokażesz tych ludzi, jeżeli pokażesz kim jesteś, jak działasz, jak pracujesz jak wyglądasz, będę mógł się z Tobą utożsamić, będę mógł cię polubić, będę chciał cię poznać i później polubić.

I wtedy mamy większą szansę na prawdziwe relacje między sobą. Jeżeli wykorzystasz zdjęcia ze stoków, no to raczej ci nie zaufam.

Pan ze stocku

Na początku lat dwutysięcznych i nawet jeszcze pięć lat temu strasznie popularne były zdjęcia z banków zdjęć (ze stocków). Wszystkie wyglądały jednakowo i po pewnym czasie przestały być już wiarygodne.

Ciężko uwierzyć firmom gdzie na każdej stronie wszyscy mają zdjęcie takiego samego uśmiechniętego mężczyznę w garniturze, z rzędem białych zębów, w nowoczesnym otoczeniu biura, otoczonego uśmiechniętymi i pokazującymi łapki w górę z pracownikami. Wszyscy są oczywiście w pięknie skrojonych garsonkach, mają jakieś 25 lat i wyglądają jednakowo.

I jeżeli każda z firm, niezależnie czy jest to firma księgowa, agencja reklamowa, kancelaria prawna, czy fabryka samochodów, prezentuje swoich ludzi w taki sposób, to ciężko uwierzyć, że jest to prawdziwe i użytkownicy będą po prostu odchodzić.

Dobre zdjęcia

Dlatego użyj własnych, naturalnych zdjęć. Mogą to być zdjęcia na zamówienie. Tylko nie pstryka zdjęć iPhonem, bo chcesz, żeby Twoja strona wyglądała profesjonalnie. Te zdjęcia muszą być profesjonalne. Zatrudnij fotografa, żeby zrobił fajne, profesjonalne zdjęcia Twojej firmy i ludzi, którzy w niej pracują.

Ilustracje

Alternatywą do fotografii są grafiki, czyli ilustracje.

Ostatnimi czasy bardzo popularne stały się ilustracje i zastępują w dużej mierze zdjęcia, właśnie ze względu na to, że zrobił się przesyt zdjęć. Wszyscy mieli takie same zdjęcia, albo ze stoków, albo z darmowych banków zdjęć takich jak an Unsplash czy Pexel.

Ilustracje są o tyle fajne, że mogą być autorskie. Bo znowu możesz zlecić narysowanie tych ilustracji, więc będą przedstawiały w sposób graficzny twoją firmę troszeczkę bardziej na luzie. Czyli jeżeli twoja firma ma taki właśnie luz, to wtedy właśnie fajnie jest zrobić taką stronę.

Grafiki w praktyce

Ja właśnie wykorzystałem ilustracje ostatnio w jednym z projektów nad którym pracowałem, dla jednego ze swoich klientów. I uważam, że to fajnie działa, mimo tego, że oni operują w finansach.

Dodatkowo ilustracje możesz animować, więc strona będzie sobie fajnie żyła.

Schematy

Schematy, które znasz z innych stron internetowych i się ich spodziewasz na stronie.

Nawigacja

Użytkownik chce, żeby nawigacja wyglądała mniej więcej tak, jak inne nawigacje na innych stronach. Dlaczego? Użytkownik nie spodziewa się inwencji twórczej w nawigacji. On spodziewa się, że znajdzie w lewym górnym rogu Twoje logo, a w prawym górnym rogu znajdzie nawigację.

Stopka

Tak samo w przypadku stopki. Użytkownik spodziewa się, że znajdzie tam dane kontaktowe, link do polityki prywatności czy zasad użytkowania oraz do rozszerzonej nawigacji.

Jeżeli pozmieniasz takie stałe elementy, użytkownik będzie krążył po stronie w poszukiwaniu, aż w końcu wyjdzie sfrustrowany.

Ułatw mu życie i wykorzystaj schematy, które już istnieją.

Strona kontaktowa

To samo tyczy się schematu na stronie kontaktowej. Jeżeli wchodzę na stronę kontaktową, spodziewam się, że znajdę tam numer telefonu i e-mail. Jeżeli prowadzisz działalność w np. biurze, masz jakąś lokalizację, do której klienci przyjeżdżają, to spodziewam się, że znajdę tam adres.

Spójność designu

Ostatni element, numer 7, to spójność projektu, spójność designu Twojej strony internetowej.

Chodzi o to, żebyś ty jako właściciele biznesu i właściciel strony internetowej, zadbał o spójny design marki przez wszystkie kanały: od brandingu, poprzez stronę, po marketing i social media. Czyli to wszystko powinno tworzyć jedną wielką całość.

Żeby nie było sytuacji gdzie nagle twoja strona internetowa wygląda tak, social media wyglądają inaczej, materiały marketingowe zupełnie inaczej, a Twoje logo i branding też są z kompletnie innej bajki.

To wszystko powinno być spójne. I ważne, żeby ta spójność była zachowana wszędzie, poprzez wszystkie twoje kanały brandowe.

Podsumowanie

I to by było na tyle. To było siedem punktów jak poprawić interfejs Twojej strony firmowej, żeby dostarczyć lepsze doświadczenie użytkownika. Zdaję sobie sprawę, że w dużej mierze te elementy mogą być trudne do zrealizowania dla ciebie, jako dla właściciela biznesu, bo prawdopodobnie to nie ty budujesz stronę internetową.

Ale tak jak powiedziałem na początku, istotne, żebyś rozumiał i żebyś wiedział czego należy się spodziewać, czego oczekiwać od projektanta Twojej strony internetowej. Bo później kiedy będziesz rozmawiał z projektantem na temat rebrandingu, czy nowej wersji strony projektant będzie oczekiwał, że mu powiesz czego chcesz.

Także tym akcentem kończąc dziękuję Ci za uwagę. Mam nadzieję, że elementy o których powiedziałem przydadzą Ci się i będziesz w stanie przeanalizować swoją stronę pod tym kątem.

Pytaj

I jeżeli masz jakieś pytania, potrzebujesz przeprowadzić audyt swojej strony, czy przedyskutować różne pomysły, jestem zawsze chętny do pomocy. Jeżeli masz ochotę dzwoń, pisz. A na ten moment dziękuję Ci bardzo I do następnego razu, na razie. Cześć.