Informacje projektowe dla stron www

Jeśli projektowanie stron internetowych to Twoja dziedzina, to zapewne wiesz że użytkownicy którzy trafią na stronę najczęściej czytają dostępne na niej teksty. Potem próbują zapoznać się ze stroną. Najczęściej szukają jakiejś formy nawigacji.

W tym artykule skupimy się na specyficznej kategorii stron internetowych, portfolio. Dlaczego akurat portfolio? Ponieważ reprezentują ciekawą paletę kreatywności i technik twórczych. Tworzenie stron www, w tym stron portfolio, to szansa na zaoferowanie interfejsu i różnych form interakcji, a wszystko to kreuje przyjemne doświadczenie użytkownika. Czy estetyka, oryginalność i kreatywność zastępują łatwe użytkowanie, czy da się to wszystko zharmonizować?

Przyjrzymy się teraz różnym stronom portfolio w języku angielskim, wybranym przez zespół Smashing Team. Weźmiemy pod uwagę łatwe użytkowanie, doświadczenie użytkownika i własne spostrzegania.

Dawid Wadach

Na pierwszy rzut oka, ta strona nie jest łatwa w użyciu. Dlaczego? Po trzeba przesunąć myszkę na różne elementy strony, głównie obrazki, aby ujawniły się linki. Dzieci mogą być tym zafascynowane, ale dorośli za tym nie przepadają. Brak nawigacji to pierwsza rzecz którą użytkownik zauważa na tej stronie. Dopiero po odkryciu linków myszką, ujawniają się ukryte części strony, czyli portfolio stron zaprojektowanych przez Dawida Wadacha. Niestety, zatrzymujemy się aby poszukać nawigacji na stronie, której brakuje.

Guzik “menu” jest widoczny na stronie tuż obok logo, ale nawet gdy się przesunie myszką na ten guzik, nie wszystkie opcje się pokazują. Nic się nie zmienia, dopiero trzeba kliknąć na ten guzik aby pojawiły się elementy nawigacyjne. Menu powinno być widoczne zawsze, bez konieczności zmieniania elementów na stronie.

Pozytywne jest to że gdy się przesunie myszką na menu, wszystkie elementy są wyraźne. Czcionka jest duża i ładnie kontrastuje z pół-transparentnym czarnym tłem. Strona także posiada nawigację narzędzi w górnym roku po lewej stronie, a to dobre miejsce na nawigację. Posiada także możliwość dzielenia się stroną poprzez portale społecznościowe i opcję usunięcia efektów (które pojawiają się po przesunięciu myszki) na dole ekranu.

Wszystkie linki do tych opcji działają poprzez przesunięcie myszką, w przeciwieństwie to głównego guziku menu. Interfejs jest nieco zmieniony co utrudnia znalezienie strzałek po boku umożliwiających zjechania w dół. Ta zmiana była głównie estetyczna, i interfejs wygląda i działa jak potrzeba.

Podsumowanie

Ogólnie, z perspektywy wzoru i rozwoju, strona jest ładnie zrobiona. Korzysta z HTML5, CSS3 oraz JavaScript co sprawia że doświadczenie użytkownika jest przyjemne. Strona jest minimalistyczna i uporządkowana, także użytkownik nie jest przerażony bałaganem. Z perspektywy użytkowania, przydałyby się małe poprawy nawigacji, zwłaszcza zrobienie głównej nawigacji widocznej zawsze, aby poprawić doświadczenie użytkownika bez potrzeby zmieniania całego wyglądu strony.

Harry Vorsteher

Wchodząc na tę stronę, jesteś powitany animacją Flash który tłumaczy jak skorzystać z nawigacji, przed zobaczeniem strony. To nie jest plus, ponieważ większość użytkowników pewnie zamknie animację przed przeczytaniem i zrozumieniem co jest pokazane. Użytkownicy przywykli to pewnych zasad i się ich trzymają jeśli chodzi o to czego się spodziewają na stronach internetowych. Dlatego wprowadzenie nowego, skomplikowanego mechanizmu nawigacji, nie jest dobrą metodą na zatrzymanie użytkowników.

Gdy użytkownik zamknie tę animację, pojawiają się dwa zestawy linków nawigacyjnych które prowadzą do galerii zdjęć. Te zestawy są bez znaczenia ponieważ użytkownik musi kliknąć na duże koło pośrodku strony, i przeciągnąć je albo w lewo albo w prawo a wtedy pojawią się kolejne zdjęcie, przesuwające się w lewo lub w prawo zależnie od wybranego kierunku. Wpierw trzeba zauważyć tę nawigację i zrozumieć jak ona działa. Potem trzeba kliknąć na kategorie aby zobaczyć zdjęcia w małym formacie. Nawigacja jest utrudniona, ale znośna.

Najgorsze jest to gdy użytkownik kliknie na te małe zdjęcia chcąc zobaczyć je w większym rozmiarze. Wtedy tło strony zmienia się z jasno szarego na ciemno szary kolor, zdjęcia zajmuje większość ekranu, i nawigacja znika. Myszka zmienia się w strzałkę, i pojawia się krzyżyk pośrodku umożliwiający zamknięcie. To umożliwi użytkownikowi zobaczenie poprzedniego zdjęcia, kolejnego zdjęcia lub zamknięcie obecnego zdjęcia. Niestety, zmieniający się kształt myszki, przesuwające się zdjęcie, i denerwujące ładowanie przy każdym kliknięciu, nie ułatwiają niczego użytkownikowi. Jeśli użytkownik wybierze opcję “pełny ekran”, znika nawigacja przeglądarki, tym bardziej komplikując wszystko. To jest przykład złego wpływu Flash na doświadczenie użytkownika.

Podsumowanie

Podsumowując, interfejs i prezentacja fotografii są ładne i inspirujące, i możliwość Flash także. Nawigacja jest ciekawa oraz skomplikowana. Z perspektywy wzoru i tworzenia, można stronę podziwiać. Niestety, dla użytkownika, taka strona to koszmar, i może doprowadzić do frustracji. Jeśli chodzi o Flash, projektanci stron często skupiają się na pochwaleniu się swoją wiedzą zamiast skupić się na użytkowniku. Wybór Flash zamiast JavaScript do stworzenia animacji galerii to nie jest dobry wybór.

Wystarczy kilka poprawek jak np. stworzenie prostego menu które byłoby widocznie na każdej stronie ekranu. Zdjęcia w galerii powinny być wymierzone od nowa, tak aby zajęły 100% ekranu, aby użytkownik nie musiał zjeżdżać myszą w dół aby zobaczyć zdjęcie w całości. Przydałoby się zmniejszyć rozdzielczość zdjęć, aby szybciej się ładowały na stronie.

Justin Lerner

Strona Justina Lernera ma ciekawą nawigację i potwierdza, że strona łatwa w użyciu może być także estetyczna. Posiada tradycyjne menu poziome, tuż pod logo, czyli w miejscu w którym powinno się pojawić. W menu jest tylko pięć rzeczy, czyli pięć sekcji strony. Czcionka jest duża, widoczna, i każdy element menu zmienia kolor gdy się przejedzie po nim myszką, stając się jeszcze bardziej widocznym. Gdy się kliknie na każdy element w menu, powiększa się pokazując pełne treści tej sekcji. Czyli wszystko na stronie internetowej jest widoczne na jednej stronie, nie zaśmiecając przy tym interfejsu.

Strona jest prosta w użyciu ponieważ jest zaprojektowana jako kratka. Na tej stronie pojawia się drugie menu tuż nad głównym menu. Estetycznie na to patrząc, jest to nowoczesna metoda, i ładnie się komponuje ze stroną. Lecz ze strony użytkowania, podwójne menu może pogubić użytkownika ponieważ możliwe jest kliknięcie na tę samą nazwę sekcji w obu menu w celu sprawdzenia czy treści są te same. Menu jest przydatne ponieważ użytkownik widzi w której sekcji obecnie jest.

Podsumowanie

