Nawet najlepsza treść i oferta nie zapewni naszej stronie sukcesu, jeśli nie zadbamy o user experience. W tym celu, zanim przejdziemy do developmentu, starannie zaprojektujmy makiety UX i UI mając na uwadze satysfakcję przyszłego użytkownika. Jakie elementy są najbardziej istotne?
1. Wygodna nawigacja
Użytkownik, który trafi na stronę, powinien móc z łatwością dotrzeć do wszystkich najważniejszych elementów oferty. Zdarza się, np. w e-commerce, że jest ona bardzo rozbudowana. Wtedy możemy zastosować rozwijane menu (mega menu), gdzie zawarte będą główne kategorie oraz podkategorie. Ważne, aby odwiedzający był w stanie się od razu zorientować, czy sklep ma w swojej ofercie rodzaje produktów, których poszukuje. Warto zastosować także wyszukiwarkę oraz breadcrumbs, czyli linki pokazujące lokalizację użytkownika w serwisie.
2. Czytelny projekt
Unikajmy na stronie nadmiaru elementów, najlepiej stosując styl minimalistyczny. W projekcie powinno się znaleźć tylko to, co niezbędne, by użytkownik mógł dotrzeć do celu witryny (np. dokonać zakupu). Stosujmy umiejętnie „białe przestrzenie” (whitespaces), czyli pozbawione treści sekcje. Jeśli w ich sąsiedztwie umieścimy np. przycisk wezwania do działania, wzbudzi on większe zainteresowanie. Należy również zwracać uwagę na rozmiar i ilość tekstu, jego kontrast kolorystyczny czy odstępy. Możemy stosować także listy i wypunktowania.
3. Dobry UX writing
Zawartość tekstowa witryny powinna współgrać z projektem i go wspierać. Od słów w dużej mierze zależy to, czy wędrówka poznawcze użytkownika będzie przebiegała szybko, łatwo i skutecznie. Język powinien być klarowny, tak, by użytkownik od razu zrozumiał komunikat (używajmy możliwie najmniejszej ilości słów). Ważne jest stosowanie języka korzyści, czyli skupionego na potrzebach użytkownika. W tym celu musimy dobrze znać nasz target.
4. Skuteczne CTA
Bez optymalnie umiejscowionych i skonstruowanych przycisków wezwania do działania (CTA) nie możemy liczyć na wysoką konwersję. Muszą one wyraźnie przekazywać użytkownikowi komunikat, jakiej czynności od niego oczekujemy. Używajmy w tym celu najczęściej trybu rozkazującego („Wyślij”, „Kup”). Użytkownik powinien też wiedzieć, co się stanie po kliknięciu przycisku. Wyjaśniajmy to poprzez zaznaczenie korzyści w treści buttonu oraz jego nagłówku.
Jednocześnie zadbajmy o umiejscowienie i kolor przycisków. Kolor powinien kontrastować z tłem i być dostosowany do komunikatu. Jeśli czynność ma być wykonana pilnie, jest wyjątkowo dla nas ważna, zastosujmy czerwony lub pomarańczowy. W innych przypadkach sprawdzą się spokojniejsze kolory, ale także wyraźnie kontrastujące z tłem.
5. Optymalizacja mobilna
W czasach, kiedy połowa ruchu w Internecie pochodzi ze smartfonów i tabletów, strona musi je odpowiednio wspierać. Warto w tym celu stosować podejście mobile first. Polega na rozpoczynaniu projektowania witryny od wersji przeznaczonej na urządzenia przenośne. Powinny się w niej znaleźć wszystkie niezbędne funkcjonalności. Dopiero na większych ekranach pojawią się te dodatkowe (podejście progressive enhancement). Mobile first sprzyja także tworzeniu bardziej minimalistycznych i czytelnych projektów oraz dbaniu o wydajność strony.
6. Wydajność strony
Każda sekunda oczekiwania na załadowanie się strony, ponad standardowo maksymalny czas trzech sekund, oznacza znaczny spadek konwersji. Dlatego powinniśmy dbać o to, by witryna działała jak najszybciej. Znaczenie ma tu optymalizacja obrazów poprzez zmniejszanie ich rozmiaru i kompresję. Należy także właściwie wykorzystywać pamięć cache, usuwać nieużywane wtyczki i moduły, stosować klarowny kod oraz zadbać o wydajny hosting. Zadanie wykrywania problemów z wydajnością mogą nam ułatwić podpowiedzi takich narzędzi do jej sprawdzania jak PageSpeed Insights, GTMetriks czy Pingdom.
7. Wideo, grafiki, ilustracje
Użytkownicy większą część czasu, jaki spędzają w internecie, przeznaczają na oglądanie filmów. Możemy wykorzystać siłę wideo, zamieszczając je na stronie. W ten sposób zaprezentujemy w atrakcyjnej formie zalety produktu lub firmę, zwiększając przy tym konwersję i czas, jaki użytkownicy spędzają w witrynie.
UX służą także zdjęcia. Przyciągają one uwagę i w atrakcyjny sposób przekazują treści. Możemy również za ich pomocą budować przyjazny wizerunek marki, np. umieszczając wizerunki członków zespołu. Istotnym trendem jest także stosowanie autorskich ilustracji. Nie tylko wyrażają one indywidualny charakter marki (np. poprzez używanie brand hero), ale wzmacniają przekaz danej sekcji strony. Ze względu na walory estetyczne sprawiają również, że odbiór strony będzie bardziej pozytywny.
Nie zapominaj o testach
Nawet jeśli dysponujemy specjalistyczną wiedzą z zakresu UX, warto ostateczną ocenę naszych rozwiązań pozostawić użytkownikom. W tym celu stworzone makiety projektów poddaje się testom (są szczególnie cenne, jeśli witryna jest bardziej skomplikowana).
Jeżeli dysponujemy mniejszym budżetem, możemy przeprowadzić testy partyzanckie polegające na krótkim „przeklikaniu” makiety przechodniów. Warto również zaproponować jej testowanie znajomym na Facebooku. Owocne może być także skorzystanie z takich narzędzi jak Hotjar czy UsabilityHub.
Niezależnie od rodzajów testów, usłyszymy od użytkowników „sprawdzam” co pozwoli nam ewentualnie dopracować swoje rozwiązania na etapie projektu. Na pewno bardziej nam się to opłaci niż modyfikowanie gotowej już strony. Nie narazimy się także na straty związane z niską konwersją.
Powyższe elementy wskazują, jak ważne jest właściwe podejście designera do tworzonego projektu. Zazwyczaj to właśnie jego pracę podziwiają (lub nie) odbiorcy aplikacji czy strony internetowej. Zachęcamy do realizacji swoich zamierzeń w firmie zatrudniającej profesjonalnego UX/UI designera. Jednocześnie warto zauważyć, że aplikacje PWA mają wiele wymienionych tutaj zalet np. szybkość działania. Takie aplikacjae można wykonać wraz z naszym zespołem.