03-01-2017 | Premium

Blisko miliard stron internetowych na świecie stanowi o potencjale sieci. Przepisów na zbudowanie serwisu internetowego jest wiele. Podobnie jak gotowych platform i technologii internetowych. Ale to nie one powinny być celem i kryterium tworzenia witryn. W centrum zainteresowania zawsze stawiać powinniśmy użytkownika – odbiorcę serwisu WWW.

Użytkownik jako punkt wyjścia

Rozpoczynając projektowanie lub modernizację serwisu internetowego należy rozpocząć od ustalenia kluczowej odpowiedzi – dla kogo projektujemy witrynę internetową?

Jedną z najlepszych praktyk jest stworzenie modelu tzw. persony. To personifikacja danego segmentu odbiorców, którego wizualizujemy poprzez cechy demograficzne, geograficzne, psychograficzne i sieciograficzne.

Dzięki temu jesteśmy w stanie wyobrazić sobie użytkownika na WWW, jego potrzeby, oczekiwania czy motywacje. Rekomendowaną praktyką – stosowaną powszechnie w projektach e-commerce – jest pisanie scenariuszy aktywności do person.

Nawet próba odpowiedzi na kilka podstawowych pytań zdecydowanie ułatwi nam ustalenie celu i zakresu informacyjnego serwisu WWW.

Jak stworzyć personę i przygotować scenariusz?

Persona to ousobienie przedstawiciela serwisu. Tak jak w życiu – nie powinniśmy przesadzać. Wystarczy opracowanie 3-4 person reprezentujących naszą grupę docelową. Kluczowe jest by uwzględnić istotne aspekty naszego potencjalnego użytkownika WWW.

Persona – co warto uwzględnić?
• Dane demograficzne: płeć, wiek, miejsce zamieszkania, wykształcenie itp.;
• Zwyczaje zakupowe: dotychczas kupowana kategoria produktu, marki, czas, miejsca zakupów;
• Zestaw potrzeb: czym kieruje się konsument przy wyborze danej marki, powód zakupu, potrzeby jakie mają zostać zaspokojone poprzez kupno danego produktu.oraz elementy „sieciograficzne”
• Staż w Internecie – od kiedy użytkownik korzysta z Internetu?
• Miejsce – skąd użytkownik nawiązuje połączenie z siecią?
• Pora – czy użytkownik korzysta z Internetu rano, po południu czy wieczorem?
• Szybkość łącza – czy użytkownik posiada stałe łącze czy modem?
• Typ urządzenia– czy jest to PC czy tablet/smartfon?
• Przeglądarka – z jakiej i w jakiej wersji przeglądarki korzysta użytkownik?
• Monitor – jakiej wielkości i rozdzielczości jest ekran?
• Ogólne zachowanie internetowe – co użytkownik robi w internecie? Jakie witryny odwiedza? Czy dokonuje zakupów on-line?

Efekt „wow” w projektach WWW

Klasycznym problemem przy projektowaniu serwisów internetowych jest stworzenie czegoś oryginalnego, innego, innowacyjnego… A to wcale nie gwarantuje sukcesu. Dlatego w swojej praktyce doradczej stosuję podział na 5 kategorii serwisów WWW:

• „totalny innowator” – rewolucyjny serwis WWW kreujący nowe trendy online, który najczęściej zaskakuje odbiorców oryginalnością i niestandardowymi elementami.
• „lider opinii” – to witryna internetowa, która adaptuje pojawiające się trendy przy jednoczesnym zachowaniu dobrych praktyk. Nie sprawia problemów odbiorcom w poruszaniu się i odnajdywaniu informacji, a jednocześnie nawiązuje do dobrych wzorców internetowych.
• „wczesny naśladowca” – projekt internetowy, który powstał na bazie benchmarkingu – wdraża najlepsze rozwiązania dostosowane do specyfiki branży czy kategorii.
• „późny naśladowca” – witryna, która nadrabia zaległości wobec liderów krok po kroku adaptując sprawdzone rozwiązania w ramach swojego projektu online.
• „guzdrała” – witryna, która straciła poczucie czasu, trendów i smaku… Zwykle negatywnie zaskakuje formą, sposobem formatowania treści czy sposobem prezentacji jakością treści.

Rekomendowaną z punktu widzenia banku drogą jest model „wczesny naśladowca” lub „lider opinii”. Takie podejście pozwala eliminować zaniechania technologiczne i trzymać „rękę na pulsie” nowych rozwiązań.

Makieta versus projekt graficzny – czyli jak zacząć?

To że lubimy obrazki, zdjęcia i gotowe kolorowe formy nie zmienia faktu, iż rozpoczęcie prac od przygotowania projektu graficznego nie jest dobrym pomysłem.

Dlaczego? Za bardzo przywiązujemy uwagę do zdjęć i obrazków. Nasz wzrok przyciąga czerwony kolor przycisku z dużym oprocentowaniem. Omijamy zwarte bloki tekstu i… no właśnie. To droga donikąd.