Generalnie, projektant strony postarał się, łącząc dobre wzoru z technikami kodowania aby stworzyć ładną stronę internetową która jest łatwa w użyciu. Można wprowadzić małe zmiany aby poprawić użytkowanie strony bez zmiany wyglądu, np. usuwając podwójne menu. Przydałoby się też więcej wolnego miejsca i kontrastujące czcionki, ponieważ trzeba najechać na treści aby odróżnić je od tego w tle.

Shelton Fleming

Pierwsze doświadczenie ze stroną Shelton Fleming może nie być najlepsze, ale zapewne zamieni się w przyjemne. Na powitanie, pojawiają się dwa kwadraty, jeden żółty “Ideas” (pomysły) i drugi szary “Experiences” (doświadczenia). Nie wiadomo o co tu chodzi. Nie ma żadnych elementów nawigacyjnych. Dopiero po przejrzeniu całej strony, użytkownik dowiaduje się że idea tej strony to zamienianie pomysłów na doświadczenia, i jest to zrozumiałe dla użytkownika, podkreślając markę firmy.

Nawigacja całej strony jest podobna do pierwszego ekranu – dwie sekcje umieszczona po przeciwnych stronach w poziomie. Jeśli przejedzie się po nich myszką, pojawia się pionowe menu z widocznymi elementami. Klikając na każdy element menu, użytkownik widzi jego treści tuż obok.

Podsumowanie

Konsekwentna i intuicyjna nawigacja, duże czcionki kontrastujące ostro z tłem, czyste obrazki, i użycie wolnego miejsca sprawiają że nawigacja po tej stronie jest przyjemna. Natomiast warto by było usunąć ekran powitalny który oferuje bardzo mało informacji i nie jest zrozumiały. Cała strona internetowa posiada dużo mocnych elementów marki, więc nie warto ryzykować frustrującą stroną na początku.

Chris Wang

Strona przedstawia projekty Chrisa Wanga, i to jest pierwsza rzecz jaką użytkownik widzi wchodząc na stronę – lista tytułów projektów wraz z ikonkami które otwierają się jak akordeon gdy się na nie kliknie. Pojawia się wtedy galeria zdjęć związanych z wybranym projektem. Na pierwszy rzut oka, użytkownik może nie wiedzieć że to jest lista projektów ponieważ słowo “Projekty” jest ciut jaśniejsze i wtapia się w tło. Tytuły projektów robią się pomarańczowe gdy przejedzie się po nich myszką, i można na nie kliknąć.

Można nawigować po stronie klawiaturą, czyli strzałkami aby przejrzeć różne projekty.

Podsumowanie

Nawigacja jest dość intuicyjna i łatwo jest przejść z projektu na projekt. Od razu pokazują się zdjęcia różnych projektów. Natomiast można poprawić możliwość zamknięcie projektu po obejrzeniu, ponieważ cały czas musi być otwarty jakiś projekt. Klikając na kolejny projekt, można zastąpić obecny tym nowym, ale lepiej by było gdyby pojawiła się wtedy lista projektów.

Jessica Caldwell

Na tej stronie nawigacja jest w formie przesuwania myszką po stronie. Ciężko znaleźć informacje o autorze strony internetowej ponieważ po zjechaniu w dół, pojawia się lista rzeczy na które nie można kliknąć. Jedynie są linki do stron społecznościowych i stron portfolio autora, czyli same zewnętrzne linki.

Użytkownik może się poddać usiłując znaleźć cokolwiek na tej stronie, ale wystarczy przejechać myszką po każdym kształcie diamentu w celu uzyskania podstawowych informacji, jak biografia autora czy dane kontaktowe. Każdy diament posiada projekty autora oraz informacje których użytkownik zapewne szuka. Niestety, nie wiadomo który diament posiada jakie informacje. Gdy się kliknie na rzeczy w diamencie, pojawiają się treści pozostałych diamentów. Wizualnie, ładnie to wygląda, lecz nie ułatwia użytkowania.

Podsumowanie

Na stronie jest dużo wolnego miejsca, a to jest dobre jeśli chodzi o użytkowanie. Dodatkowo, strona wygląda przyjemnie. Natomiast, aby ułatwić użytkowanie, warto poprawić nawigację umieszczając tradycyjne menu w górnej części strony i wstawiając proste menu po prawej stronie. Obecny diamentowy wzór może pozostać taki jaki jest ponieważ kojarzy się z autorem, ale można zadbać o to aby zajął mniej miejsca, aby użytkownicy widzieli linki na dole. Warto też zadbać o to aby można było kliknąć w te linki aby były przydatne.

McCormack & Morrison

Agencja McCormack & Morrison zadbała o to aby ich slogan “Good Old Fashioned New Media” (Dobre Starodawne Nowe Media) przemienił się na wizualne doświadczenie na ich stronie portfolio. Widać mocną tożsamość marki na stronie i uczucie retro poprzez wyraźne czcionki. Na głównej stronie pojawia się tylko logo i link do strony “o nas”, po lewej i prawej stronie na górze. Link “About us” (o nas) przedstawiony jest jako dymek rozmowy.

Na dole po prawej stronie jest umieszczony guzik “Our work” (nasze prace), zachęcając użytkowników do kliknięcia. Widać że strona nie jest jednostronna, ponieważ pojawiają się projekty agencji po zjechaniu w dół, a po przejechaniu w bok, pojawiają się kolejne zdjęcia wybranego projektu. Gdy się przegląda projekty, pojawiają się strzałki umożliwiające przegląd projektu. Można także przejrzeć projekty używając strzałek na klawiaturze. To stwarza przyjemną, szybką nawigację strony. Kolejny plus to jest to, że strona wykorzystuje cały rozmiar ekranu.

Podsumowanie

McCormack & Morrison ułatwiają użytkowanie strony, ale warto by było wprowadzić opcję przeglądania projektów nie po kolei. To nie jest wielki błąd strony ponieważ ma tylko cztery projekty, ale meczące jest to że trzeba przejrzeć wszystkie projekty aby trafić na wybrany. Kolejny błąd to jest to że nie wiadomo który projekt będzie przeglądany bez kliknięcia na każdy kolejny.

Moka

Argentyńska agencja Moka wie że ich strona przyciągnie potencjalnych klientów języka hiszpańskiego z Południowej Ameryki. Zamiast zaoferować opcję zmiany języków, korzysta z adresów IP klientów, zmieniając język na angielski lub hiszpański w zależności od ich lokalizacji. To ułatwia użytkowanie. Warto by było poinformować użytkownika o wybranym języku i dać możliwość zmiany na inny język ponieważ ktoś może odwiedzać stronę nie ze swojego urządzenia albo może woleć inny język.

Brakuje na stronie widocznej nawigacji, ale są instrukcje na dole które mówią żeby przesunąć myszką po bokach aby zobaczyć prace, i że można użyć strzałek klawiatury. Te instrukcje są mało widoczne, i ogólnie intuicyjna nawigacja nie powinna wymagać instrukcji. Nie ma widocznego menu na stronie. Wpierw pojawia się abstrakcyjny wzór wraz ze sloganem Moka, także użytkownik wie jaką stronę odwiedza. Nawigacja pojawia się po bokach wzoru w formie strzałek gdy przejedzie się po nim myszką. Niestety, nie jest to najlepsza metoda.

Klikając na te strzałki, użytkownik ma możliwość przejrzenia projektów firmy po kolei. Tu pojawia się problem ponieważ użytkownik musi przejrzeć wszystko aby znaleźć ten projekt którego szuka. Opis projektu jest ledwo widoczny i pojawia się po lewej stronie na dole i jeśli użytkownik nie zauważy opisu, będzie mu ciężko zrozumieć na co patrzy.

Kolejny problem na stronie to jest to że nie można kliknąć na logo aby wrócić na główną stronę. To jest standard na stronach, a właściwie strona Moka nie posiada żadnej możliwości powrotu do strony głównej poza klikaniem w strzałki po kolei. To może nieco zdenerwować użytkownika. Gdy się najedzie myszką na logo, pojawiają się informacje o firmie oraz dane kontaktowe. To jest dobry pomysł ponieważ interfejs pozostaje czysty. Niestety, nie jest to zbyt intuicyjne ponieważ użytkownicy najprędzej wejdą na logo tylko po to aby wrócić na główną stronę.

