Nie da się zaprzeczyć temu, że każda strona internetowa jest inna. Jednakże w ciągu ostatnich lat wykrystalizowały się pewne tendencje, schematy oraz zwyczaje, które dobrze jest mieć na uwadze podczas projektowania stron internetowych.
Użytkownicy są przyzwyczajeni do sprawdzonych rozwiązań. Owszem, można czasem „kombinować” i stawiać na innowacyjne elementy, jednak bez przesady. Po prostu nie lubimy za bardzo zmian – tak już mamy.
Istnieją zatem pewne dobre praktyki na stronach internetowych, których dobrze jest się trzymać. Wprowadzają one ład i porządek w serwisach, serwując użytkownikom sprawdzone rozwiązania.
Zobacz, jakie dobre praktyki na stronach internetowych możesz wykorzystać we własnym serwisie. Poniżej znajdziesz listę dwunastu z nich.
Jakie są dobre praktyki na stronach internetowych? – 12 wskazówek
1. Ustal cel.
Strona po prostu musi mieć swój cel.
Przykładowe to chociażby sprzedaż produktu (tudzież produktów), chęć namówienia użytkowników do pobrania e-booka, przedstawienie oferty i zachęta do kontaktu z firmą itp.
Prezentuj cel, aby użytkownicy po prostu wiedzieli, co mają robić na stronie. Kieruj ich uwagę umiejętnie z sekcji do sekcji, posługując się przy okazji przyciskami CTA. Nie możesz dopuścić do sytuacji, w której użytkownik, będąc na danej podstronie, nie będzie wiedział, co ma zrobić dalej.
Każdy kolejny krok powinien być oczywisty. To Tobie zależy na realizacji celu przez odwiedzających, zatem pomagaj im w tym.
2. Nie przesadzaj z nowościami.
W tekście na temat przydatnych elementów na stronach www wspomniałem sytuację, w której niektórzy właściciele stron internetowych – chcąc się wyróżnić – stawiają na nowatorskie umiejscowienie logo (np. w prawym górnym rogu ekranu).
Nie da się zaprzeczyć, że jest to inne oraz ciekawe – jednak czy na pewno lepsze? Z reguły nie – jak wspomniałem we wstępnie do tego tekstu, jesteśmy przyzwyczajeni do pewnych schematów.
Nie ma niczego złego w próbach usprawniania swojej strony internetowej, wdrażania jakichś nowinek – jednak z głową. Znaj umiar, gdyż Twoja strona ma się podobać odwiedzającym, nie zaś Tobie.
3. Pozbądź się monotonii w treści.
Kolejne dobre praktyki na stronach internetowych dotyczą urozmaicania treści.
W artykule o formatowaniu treści we wpisach blogowych (choć nie tylko – odnosi się on ogólnie do stylizacji treści na stronach internetowych) wymieniłem kilka prostych technik. Oto niektóre z nich:
- stosowanie list numerowanych i punktowanych
- dobór odpowiednich wielkości oraz rodzajów fontów
- przeplatanie tekstu obrazami
- unikanie wielkich bloków tekstu
- wskazywanie istotnych haseł przy pomocy wyróżniających się nagłówków
Zobacz, jak proste są to metody, a jak skuteczne.
Grunt to odpowiednie urozmaicanie treści – tak, aby była ona po prostu ciekawa oraz przyjemna w odbiorze przez czytelników. Nasze oczy wtedy się nie nudzą, a użytkownicy mogą bez problemu taką treść przeskanować wzrokiem, zanim zabiorą się za ewentualne czytanie całości.
4. Menu oraz nawigacja muszą być oczywiste w obsłudze.
Ponownie nawiązuję do naszych przyzwyczajeń.
Tak już jest, że menu na stronach internetowych zazwyczaj prezentuje się w formie poziomej „belki”, znajdującej się na samej górze ekranu. Z kolei wszelkie kategorie (np. w sklepach internetowych) zamieszcza się tuż po menu lub też w lewej części ekranu, w formie listy – jedna pozycja pod drugą.
Oczywiście od powyższych zasad występują wyjątki, lecz – koniec końców – nie są to jakieś bardzo innowacyjne rozwiązania. Właściciele stron internetowych wiedzą, że jeśli użytkownikom będzie się źle poruszało po ich serwisie, po prostu go opuszczą.
Pamiętaj, że w razie wystąpienia dylematu w kwestii tego, na jakie rozwiązanie się zdecydować, zawsze możesz postawić na testy A/B.
5. Pamiętaj o hierarchii treści.
Dlaczego menu zazwyczaj jest umiejscowione na samej górze? To samo z logo – nie mogłoby znajdować się gdzieś niżej? A co w przypadku tytułów podstron oraz przycisków CTA – czy naprawdę muszą się one znajdować tak wysoko?
Zauważ, że odpowiedzi na te pytania są oczywiste. Dotyczą one istotnych elementów, a te z kolei przyjęło się prezentować możliwie najwcześniej.
Analogicznie – nie bez powodu linki do mediów społecznościowych, informacje o polityce prywatności oraz pełna mapa strony znajdują się zazwyczaj na samym dole. Nie są to elementy, z których użytkownicy powinni korzystać od razu po odwiedzeniu witryny. Zazwyczaj są one zupełnie marginalne oraz niezwiązane z głównym celem strony.
Pamiętaj zatem o odpowiedniej hierarchii w prezentowaniu informacji. Największa istotność na samej górze, a później odpowiednie jej stopniowanie w dół.
6. Dbaj o właściwą ilość treści.
Jest to kwestia stricte wynikająca z poprzedniego podpunktu.
Swego czasu w tekście na temat optymalizacji stron typu landing page wspomniałem, iż istnieją metody, dzięki którym można sprawdzać poziom klikalności pewnych elementów oraz – tym samym – mierzyć ich atrakcyjność dla użytkowników.
Wyniki zazwyczaj są podobne – to, co odwiedzających interesuje najbardziej, znajduje się na górze danej strony.
Przewijając wyniki pomiarów w dół ewidentnie widać, że im niżej, tym mniej osób dociera do samego końca. Nie dzieje się to bez przyczyny.
Musisz pamiętać o odpowiednim balansie treści na każdej podstronie. Nikt nie będzie w stanie jednoznacznie stwierdzić, czy jest jej za dużo, czy za mało – trzeba do tego dążyć metodą prób i błędów oraz wspierając się odpowiednimi narzędziami.
Dąż do tego, aby jak największy procent użytkowników strony docierał do tego momentu, w którym jej cel będzie zrealizowany, gdyż wcale nie musi się on pokrywać z końcem podstrony.
7. Nie utrudniaj, używając wymyślnego słownictwa.
Dobre praktyki na stronach internetowych nakazują trzymania się terminologii zrozumiałej dla danej grupy docelowej.
Wiem, iż niektóre osoby chciałyby zastąpić „Bloga” np. „Kopalnią myśli”, zaś „Kontakt” – przypuśćmy – „Wysłaniem listu”. W pewnych kontekstach takie zagrania mogą okazać się trafne, jednak zazwyczaj tak nie jest.
Najlepiej jest trzymać się czegoś, co jest sprawdzone i przede wszystkim zrozumiałe dla tych, którzy mają z danych podstron korzystać. Pamiętaj o tej zasadzie nie tylko w kwestii nawigacji, ale także ogólnie w przypadku treści na stronie. Wszystko to powinno być dopasowane do potrzeb Twoich odbiorców.
8. Przyspiesz stronę.
Warto wykorzystywać dobre praktyki na stronach internetowych w kwestii prędkości ich ładowania:
- optymalizacja obrazów
- stosowanie pamięci podręcznej
- łączenie wielu zasobów podobnego typu w jeden plik
- minimalizacja kodu zasobów
- korzystanie z tzw. CDN
Są to oczywiście wybrane techniki, które z powodzeniem możesz użyć we własnym serwisie.
Zwróć również uwagę na to, że działanie na samych zasobach to nie wszystko. Na odczuwalną prędkość poruszania się po stronie mają również wpływ sposób nawigacji czy też ewentualne animacje. Pamiętaj o tym.
9. Jeśli wykorzystujesz ikony, rób to z głową.
Ikony są świetne. Pozwalają na przekazanie pewnych informacji w szybki, wizualnie przystępny sposób. Jednak czy to oznacza, że powinniśmy używać ich przy każdej nadarzającej się okazji?
Nie do końca.
Odgrywają one przede wszystkim informacyjną rolę, nie mogą stanowić tylko i wyłącznie ozdoby.
Jeżeli dostrzegasz na swojej stronie miejsca, w których ikony będą przydatne, koniecznie postaw na spójny stylistycznie zbiór. Są one integralną częścią całego designu, zatem powinny idealnie zgrywać się z pozostałymi elementami serwisu.
10. Stosuj wyróżniające się i wygodne w obsłudze przyciski.
Dobre praktyki na stronach internetowych bardzo często wręcz nakazują wyodrębnienie jednego koloru oraz zastosowanie go tylko i wyłącznie dla kluczowych CTA.
Przyciski tego rodzaju są dla Ciebie najważniejsze, gdyż nakierowują użytkownika na konkretne cele.
Zarezerwowanie jednej barwy tylko i wyłącznie dla nich sprawia, że kolor ten nie miesza ze sobą podobnych do siebie elementów. Jasno wskazuje na cel.
Istotne jest także położenie przycisków na stronie. Staraj się umieszczać je możliwie najwyżej. Ponadto weź pod uwagę ich dostępność na urządzeniach mobilnych – powinny mieć one odpowiednio dużo wolnej przestrzeni wokół, by były łatwo dotykalne.
11. Przyjrzyj się wszelkim komunikatom zwrotnym.
Załóżmy, że wysyłasz wiadomość mailową poprzez formularz kontaktowy. Po kliknięciu „Wyślij” otrzymujesz komunikat, iż wiadomość została wysłana, jednakże znajduje się on w czerwonym polu lub też przedstawiony jest przy pomocy czerwonej czcionki.
Coś tu nie gra, prawda?
No właśnie. Jesteśmy przyzwyczajeni do tego, że powodzenie oznacza się na zielono, zaś wszelkie błędy czerwoną (lub miejscami żółtą) barwą.
Wydawałoby się to oczywiste, jednak na wielu stronach internetowych zasady te nie są respektowane. Dodatkowo istotna jest sama treść takich komunikatów – powinna być możliwie najprostsza i od razu trafiająca do świadomości odbiorców.
12. Nie każ użytkownikom mobilnym wytężać wzroku.
W czasach, gdy niejednokrotnie odsetek użytkowników mobilnych przeważa nad tymi, którzy korzystają z desktopów, tych pierwszych powinno się otoczyć szczególną opieką.
Mam tu na myśli głównie wielkość fontów. Zdarza mi się spotykać strony internetowe, gdzie w wersji mobilnej wielkość czcionek jest nieznacznie mniejsza, niż w wersji pełnej. Zazwyczaj powinno się postępować w odwrotny sposób – powiększając rozmiar fontów na mniejszych ekranach lub ostatecznie po prostu ich nie zmieniając.
Ogółem coraz częściej można spotkać podejście typu mobile-first, polegające na projektowaniu stron, zaczynając od wersji pomniejszonych, później zaś przechodząc do tych pełnych. Jest to całkiem sensowne rozwiązanie, w szczególności zważywszy na fakt przedstawiony na początku tego podpunktu.
Dlaczego dobre praktyki na stronach internetowych są tak ważne?
Ponieważ ważna jest nie tylko wartość informacji, ale także wygoda, której poziom można umiejętnie podnosić poprzez lepsze prezentowanie treści.
Obecnie mamy bardzo małą cierpliwość. Jeśli dany serwis nam nie odpowiada, szukamy konkurencyjnego. Gra jest zatem warta świeczki.
Miej na uwadze przede wszystkim dobro odwiedzających. Jeżeli będą zadowoleni z Twojej strony internetowej, sukces gwarantowany.
Dzięki za fajny artykuł. A jakiej wtyczki użyliście do dynamicznej zmiany meta Title ? 🙂
Piotrze, dla takiej małej funkcji szkoda wtyczki. 🙂 Zresztą unikamy ich nadmiernej liczby jak ognia. W przypadku dynamicznej zmiany tytułu, stworzyliśmy własne rozwiązanie – znajdziesz je w pliku ze skryptami.