Od dobrych kilku lat, tak agencje interaktywne jak i firmy porzuciły opracowanie koncepcji serwisu w oparciu o gotowe projekty graficzne.

Dziś tworzymy makiety (czasem zwane z języka angielskiego wireframes czy mock-ups), czyli szkielet serwisu, który zawiera kluczowe jego elementy – menu, bloki i boksy informacyjne, elementy i mechanizmy interaktywne.

A to wszystko w postaci zarysu serwisu pozbawionego grafik, kolorów i innych ozdobników. Takie podejście pozwala skoncentrować się na kluczowych elementach witryny, a nie obrazkach.

Makietowanie nie jest trudne, a obniża koszty i skraca czas opracowania serwisu.

Najczęściej projektujemy stronę główną i kilka kluczowych podstron. Ważne jest jednak by ocenić ich jakość. Dobrym sposobem może być tzw. test bagażnikowy S. Krugga. Na czym polega?

Otóż ocenie podlega podstrona w ramach serwisu poprzez znalezienie odpowiedzi na następujące pytania:

• Co to jest za witryna? (identyfikator, logo, nazwa)
• Na jakiej jesteś stronie? (tytuł strony, elementy identyfikujące)
• Jakie są główne kategorie witryny? (dostępne menu główne, menu dodatkowe, menu narzędziowe, stopka serwisu)
• Jakie są opcje wyboru na aktualnej podstronie? (nawigacja lokalna w ramach serwisu, menu kontekstowe, czyli gdzie przejść może użytkownik dalej)
• Gdzie się znajduję? (oznaczenie strony, ścieżka interaktywna, czyli tzw. breadcrumbs)
• Jak mogę odnaleźć to czego poszukuję? (wyszukiwarka, mapa serwisu)

Jak pisać, by użytkownicy chcieli nas czytać?

Zacznijmy od kluczowej informacji. Według guru użyteczności, amerykańskiego badacza Jakoba Nielsena, 79% użytkowników skanuje (nie czyta!) treści na WWW.

Niektórzy porównują czytanie stron internetowych do oglądania reklam telewizyjnych. Zatrzymujemy swój wzrok na milisekundy. Nie ma się co dziwić, skoro średni czas wizyty na stronie waha się od 15 do 30 sekund. Poza tym monitory utrudniają czytanie i rozumienie tekstu, a przy tym zabierają o 25% więcej czasu na przetworzenie informacji niż wersja drukowana .
Czy istnieją zatem ogólne zasady przygotowania treści? Owszem. Przede wszystkim powinniśmy być wierni tzw. odwróconej piramidzie. Czyli najpierw prezentować konkluzje i podsumowania, potem argumenty, a eliminować wstępy i wprowadzenia.

Generalnie powinny przyświecać nam 2 zasady przy redagowaniu informacji na WWW:

1. Jeżeli chcesz zaangażować wielu czytelników: koncentruj się na krótkiej, dobrze sformatowanej treści. To dobra strategia dla serwisów o charakterze promocyjnym czy sprzedażowym – wszędzie tam, gdzie liczy się impuls konsumenta.
2. Jeżeli chcesz angażować ludzi, którzy potrzebują rozwiązań i koncentrują się na szczegółach postaw na szersze przedstawienie tematu w wielu aspektach – potrzeb, cech, technologii, itp. To dobra strategia dla odbiorców – firm koncentrujących się na rozwiązywaniu
   zwykle skomplikowanych problemów (np. zaawansowane usługi finansowe, oferta dla biznesu)

Jak projektować, by użytkownicy się nie pogubili?

Jednym z niedocenianych elementów serwisów internetowych jest nawigacja, czyli sposoby dotarcia użytkownika do treści zamieszczonych w serwisie. Nie ma nic gorszego niż atrakcyjny komunikat czy ciekawy artykuł, którego nie mogą odnaleźć odbiorcy. Jak zatem sobie radzić z nawigowaniem po serwisie?

Oto 7 praktycznych sposobów – przepisów na nawigację w witrynie:

1.Struktura serwisu (Site Structure Navigation) – kluczowy element nawigacyjny, na który składa się menu główne serwisu. To ono prezentuje strukturę serwisu i umożliwia poruszanie się po niej

2.Funkcje nawigacyjne (Function Navigation) – to dodatkowe strony funkcyjne, narzędziowe, pomocnicze, zwykle prezentowane na górze (header) lub dole (footer). Przykłady funkcji nawigacyjnych to: mapa serwisu, zastrzeżenia prawne, polityka prywatności

3.Bezpośrednia nawigacja (Direct Navigation) – typ nawigacji pozwalający na bezpośrednie przejście do wybranych stron. Zwykle prezentowana w górnej części strony w postaci banera reklamowego czy linków/ikon skrótów