Podsumowanie

Ogólnie strona się minimalistyczna, czysta, ma dużo wolnego miejsca, i pokazuje portfolio firmy wyraźnie, a to wszystko kreuje pozytywne doświadczenie użytkownika. Przedstawienie możliwości wyboru projektów do obejrzenia, i możliwość obejrzenia ich nie po kolei, by poprawiło doświadczenie użytkownika. Dodatkowo, korzystne by było zaoferowanie łatwego powrotu do strony głównej, oraz wyświetlenie informacji o firmie i możliwości kontaktu.

Ostatnie myśli

Po przejrzeniu tych stron portfolio, widać że strona internetowa może być łatwa w użyciu a jednocześnie mieć przyjemny interfejs. Można by analizować każdą stronę dokładniej, ale warto pamiętać przede wszystkim że chodzi o jeden ważny element: dać użytkownikowi możliwość dotarcia do celu, bo przecież to jest najważniejsze w użytkowaniu. Jeśli chodzi o strony portfolio, użytkownik może chcieć dowiedzieć się więcej o autorze strony, zobaczyć jego projekty, lub się z nim skontaktować. Celem jest zidentyfikowanie i zaprojektowanie tego co chce się osiągnąć. Nie jest to łatwe, ale zostanie kiedyś wynagrodzone.

Gryfikacja staje się coraz bardziej popularna w internecie, ale co to jest dokładnie? Czy projektowanie stron internetowych bierze gryfikację pod uwagę? Czy jest używana właściwie? Spójrzmy na różne aspekty gryfikacji i zobaczymy jak można skorzystać lub nie skorzystać z jej efektów.

Tworzenie stron www uwzględnia gryfikację. To słowo stało się popularne w dziedzinie internetu, zwłaszcza jeśli zajmujesz się stronami internetowymi. Na pewno natknąłeś się na to słowo. Gryfikacja. Co to znaczy właściwie? Personalizacja polega na dodaniu atrybut i cech człowiekowi lub rzeczy, natomiast gryfikacja polega na dodaniu mechanizmów gier do czynności lub podmiotów nie związanych z grami. Celem jest zwiększenie zaangażowania i zainwestowania bazy użytkowników.

Podstawowa zasada psychologiczna która kryje się za gryfikacją to dostarczenie pozytywnego wzmocnienia każdej dokonanej akcji. W naszym świecie, kierujemy się zachętą, i rzadko kiedy dokonujemy cokolwiek bez spodziewania się jakiejś nagrody zwrotnej. Gryfikacja pozwala na dostarczenie zachęta tam gdzie jej brakuje, albo na zwiększenie obecnej zachęty. To wynika w uczuciu zadowolenia porównywanym do otrzymania nowej oznaki czy trofeum.

Spójrzmy teraz na strukturę która kryje się za gryfikacją i odkryjemy sposób w który może być wykorzystana do osiągnięcia celu. Zobaczymy także w jaki sposób może być użyta niewłaściwie, stwarzając różne komplikacje.

Feedback

Feedback, czyli opinia użytkowników, to podstawowa zasada doświadczenia użytkownika, podzielona na dwie istotne części.

1. Powiadamia użytkowników że ich zamierzona akcja została zarejestrowana.
2. Dostarcza wskazówki dotyczące reakcji systemu na tę akcję.

Bez feedbacku, użytkownicy nie mają pewności czy zbliżają się do zamierzonego celu.

Feedback w grach ma podobny cel. Powiadamia użytkownika że zamierzona akcja została zarejestrowana i że system na nią zareagował. To także natychmiastowy znak że użytkownik zbliża się do swojego celu. W grach, docieranie do małych celów pozwala dojść do większych celów, a to sprawia że gry są tak wciągające.

Bardzo ważne jest tempo tego feedbacku. Zbyt duża ilość feedbacku sprawia że użytkownik zostaje zasypywany nadmiarem informacji, natomiast zbyt mała ilość doprowadza do znudzenia. Prawidłowa ilość sprawi że użytkownik pozostanie zaangażowany, pozostanie na stronie i będzie nadal odkrywał nowe czynności. Jako biznes, chcesz aby siły zewnętrzne były powodem dla którego użytkownicy odchodzą, a nie coś co się dzieje lub czego brakuje na stronie co stwarza że użytkownik ją opuszcza.

W gryfikacji, feedback musi się pojawić jak tylko zamierzona akcja zostaje dokonana. Często te akcje nie są oczywiste i użytkownicy mogą nawet nie wiedzieć że osiągnęli jakiś cel bez feedbacku. Feedback mówi użytkownikowi co właśnie zrobił lub pokonał, i służy jako motywacja do odkrywania kolejnych akcji. Dobrze zaprojektowany feedback może być otworem do zaangażowania użytkownika z Twoją stroną.

Oznaki i osiągnięcia

Oznaki i osiągnięcia to częsta metoda używana do dostarczania feedbacku. Powiadomienia w różnym stylu często oznajmiają użytkownikowi o jego akcjach, i zachęcają do kolejnych.

Zamieniają się w cyfrowe trofea, czyli cyfrowe artykuły na które użytkownicy mogą wskazać aby pokazać swoje osiągnięcia. Kreuje to prawa do wychwalania się, a to stwarza chęć konkurowania o której później wspomnimy. Mimo że są bez znaczenia, te oznaki pozytywnie motywują. To tak jakby ktoś cyfrowo poklepał Cię po plecach, a to ma dobry wpływ na użytkownika niż strona bez gryfikacji.

Czynności doprowadzające do zdobywania oznak

• Wykonanie specyficznej akcji
• Wykonanie specyficznej akcji kilkakrotnie
• Zdobycie pewnego rankingu czy poziomu
• Czynność ograniczona czasowo
• Stworzone przez redaktorów

Misje

Misje to zestawy czynności które przynoszą oznaki i kończą się większym osiągnięciem. Powinny być trudniejsze niż zwykłe czynności, i powinny wymagać większego zaangażowania ze strony użytkownika. Można porównać misje do poziomów i etapów w tradycyjnych grach telewizyjnych. To jest sposób na stworzenie skali i poziomów osiągnięć po to aby nieprzerwanie dostarczać użytkownikowi nagrody i motywacje.

To wielu-warstwowe podejście napędza różne stopnie motywacji i zachęca użytkownika do głębszego zaangażowania ze stroną. Kontrolowane tempo gra kluczową rolę w misjach tak samo jak jest z feedback i oznakami. Misje które są wyjątkowo długie zmęczą użytkownika zanim się skończą, a misje które są za krótkie nie dostarczą zwiększonego poziomu osiągnięcia.

Postęp i rankingi

Suma oznak i dokonanych misji wskazuje na postęp użytkownika. Użytkownicy mogą zobaczyć który osiągnęli poziom czy ranking albo ile uzyskali oznak czy osiągnięć. Tu właśnie widzą jak blisko są do celu lub mogą porównać swój postęp z postępem innych użytkowników. Często w tym miejscu pojawia się jakaś tablica najlepszych graczy dzięki której zwiększa się motywacja i chęć do dalszego postępu aby pobić wyniki innych użytkowników.

W grach, jak np. w znanej grze Call of Duty, rankingi są sposobem na ustalenie poziomu wiedzy czy poświęcenia użytkowników. Tworzy to w pewnym sensie system klasowy. Użytkownicy często grają wśród podobnych użytkowników i chwalą się swoimi osiągnięciami. W gryfikacji istnieje ta sama idea która stwarza poziomy poświęcenia które zachęcają innych do osiągnięć. Każdy chce być najlepszy i ranking obok innego użytkownika jest najlepszym sposobem na chwalenie się jak blisko się jest ku celu.

Konkurencja

To ludzka natura sprawia że konkurujemy z innymi żeby zobaczyć na czym stoimy. Większość z nas ostro konkuruje, starając się przebić i przechytrzyć innych aby dojść do góry. Postęp użytkownika i zbieranie oznak to sposób na uzyskanie tej wyższości.

