Jakie są najlepsze praktyki w projektowaniu stron internetowych? W jaki sposób możesz je z powodzeniem zastosować w swoim następnym projekcie? A co definiujemy jako standardy projektowania i najlepsze praktyki w projektowaniu stron internetowych?

Co rozumiemy pod pojęciem najlepszych praktyk?

W tworzeniu stron internetowych istnieją stałe zasady, które mają związek głównie z czytelnością i czystością kodu, a także z bezpieczeństwem strony. W projektowaniu stron internetowych, z drugiej strony, terminologia jest nieco bardziej rozmyta, a zasady są bardziej otwarte na własne interpretacje.

Najlepsze praktyki w projektowaniu stron internetowych to zbiór zasad, których należy przestrzegać, aby spełnić ogólne oczekiwania użytkowników. Ponadto, są to wytyczne zapewniające większą przejrzystość i lepsze wrażenia użytkownika.

W tym artykule przedstawię Ci najlepsze praktyki dotyczące dobrego projektowania stron internetowych. Dla każdego obszaru, dam Ci wskazówki, jak zdobyć więcej wiedzy i przedstawię narzędzia i przykłady, które pomogą Ci przy następnym projekcie.

Pokrótce poruszam również temat najlepszych praktyk w rozwoju WordPress . Jak zapewne wiesz, planowanie i zarządzanie projektami są ważną częścią projektowania stron internetowych. W tym poście pomijam na razie oba tematy, ponieważ wykraczałoby to poza zakres tego miejsca.

Najlepsze praktyki: Projekt wizualny

Zaczniemy od ustalonych standardów projektowania wizualnego: Jakie są najlepsze praktyki w projektowaniu wizualnym? A jakie są czynniki, które się liczą?

Rozpoznawalność i budowanie marki

Strona internetowa musi pasować do reszty wizerunku firmy i powinna być zgodna z przewodnikiem stylu. Dlatego sprawdź, czy na stronie internetowej znajdują się odpowiedzi na następujące pytania:

• Czy na pierwszy rzut oka widać, dla jakiej firmy została stworzona strona?
• Czy przewodnik po stylu został zintegrowany?
• Czy elementy wizualne są rozpoznawalne dla operatora witryny?
• Czy elementy wizualne są stosowane konsekwentnie?
• Czy język użyty na stronie odzwierciedla branding?

Google jest daleko z przodu, jeśli chodzi o konsekwentne budowanie marki. Nie przychodzi mi do głowy żadna inna marka, która ma tak wiele różnych produktów, a mimo to udaje jej się nadać każdemu z nich firmowy charakter. Nawet gdy patrzę na nieznany mi wcześniej produkt Google, kojarzy mi się on bezpośrednio z marką.

Jak to robi Google?

Obejmuje to konsekwentne stosowanie kolorów Google, typografii, wyróżniających się białych przestrzeni, spójnych wezwań do działania i nawigacji. Loga mają też pewną spójność, która sprawdza się w różnych firmach i kategoriach - choć to ostatnie nie musi oznaczać, że projekt będzie się podobał.

Dzięki spójności w brandingu, najpierw wystarczy przeanalizować, czy strona odzwierciedla firmę i jej branding w najlepszy możliwy sposób.

Standard projektowania stron internetowych i użyteczność

Kolejną "najlepszą praktyką" jest integracja standardów. Obejmuje to na przykład umieszczenie logo w lewym górnym rogu, wygląd przycisków, linków i tak dalej. Pomagają one odwiedzającym Twoją stronę w szybkim i łatwym odnalezieniu się na niej. Dlatego standardy te są niezbędne w realizacji udanej użyteczności.

Co definiuje standard projektowania stron internetowych?

Definiujemy powszechnie stosowane standardy projektowe w projektowaniu stron internetowych poprzez wzorce projektowe UI. Jak definiuje się standardy, Andy Crestodina wyjaśnia bardzo zrozumiale w swoim artykule o standardach projektowania stron internetowych.

Zgodnie z tym, podejście projektowe musi być stosowane na co najmniej 80 procentach stron internetowych, aby można je było uznać za standardowe. Wszystko inne jest albo nawykiem (50-79%), albo nawet wprowadza niespójność i zamieszanie (0-49%) na Twojej stronie.

Harmonijne projektowanie: zasada trójek

Już wcześniej poruszałem temat harmonijnego projektowania stron internetowych. Tym razem chciałabym bardziej szczegółowo omówić zasadę trójek.

Stosowano ją od kilkuset lat - głównie w sztukach plastycznych, a później w fotografii. Tutaj, jak pokazano na rysunku, konstrukcja jest podzielona na 9 równej wielkości pól:

Podczas tworzenia stron internetowych zasada tercji pomaga również umieścić najważniejsze informacje w taki sposób, aby odwiedzający mógł je bezpośrednio dostrzec. 

Mówiąc prościej, element wizualny powinien zajmować nie więcej niż trzy pola i znajdować się w jednej trzeciej układu strony. Węzły te nadają się również szczególnie do umieszczania ważnych komunikatów i wezwań do działania.

W Photoshopie możesz użyć narzędzia "Kadrowanie" i ustawienia "Reguła Trzecich Tysięcy", aby szybko i łatwo sprawdzić i dostosować układy. Aby zilustrować regułę trójek, przyjrzałem się bliżej stronie internetowej Marqeta:

Zarówno produkt, jak i jego przesłanie są dobrze rozproszone po węzłach. Tutaj, projekt mógłby stać się nieco bardziej wydajny poprzez przesunięcie CTA nieco. Ucierpiałaby na tym jednak nieco harmonia projektu:

W wersji mobilnej wyraźnie widać, że komunikat wypełnia dolną trzecią część layoutu, podczas gdy produkt wyświetlany jest dość centralnie. Tutaj możemy przemyśleć umiejscowienie CTA.

Tak zwane "heatmapy" pomogą Ci również dowiedzieć się, gdzie odwiedzający Twoją stronę głównie zaglądają i klikają. Narzędzie Crazy Egg, na przykład, oferuje (płatną) usługę tutaj.

Innym sposobem na sprawdzenie projektu jest tzw. test rozmycia. Tutaj bierzesz ostrość ze swojego układu (na przykład za pomocą Photoshopa i "Gaussian Blur" - 12 procent). Jeśli użytkownicy nie mogą już czytać treści, szybko staje się jasne, na czym skupiają się podczas przeglądania strony. Test ten dobrze nadaje się również do analizy CTA. Czy nadal jest rozpoznawalny jako taki?

W tym celu ponownie skorzystałem z witryny internetowej firmy Marqeta. Szczególnie widoczne jest właściwe CTA i produkt, następnie przekaz, a na końcu logo i drugie CTA:

Jeszcze bardziej złagodziłem wersję mobilną, aby przetestować to, co pozostało. Tutaj najpierw przyciąga uwagę produkt, a następnie CTA i logo. Możesz przeprowadzić ten test na całej stronie - najlepiej jeszcze w fazie projektowania. Tutaj możesz szybko i łatwo przeanalizować, które elementy Twojego projektu są widoczne i zdecydować, czy to jest to, czego chcesz.

Optymalizacja treści i SEO

Tworzenie stron internetowych obejmuje oczywiście również treści pisane. Istnieją profesjonalni copywriterzy, którzy - mając na uwadze SEO, użyteczność i przewodnik po stylach - piszą sensowne treści na Twoją stronę internetową. Istnieje jednak kilka wskazówek, których możesz przestrzegać samodzielnie. 

Należy zwrócić szczególną uwagę na długość i czytelność tekstów - często teksty są zbyt długie i zbyt zagmatwane. 

Nawet jeśli grupa docelowa jest przyzwyczajona do pewnego żargonu, zawsze należy mieć świadomość, że nasza uwaga na stronie internetowej jest znacznie krótsza niż na przykład podczas czytania artykułów technicznych. Podczas przeglądania stron internetowych szukamy raczej konkretnych informacji. Skanujemy treść, zamiast poświęcić czas na jej dokładne przeczytanie.

Google daje Ci również punkty ujemne, jeśli zdania na Twojej stronie są zbyt długie, a punkty dodatnie, jeśli są połączone tzw.słowami przejściowymi.

Ciekawe posty na temat SEO to także:

• SEO audit
• Backlinki
• SEO Plugins dla WordPress
• Przewodnik wyszukiwania słów kluczowych
• Przewodnik SEO 2020

Dostępność sieci i strony internetowe bez barier

Dostępność stron internetowych to niestety wciąż temat marginalny i zbyt często ignorowany. Również w tym przypadku istnieją proste rozwiązania, które możemy rozważyć już przy pierwszym projekcie. Na przykład, czy przeważnie używasz kolorów do podkreślania informacji? 

Możesz to łatwo sprawdzić, oglądając swoją stronę w czerni i bieli:

W tym celu przeanalizowałem ponownie tę samą stronę internetową. Nawet bez kolorów, przekaz jest wyraźny. Prawy górny CTA może być problematyczny pod względem kontrastu.

Aby sprawdzić to z całą pewnością, istnieje "Contrast Checker". Domyślny współczynnik kontrastu wynosi co najmniej 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu, takiego jak nagłówki:

Jeśli podam odcienie szarości, CTA nie jest wystarczająco kontrastowe, ale w wariancie kolorowym jest wystarczające.

http://colorsafe.co/ to kolejne narzędzie do określania kolorów i ich siły kontrastu. Tutaj możesz bezpośrednio wypróbować różne kombinacje kolorów. Jesteś bezpośrednio podany współczynnik i masz możliwość wyboru czcionek z, a także zgodnie z którym standardem WCAG chcesz wyrównać swój wybór.

Używanie kolorów do wizualnego przedstawiania obsługi błędów może powodować problemy. Weźmy na przykład elementy formy. Błędy są często reprezentowane przez kolorowe podświetlenie pola wprowadzania danych. Dla osoby z wadą wzroku może to prowadzić do nierozpoznania błędów, a tym samym do ich nierozwiązania. 

Powinieneś wziąć to pod uwagę podczas planowania i dlatego zawsze upewnij się, że istnieje inna reprezentacja błędu. Tutaj znajdziesz więcej interesujących faktów i materiałów na temat dostępności, a także cenne wskazówki dotyczące tworzenia dostępnej witryny WordPress.

Inne zasoby

• Projektowanie dostępnych interfejsów

Rozdzielczość i responsywne projektowanie stron internetowych

Prawdopodobnie nie ma reguły w projektowaniu stron internetowych, która jest częściej poruszana - i częściej lekceważona - niż "mobile first”.

Dzięki takiemu podejściu, treść jest tworzona na urządzenia mobilne, a następnie odpowiednio dostosowywana do większych urządzeń. Przeciwieństwem tego jest dostosowanie projektu do komputerów stacjonarnych i co. a następnie dostosowanie go odpowiednio do mniejszych urządzeń. 

Przypominają mi się dwa inne podejścia:

• Stwórz osobną stronę internetową dla każdego urządzenia mobilnego i desktopowego, a następnie uzyskaj do niej dostęp zgodnie z potrzebami.
• Wyświetlanie strony w wersji desktopowej na telefonie komórkowym

Pierwszy sposób może być - w zależności od projektu - właściwym podejściem, ale nie jest zbyt rozpowszechniony, ponieważ jest bardzo kosztowny i czasochłonny. To ostatnie zjawisko jest niestety wciąż zbyt często spotykane w sieci i dlatego pilnie wymaga dodania do listy "najlepszych praktyk". Więcej wskazówek dotyczących optymalizacji mobilnej znajdziesz tutaj.

Mobile first nie zawsze musi być właściwą drogą: Badania grupy docelowej i jej zachowań w Internecie mogą szybko pokazać, z jakich urządzeń jest głównie odwiedzana Twoja strona. 

Chodzi nie tylko o to, że treść jest przygotowywana wizualnie, ale także o to, że uwzględnia się zmienione warunki zewnętrzne. Więcej na ten temat można przeczytać w artykule Projektowanie UX oparte na urządzeniach mobilnych nie jest już trendem.

Poniższa tabela jasno ilustruje, które ekrany są częściej odwiedzane w Internecie. Pomoże Ci to zdecydować, dla jakich ekranów chcesz zoptymalizować swoją stronę. Należy jednak pamiętać, że takie uogólnienie może służyć jedynie jako wskazówka. Statystyki te nie zastąpią badania grup docelowych.

Najlepsze praktyki dla WordPress

WordPress Codex

WordPress oferuje Ci niesamowitą ilość możliwości prezentacji Twoich projektów w sieci. Ale nawet tutaj istnieją standardy i najlepsze praktyki, których należy przestrzegać.

WordPress Plugins oraz Themes

Przy wyborze odpowiedniej wtyczki i motywu ważna jest nie tylko ich aktualna funkcjonalność. Dobrym pomysłem jest także przeczytanie recenzji i zapoznanie się z częstotliwością aktualizacji oraz sprawdzenie, czy dana wtyczka lub motyw będzie rozwijana w przyszłości. Narzędzia WordPressa, które są regularnie rozwijane, mają zazwyczaj bardziej aktywne wsparcie. Jest też bardziej prawdopodobne, że pozostaną one kompatybilne z przyszłymi wersjami Twojej witryny.

WordPress Aktualizacje i bezpieczeństwo

Regularne aktualizowanie witryn Themes i Plugins zmniejsza podatność na niepożądany dostęp. Błędy są rozwiązywane, a Twoje strony są dostosowywane do ciągle zmieniającego się środowiska technicznego. Bezpieczeństwo Plugins jak WordFence pomaga również śledzić witrynę i jej bezpieczeństwo oraz reagować na problemy na czas. Certyfikat SSL powinien być zintegrowany z każdą stroną internetową.