Projekt strony zaczynamy od stworzenia ogólnego zarysu jej docelowego wyglądu. Na tym etapie określamy, jakie informacje chcemy przedstawić i gdzie dokładnie, powinny się one znajdować. Jakie elementy są istotne i do czego służą nam i/lub użytkownikom? Sprawdźmy!
Przed projektem - wybór rodzaju strony
Na początek zdecydujmy jakiego typu stronę tworzymy - Czy będzie to strona typu one-page’er, czy może, która będzie zawierała więcej podstron.
Ten pierwszy rodzaj sprawdzi się w przypadku prostych witryn www typu wizytówka. Jej dużą zaletą jest fakt, że dobrze wygląda na ekranach urządzeń mobilnych. Z kolei rozbudowana platforma ułatwi przejrzysty podział treści - taki układ dobrze jest zastosować, gdy chcemy zaprezentować więcej informacji. Załóżmy, że zajmujemy się budowaniem strony dla pracowni ceramiki. Znajdzie się na niej prezentacja oferty warsztatów oraz sklep, w którym można kupić gotowe wyroby. Tutaj warto więc stworzyć projekt, który będzie składał się z kilku podstron. Zaczynamy od stworzenia ogólnego zarysu jej docelowego wyglądu. Na tym etapie określamy, jakie informacje chcemy przedstawić i gdzie dokładnie powinny się one znajdować.
Struktura informacji
Przed przystąpieniem do projektowania prototypu powinniśmy zdecydować, jak będzie wyglądać struktura informacji na stronie. Zaplanujmy, co powinno znaleźć się w poszczególnych sekcjach, które podstrony pojawią się w głównym menu, a które będą widoczne w przyciskach drugiego stopnia. Aby logiczne zaplanować strukturę informacji, skorzystajmy z modelu odwróconej piramidy (jest to też popularna metoda wśród dziennikarzy podczas tworzenia tekstów).
Nawigacja
Dobrze zaprojektowana nawigacja umożliwia użytkownikowi intuicyjne poruszanie się po witrynie. Jej najważniejszym elementem jest menu, które zazwyczaj znajduje się na górze strony. Menu powinno pomóc w jak najszybszym odnalezieniu informacji. Dlatego nie może być zbyt skomplikowane. Najlepiej ograniczyć się do 4-5 sekcji. Jeśli musimy umieścić w nim więcej elementów, zdecydujmy się na menu dwupoziomowe. Dla wersji strony na urządzenia mobilne stosuje się zazwyczaj menu w formie „hamburgera”, czyli 3 poziomych kresek. Po najechaniu na nie myszką menu się rozwija. Warto pamiętać o różnych stanach menu (aktywny, normalny, po najechaniu) i zaprojektować inny wygląd przycisku dla każdego stanu. Odrębny wygląd aktywnego przycisku wynika z jednej z 10 heurystyk Nielsena - „widoczność statusu systemu”. Użytkownik powinien zawsze wiedzieć, w którym miejscu na stronie się znajduje i co aktualnie się dzieje.
Treści
Wysokiej jakości treści na stronie mają znaczenie z przynajmniej dwóch powodów. Po pierwsze, dzięki nim użytkownik zostanie na stronie i podejmie pożądane akcje (w naszym przypadku - zapisze się na warsztaty lub dokona zakupu). Po drugie, treści to jeden z najważniejszych elementów strony ze względu na algorytmy wyszukiwarek. Jeśli użytkownicy znajdują na stronie to, czego szukają, witryna ląduje wysoko na liście wyników wyszukiwania. To jeden z najlepszych sposobów na pozyskanie organicznego, czyli bezpłatnego ruchu. Pamiętajmy, że treści to nie tylko teksty. Należą do nich też grafiki, zdjęcia, filmy, materiały audio i inne elementy witryny zawierające informacje przydatne z punktu widzenia użytkownika. Na naszej dosyć prostej stronie użyjemy zdjęć i tekstów. To najczęściej spotykane rodzaje treści, które można znaleźć na prawie każdej użytecznej stronie www.
Zdjęcia
Na stronach www często spotyka się duże grafiki w tle lub zdjęcia, na których pojawia się tekst. Jeśli takie rozwiązanie ma się pojawić w naszym projekcie, nałóżmy na nie kolor (czarny przezroczysty). Dzięki temu tekst nie będzie się zlewać z grafiką i pozostanie widoczny. Czarny przezroczysty to najczęściej używany w tym celu kolor, ale można również korzystać z innych nasyconych kontrastowych barw. Do ich doboru trzeba jednak podchodzić ostrożnie. Jeśli brakuje nam jeszcze doświadczenia i wiedzy na temat kolorystyki, lepiej zostać przy neutralnym czarnym, który prawie zawsze będzie wyglądał dobrze. Najlepiej, jeśli zdjęcia na stronie będą oryginalne. Pomoże to w wypozycjonowaniu witryny i przyciągnie uwagę użytkowników. Szczególnie w przypadku sklepu internetowego jakość obrazu ma duże znaczenie - to jeden z najważniejszych czynników przy podejmowaniu decyzji o zakupie.
Teksty
Wybierając grafiki, nie zapominajmy, że nie mogą one całkowicie zastąpić tekstu. Najlepiej połączyć obie formy przekazu. Badania pokazują, że ludzki mózg reaguje na instrukcje o ponad 300% lepiej, jeśli tworzy ją tekst w połączeniu z ilustracją. Tworzenie tekstów na strony internetowe to bardzo obszerny temat. Możemy jednak wyróżnić kilka podstawowych zasad. Trzymanie się ich pomoże w pisaniu wartościowych i skutecznych treści.
- Język korzyści - to jedna z podstawowych zasad copywritingu. Chodzi o to, żeby w tekście skupić się na tym, co zyska użytkownik, który zdecyduje się na wybór naszej oferty. Każda cecha produktu powinna być połączona z wynikającą z niej korzyścią. Na przykład opisując tkaninę, z której wykonana jest kurtka trekkingowa, podkreślmy, że jest ona wodoodporna i chroni przed zimnem. Piszemy dla ludzi, nie dla robotów. Zdarza się, że twórcy stron tworzą teksty przede wszystkim z myślą o algorytmach wyszukiwarek internetowych. To błąd. Po pierwsze, w tej chwili roboty premiują treści, które są wartościowe dla użytkowników. Dodawanie słów kluczowych bez kontekstu, czy pisanie niskiej jakości długich tekstów, nie poprawi naszej pozycji na liście wyników wyszukiwania.
- Jasny komunikat - Przed przystąpieniem do tworzenia tekstu, dobrze jest wypisać sobie w punktach, co chcemy przekazać odbiorcom. Dzięki temu unikniemy pisania bez celu, a osobie czytającej tekst łatwiej będzie skupić uwagę na komunikacie.
- Podział na mniejsze części - Tekst zbity w duże bloki trudno się czyta. Dlatego dobrze jest go podzielić na akapity. Dobrze jest też pamiętać o nagłówkach i śródtytułach. Pomagają one w zrozumieniu komunikatu. Użytkownicy, często pobieżnie przeglądając tekst, zwracają szczególną uwagę właśnie na nagłówki i śródtytuły. Dlatego też powinny one jak najlepiej oddawać sens tekstu. Potraktujmy je jako formę streszczenia całości.
- Teksty na przyciskach - Powinny być krótkie (najlepiej, jeśli składają się z 2-3 słów). Ważne jest, żeby komunikat był zrozumiały. W tym celu nie musimy jednak posługiwać się pełnymi zdaniami.
- Typografia - Aby podkreślić hierarchię treści na stronie, podzielmy tekst na min. 3 kategorie. Zacznijmy od nagłówków pierwszego poziomu (h1). Użyjemy ich w tytule strony czy poszczególnych podstron. Druga to nagłówki drugiego poziomu (h2). Stosujemy je przy oddzielaniu poszczególnych sekcji tekstu. Jeśli nie mamy jeszcze bardziej szczegółowego podziału treści, etap trzeci może stanowić „zwykły” tekst.
Strona 404
Jest to kod błędu, który wyświetla się, jeśli użytkownik chce wejść na podstronę, która pod danym adresem nie istnieje. Możliwe, że na przykład usunąłeś tę podstronę, ale w jakimś miejscu zachował się do niej link. Użytkownik może też pomylić się przy wpisywaniu adresu lub skopiować go bez kilku znaków. Przyczyn jest wiele, ważne, żeby mimo takiej sytuacji postarać się, aby użytkownik pozostał na naszej stronie. Jak to zrobić: wyjaśnić co się stało - w 2-3 zdaniach napisać, co mogło być przyczyną; skierować użytkownika w inne miejsce - dodać linki do strony głównej/bloga lub gdzieś indziej, najważniejsze, aby pozostał na stronie; pozwolić to zgłosić - ustawić formularz do zgłoszenia, że taka strona nie istnieje; rozśmieszyć - podejść do tego w humorystyczny sposób, np. poprzez śmieszne zdjęcie na tej stronie (jak w przypadku witryny WebWave); powetować stratę - można nawet zastanowić się, czy nie dać takiej osobie jakiegoś niewielkiego rabatu - istnieje wtedy duża szansa, że kupi nasz produkt.
FAQ - Frequently Asked Question
W przypadku wielu działalności codziennie trzeba odpowiadać na pytania klientów i użytkowników. Kontakt jest bardzo ważny, jednak jeśli codziennie odpowiadamy na te same pytania, to poświęcenie tego czasu na inne działania związane z rozwojem mogą przynieść dużo lepsze rezultaty. Co zrobić w takiej sytuacji? Odpowiedzią jest stworzenie podstrony FAQ, czyli strony z najczęściej zadawanymi pytaniami. Trzeba oczywiście pamiętać, że nie mogą to być pytania przypadkowe. Warto się nad tym tematem pochylić i przeprowadzić analizę korespondencji otrzymywanej od użytkowników i na tej podstawie przygotować taką podstronę. Jeśli pytań jest dużo, to pogrupowanie ich tematycznie pozwoli na szybsze znajdowanie odpowiedzi. Często będzie zdarzać się sytuacja, że użytkownicy nie znajdą odpowiedzi na zadane pytania. Dlatego umieszczenie tam formularza dużo uprości. Poza tym, będziemy mieli informacje, jakie pytania należy tam wpisać. Aktualizacja pytań i odpowiedzi musi być przeprowadzana na bieżąco. Nigdy nie wiesz, z jakimi pytaniami przyjdzie kolejny klient. Pamiętaj o Call To Action - to bardzo dobre miejsce na jego umieszczenie, ponieważ potencjalny klient, który znalazł odpowiedź na swoje wątpliwości, chętniej dokona zakupu.
Cookies’y
Są to pliki wysyłane przez serwis internetowy i zapisywane w przeglądarce. Służą śledzeniu ruchu na stronie. Dlatego według prawa na każdej stronie, która wykorzystuje mechanizm cookies, musi się znaleźć stosowny komunikat. Na tej podstawie użytkownik decyduje czy chce korzystać z danej strony, czy nie. Nie ma wzoru, który należy stosować, dlatego istnieje wiele wersji takiego komunikatu. Najczęściej występuje w formie pop-upu z jednym lub dwoma zdaniami. Do tego zwykle jest dodawany link do dokumentu z polityką prywatności.
Certyfikat SSL (Secure Socket Layer)
Protokół SSL, zapewnia szyfrowane i bezpieczne połączenie ze stroną. Dzięki niemu dane, które wysyła i odbiera strona są szyfrowane. Do tej pory certyfikat SSL był standardem w przypadku stron, na których się płaciło lub zostawiało dane osobowe. Dzięki temu dane były bezpieczne. Oczywiście – jeśli przez stronę przechodzą płatności lub dane użytkowników, to posiadanie go jest niezbędne. Przeglądarka poinformuje użytkowników, że połączenie jest niebezpieczne, a użytkownik, któremu w końcu zależy na tym, żeby nikt nie wykorzystał jego danych lub konta, zamknie kartę i po prostu sobie pójdzie. Nawet jeśli prowadzimy bloga lub mały portal lokalny, to warto mieć certyfikat SSL i zapewniać użytkownikom bezpieczne połączenie. Zielona ikona kłódki lub inna informacja o tym, że strona jest bezpieczna, wiele znaczy dla użytkowników. Google chętniej pokazuje w wynikach wyszukiwania strony bezpieczne (czyli z certyfikatem SSL). Do tego użytkownicy chętniej zostają na takiej stronie, co przekłada się na niższy współczynnik odrzuceń i wyższy czas na stronie. Na szczęście udostępniamy go naszym klientom, więc jeśli chcesz zabezpieczyć połączenie ze swoją witryną, to darmowy certyfikat SSL w WebWave będzie dobrym wyborem.
Na koniec warto wspomnieć o pewnym “akcencie”, który dodatkowo podniesie poziom naszej strony i ogólnej działalności. Mowa tutaj o poczcie.
W obecnych czasach profesjonalna skrzynka to element, który może przechylić szalę zwycięstwa na Twoją stronę. Dlatego, jeśli zakładasz witrynę pod własną domeną, nie ma powodu, aby nie skorzystać z takiej możliwości. Oczywiście w naszym kreatorze założysz taką skrzynkę bez limitu kont pocztowych.
Rzecz jasna w zależności od naszej działalności i tego, co chcemy przekazać/osiągnąć prowadząc stronę, konieczne elementy na stronie mogą się od siebie różnić. Warto jednak znać te najpopularniejsze i najbardziej uniwersalne, aby stworzenie projektu było dla nas jak najłatwiejsze i przeszło sprawnie bez większych poprawek.
Autor: Webwave