Użytkownicy często wracają do gry aby pokonać innych. Gdy tak się dzieje, u użytkowników zwiększa się zaangażowanie oraz lojalność wobec strony. Przez różne mechanizmy gry, użytkownicy mają większą zachętę pozostania na stronie i odkrycia wszystkiego co ma do zaoferowania. Po stronie biznesowej, więcej czasu na stronie i więcej odwiedzin na stronie przynoszą większy zysk reklamowy.

Motywacja

Głównym celem gryfikacji jest dostarczenie motywacji. Wszystkie wyżej wymienione elementy pracują razem aby stworzyć tę motywację. Feedback z oznak oraz osiągnięć kreuje postęp użytkownika który potem kreuje poziomy oraz rankingi. W międzyczasie powstaje konkurencja wśród użytkowników, a to oczywiście jest możliwe tylko przy idealnie stworzonej gryfikacji.

Z perspektywy biznesowej, dużo jest w tym sensu. Podstawowe elementy gryfikacji mogą być wbudowane w stronę całkiem łatwo. Natomiast, aby zyskać pełną siłę gryfikacji, trzeba włożyć w nią więcej czasu i chęci ponieważ istnieją różne pułapki. Jeśli firma dobrze wykona to zadania, może wtedy motywować użytkowników do większego zaangażowania i w ten sposób uzyska wiernych klientów.

Pułapki

Gryfikacja ma dużo korzyści, ale są też pewne pułapki które się pojawiają przy tworzeniu gryfikacji na stronie.

1. Motywacja może być tylko sztuczna, czyli istnieje ona tylko w grze a nie w produkcie który niby wspiera. Nie można jej porównać do programów które motywują do działania bo przynoszą korzyści materialne. W gryfikacji chodzi głównie o cyfrowe celebrowanie i możliwość przechwalania się.
2. Czasem metoda uzyskania najwyższego rankingu staje się trywialna gdyż najważniejszym aspektem jest uzyskanie tej wyższości. To stwarza problem jeśli chodzi o kierunek motywacji. Użytkownik wtedy kieruje swoją motywację w bycie najlepszym i nie zwraca uwagi na to co oferuje strona. Dla firmy, to może być bez znaczenia ponieważ użytkownik i tak spędza czas na stronie. Natomiast, to nie buduje lojalności marki ani prawdziwego zaangażowania które firma pragnie osiągnąć.
3. Kolejny powód to jest to że gryfikacja usuwa większość esencji gry, gdyż staje się metodologią typu wytnij-wklej i brakuje jej oryginalności. W grach chodzi głównie o odkrycie i pokonanie. Strony z gryfikacją posiadają pewien poziom tego ale nie aż tyle co tradycyjne gry. Mało która firma dba o takie błahostki.
4. Firmy zajmujące się gryfikacją sprawiają że łatwo jest dodać gryfikację do strony ale ciężko jest uzyskać prawdziwy potencjał tych elementów, które wymagają właściwych wzorów i pomysłu. Trochę czasu potrzeba na to aby stworzyć je właściwie. Słaba gryfikacja doprowadzi do płytkiego zaangażowania i małej ilości odwiedzin. Kiedy pojawiają się nagrody, jak się pojawiają i jak wtapiają się w grę, to elementy które trzeba dokładnie przemyśleć i właściwie zintegrować ze stroną. Zwykłe dodanie gryfikacji nie jest korzystne i doprowadza do słabych rezultatów.

Podsumowanie

Gdy gryfikacja jest właściwie zaprojektowania i użyta, przynosi firmom wiele korzyści. Natomiast gdy jest użyta byle jak i zaprojektowana szybko, traci na swojej wartości i przynosi krytykę. Elementy które dodają jej siły nie są trywialne.

Tak jak z projektowanie stron internetowych, należy poświęcić jej trochę uwag. Trzeba znać się na projektowaniu gier i zastanowić się nad jej wzorem. Trzeba wziąć pod uwagę różne pułapki. Gryfikacja może zwiększyć motywacje i zaangażowanie użytkowników oraz zwiększyć wartość i przychody Twojej strony. Żeby dotrzeć do tego celu, trzeba przyjrzeć się naszemu produktowi w kontekście gryfikacji zamiast brać gryfikację pod uwagę jako suplement czy dodatek.

Co myślicie o gryfikacji? Które strony by na tym skorzystały?

Co sprawia że stajemy się fanami stron internetowych oraz aplikacji które lubimy? Gdy się nad tym zastanowimy, dochodzimy do wniosku że strony i aplikacje które naprawdę lubimy mają wspólną cechę: duszę. Są prawie ludzkie bo posiadają emocjonalną inteligencję wplątaną w doświadczenie użytkownika. Projektowanie stron internetowych powinno brać pod uwagę właśnie to wszystko. Tworzenie stron www nie polega na stworzeniu pierwszej lepszej strony, ale takiej która ma duszę. Ta emocjonalna inteligencja powstaje poprzez przemyślany wzór interakcyjny i inne mechanizmy wbudowane w stronę internetową.

Te właśnie elementy nadają stronie czy aplikacji osobowości która zamieszkuje w naszych sercach. Nadając stronie duszy to klucz do pozyskiwania lojalnych fanów. Przedstawimy tu najlepsze przykłady takich interakcji i podkreślimy sposób w jaki nadają stronom i aplikacjom osobowości.

Co to są te emocjonalnie inteligentne interakcje?

Emocjonalnie inteligentne interakcje to stan lub zmiana stanu strony czy aplikacji na/w której wysyłanie wiadomości lub funkcjonowanie jest tak szczegółowe że tworzy doświadczenie użytkownika które jest prawie ludzkie i organiczne. Te interakcje dotyczą dużych doświadczeń, gdy np. cała strona pada, lub bardzo małych interakcji, gdy np. pojawia się mały błąd. Mogą być przyczyną różnych elementów m.in wysyłania wiadomości, treści na stronie, kolorów, wzoru, i reakcji na wkład użytkownika i wydajności systemu. Połączenie tych różnych doświadczeń kreuje duszę i osobowość strony internetowej. I to właśnie ta emocjonalna więź z użytkownikami buduje trwałą lojalność i wiernych fanów.

Przykłady

Zapewne znacie Twitter. Jest także taka strona, Bottlenose, która w prosty sposób daje użytkownikom szanse na skorzystania z Twitter’a. Aplikacja tłumaczy jak korzystać z serwisu i wyjaśnia wszystko w jasny sposób i z poczuciem humoru. Używa guzików takich jak “Makes sense” (załapałem) czy “Got it” (zrozumiano) które tworzą osobowość i zaufanie z użytkownikiem, bardziej niż typowe “Next” (następne).

Inne strony używają fajnych cytatów, wierszy, czy zdjęć na stronie aby dodać osobowości.

Natomiast inne strony piszą treść czy nagłówki w ciekawy sposób aby zaciekawić użytkownika bardziej. Niektóre strony dbają o wygląd swoich stron podczas błędów, m.in strony 404 aby użytkownicy cierpliwie zaczekali aż błąd zostanie poprawiony.

Warto także zadbać o kampanię wysyłania maili lub wiadomości, aby zachęcić użytkownika do komunikacji. Dodając także linki do Twitter, dajesz od razu użytkownikowi szansę aby coś o tej strony czy tym doświadczeniu napisał.

Czasem możesz dodać takie elementy przy rejestracji na stronie, jak np. zrobiła strona Pinterest. Strona zadbała o dodanie osobowości swojemu serwisowi przy tworzeniu konta. Gdy użytkownik wpisuje login oraz hasło, dostaje wiadomość “Looks good” czyli “wygląda ładnie.” To drobiazg, ale ma nieco wpływ na rejestrującego się użytkownika.

Inne strony przy rejestracji dodadzą mały element jak np. obrazek czy śmieszny napis które reprezentują stronę, każdy na swój sposób. Czasem wystarczy śmieszna wiadomość aby dodać stronie osobowości i charakteru. Warto też zadbać o wiadomość gdy coś na stronie nie jest jeszcze gotowe, aby użytkownik chętniej powrócił. Stworzysz wtedy emocjonalną więź z użytkownikiem w porównaniu do zwykłej strony z brakiem info i tylko wpisanym błędem. Strona Feedburner wpisała na niegotowej stronie coś w stylu “Twój feed jest tak nowy, że jeszcze bawimy się folią bąbelkową. Zajrzyj tu później po więcej statystyk.”

