W niniejszym artykule przeanalizujemy parę kwestii, które pozwolą nam określić bliżej czym jest lub czym może być nowoczesność, jako cecha na stronach internetowych. Pierwsza z nich będzie dotyczyć tego jak można rozumieć nowoczesność w web designie.
Druga będzie dotyczyć kwestii wizualnej, czyli tego kiedy estetyka strony sprawia wrażenie nowoczesnej a trzecia, jak można się spodziewać – strony użytkowej – czyli jak programują postępowi web developerzy. Nowoczesne strony internetowe to często wykorzystywany slogan twórców stron, którzy próbują w ten sposób przekonać do siebie nowych klientów.
Nowoczesność rzecz jasna kojarzy się pozytywnie i może sugerować, że autorzy takiej oferty są na bieżąco z modnymi zagadnieniami ze świata web designu. Wszystko było by dobrze, gdyby nie fakt, że niektórzy redukują wspomnianą nowoczesność do kwestii tylko wyglądu lub designu strony, spychając istotne z punktu widzenia użytkownika problemy na drugi plan.
Nowoczesna architektura strony
Architektura strony (lub struktura) to tak naprawdę pogrupowanie stron, odpowiednia ich hierarchizacja i przygotowanie adekwatnej nawigacji. Nowoczesne rozwiązania polegają na projektowaniu przepływu pomiędzy poszczególnymi treściami. Jeżeli mamy galerię, w której oglądamy po kliknięciu pełną wersję, kolejne zdjęcia powinny być na wyciągnięcie ręki, np. po przewinięciu lub kliknięciu przycisku dalej. Nie można zmuszać użytkowników do klikania „wstecz” to już nie te czasy.
Jeżeli strona będzie zmuszać użytkowników do myślenia i korzystanie z niej będzie mówiąc wprost: niewygodne, estetyka nic nam nie da. Najlepsze jest to, że architektura nie wpływa tylko na UX ale także na SEO. Dobry szkielet strony powoduje, że wyszukiwarka lepiej indeksuje treść i „rozumie” połączenie tematyczne poszczególnych podstron witryny.
Nowoczesny wygląd
Jest sprawą oczywistą, że nowoczesny wygląd przyciąga do siebie odbiorców. I to nie tylko w web designie. Dotyczy to wszystkich sfer życia. Nowoczesne ubranie, gadżety… cokolwiek. Chcemy być nowocześni, idziemy za postępem, modą bo taka jest nasza kultura. Chcemy się identyfikować z czasami, w których żyjemy. Wygląd determinuje czy dana rzecz jest atrakcyjna, czyli modna w danych czasach, czy wręcz przeciwnie jest przeciętna, zwykła i niemodna.
Cechy nowoczesnych stron internetowych:
Minimalizm – uproszczona forma i ograniczona ilość stosowanych środków wyrazu. Dużo bieli, dużo wolnego miejsca, mało ozdób i porządek.
Flat design – płaskość, prostota, brak gradientów, brak cieni i konturów.
One page – wszystko lub prawie wszystko mamy na jednej stronie, wystarczy przewijać góra – dół.
Parallax – efekt nieruchomych lub wolniej scrollujących się zdjęć, tła podczas przewijania dający efekt przestrzenny.
Tło koncepcyjne – filmy lub pokaz slajdów zdjęć w wysokiej rozdzielczości w tle strony
Ponadto:
- różnorodność fontów
- łagodne i stonowane kolory
- proste kształty
- jednolite tła
- brak cieni
- brak animacji
- wysokiej jakości zdjęcia i filmy
Tworząc nową stronę internetową chcemy aby wynik końcowy był zgodny z najnowszymi koncepcjami designerskimi. Ma przyciągać wzrok swoim wyglądem i powodować pozytywne doświadczenia.
Jeżeli chcesz zgłębić temat najnowszych trendów w web designie zapraszam do artykułu: Trendy w projektowaniu stron 2021.
Nowoczesne funkcje
O ile w części wizualnej mamy pewnego rodzaju dowolność powodującą, że jakiekolwiek próby definiowania i szufladkowania są nieco naciągane, o tyle w programowaniu, budowaniu kodu i wdrażaniu poszczególnych funkcji możemy porozmawiać bardziej konkretnie. Na formę nowoczesnych stron wpływa parę fundamentalnych czynników a są nimi według mnie (kolejność ma znaczenie): popularność urządzeń mobilnych, media społecznościowe, white hat SEO i marketing.
Obsługa urządzeń mobilnych
Urządzenia mobilne a raczej ilość takich urządzeń, która dziennie odwiedza strony internetowe, przyczyniły się do rewolucji projektowania stron. Era Responsive Web Design i tym podobnym zagadnieniom rozpoczęła się na dobre w 2013 roku. Od tej pory można zaobserwować pewną nowoczesność, która polega na tym, że cała zawartość na stronie może być wygodnie i swobodnie przeglądana na telefonach komórkowych. Wdrożenie Responsive Web Design jest proste bo nie wymaga dodatkowych komponentów – cały pomysł polega na odpowiednim napisaniu stylu CSS wykorzystując w nich zapytania medialne.
Responsive Web Design
Obecnie tworzenie stron zgodnie z regułą Responsive Web Design nie jest już dobrą praktyką jak to było w 2013 czy w 2014 roku – jest już standardem i to nawet nie podlega żadnej dyskusji. Jeżeli dana strona jest nieprzystosowana do nowego standardu jest karana przez algorytmy pozycjonujące stronę w wynikach wyszukiwania oraz przez samych internautów – rzadko są odwiedzane. Jeżeli jakaś strona wyświetla się niepoprawnie na telefonie komórkowym z pewnością wywołuje rozczarowanie twoich klientów. Tworzenie stron responsywnych zmienia całkowicie sposób w jaki powstają strony internetowe. Nie wykonuję się już projektu graficznego. Od razu powstaje responsywny szablo HTML, który potem jest dostosowywany do potrzeb i integrowany z systemem CMS.
Czytaj więcej o projektowaniu stron responsywnych.
Ekrany dotykowe
Kolejna sprawa związana jest z faktem nawigowania po stronach przy użyciu ekranu dotykowego. Do najczęściej zalecanych praktyk można zaliczyć – obieranie odpowiedniego rozmiaru elementów dotykowych, czyli linków i przycisków, tak aby można było je użyć z łatwością na ekranie dotykowym. Małe oraz położone blisko siebie elementy, trudniej jest precyzyjnie dotknąć, co w konsekwencji może powodować nieprawidłowe kliknięcia i zniechęcać tym użytkowników twojej strony internetowej.
Wytyczne na temat interfejsu użytkownika w systemie Android zalecają więc, aby minimalny rozmiar elementu dotykowego wynosił ok. 7 mm, co odpowiada 48 pikselom CSS (przy założeniu, że widok strony nie jest skalowany). Natomiast odstęp powinien wynosić minimum 5 mm czyli ok. 32 piksele. Dzięki zastosowaniu tych wytycznych, użytkownicy będą mogli bezproblemowo i celnie trafić w wybrane elementy.
Interaktywność
Tak to już jest że internauci lubią oceniać, pozostawiać swój ślad. Nawet zwykły licznik odwiedzin przykuwa uwagę i informuje czy artykuł jest często odwiedzany czy nie. Dobrą praktyką jest ocena gwiazdkowa danego produktu czy np. ocena zdjęć w galerii. Idealną sytuacją jest, kiedy strona internetowa sklepu daje możliwość dodawania produktów do ulubionych by potem np. porównać ich specyfikacje.
Wezwanie do działania czyli „Call To Action”
Obecnie, strony internetowe częściej wzywają do konkretnego działania np. „napisz do nas” z odnośnikiem do kontaktu lub „zostaw numer, oddzwonię” – formularz, który cały czas jest przyklejony do bocznej krawędzi strony. Stosując z umiarem na pewno dostrzeżemy większą skuteczność naszej witryny internetowej. Umieszczenie Live-Chatu zaliczam do tej samej kategorii zabiegów. Popularność takich rozwiązań jest konsekwencją naturalnej ewolucji stron i konkurencyjności oraz możliwości jakie daje nam technologia HTML5.
Uproszczone menu
Ale tak naprawdę uproszczone. Wielość opcji wprowadza chaos i prowadzi do paradoksu wyboru. Jak istotna jest ta zasada na stronach internetowych wie każdy kto dokonał najprostszych testów A/B z tym związanych. Otóż (i u mnie też to działa) strony z uproszczoną nawigacją są chętniej oglądane. 10 linków które jeszcze się rozgałęziają na 8 pozycji to naprawdę coś co zniechęca. Motyw który pacha projektantów do takich rozwiązań to „pokazanie że strona jest duża” taki zabieg może sprawić takie wrażenie ale co z tego skoro w testach takie rozwiązania wypadają słabo.
Przydatne treści
Cenniki usług i produktów, materiały pomocnicze, godziny otwarcia, ważne informacje kontaktowe i poradniki a najlepiej wszystko co może być przydatne dla twoich klientów. Im więcej materiałów tym lepiej, dla ciebie bo oszczędzasz czas sobie i klientom. Klienci mają wszystko na wyciągnięcie ręki a ty zmniejszoną ilość zapytań o przesłanie kolejny raz na e-maila instrukcji obsługi lub certyfikatu. Warto wspomnieć, że im więcej treści mamy na stronie tym mniej musimy inwestować w promocję bo strona pozycjonuje się sama. Obszerne strony zyskują także zaufanie, bo budzą respekt i wyglądają poważniej.
Optymalizacja
Skoro nowoczesne strony www to mobilność, warto pamiętać, że telefony komórkowe korzystają zazwyczaj z transmisji danych pakietowych, która ma mniejszą przepustowość w porównaniu z szerokopasmowym łączem komputera PC i jest stosunkowo kosztowna. Dlatego przy projektowaniu szablonu warto zadbać o to aby strona była profesjonalnie zaprojektowana od środka:
Zachowanie tych zasad da pozytywny efekt w postaci dobrych pozycji strony internetowej w wyszukiwarkach, ponieważ to właśnie prędkość jej działania i wydajność (czyli generowanie możliwie niskiego obciążenia) to obecnie jeden z najważniejszych czynników uwzględnianych przez algorytmy pozycjonujące. O tym na co zwrócić uwagę przy optymalizacji stron internetowych opisałem nieco szerzej w artykule: Przyspieszanie stron internetowych.
Czasy baroku mamy dawno za sobą. Promowanie prostoty i prędkości działania jest w obecnych czasach czymś oczywistym. Wystarczy naprawdę podstawowe wyczucie w technologiach komputerowych by wiedzieć, że za wszelką cenę należy unikać złożoności, bez której można się obejść.
Przyjazny CMS
Przyjazny CMS motywuje do aktualizowania treści i strona dzięki temu świetnie spełnia swoją rolę. Jest przydatnym źródłem informacji dla wszystkich zainteresowanych. Kontrowersją dzisiejszych czasów jest fakt, że niektórzy nadal tworzą strony statyczne na których latami nic się nie dzieje. Napisz chociaż raz w miesiącu że jest promocja, lub że doszedł nowy produkt do oferty – to zaledwie ok. 5 minut pracy!
Strona, która nie jest często aktualizowana nie ma znaczącej wartości, no chyba, że wyłącznie dzięki płatnym reklamom chcemy promować lokalny biznes. Jeżeli klienci zauważą, że na stronie nic się nie zmienia uwierzcie mi, strona www w kreowaniu pozytywnego wizerunku marki raczej. Jestem przekonany że w każdej branży i w każdym biznesie znajdzie się coś co od czasu do czasu warto zakomunikować publicznie. Czytaj więcej o systemach CMS a artykule: systemy zarządzania treścią.
Ale przede wszystkim: UX
W czasach kiedy wszyscy mają własne strony internetowe, najefektywniejszym sposobem na przebicie się do łask klientów jest dobrze zaprojektowana funkcjonalność. Nowoczesna strona internetowa bez dobrego UX (User Experience) jest w najlepszym przypadku niestety tylko ładna, warto ją wtedy dodać do jakiegoś zbioru najciekawszych stron i na tym niestety kończy się jej rola w Internecie.
Skupiając się wyłączenie na użytkowniku, jego potrzebach i wygodzie możemy liczyć na osiągnięciu sukcesu, i nie ważne czy chodzi nam tutaj o sprzedaż w sklepie, częste odwiedziny i zaangażowanie użytkowników naszego portalu czy wreszcie kreowanie pozytywnego wizerunku marki. Nie każ klientom myśleć – daj im to czego potrzebują.
Podsumowanie
Nowoczesne strony internetowe to serwisy, które charakteryzują się minimalistycznym designem oraz wysokiej jakości zdjęciami. Szablon jest skonstruowany za pomocą arkusza CSS a nie pociętej grafiki rastrowej jak to było parę lat temu. Od nowoczesnej witryny internetowej wymagamy tego, aby nie sprawiała trudności naszemu telefonowi i aby przeglądanie treści na urządzeniach mobilnych było tak wygodne jak to tylko możliwe. Optymalizacja pod kątem urządzeń mobilnych jest już możliwa do przeanalizowania za pomocą narzędzi online, które szerzej opisałem we wpisie: Jakość stron internetowych.
Od strony użytkownika oczekujemy interaktywności oraz tego, żeby była użyteczna na co dzień. Ma do czegoś służyć np. do kupowania lub szczegółowego przeglądania oferty. Ma być często aktualizowana przez właścicieli. Wreszcie ma zjednywać społeczności, za sprawą wtyczek społecznościowych. Tylko strony o takich cechach i funkcjach mają rację bytu w nowoczesnych i konkurencyjnych czasach. Biznesy niezależnie od branż przenoszą się do sieci. Warto zwrócić uwagę, że w większości przypadków to właśnie strony internetowe przenoszą na siebie ciężar komunikacji z klientami, mają wpływ na sukcesy i czasem decydują nawet o wynikach finansowych firmy.