4.Nawigacja referencyjna (Reference Navigation) – rodzaj nawigacji prowadzący użytkowników do odpowiednich treści i/lub stron powiązanych z aktualnie prezentowaną użytkownikowi zawartością. Najczęściej w formie linku tekstowego. Dobrym przykładem nawigacji referencyjnej jest opcja „zobacz także”

5.Nawigacja dynamiczna (Dynamic Navigation) – rodzaj nawigacji dynamicznie generującej rezultaty wyszukiwania. Przykładem jest wyszukiwarka i wyniki wyszukiwania

6.Ścieżka interaktywna (Breadcrumb Navigation) – prezentacja aktualnej lokalizacji pozwalającej na cofnięcie się z poziomu ścieżki interaktywnej. Przykład to powszechnie stosowane przez serwisy elementy pod menu głównym lokalizujące odbiorcę np. Jesteś tutaj: Strona główna > O firmie > Historia

7.Nawigacja krokowa (Step Navigation) – pokazuje kolejność (sekwencję logiczną) stron z możliwością przejścia do poprzedniej, następnej, itp. Przykład: <Poprzednia 1|2|3|4|5 Następna>

Słów parę o technologii CMS

Content Management to już standard I jednocześnie fundament serwisów WWW. Pojawiają się jednak często dylematy związane z wyborem optymalnego rozwiązania. Sprawdźmy zatem, jakie istnieją możliwości:

1. rozwiązanie bezpłatne, oparte o licencję tzw. open source. Ich zaletą jest brak kosztów licencji przy atrakcyjnej funkcjonalności rozwiązania. Wadą jest brak gwarancji. Przykłady to Joomla, Typo3, WordPress,
2. Web content management – rozwiązania tworzone przez agencje interaktywne. Zaletą jest elastyczność dostosowania rozwiązania do potrzeb klienta i jego projektu. Koszty licencji zaczynają się już od 1.000-2.000 zł. Ciekawym przykładem jest rozwiązanie WIX, które za niski abonament pozwala stworzyć nowoczesne i łatwe w aktualizacji serwisy
3. Systemy klasy CMS – opracowane przez wyspecjalizowane firmy programistyczne. Polecane do większych rozwiązań (portale korporacyjne) i złożonych projektów.
4. Rozwiązania autorskie – napisane na potrzeby danej firmy i uwzględniające specyfikę projektu.

Podsumowanie

Projektując lub modernizując serwis pomyśl przede wszystkim o odbiorcy. To dla niego, a nie dla siebie czy współpracowników, tworzysz witrynę. Staraj się ustalić kim jest i jakie są jego potrzeby. Nie oceniaj serwisu po grafice. Zacznij od makiety, która pozwoli Ci się skoncentrować na istotnych elementach projektów. Dopiero ona powinna zamienić się w atrakcyjny projekt graficzny. Wreszcie pamiętaj o treściach – to one są „solą” serwisu. Od tego co przedstawisz, w jaki sposób i jak uatrakcyjnisz przekaz zależy sukces witryny. Nie zapominaj o technologii, dzięki której łatwiej będziesz mógł zarządzać serwisem.

Na koniec dekalog, czyli 10 rzeczy, o których musisz pamiętać przy projektowaniu nowego serwisu WWW:

1. Cel – ustal jasny cel serwisu (edukacja, informacja, sprzedaż, etc.)
2. Architektura informacji – ustal menu główne, narzędziowe i kluczowe elementy nawigacyjne
3. Kieruj użytkownikiem, daj mu informację zwrotną i „deskę ratunkową” – opisuj precyzyjnie pola, podawaj przykładowe wartości lub pożądane formaty danych
4. Uważaj na przeładowanie strony powodującej trudność w jej pobieraniu
5. Pamiętaj o treściach do internetu – jasny podział na sekcje, nagłówki, akapity
6. Pamiętaj o pozycjonowaniu (SEO), to dzięki dobrej jakości treści i kodzie witryny lądujesz wysoko w wynikach wyszukiwania.
7. Układ treści – użytkownicy przyzwyczajeni są do układu kolumn, tabel, boksów; w taki sposób buduj i dziel treści
8. Odbiorcy nie czytają, lecz skanują treści…
9. Wielkość czcionki ma znaczenie – dla osób starszych i niedowidzących nawet 14.
10. Jeżeli ważna jest szybkość czytania, stosuj dłuższe linie tekstu do 100 znaków per linia, z kolei gdy ważniejsza jest „jakość i komfort czytania” stosuj krótsze akapity – do 55 znaków per linia.

Po jedenaste, zamiast podsumowania

I wreszcie szukaj inspiracji. A te możesz odnaleźć choćby tutaj:

1. Awwards: www.awwwards.com,
2. Webdesignserved: www.webdesignserved.com,
3. FWA: www.thefwa.com.

(No Ratings Yet)

Loading...

Zobacz także

• 

  kwi 26 | 1812 Wyświetleń | No Comments

  Content Marketing od A do Z – co to jest i...
  

« Bielizna z… choinek Toaletowy dla smartfona »