Bierz przykład ze strony VisualHub, która wykorzystała proces instalacji na Mac’ach w celu interakcji użytkowników, zachęcając użytkowników do zapoznania się z ich instrukcją obsługi. Pokazała wizualnie żeby dodać VisualHub do aplikacji, a instrukcję do mózgu, aby ją zapamiętać i mieć pod ręką.

Podczas instalacji aplikacji 37Signals Highrise, masz szansę zagrać sobie w Kółko i Krzyżyk z komputerem. To jest dobry pomysł na zajęcie czasu użytkownika podczas instalacji. Zamiast czekać, użytkownik ma co robić, i jest to przyjemne zajęcie.

Strony takie jak Mint.com wiedzą jak ważne dla użytkowników są pieniądze, więc kiedy strona nie działa, starają się obniżyć ten poziom stresu. Gdy użytkownik nie ma dostępu do swoich finansów, może się zdenerwować, więc Mint.com przekazuje informacje w prosty, nieco śmieszny sposób, mówiąc że pieniądze są bezpieczne.

Dodaj swojej stronie internetowej osobowości i duszę

Dodawanie tych elementów do swojej strony internetowej w celu dodania duszy, to głównie tworzenie interakcji i wzorów tych interakcji. Miej dobre intencje jeśli chodzi o doświadczenie użytkownika w momentach kiedy tego najbardziej oczekuje, a pokażesz osobowość swojej strony i zbudujesz lojalność. Weź przykład ze stron i aplikacji wyżej wymienionych i zastanów się nad dodaniem emocjonalnej inteligencji.

Te serwisy stworzyły lojalność wśród użytkowników przez wytrwałość i zwracanie uwagi na szczegóły. Takie drobiazgi robią różnicę jeśli chodzi o sukces strony czy aplikacji. Zastanów się nad tymi doświadczeniami a zobaczysz że uzyskasz wiernych fanów, a swojej stronie dodasz życia i duszy.

Projektowanie stron internetowych wiąże się z wzywaniem do akcji, zwłaszcza w dziedzinie doświadczenia użytkownika. Wzywanie do akcji to element na stronie internetowej który wymaga od użytkownika jakiejś akcji. Najczęściej występuje w formie guzików na które można kliknąć żeby np. coś kupić – Kup Teraz!, lub przeczytać więcej o czymś na innej stronie – “Dowiedz się więcej”. Te guziki oczekują jakiejś akcji ze strony użytkownika.

Jeśli Twoja dziedzina to tworzenie stron www, musisz zadbać o efektywne guziki wzywające do akcji, które zaciekawią użytkownika i zachęcą do kliknięcia. Oto kilka technik oraz przykładów.

Najlepsze przykłady na wezwanie do akcji

Aby dodać guziki wzywające do akcji do swojego interfejsu, musisz się najpierw nad tym dobrze zastanowić i wszystko zaplanować. To musi się stać częścią Twojego prototypu i architektury informatycznej aby działały właściwie. Zastanów się także nad ich wzorem.

Zachwyć użytkownika rozmiarem

Na stronach internetowych, rozmiar elementów jest równoległy z ich ważnością, czyli im większy tym ważniejszy. Zastanów się nad ważnością niektórych akcji na stronie and stwórz wzory guzików według tego.

Rozmiar guzików wzywających do akcji przeciw otaczających elementów – czasem te guziki mogą być większe od logo. Mimo że logo jest ważne i znajduje się przeważnie na górnej części strony, wzrok jest skierowany od razu na te guziki które są nieco większe. O to chodzi, aby użytkownik zauważył i kliknął.

Czasem na stronie możesz mieć kilka takich guzików, bardziej i mniej ważnych. Użyj różnych rozmiarów aby podkreślić ich ważność na stronie. Na przykład, guzik “Zarejestruj się” może być większy od “Czytaj dalej” jeśli Twoim głównym celem jest to aby użytkownik się zarejestrował.

Miejsce które zachęci użytkownika

Gdzie umieścisz guziki wzywające do akcji na stronie internetowej jest istotne w przyciąganiu wzroku odwiedzających. Jeśli umieścisz w takim miejscu jak np. górna część strony, ludzie prawdopodobnie zauważą te guziki i wkroczą do akcji jeśli nie od razu to na pewno jak tylko skończą czytać coś na stronie. Ludzie zapamiętają gdzie widzieli ważny guzik jeśli będzie na górze głównej strony lub w innym równie widocznym miejscu.

Możesz także dodać te guziki w miejscu przeznaczonym specjalnie do tego, np. jako warstwa nad pozostałymi elementami na stronie lub na samym środku strony. Jeśli umieścisz na środku strony, otaczające elementy powinny być znacznie mniejsze, tak aby guzik był najbardziej widoczny. Nie musi on być także w rażącym kolorze, ważne że będzie większy i wyraźniejszy niż wszystko dookoła, a użytkownik na pewno zauważy.

Korzyści pustego miejsca na stronie

Puste miejsce na stronie, znane jako “white space” to też dobry sposób na wyróżnienie guzika od reszty. W tym przypadku może on być mały i prosty ponieważ i tak wyróżni się od reszty jeśli dookoła jest dużo pustego miejsca.

Ważne natomiast aby ta przestrzeń była powiązana jakoś z wezwaniem do akcji. Jeśli masz jakieś sposób na zachęcenie użytkownika do kliknięcia na guzik, zredukuj puste miejsce i wypełnij bardziej tymi elementami. Dodając ładną grafikę tworzysz ładniejsze miejsce które bardziej zaciekawi użytkownika w porównaniu do pustej strony.

Użyj kontrastujących kolorów

Wybór kolorów jest niesamowicie ważny. Wybierz kolory guzików które kontrastują z kolorami które je otaczają w tle. Chodzi o to aby użytkownik zauważył wezwanie do akcji. Jeśli masz czarno-białą stronę, dodaj guzik w innym kolorze np. w jaskrawym niebieskim, a użytkownik od razu zauważy. Nawet jeśli ten guzik znajduje się na zdjęciu, nadając mu ostry kolor sprawisz że zostanie zauważony.

Zaoferuj alternatywne akcje

Strona internetowa może mieć kilka guzików wzywających do akcji. Czasem nawet trzeba dodać więcej niż jeden aby użytkownik zdecydował się na ten najważniejszy ruch. Powiedzmy że ta pierwsza akcja to rejestracja. Daj użytkownikowi szansę aby więcej poczytać o serwisie, zobaczyć filmik, itd.

Te drugie akcje mogą być obok tych pierwszych, np. na górnej części strony, ale powinny różnić się kolorami. Wtedy użytkownik wie że może albo się od razu zarejestrować, albo więcej poczytać. Pierwsza akcja powinna mieć bardziej ostry kolor aby użytkownik wpierw zauważył tę akcję zanim zobaczy kolejne. Te dwa guziki powinny być blisko siebie aby oddzielić je od reszty strony.

Czasem druga akcja może być pod tą pierwszą jeśli chcesz aby użytkownik bardziej zwrócił uwagę na ważniejszą akcję. Ta druga akcja może być wtedy niżej, i może być mniej wyraźna, ale ważne aby była blisko tej pierwszej żeby użytkownik jej nie pominął.

Podkreśl że to pilna sprawa

Używaj wyraźnych, odważnych i rozkazujących słów może przekonać użytkownika że nie powinien dłużej czekać tylko od razu wkroczyć do akcji bo inaczej coś ważnego przegapi. Jeśli masz guzik “Kup Teraz”, możesz od razu wpisać tam cenę promocyjną aby użytkownik wiedział że czekając dłużej może nie skorzystać z promocji.

Zastanów się nad słowami której bardziej zachęcą kogoś do akcji. Zamiast “Kup” wpisz “Kup Teraz”. Słowa takie jak “teraz”, “natychmiast” i “już” podkreślają że sprawa jest pilna. Wtedy użytkownicy chętniej klikną.

Powiedz użytkownikom że to proste

