Na co zwrócić uwagę podczas tworzenia nowoczesnej strony internetowej? Z jakich technologii korzystać? Jakie są obecne trendy? Jak dbać o treści, pozycjonowanie, dostępność i architekturę informacji? Wreszcie: jak pogodzić użyteczność z kreatywnością? Między innymi na te pytania odpowiadają eksperci.
Kiedy postawić na landing page lub one page, a kiedy na rozbudowaną witrynę? Jakie są trendy w web designie?
Adrian Hołota, CEO & digital consultant w studiu Panowie Programiści.
Zamiast opierać się na chwilowych modach i kopiować działania konkurencji, warto świadomie wybrać formę strony – dostosować ją do celu, któremu ma służyć, oraz specyfiki swojej działalności.
Słuchaj „Marketer+” Podcast
Jeśli użytkownik ma podjąć nieskomplikowaną decyzję o niskim koszcie (np. zależy Ci na pozyskaniu jego adresu e-mailowego), zrób jak najprostszy landing page – przedstaw zalety tej decyzji, usuń wszelkie zbędne elementy i pozostaw jedynie możliwość dokonania akcji, na której Ci zależy.
Jeśli użytkownik, w szczególności konsument, ma podjąć decyzję o nieco wyższym koszcie (np. zakupić kurs), a tym samym proces decyzyjny jest nieco dłuższy, przedstaw swój produkt w formie one page’a. Będzie to wygodne dla osób z kanału mobile.
W przypadku decyzji bardzo kosztownych, do których prowadzi długi proces, lub wyborów wielowariantowych (np. dotyczących różnych rodzajów apartamentów i atrakcji w hotelu), warto stworzyć stronę bardziej rozbudowaną.
Podobnie w obszarze usług B2B, gdzie wybór często jest wieloetapowy i wymaga bardzo dokładnego zapoznania się nie tylko z ofertą, lecz także z firmą – sprawdzenia jej wiarygodności, doświadczenia, podejścia czy wiedzy. Warto tu zaznaczyć, że do tego typu stron trzeba mieć odpowiednio dużo treści.
Konrad Dziejarski, Product design leader w agencji Artegence.
Odpowiem chyba jak typowy UX designer (lub może bardziej prawnik): to zależy. Głównie od tego, ile treści chcemy przekazać naszym użytkownikom i w jaki sposób jest ona podzielona. Innymi słowy: ważna jest architektura informacji. Jeśli mamy dużo contentu, o kilku poziomach zagłębienia, sugerowałbym klasyczną stronę WWW z szeregiem podstron. Sprawdzi się to lepiej niż one page. Możemy wygodnie kierować użytkowników do poszczególnych części witryny, wysyłać linki do odpowiednich zakładek bez obawy, że odbiorcy będą musieli przescrollować całość.
Natomiast landing typu one page dużo lepiej sprawdzi się np. w przypadku strony dotyczącej konkretnego produktu, jednej firmy. Dzięki jego strukturze można zbudować historię, na której nam zależy. Dodatkowo mamy dużo możliwości zaimplementowania różnych mikrointerakcji przy scrollowaniu, które znacznie poprawiają odbiór i dają poczucie obcowania z nowoczesną stroną WWW.
Gabriela Baka, Lead designer w software housie Owls Department,
Kuba Sarata, COO w software housie Owls Department.
Obecnie w trendzie jest wszystko, jednak przeważają storytelling i podejście animacyjne, które można zastosować na stronie każdego typu. Z tego powodu, żeby wybrać między landingiem a one page’em, trzeba pomyśleć o potrzebach marki i użytkownika. Śmiemy powiedzieć – na modłę zachodnich kanonów projektowych z lat 60. – że „forma powinna iść za funkcją”.
Pamiętajmy, że strona może się rozwijać tak jak marka. Podstawą powinno być podejście zwinne i iteracyjne, które wynika nie tylko z optymalizacji i zmiany technologicznej, lecz także z przemijania trendów, podążających za ewolucją rynku. Dobrze jest pamiętać – zarówno podczas projektowania strony, jak i na etapie kodowania – o potencjalnym jej rozwoju i wprowadzaniu zmian po upływie około dwóch lat.
Przemysław Puchalski ,Creative director w agencji WebTalk.
Najpierw ustalmy, co chcemy przekazać – jak dużo treści mamy do zakomunikowania i czemu ma służyć strona. Następnie postarajmy się usunąć z niej wszystkie treści, które są zbędne. Nigdzie nie zostało powiedziane, że musimy mieć tylko jedną stronę – tu przydadzą się landingi. Pełnią one wdzięczną funkcję miejsc, do których kierujemy m.in. ruch reklamowy z wyselekcjonowanych grup odbiorców (np. pod względem konkretnych usług lub aktywacji), aby maksymalnie skupić ich uwagę i dokonać konwersji.
Czy da się zaprojektować stronę, która zawsze będzie aktualna pod kątem wizualnym? Kiedy trzeba pomyśleć o jej odświeżeniu?
Przemysław Puchalski: To, co uznajemy za atrakcyjne wizualnie, się zmienia. Wpływa na to kilka czynników. Do podstawowych należy technologia – nasze możliwości, jeśli chodzi o przepływ danych czy moc obliczeniową, i kształt urządzeń, z jakich korzystamy. Kolejnymi są moda i trendy w projektowaniu, wynikające z wielu innych zjawisk. Gdy jakieś wzorce stają się dla nas powszednie, poszukujemy nowych – świeżych, które zapadną nam w pamięć – a następnie z powrotem sięgamy do tych, które zostały już zapomniane, i nadajemy im nowe życie.
Paweł Dunia, Head of design, board member w agencji Artegence.
Nic, zwłaszcza w dzisiejszych czasach, nie może być aktualne bezterminowo. Starzeją się strony nawet najbardziej zaawansowane wizualnie, contentowo i technologicznie. Czasem wygląda to tak, że im bardziej są innowacyjne, tym szybciej stają się nieaktualne. Zmieniające się trendy w projektowaniu to jedno, ale najważniejsze są zmiany na poziomie sposobów konsumpcji treści przez użytkowników, powodowane pojawieniem się nowych narzędzi ze specyficzną mechaniką.
Social media wymusiły prostą konsumpcję treści. Użytkownicy przede wszystkim scrollują – to największe zaangażowanie, na jakie możemy liczyć. Swoją historię musimy opowiedzieć tak prosto i zwięźle, jak tylko się da, aby całość mogła zostać nawet nie przeczytana, ale sczytana jednym okiem w 15 s, podczas gdy drugie skupia się już na czymś innym. Dziś w trakcie projektowania stron i tworzenia contentu coraz częściej myślimy o formatach nawiązujących mechaniką do stories. Ale jaka będzie przyszłość, nie wie nikt.
Konrad Dziejarski: Krótka odpowiedź: nie. Można zaprojektować stronę, która będzie się starzała szybciej albo wolniej, ale na pewno nie da się stworzyć takiej, która będzie aktualna zawsze. Średnio co kilka lat mamy do czynienia ze zmianą trendów w projektowaniu. Dobrym przykładem jest ostatnia duża rewolucja, podczas której wszystkie grafiki naśladujące rzeczywistość (skeumorfizm) odeszły do lamusa na rzecz płaskiego interfejsu cyfrowego, który nawet nie próbuje udawać, że nim nie jest (flat design). W rezultacie wszystkie strony, które nie zostały zaktualizowane, wyglądały bardzo archaicznie. Jestem przekonany, że tak będzie również z obecnie modnymi witrynami. Nie wiadomo tylko, ile czasu to zajmie.
Ewa Mieżwińska, Head of strategy & UX, partner w studiu Panowie Programiści.
Nie da się tego zrobić. Można jednak zadbać, aby fundament projektu był stabilny i wszelkie zmiany w przyszłości nie wymagały gruntownej przebudowy strony, a zatem wielu godzin pracy i dużych nakładów finansowych.
Kiedy natomiast należy pomyśleć o odświeżeniu serwisu? Jego modyfikacje są wymuszane przez zmiany, które dzieją się wokół nas. A świat przyśpiesza. Spójrzmy choćby na ostatnie dwa lata: zupełna reorientacja stylu życia i nowe sposoby korzystania z internetu.
Teoretycy mówią, że redesign powinno się wykonywać co półtora roku albo dwa lata. Z praktycznego punktu widzenia nie ma jednak tak, że one size fits all. Tak samo warto pamiętać, że jeden design nie będzie spełniał swojej funkcji w każdym biznesie. Pamiętajmy też, że redesign to nie tylko kwestia wizualna – UI. To również użyteczność, a więc UX oraz performance, zarówno marketingowy, jak i techniczny. No i oczywiście biznes oraz jego strategia.
Usiądź więc teraz wygodnie i zadaj sobie pytania: „Co przez ostatnie dwa lata robiłeś na swojej stronie? Czy śledziłeś jej performance? Czy aktualizowałeś treści?”. Jeśli nie, to czeka Cię mnóstwo pracy. Czas się do niej zabrać jak najszybciej, bo konkurencja nie śpi. A jeśli działałeś, to pora na analizę i wyciągnięcie wniosków, które pozwolą Ci określić, co trzeba zrobić teraz. Może nie musi być to kompletny redesign?
Kto powinien mieć wpływ na projektowanie strony – właściciel firmy, marketer, specjalista UX, grafik, programista?
Przemysław Puchalski: Każda z wymienionych osób ma swoją rolę w procesie i zwraca uwagę na inne elementy kluczowe dla biznesu. Jedna stawia na design, druga – na sprzedaż, trzecia wskaże zastosowanie serwisu jako narzędzia do rekrutacji, a czwarta skupi się na obniżeniu kosztów procesu. Dobrą praktyką jest ustalenie na samym początku kolejnych kroków procesu oraz roli poszczególnych osób na każdym z etapów, aby uniknąć późniejszego bałaganu.
Paweł Dunia: Największy wpływ na kształt projektu powinny mieć potrzeby biznesowe. Jeśli dobrze je zidentyfikujemy i przełożymy na język projektu, to sugestie płynące np. od właściciela firmy, marketera czy innego interesariusza często okażą się błędne, kierujące projekt w nie najlepszą stronę. Nic nie zastąpi porządnego procesu UX, który w warsztatowej formie pozwoli wskazać potrzeby użytkownika, zderzyć je z potrzebami klienta, uwzględnić perspektywę technologiczną i wreszcie wypracować koncepcję UX i UI – nawigację, mechanikę oraz warstwę wizualną witryny.
Konrad Dziejarski: W budowę strony na pewno powinien być zaangażowany zwierzchnik tego przedsięwzięcia – może to być właściciel firmy, kierownik, a może product owner, wszystko zależy od organizacji. Ktoś, kto ma wiedzę na temat celu biznesowego powstającego narzędzia. Może to być np. zwiększenie sprzedaży online, zbudowanie świadomości marki, odciążenie firmowego contact center itd.
Kolejną ważną osobą jest ktoś z marketingu, kto dobrze zna identyfikację wizualną brandu (kolorystykę, logotypy, fonty) czy też jego tone of voice. Jeśli na stronie mamy umieszczać informacje o produktach, to warto, aby przynajmniej w części procesu jej tworzenia uczestniczyli ich ownerzy. Dzięki temu będziemy w stanie opisać działanie tych produktów i pokazać cechy, które warto wyróżnić.
Następnie mamy oczywiście designerów UX i UI, którzy zaprojektują odpowiednią architekturę informacji, opracują niezbędne procesy i look & feel strony WWW. Kluczowi są tu także programiści, którzy będą odpowiedzialni za wdrożenie wszystkich projektów. Bardzo ważne jest, aby byli oni włączeni w proces znacznie wcześniej niż na etapie developmentu.
Ewa Mieżwińska: Każda z wymienionych osób powinna uczestniczyć w projektowaniu strony. Dodatkowo, jeśli prowadzisz dział sprzedaży czy obsługi klienta, to zdecydowanie do zespołu powinieneś dołączyć przedstawicieli tych obszarów biznesowych. No i nie zapomnij o klientach! Nie chodzi mi o ich bezpośredni udział w projekcie, ale o wyjście na zewnątrz, spotkanie się z ostatecznymi użytkownikami i podjęcie próby zrozumienia ich potrzeb i problemów.
Jakie są najczęstsze błędy osób odpowiedzialnych za wdrożenie nowej strony WWW przy wypełnianiu briefu?
Paweł Dunia: Marketerzy często zapominają o odbiorcy – czyli o tym aspekcie, który dla świata UX jest najważniejszy. Powstało wiele briefów, w których grupa docelowa była bardzo szeroka, w dodatku z dużym fokusem na demografię.
Tak naprawdę największy błąd niektórych marketerów stanowi poczucie, że brief to wystarczający materiał do rozpoczęcia produkcji. Aby jednak się dowiedzieć, co i jakimi środkami chcemy osiągnąć, potrzebujemy całego procesu UX, podczas którego marketer – wspólnie z projektantami – może zweryfikować swoje hipotezy i którego efektem będzie dojrzalszy i skuteczniejszy produkt.
Gabriela Baka, Kuba Sarata: Pomijanie istotnych funkcji – oczywistych z punktu widzenia marketera, ale nieoczywistych dla odbiorców briefu – np. integracji z zewnętrznymi systemami (newsletterem czy CRM). Błędem jest też ustalanie nierealnych z perspektywy organizacji terminów wdrożenia proces decyzyjny w dużej firmie trwa, co wpływa na harmonogram prac na wszystkich płaszczyznach.
Klienci mają również problem z wyobrażeniem sobie zawartości strony na ekranie komputera czy w telefonie. Struktura witryny czy też same treści często muszą być zmieniane, aby były lepiej odbierane przez użytkownika. Ponadto często klienci nie rozróżniają funkcji, jakie chcieliby mieć na swojej stronie, i nie rozumieją, że ich dodanie zwiększy zakres projektu i tym samym jego koszt.
Konrad Dziejarski: Błędy, z jakimi najczęściej się spotykam, to: zbyt ogólne opisywanie założeń biznesowych, umieszczanie wśród KPI wskaźników, które trudno zmierzyć, nastawianie się na jedno, konkretne rozwiązanie, bez konsultacji z projektantami.
Adrian Hołota: Największym błędem jest sugerowanie konkretnych rozwiązań, podczas gdy brief powinien wskazać tylko zadanie. Taki błąd słono kosztuje! W ten sposób marketer zamyka sobie drogę do znalezienia lepszego wyjścia, wypracowanego przez zespół specjalizujący się w architekturze informacji czy doświadczeniach użytkownika.
Drugim z częstych problemów jest oczekiwanie szczegółowej wyceny projektu po podaniu bardzo szczątkowych informacji. Bywa to szczególnie odczuwalne w dużych przedsięwzięciach.
Jakie są najczęstsze przyczyny opóźnień w projektowaniu oraz wdrożeniu i jak ich uniknąć?
Paweł Dunia: Opóźnienia w projektowaniu wynikają w zdecydowanej większości z błędnego sposobu komunikacji klient wykonawca oraz z braku odpowiedniego setupu projektu. Zaczyna się od zbyt małej ilości czasu, aby zaangażować się na właściwym poziomie w proces discovery, czyli tę część działań UX, w której określamy cele i sposoby ich osiągnięcia. Brak wspólnego stanowiska w tej sprawie doprowadzi do licznych zmian i poprawek w projekcie.
Warto dać projektowi możliwie twarde fundamenty. Ustalić zakres zaangażowania – tego codziennego, nie tylko w kluczowych momentach. Trzeba wybrać narzędzia komunikacji – nigdy nie komunikujmy się e-mailowo, ale używajmy Slacka, tasków w narzędziach takich jak Jira. Opiszmy sobie efekty prac na każdym etapie projektu. Następnie dobrze jest zaprojektować koncept produktu – mały, ale finalny fragment projektu, kluczowy dla jego działania.
Konrad Dziejarski: Wymieniłbym chyba trzy główne przyczyny większych opóźnień. Pierwsza to duże i często wykluczające się zmiany w stosunku do początkowych wymagań – unikniemy tego, jeśli w początkowej fazie projektu zrobimy dobrą analizę biznesową.
Kolejnym powodem jest długi czas oczekiwania na feedback klienta. Wtedy działania projektowe zostają wstrzymane i trudno taką przeszkodę obejść. Na pewnych etapach musimy sobie potwierdzać kierunek dążeń, aby uniknąć nieporozumień i wyrzucania pracy do kosza.
Trzeci powód rozciągania się projektu w czasie to zbyt późne zaangażowanie developmentu w cały proces. Pytania programistów i ewentualne bariery wdrożeniowe potrafią czasami wywrócić projekt do góry nogami i nierzadko pracę trzeba zaczynać prawie od początku.
Jakie są koszty wdrożenia strony WWW? Od czego zależą? Na jaki model rozliczeń postawić?
Adrian Hołota: Koszty uruchomienia strony są zależne od wielu czynników. Najtaniej i najprościej można ją zrobić samodzielnie, z wykorzystaniem gotowych platform z szablonami (np. Wix). W wielu przypadkach nie jest to zła metoda na start, ponieważ bez umiejętności technicznych i z niskim budżetem pozwala przetestować, czy klienci są zainteresowani wartością oferowaną przez firmę (np. jeśli sprawdzamy, czy warto wprowadzić na rynek nowy produkt).
Możesz też zrobić stronę metodą „intuicyjną”, czyli zlecić prace wykonawcy, który bez większej analizy zainspiruje się kilkoma innymi witrynami i uruchomi Twoją w kilka dni. Jeśli potrzebujesz serwisu, który ma po prostu być, żeby uwiarygodnić firmę w oczach klientów, takie podejście będzie wystarczające i w miarę tanie.
Jeżeli natomiast strona ma zarabiać (również pośrednio, przez generowanie leadów), wówczas warto zainwestować większe środki – nie tylko w samo jej stworzenie, lecz także w optymalizację. Gdy projekt jest ważny biznesowo i decydujesz się na współpracę z agencją, rozważ następujące elementy: analizę strategiczną, UX, architekturę informacji, badania UX, kreację, content, technologię, niestandardowe funkcje, mikroanimacje i niestandardowy układ, wdrożenie na serwerach oraz optymalizacje.
Jak widać, koszt strony zależy od wielu czynników. Jeśli potrzebujesz typowej witryny, warto wybrać opcję rozliczenia fixed price (agencje doliczą mniejszy margines błędu do ceny). Ale jeśli chodzi Ci o bardziej niestandardowy projekt, wówczas warto pomyśleć o rozliczeniu time & material – dzięki temu agencje nie będą doliczały dużego marginesu ryzyka do wyceny oraz zespoły będą bardziej skoncentrowane na Twoim celu, a nie myśleniu o ograniczeniach budżetowych.
Konrad Dziejarski: Koszty zależą od wielu czynników. Z doświadczenia mogę powiedzieć, że sprawdzić się mogą tutaj dwa modele rozliczeń. Jeśli już na początku wiemy dokładnie, czego potrzebujemy, i jesteśmy niemal pewni, że te wymagania nie zmienią się w czasie, wówczas spokojnie możemy pracować na modelu fixed price. Jego najważniejszą zaletą jest to, że już na początku projektu wiemy, ile będzie nas kosztował. Z kolei największa wada to problem z modyfikacją projektu, dodawaniem do niego nowych funkcji w trakcie.
Jeśli natomiast chcemy pracować zwinnie i wiadomo, że jakieś wymagania pojawią się dopiero później, sugeruję rozliczenie na zasadzie time & material. Jego wady i zalety są dokładnie odwrotne – nie wiemy, ile ostatecznie wyniesie koszt projektu, ale zmiany wymagań nie będą problematyczne.
Na co zwrócić uwagę pod kątem architektury informacji strony WWW?
Gabriela Baka, Kuba Sarata: Architektura informacji to struktura strony i każdej z jej podstron Tutaj są dwa zadania dla projektanta: stworzenie układu, który ma sens pod względem funkcjonalnym i tym samym jest praktyczny dla użytkownika, oraz zaspokojenie potrzeb klienta wynikających z założeń biznesowych.
Najważniejsza jest przejrzystość, czytelność informacji, ale też bardzo istotna pozostaje kolejność ich przedstawiania. Powinniśmy stworzyć tunel informacyjny prowadzący odwiedzającego od ogółu do szczegółu. Pamiętajmy, że przeciętny użytkownik spędza na stronie kilka sekund, więc musimy tak przygotować treść, aby wzbudzić jego zainteresowanie już na samym początku i zachęcić go do dalszej eksploracji.
Małgorzata Iwańska, UX designer & researcher w studiu Panowie Programiści.
Architektura informacji to nic innego jak struktura treści. Już podczas ich przygotowywania trzeba myśleć o tym, gdzie je umieścimy. Tak budujemy nawigację oraz tworzymy kategorie, które są podstawą architektury. Kategorie w menu powinny być na tyle intuicyjne, aby użytkownik nie musiał się zastanawiać, gdzie znajdzie wyszukiwaną podstronę. W ich nazywaniu unikaj slangu branżowego, który nie będzie czytelny dla odbiorców (no chyba że jest to portal lub sklep specjalistyczny).
Nie warto stosować także takich kategorii jak „różne” czy „inne”, ponieważ użytkownicy niechętnie wchodzą na podstrony, gdy nie wiedzą, jakich treści mogą się na nich spodziewać. Lepiej przeanalizować podkategorie w taki sposób, aby każda z nich była przyporządkowana do swojej kategorii głównej oraz się nie powtarzała się ani nie wykluczała z inną (ta sama podkategoria nie może występować w więcej niż jednej kategorii).
Dodatkowo kluczowe jest, aby żadna kategoria nie pozostała pusta. Unikanie błędów to jedna z wytycznych UX (heurystyk) – użytkownik nie może trafić na podstronę, na której nic nie znajdzie.
Przemysław Puchalski: Hierarchia, historia, przejrzystość, precyzja – ustalmy, co jest najważniejsze, a następnie zastanówmy się, jak chcemy przekazać treści, żeby włączyć użytkownika w naszą opowieść i sprawić, że finalnie zachowa się on lub pomyśli zgodnie z naszymi założeniami. Starajmy się przekazywać informacje w klarowny i czytelny sposób, aby nie wzbudzać wątpliwości. Ścieżek może być wiele – ważne, aby prowadziły do jednego, nadrzędnego celu.
Robert Głowacki, SEO director w agencji WebTalk.
Każda strona WWW czerpie ruch z wielu źródeł – mówimy tu o miksie działań organicznych, mediów płatnych, direct itd. Architektura serwisu musi uwzględniać ten miks oraz cele biznesowe. Analizy SEO pozwalają na wykorzystanie danych w celu rozplanowania struktury. Należy pamiętać, aby:
Wykonać kompletną analizę kategorii wyszukiwań. Pozwoli ona na pełne zrozumienie sposobu, w jaki klienci szukają naszych usług.
Przeprowadzić benchmark z konkurencją. Analiza powinna uwzględniać korzystanie z narzędzi takich jak Senuto czy Ahrefs, aby sprawdzić, jak stosowane rozwiązania sprawdzają się w Wszystko w celu uniknięcia błędów popełnianych przez konkurencję i inspirowania się jedynie efektywnymi rozwiązaniami.
Rozpoznać intencje użytkowników – 91% podstron nigdy nie otrzymuje ruchu z wyszukiwarki (Ahrefs). Dzieje się tak przez brak rozplanowania słów kluczowych, brak linkowania oraz nieuwzględnianie intencji odbiorców.
A na co zwrócić uwagę pod kątem technologii?
Gabriela Baka, Kuba Sarata: Przede wszystkim nie dajmy się porwać trendom. Podobnie jak w innych obszarach, tak i w branży IT pojawiają się nowości, ale nie zawsze modne rozwiązanie jest tym najlepszym. Należy zwrócić uwagę:
- Na to, jakiego ruchu się spodziewamy – ile osób będzie odwiedzać stronę wciągu miesiąca, ale również ile będzie jej używać jednocześnie.
- Czy będziemy wymieniać informacje ze zintegrowanymi systemami zewnętrznymi.
- Czy będzie miał kto zarządzać stroną i o nią dbać.
- Czy strona będzie raczej statyczna, z dość rzadko zmieniającą się treścią, czy też będzie to dynamiczne narzędzie, na którym co chwilę pojawiać się będzie nowy content?
- Jeśli strona jest funkcjonalna, a nie jedynie wizerunkowa – czy w przyszłości chcielibyśmy te funkcje przenieść również do aplikacji na innych platformach (aplikacji mobilnej).
Adrian Hołota: Warto odróżnić prostą stronę WWW od produktu cyfrowego. Strona jest jak witryna sklepowa – komunikuje coś odbiorcy, ma pokazać mu, co oferujesz, i zachęcić go do wejścia do środka (wykonania jakiejś akcji). Produkt
cyfrowy natomiast ułatwia życie użytkownikowi – ma rozwiązywać jakiś problem lub zaspokajać jego potrzebę.
W pierwszym przypadku zazwyczaj funkcjonalność strony nie jest zaawansowana, więc nie potrzeba wielkich serwerów i bogatej infrastruktury, która pozwoli korzystać z serwisu tysiącom osób jednocześnie. Warto jednak wziąć pod uwagę szybkość działania witryny, instalację narzędzi analitycznych, dopasowanie do osób z niepełnosprawnością oraz wygodę zarządzania treścią. A także bezpieczeństwo! W przypadku produktów cyfrowych ważniejsze niż technologia jest dopasowanie wartości, jaką dajesz użytkownikom, do ich potrzeb. Na tym właśnie trzeba się skupić.
Łukasz Wełniak, Web development & operations director w agencji Artegence.
Przede wszystkim na użyteczność. Strona WWW musi być łatwo dostępna i szybko działać. Dla docelowego użytkownika jej prędkość ładowania oraz lekkość poruszania się w jej obszarze są kluczowe. Łatwy dostęp do internetu oraz szybki rozwój kompetencji cyfrowych, zwłaszcza wśród ludzi starszych, powoduje, że musimy myśleć o aplikacjach internetowych szerzej. Należy zapewnić ich dostępność także dla osób z niepełnosprawnością.
Co jest ważne w kontekście designu?
Przemysław Puchalski: Strona powinna być czytelna – jej głównym celem jest informowanie. Uważajmy, aby nie przeładować jej treściami. Każdy przesyt – zarówno informacyjny, jak i wizualny – to nasz wróg. Pamiętajmy o tym, że forma podąża za funkcją. Design powinien wzmacniać odbiór treści, niezależnie od stylu projektu, liczby elementów czy skryptów. Elementy, na jakie należy zwrócić uwagę, powinny wynikać z charakteru firmy czy projektu oraz problemów informacyjnych, z jakimi się mierzymy.
Konrad Dziejarski: Pod kątem designu wyróżniłbym dwie najważniejsze rzeczy. Pierwsza to wypracowanie look & feel decyzje związane z identyfikacją wizualną. Druga – przemyślany style guide (design system). Ważne, żeby strona była spójna wizualnie nie tylko z identyfikacją marki, lecz także w ramach poszczególnych podstron. Aspektów style guide jest dużo, więc wszystkich nie będę wymieniał, ale na pewno wszelkie elementy klikalne powinny być wyróżnione tym samym kolorem, przyciski – jednakowo formatowane (oczywiście z podziałem na primary i secondary action). Na stronie nie możemy używać zbyt dużej liczby fontów. Musimy także zaplanować, w jaki sposób zaprezentujemy komunikaty błędu, sukcesu itd.
Co z kolei uwzględnić w obszarze użyteczności i dostępności?
Gabriela Baka, Kuba Sarata: Dostępność (accessibility) to obecnie temat na topie. Również ze względu na prawodawstwo. Możemy dążyć do zgodności z różnymi poziomami wytycznych WCAG (od A do AAA). Działania te będą wymagały zaangażowania nie tylko na etapie projektowania, lecz także w fazie developmentu.
Pracy w tym zakresie jest oczywiście najwięcej na samym początku, ale co ważne, nie kończy się ona wraz z publikacją strony na serwerze produkcyjnym. O dostępność należy dbać ciągle, także w nowych treściach (choćby przez dodawanie tzw. altów do zdjęć i grafik).
Joanna Szastałło, Front-end developer w studiu Panowie Programiści.
Małgorzata Iwańska, Joanna Szastałło: Żeby strona była dostępna dla osób z niepełnosprawnością, pracę muszą wykonać zarówno programiści, jak i osoby uzupełniające treść (z czego nie wszyscy sobie zdają sprawę). Należy przede wszystkim zwracać uwagę, aby teksty były zrozumiałe i przystępne dla każdego odbiorcy, zdjęcia – opisane, przyciski miały klarowny komunikat, dokąd prowadzą, a zamieszczane filmy zawierały transkrypcję.
Należy zadbać również o wiele aspektów technicznych. Wyznacznikiem zasad jest standard WCAG (https://www.w3.org). Poprawność dostępności możesz zbadać za pomocą narzędzia Lighthouse, dostępnego w narzędziach deweloperskich (w przeglądarce Chrome kliknij prawy przycisk myszy, następnie „Inspect” lub „Zbadaj”, z górnego paska nawigacji rozwiń więcej opcji i wybierz zakładkę „Lighthouse”, a następnie kliknij „Generate report”, aby zbadać stronę). Da się to również zrobić z użyciem walidatora W3C (https://validator.w3.org/).
Na co należy zwrócić szczególną uwagę?
- Uporządkuj strukturę tytułów, nagłówków i sekcji
- Zamieść opisy alt treści graficznych i wideo – to tekst alternatywny, który mówi, co znajduje się na grafice. Powinien być krótki i konkretny, dotyczący tego, co najważniejsze w danym kontekście. Lepiej zrezygnować z wprowadzenia typu „grafika przedstawia…”. Warto za to stosować dokładne opisy tego, co się na niej dzieje (np. „szeroko uśmiechnięta kobieta” zamiast „kobieta”) – pozwolą one użytkownikom niewidzącym lub niedowidzącym wyobrazić sobie sytuację na zdjęciu. Można podzielić opis na kilka krótkich zdań, aby był on zrozumiały i łatwy w
- Sprawdź, czy po stronie można się poruszać za pomocą klawisza tab oraz strzałek na klawiaturze. Nie każdy użytkownik ma zdolność nawigacji kursorem.
- Pamiętaj, że treści na stronie powinny być odczytywane przez narzędzia zwane screen readerami.
- Filmy i dźwięki nie mogą się uruchamiać automatycznie. Użytkownik powinien mieć możliwość zarządzania ich odtwarzaniem.
- Zadbaj o kontrast kolorystyczny – powinien on spełniać warunki minimum z poziomu AA, czyli 4,5 : 1 dla zwykłych tekstów w tekście (body) i grafik oraz 3 : 1 dla tekstów w nagłówkach.
- Stosuj tylko tytuły widoczne w każdym inpucie – nie zalecamy takich, które po kliknięciu w input znikają. Powinny być one zawsze możliwe do odczytania przez czytniki ekranu.
O co zadbać w kwestii SEO?
Krzysztof Wałaszewski, SEO expert w agencji Artegence.
Prace nad optymalizacją SEO powinny się rozpoczynać już podczas projektowania nowej strony. Pozwala to zapobiegać problemom, których rozwiązanie na późniejszych etapach bywa trudne i czasochłonne. Sama architektura informacji serwisu i jego podział na podstrony powinny być spójne z tym, w jaki sposób użytkownicy Google’a wyszukują informacje o naszej usłudze.
Kluczowe dla widoczności w wyszukiwarce są teksty, jakie znajdują się w serwisie. Na stronach ofertowych warto już na etapie projektowania przewidzieć miejsce na dość obszerne materiały tekstowe oraz odpowiedzieć sobie na pytanie, kto je przygotuje. Niestety to kość niezgody między zasadami SEO a UX. Specjaliści od pierwszego naciskają na wydłużanie treści na stronie z myślą o robotach Google’a – i w efekcie o obecności w wynikach wyszukiwania. Drugim zależy zaś na skracaniu komunikatów, aby były one bardziej przyjazne dla użytkownika.
Projektowanie strony jest także dobrym czasem na to, aby zastanowić się nad utworzeniem firmowego bloga. Taki dodatek pozwala pozyskiwać z Google’a użytkowników, którzy są jeszcze na wczesnym etapie lejka sprzedażowego. Mają oni już jakiś zdefiniowany problem, ale jeszcze nie wiedzą, że to właśnie usługa naszej firmy może go rozwiązać. Po przygotowaniu wersji testowej serwisu nadchodzi pora na wykonanie specjalistycznego audytu technicznego SEO. Ma on na celu upewnienie się, czy rozwiązania techniczne są zgodne z zaleceniami oraz preferencjami Google’a.
Ostatnim krokiem jest wdrożenie optymalnej migracji adresów URL. Dotyczy to przypadków, w których przed nową wersją strony mieliśmy już jakiś serwis. W takiej sytuacji należy wykonać przekierowania między starymi a nowymi adresami URL. Tak, aby Google zrozumiał, w jakim miejscu obecnie znajduje się najbliższy odpowiednik każdej dotychczasowej podstrony. Brak tych przekierowań sprawi natomiast, że serwis straci swoją wcześniejszą widoczność w wyszukiwarce.
Grzegorz Szymborski, CTO, partner w studiu Panowie Programiści.
Najważniejsze są treści i pojawiające się w nich słowa kluczowe. Roboty wyszukiwarki
skonsumują to, czym je nakarmimy, zatem content na stronie musi odpowiadać frazom, na które chcemy być widoczni w sieci. Treści muszą być odpowiednio długie i unikatowe, a strona – często aktualizowana.
Poza tym duże znaczenie mają sprawy techniczne. Podstawowym wskaźnikiem tego, jak witryna jest oceniana przez wyszukiwarkę, jest Google PageSpeed Insights. Jeśli chcemy zostać dobrze spozycjonowani, przyda się nam wysoki wynik (70+). Oto kilka dodatkowych rzeczy, które mają pozytywny wpływ na tę pozycję:
Podstawowym elementem każdej strony jest pełna mapa witryny, która umożliwia skuteczne indeksowanie.
Odpowiednia architektura informacji nie tylko poprawia odczucia użytkownika, lecz także ułatwia botom poruszanie się po stronie, a w rezultacie daje lepszą wyszukiwalność i większe dopasowanie wyników do zapytań odbiorców.
Aby uatrakcyjnić i wzbogacić wyniki wyszukiwania, warto zadbać o odpowiednie uporządkowanie danych strony, które pozwalają w ustandaryzowany sposób wyświetlać szczegółowe informacje o firmie czy produkcie.
- Warto też wziąć pod uwagę wyniki Core Web Vitals, bo od 2021 r. są one jednym z czynników wpływających na pozycję strony (ranking w wyszukiwarce Google).
- Ważne, aby treść była ułożona semantycznie – należy korzystać z nagłówków tam, gdzie jest to konieczne, a nie wynika tylko z potrzeb stylowania.
- Jeżeli wdrażasz nową stronę pod starym adresem, pamiętaj o dodaniu odpowiednich przekierowań podstron do ich nowych odpowiedników.
- Korzystaj z contentu unikatowego i interesującego dla użytkowników – szczególnie ważne jest, aby opisy podstron były wyjątkowe i związane z treścią.
- Zadbaj, aby strona była mobile friendly.
- W przypadku serwisu wielojęzycznego czy wieloregionalnego dodaj odpowiednie tagi, linkujące do wszystkich wersji strony, oraz umieść je w mapie witryny.
Robert Głowacki: Ważne jest uświadomienie sobie, że nie każda podstrona musi mieć funkcję SEO i nie każda musi być tworzona z myślą o zgarnianiu ruchu organicznego. Najczęściej nie ma problemu, gdy strona główna to piękne wideo, które trudno się pozycjonuje w wyszukiwarce – jeżeli tylko zadbasz o inne zoptymalizowane i indeksowalne podstrony, stworzone z myślą o SEO.
Chcesz poszerzyć swoją wiedzę o marketingu? Sięgnij po promocyjne pakiety specjalne „Marketera+”.
