Internetthingsplus

Sztuka projektowania WWW

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.

Pytania do budowy scenariusza:

1.     W jaki sposób wchodzę na Twój serwis internetowy?

2.     Jakich informacji potrzebuję?

3.     Które strony serwisu są z mojego punktu kluczowe?

4.     Jakie czynności najczęściej realizuję w ramach Twojej witryny?

5.     W jaki sposób mogę się z Tobą skontaktować?

6.     Jak mogę samodzielnie sprawdzić informacje o finansach osobistych jak i ofercie/promocjach?

7.     Czy prezentowane informacje są wyczerpujące?

8.     Czy mogę samodzielnie dokonać symulacji/obliczeń?

9.     W jaki sposób mogę zażyczyć sobie kontaktu z doradcą bankowym?

10.  Czy i w jaki sposób mogę być informowany o ofercie bankowej (newsletter, SMS, e-mail, itp.)?

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ń.

 

Trendy w projektowaniu WWW w 2016 roku

  1. projektowanie elementów, które mają “płaski” wygląd (bez efektu „trzeciego wymiaru”).
  2. Upraszczanie kształtów i stosowanie podstawowych figur/brył (koła, prostokąty itp.)
  3. stosowanie ograniczonej palety barw -> większa czytelność WWW, zasada “mobile first” [przede wszystkim projektowanie pod urządzenia mobilne jak smartfon czy tablet]
  4. kumulacja kluczowych wartości – prostota, efektywność, powtarzalność, interakcje.
  5. używanie ograniczonej liczby powtarzalnych stylów, subtelnych przejść podkreślających działanie poszczególnych elementów www, minimalistycznych i czystych interfejsów
  6. Projektowanie serwisów RWD (Responsive Web Design) zakłada opracowanie 4 typów layoutów (PC/laptop/tablet/smartfon), które po identyfikacji urządzenia dostosowują layout serwisu do rozdzielczości danego urządzenia umożliwiając komfortowe przeglądanie witryny.
  7. Duże zdjęcia i grafiki jako element budujący emocje na
  8. WWWięcej inspiracji? MATERIAL DESIGN [filozofia Google’a dot. web designu] www.google.com/design/#resources 

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.

Makietować można na 4 różne sposoby: rysować i pisać po kartce papieru czy flipcharcie w salce konferencyjnej, wykorzystać powszechnie znane programy pakietu Ms Office jak PowerPoint czy Excel, wykorzystywać półprofesjonalne narzędzia makietowania takie jak Ms Visio, aż wreszcie sięgać po profesjonalne oprogramowanie jak Axure RP czy UXPin. Z tych ostatnich korzystają wyspecjalizowani Architekci Informacji, czyli pracownicy agencji, których zadaniem jest przygotowaniem makiet dla grafików. Dopiero wówczas graficy „kolorują” makiety przekładając je na końcowy projekt graficzny wzbogacony o zdjęcia, grafiki, kolory, itp. 

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)

Ramka TOP10 „NIEŚMIERTELNYCH” BŁĘDÓW WWW WG JAKOBA NIELSENA

  1. Wyszukiwarka – brak wsparcia dla odmian, liczby mnogiej, pomyłek, literówek, itp.
  2. PDF – PDF do druku i dystrybucji materiałów, ale nie do czytania online
  3. Linki – znać przeszłą i obecną lokalizację na WWW [oznaczanie kolorem odwiedzonych linków]
  4. Tekst – pisz do internetu, nie do druku. Koncentruj się na treści [śródtytuły, listy wypunktowania, wyróżnione słowa-klucze, krótkie akapity, “odwrócona piramida”, prosty styl i język]
  5. Czcionka – opcje zmiany wielkości czcionki (95% osób w wieku 40+ narzeka na zbyt małą czcionkę na WWW!)
  6. Tytuł strony – znaczenie dla wyszukiwarek, informacja dla użytkowników
  7. Obiekt jak reklama -> selektywna uwaga użytkowników na WWW ignoruje elementy podobne do reklamy [tzw. zjawisko banner blindness].
  8. Pogwałcenie konwencji -> standardy, etykiety, przyciski, stałe miejsca dla WWW (logo – prawy górny róg, narzędzia – prawy, górny box) dają komfort nawigacji i znajomości WWW użytkownikom
  9. Otwieranie nowych okienek przeglądarki – często blokowane przez użytkowników
  10. Brak odpowiedzi na pytania użytkownika -> najpopularniejsze pytanie użytkowników: ”Gdzie jest cena?” 

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.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Pin It

Zobacz także

« »