Często użytkownik waha się przed podjęciem akcji z obawy że to będzie trudne, drogie lub czasochłonne. Zadbaj o te obawy, a zyskasz więcej chętnych. Dopisz w guziku że to jest “proste”, “bezpłatne” lub że zajmie tylko parę minut, jeśli oczywiście to wszystko jest prawdą.

Nie wprowadzaj użytkownika w błąd! Jeśli coś jest bezpłatne, zapewnij go że nikt nie zapyta o konto bankowe chyba że to jest tylko próbny serwis na określony czas, o tym też musisz wspomnieć, np “Bezpłatne demo na 30 dni.”

Powiedz użytkownikom czego mogą się spodziewać

Użytkownicy stron wahają się przed wzięciem czegoś na stronie ponieważ brakuje im zaufania. Czasem jakiś link oferuje darmowy serwis, nie uprzedzając o tym że ten serwis będzie bezpłatny tylko przez jakiś czas. Aby bardziej zachęcić użytkowników i zwiększyć zaufanie, powiedz im czego mogą się spodziewać. Pomyśl o potencjalnych pytaniach które mogą mieć, i postaraj się na nie odpowiedzieć w miarę szybko.

Popatrz na guzik Firefoksa, który pokazuje którą wersję programu ściągasz, że jest za darmo, że jest na Twój system, w wybranym języku i jaką ma wielkość. Dzięki takiemu guzikowi, użytkownik ma odpowiedzi na wszystkie pytania. Ważne aby powiedzieć czy dany program będzie później płatny i czego można się spodziewać po wersji demo.

Projektowanie guzików

Weź pod uwagę wymienione przykłady i techniki, i zajmij się projektowaniem swoich guzików.

• Pomyśl o tym czy potrzebujesz jednej akcji czy dwóch, i która jest bardziej ważna.
• Ustaw je tak aby ta bardziej ważna była bardziej wyraźna.
• Zastanów się nad tym czy warto wpisać czego użytkownik może się spodziewać.
• Ustal idealne miejsce na wezwanie do akcji, np. górna część strony.
• Odpowiedz na pytania użytkowników w kilku słowach.
• Pomyśl o pustym miejscu, o rozmiarze, o kolorze, i o odseparowaniu guzików od pozostałych elementów. Najważniejsze aby użytkownik zauważył akcję lub akcje, które mogą się od siebie albo różnić albo wyglądać tak samo jeśli są równie ważne.
• Jeśli chcesz aby użytkownik miał możliwość poczytania przed rejestracją, zadbaj o to aby i ten link był widoczny i wyraźny.
• Jeśli masz dużo na stronie, zadbaj o ostry kolor guzika aby został zauważony od razu a nie pominięty. Pomyśl także o jego rozmiarze.

Pamiętaj, dobrze zaprojektowany guzik wzywający do akcji zachęci więcej użytkowników do skorzystania z Twojej strony czy serwisu. Wyobraź sobie siebie jako tego użytkownika który wchodzi na tę stronę. Ta strona o coś prosi, klikniesz?

Często się zdarza że przed otwarciem nowego produktu, potrzebna jest strona teaser, czyli strona “Już wkrótce,” która przygotowuje do uruchomienia tego nowego produktu. Są cztery główne elementy z których powinna składać się ta strona, i najlepiej by było gdyby zdobyła wysokie oceny ze wszystkich. To może być trudne, i tak się zdarza że często takie strony mają tylko dwa lub trzy elementy. Ważne jest aby wziąć wszystkie elementy pod uwagę aby projektowanie stron internetowych było efektywne.

Te elementy to:

• Pamiętliwość

• Istnienie w sieci

• Pożądanie

• Możliwość zbierania danych

Po co mi taka strona?

Często widzimy różnego typu teasery na stronach internetowych, ale zastanów się, po co właściwie strona teaser? Tworzenie stron www nie różni się od tworzenia stron teaser, to i to wymaga sporo czasu i poświęcenia.

Teaser jest przydatny gdy się uruchamia nowy produkt. Informowanie zainteresowanych o przewidzianym produkcie jest przydatne ponieważ wtedy ludzie czekają na ten produkt i są w pewnym sensie z nim zapoznani. Im wcześniej i im więcej wiedzą o nim, tym lepiej dla Ciebie. Tworzysz wtedy erę oczekiwania i ludzie z chęcią czekają na wielkie otwarcie. Pamiętaj, ludzie lubią wiedzieć o nowościach przed czasem, więc skorzystaj z tego.

Skuteczne narzędzie motywacyjne

Motywacja jest pewnie ważniejsza od innych czynników. Gdy nad czymś ciężko pracujesz i nie masz gwarancji sukcesu, wątpienie w siebie i tracenie motywacji nie przychodzą z trudnością. Przez to często upadają obiecujące projekty i pomysły.

Informowanie i zbieranie adresów mailowych przed uruchomieniem produktu niszczy ten brak motywacji na dwa sposoby: po pierwsze, powoduje że Twój projekt istnieje w świecie i trudniej zrezygnować bo nie chcesz zawieść ludzi, i po drugie, rejestrowanie się przed czasem pokazuje Tobie że jest popyt na Twój produkt, i powoli znikają wątpliwości. Biorąc to pod uwagę, teaser jest konieczną częścią strategii internetowej każdego produktu.

Wiesz już dlaczego, ale pewnie zastanawiasz się teraz jak to zrobić?

Strategie teaserów

Stwórz mocną tożsamość

Pierwszy element dobrej strony teaser to pamiętliwość. Zadbaj o mocną markę, czyli o wszystkie wizualne atrybuty Twojego produktu, tak jak logo, kolory, czcionki, styl, grafika, itd. Po uruchomieniu produktu, strona może się różnić od teasera, więc mając mocną markę możesz zapewnić sobie ciągłości. Możesz mieć ładne logo i mocny kolor który będzie się kojarzył z tożsamością Twojej marki, ale nie musisz się trzymać jednego koloru. Zadbaj o całkowity wzór strony, o czcionki, o kolory, itd. Strona może być prosta, ważne aby się wyróżniała.

Użyj bajerów

Wzór Twojej strony może się wyróżniać jeśli wprowadzisz do swojej marki jakieś bajery, czyli coś czego inne strony nie mają. Ciężko jest czasem wymyślić coś czego inni nie mają już, ale dzięki takim bajerom, zyskasz na popularności w szybkim tempie. Pomyśl o animacji na stronie, którą możesz stworzyć przez CSS. Animacje czasem są denerwujące na stronach, ale pasują na teaserach. Pomyśl o opowiedzeniu historii swojego produktu i o przedstawieniu informacji o nim w ciekawy sposób.

Skorzystaj z potęgi stron społecznościowych

Strony społecznościowe jak Twitter, Facebook, oraz Google+ pomogą podczas etapu “Już wkrótce.” Użycie takich stron w sieci pomaga zebrać zainteresowane osoby przed uruchomieniem strony. Możesz dodać linki do tych portali na swojej strony, które zapewnią że ludzie będę wiedzieli na bieżąco o nowościach, albo stwórz mailing listę na którą zainteresowani mogą się zapisać aby dostawać maile z aktualnościami. Pozwól aby inni mieli dostęp do strony i aby mogli ją dalej linkować np. klikając na “Lubię to” lub “Tweet”.

Daj coś od siebie

Ludzie podzielą się Twoim teaserem w sieci jeśli wiedzą że coś dostaną z powrotem, np. jeśli zaproszą na stronę jakąś ilość znajomych, dostaną coś w nagrodę. Nie musi to być nagroda pieniężna, wystarczą darmowe ikonki i inne drobiazgi do pobrania, lub dodatkowe punkty czy dostęp do produktu. Raczej nic nie stracisz, a możesz dużo zyskać.

Spraw, aby ludzie to chcieli

Możesz korzystać z różnych metod, ale nic nie zdziała cudów jeśli ludzie zwyczajnie nie zechcą Twojego produktu. Jeśli nie dowiedzą się do czego produkt służy i w czym jest lepszy od innych, mogą się nie podzielić teaserem z innymi bo nie będą wiedzieli właściwe po co chcą czekać na uruchomienie strony. Z tego powodu, wiele teaserów nie zdaje egzaminu – ponieważ nie sprawiają że chcesz korzystać z tego produktu. Najłatwiejszy sposób to wyjście na przód i powiedzenie co Twój produkt robi. Pokaż screen shoty (zrzuty ekranu), wklej filmik lub zdjęcia, lub opisz wszystko w ciekawy sposób. Jeśli teaser jest atrakcyjny, ludzie pomyślą że produkt też będzie.

Zbieranie danych

Jeśli teaser będzie efektywny już w sieci, pojawi się nowy kłopot, czyli co zrobić z gośćmi na stronie? Najłatwiej byłoby pozbierać adresy mailowe i dodanie ich do swojej listy mailowej. Możesz także podzielić się ankietami z gośćmi lub pozwolić aby czatowali z Tobą na żywo.

Co dalej?

Teaser to tylko część sukcesu. Efektywna kampania przed uruchomieniem produktu to także konto na Twitterze, strona na Facebooku, blog, itd. Teaser jest jednostronny, natomiast na tych wyżej wymienionych stronach, ludzie mogą komentować, tweetować, lub polubić Twój produkt. Dzięki nim, zdobędziesz komentarze i opinie które pomogą pozbierać nowe pomysły i poprawić produkt tak, aby jeszcze bardziej odpowiadał użytkownikom.

W dzisiejszych czasach, wydaje się że wszystko jest na Internecie i życie gazet jest zagrożone. Tak jednak nie jest ponieważ popularne gazety i czasopisma mają coraz więcej czytelników. Dlaczego? Dlatego że mają ciekawe teksty, zachęcając do tego swoich wiernych czytelników. W ten sposób utrzymują swój dobry image i sprawiają, że czytanie ich kojarzy się czytelnikom z czymś przyjemnym.

Tą samą metodę należy brać po uwagę jeśli chodzi o projektowanie stron internetowych. Ciekawy tekst, nawet jeśli jest długi, przyciągnie czytelników i sprawi że do tej strony powrócą, a to jest podstawa gdy dba się o tworzenie stron www.

Metody nawigacyjne

Warto pomyśleć o nawigacji na stronie. Często wydaje nam się, że mając na stronie wiele metod na wyszukanie rzeczy ułatwi czytelnikom nawigację po stronie, lecz efekt jest odwrotny. Duża ilość linków, menu, widgetów oraz reklam stworzy bałagan. Niektóre strony zawierają listy Najpopularniejszych Artykułów lub pokazują artykuły które czytają Twoi znajomi na Facebook’u, ale czy te metody są skuteczne czy nie? O tym możesz się dowiedzieć przez Analytics. Jeśli nie, trzeba usunąć tego typu listy żeby nie zajmowały miejsca i nie zaśmiecały strony.

Jest różnica pomiędzy rozsądną metodą nawigacji strony internetowej a dostęp do wszystkich treści strony jednym kliknięciem. Zastanów się nad tym, w jaki sposób użytkownicy Twojej strony znajdują to czego szukają? Czy używają linków nawigacyjnych, czy od razu wędrują do wyszukiwarki na stronie?

Zmiana metod nawigacyjnych nie musi być czarną magią. Wystarczy usunąć nadmiar z menu lub zrobić dokładny research wśród użytkowników aby zobaczyć z których metod ludzie korzystają a z których nie za bardzo. Warto wziąć pod uwagę fakt że użytkownicy rzadko klikają w coś co jest mało czytelne lub zaśmiecone. Jeśli w tym tkwi problem, czas przyjrzeć się czcionkom i przestrzenność.

Czcionki, przestrzenność i inne eksperymenty

Wybór czcionki może mieć ogromne znaczenie na wygląd treści strony i na jej czytelność. Zwróć uwagę na czcionki nagłówek oraz tekstu. Czasem czcionka nagłówka może być przyciągająca, lecz tekst może być nieczytelny, i wtedy użytkownik rezygnuje z czytania. Nie każdy widzi treść strony tak samo jak Ty. Niektórzy zmieniają sobie rozmiar czcionki lub rozdzielczość ekranu. Dużo osób teraz czyta strony internetowe w komórce lub na tablecie. Do tego służą aplikacje takie jak Evernote które przejmują kontrolę nad czytaną stroną.

Strony które mają dużo białego miejsca i czyste czcionki często podobają się czytelnikom, jak np. strona Boston Globe, w porównaniu do zaśmieconych stron pełnych nieczystych czcionek i zapchanego miejsca.

Wybierając czcionkę, przetestuj kilka, popytaj współpracowników lub czytelników, i wybierz tę najpopularniejszą. Przetestuj czcionki na różnych urządzeniach, dużych i małych. Jeśli strona nie jest czytelna, popracuj nad czcionkami, rozmiarami, oraz przestrzennością. Pomyśl także o usunięciu lub przesunięciu reklam które przeszkadzają w czytaniu.

Szanowane reklamy

Często widząc reklamę w czasopiśmie lub w telewizji, zerkniemy na nią i czasem nas nawet zaciekawi. Na stronach internetowych jest odwrotnie – pojawia się reklama, a użytkownik szybko klika na Zamknij lub na X, złoszcząc się jeśli dodatkowo z tej reklamy leci głos lub muzyka. Reklamy internetowe nie są dostosowane do czytelników ponieważ mało kto je zauważa, więc muszą być głośne, wyraźne, i przyciągające. Niestety, efekt jest odwrotny ponieważ widz nie zwróci na nie uwagi przeważnie.

Warto więc pomyśleć o reklamach które są dostosowane do czytelników, czyli te które mogą ich zainteresować najbardziej aby tworzenie stron www było skuteczne. Reklamy powinny wyglądać podobnie wszędzie na stronie, czyli powinny mieć tą samą ilość tekstu lub zajmować tyle samo miejsca wszędzie.

Przyciągające reklamy są korzystne dla czytelników oraz dla reklamujących ponieważ istnieje większa szansa że zostaną zauważone. Wtedy, czytający kliknie w reklamę, rośnie wtedy ilość kliknięć, a Ty możesz wtedy żądać więcej za umieszczenie reklamy na swojej stronie. Reklamy mają duży wpływ na projektowanie stron internetowych.

Sprawdzaj Google Analytics

Strony internetowe powinny być czytane, ale trzeba ustawić priorytety. W tym może pomóc Google Analytics, bezpłatne narzędzie które pokazuje kto czyta Twoją stronę i w jaki sposób. Możesz sprawdzić które części strony są czytane a które ignorowane. Jeśli dużo osób korzysta z Twojej strony przez komórkę, warto pomyśleć o mobilnej strony dostosowanej do komórek lub o tego typu aplikacji do ściągnięcia na Android i/lub iPhone.

Przed stworzeniem aplikacji, pomyśl o tym, czy naprawdę przyda się czytelnikom, i czy dużo osób by z niej korzystało. Pomyśl także o tym, dlaczego użytkownicy korzystają z Twojej strony poprzez tablety czy komórki. Warto także podpytać użytkowników o to.

Pytałeś użytkowników?

Często podejmuje się decyzje bez zapytania tych, na których zmiany będą miały największy wpływ, czyli użytkowników strony. Na stronach takich jak Facebook, użytkownicy zawsze wiedzą o zmianach o stronie które mają nastąpić.

Na podstawie próśb lub komentarzy użytkowników można ustalić czego brakuje na stronie, i można to naprawić. Feedback jest bardzo ważny a nawet konieczny. Użytkownicy mogą zasugerować co chcieliby widzieć lub co im przeszkadza, i na podstawie tych sugestii, możesz poprawić stronę tak, aby była bardziej przydatna dla użytkowników.

Jak to zrobić? Ciężko zachęcić użytkowników do skomentowania na stronie, ale wystarczy wysłać krótkie ankiety mailem. Zdziwisz się widząc odpowiedzi na temat treści strony. Użytkownicy opowiedzą o swoich metodach czytania i dowiesz się które części strony są najbardziej lubiane. Może się okazać że trzeba właśnie zadbać o czytelność tej części która jest najbardziej popularna, aby zyskała jeszcze więcej czytelników. Jeśli czytelnicy powiedzą że są sfrustrowani czytając coś na stronie, pomyśl o stworzeniu dla nich Cichego Pomieszczenia.

Ciche Pomieszczenie

W dużej, głośnej redakcji docenia się ciche pomieszczenie takie jak mały gabinet czy pokój oddzielony od chaosu. Można się wtedy skupić i zrelaksować. Ta sama metoda dotyczy czytania strony internetowej. Czytanie jej nie powinno być stresujące, a można przeznaczyć czas na zabsorbowanie czytanego tekstu, który jest stworzony z myślą o Tobie.

Jako designer, możesz stworzyć to ciche pomieszczenie dla swoich czytelników, czyli miejsce w którym mogą skupić się na czytaniu treści bez potrzeby zamykania wyskakujących reklam i animacji. Zadbaj o prosty układ strony, o czytelny tekst, i miejsce na komentarze lub dyskusje.

Kiedy nie są te metody skuteczne?

Te wyżej wymienione metody nie zawsze są skuteczne i nie dotyczą wszystkich stron internetowych w sieci. Niektóre treści są dostosowane do szybkiego czytania, a niektóre strony w ogóle nie zawierają długich tekstów. Niektóre strony także za bardzo liczą na reklamy i nie są w stanie zmienić swojej strategii.

Jeżeli treści strony często się zmieniają, są krótkie i zwięzłe, to niestety te metody ich nie dotyczą. Natomiast jeśli masz dokładnie zrobiony research i Twoje treści są dobrze napisane, czytelnicy się w nich nie gubią, to może warto wziąć pod uwagę w/w metody.

Czy masz długie treści na stronie czy nie, wykonaj przydatne ćwiczenie: popatrz na wszystkie kwestie wymienione powyżej po kolei, i zastanów się nad nimi. Pomyśl o jednej rzeczy którą możesz zmienić na swojej stronie odnośnie każdej kwestii. Niektóre zmiany mogą zostać na dłużej i zdziwisz się, jaki wpływ na stronę mają całkiem niewielkie zmiany. Daj czytelnikom powód aby lubili Twoją stronę taką jaka jest, niż powód aby jak najszybciej zmienić stronę.

A więc gdy wstępnie zaplanowaliśmy naszą stronę internetową należy przejrzeć nasz plan w całości i jeszcze raz zweryfikować czy zaplanowaliśmy wszystko w odpowiednim porządku i czy nasz plan ma sens z punktu widzenia użytkownika odwiedzającego naszą stronę internetową i czy w związku z tym będziemy w stanie osiągnąć nasz cel:

• musimy mieć pewność że użytkownik wchodzący na nasza stronę internetową nie będzie miał problemu z natychmiastowym zorientowaniem się gdzie jest i jak możemy mu pomóc – np jeśli jesteśmy  biurem podroży powinien zobaczyć odpowiednią grafikę i widzieć najlepsze oferty na stronie głównej, np. te najbardziej atrakcyjne cenowo jeśli mamy w swojej ofercie wycieczki “last minute” lub inne egzotyczne , które konkurencja nie posiada w sprzedaży – np. “polowanie na krwiożerczych zająców w dżungli” lub specjalistyczne obozy językowe. W biznesie obowiązuje zasada że musimy zdefiniować swój “edge” – tzw. przewagę konkurencyjną i trzymać się jej wszędzie akcentując ze jesteśmy w tym punkcie najlepsi.
• kolorystyczny układ (layout) strony powinien nawiązywać do tematyki naszej usługi  - może być stonowany lub kontrastowy. Na pewno powinien być zrozumiały i czytelny. Kontrastem możemy podkreślić miejsca ważne dla użytkowników , ale np nie wolno popełniać błędów takich jak umieszczanie ciemno niebieskich linków na czarnym tle uniemożliwiając czytanie przez użytkownika samego linka i utrudniając mu nawigację po stronie. Należy podkreślić że rozróżniamy kilka podstawowych typów kontrastów którymi możemy manipulować: na stronie internetowej: kontrast koloru, kształtu i czcionki. Zalecane jest wykonanie strony internetowej wykorzystując kilka kolorów podstawowych – do 3-4 korespondujących odcieniem z logo firmowym umieszczonym na stronie.

Mając tak przygotowany plan strony internetowej i komplet wskazówek, możemy je przekazać swojemu webmasterowi lub wykonawcy strony który posługując się wytycznymi wykona serwis zbliżony do naszych oczekiwań – zaoszczędzimy w ten sposób sporo czasu na wprowadzenie korekt i w efekcie szybciej zaczniemy działać uruchamiając nasz serwis internetowy.

Nie ma jednej najlepszej ścieżki planowania serwisu www – pomysły i okazje do zrobienia zarówno ciekawego jak i biznesowego serwisu www mogą powstać zupełnie spontanicznie, ale poniżej przedstawimy standardowe podejście jako próbę usystematyzowania kroków zaprojektowania strony internetowej:

Istnieje kilka istotnych momentów na które należałoby zwrócić uwagę planując zaprojektowanie lub powierzenie zaprojektowania strony internetowej naszemu wykonawcy:

1. Cel strony internetowej – idea i misja serwisu.
   Musimy dobrze zdawać sobie sprawę czemu będzie służyć nasza strona internetowa – oczywiste jest że skoro chcemy mieć swoją stronę internetową to raczej nic i nikt nas przed tym nie powstrzyma, możemy zrobić ja tak po prostu, nawet dla samej przyjemności, ale jeśli chcemy żeby jej założenie spełniało określone nasze cele to do procesu planowania należy podchodzić ostrożnie i planować każdą funkcjonalność.
   Na wstępie więc powinniśmy określić Cel strony internetowej.
2. Mając już ustalony cel projektu serwisu www powinniśmy zaprojektować układ strony głównej– możemy to zrobić nawet nawet rysując go na zwykłej kartce papieru – w tym momencie zaczynamy od początku:

• miejsce na logo serwisu – przed budową serwisu internetowego warto zrobić swoje logo, oczywiście w zależności od budżetu możemy zrobić mniej lub bardziej skomplikowane logo, możemy też wykonać je sami. Jeśli zamierzamy zostać marka rozpoznawaną na określonym rynku warto powierzyć takie zadanie firmie specjalizującej się w projektowaniu znaków logo, gdyż otrzymamy profesjonalny projekt który później użyjemy także przy druku materiałów reklamowych, na wizytówkach etc. Gdy będziemy mieć swoje logo, możemy do niego dostosować kolorystykę naszego serwisu internetowego tak żeby logo ładnie komponowało się w tło całej strony.
• miejsce na menu główne zawierające odnośniki lub buttony do najważniejszych pod-stron serwisu Wymieniamy każdy z nich z nazwy – w tym momencie dobrze jest żeby każda podstrona reprezentowała dany dział naszej strony i zawierała informacje adekwatne do nazwy linku prowadzącego do niej. Działy menu na stronie głównej mogą mieć swoje własne podmenu – np. podstrony odpowiadające za konkretne produkty które chcemy przedstawić naszym klientom. Poza głównym menu warto przewidzieć miejsce na baner lub obrazek (zazwyczaj w górnej części serwisu internetowego) obrazek ten może odzwierciedlać naszą misję lub cel, miejsce to może być wykorzystane na ulokowanie baneru reklamowego z reklamami naszych produktów, lub reklam partnerów reklamowych które będą nam płacić za umieszczenie reklamy właśnie w naszym serwisie.
• część centralna strony głównej – tu powinna znaleźć się esencja informacji o naszej stronie – może być tekstowa lub wizualna, tekstem możemy w skrócie i hasłowo opisać czym się zajmujemy lub o czym jest nasza strona, a jeśli nasza strona to np. sklep internetowy– warto umieścić tu ładne karty produktów promocyjnych, zachęcających klientów do zakupu.
• stopka serwisu internetowego – może zawierać nasze dane kontaktowe, lub informację o właścicielu projektu, może zawierać linki do serwisów partnerów. Tu warto pamiętać że stopka to część stała całej stronie internetowej – informacje umieszczone w niej pojawią się na każdej podstronie (zakładamy tu że posiadamy stopkę standardową – oczywiście może być inaczej).

CDN..