Czy ktoś z Was zadawał sobie pytanie co w projekcie jest bardziej istotne? Jego wizualny aspekt, techniczne niuanse czy merytoryka? Aby w ten sposób ocenić projekt, należy wziąć pod uwagę różne kryteria, nie tylko te mówiące o tym czy strona ładnie się prezentuje. Grafika jest bardzo ważna, ale nie najważniejsza. Produkt pozbawiony interakcji z użytkownikiem, mało ergonomiczny i zawierający niezbyt interesujące treści z góry skazany jest na porażkę przez duże P.

Zatem jak zabrać się do pracy uwzględniając zarówno potrzeby Klienta i nie stając w opozycji do dobrych praktyk projektowych? O tym poniżej z perspektywy pracy w MERIXSTUDIO.

Ustalamy metodologię

Wdrożenie odpowiednich regulacji czy też wzorców ułatwi nam zarówno kontakt z Klientem, pracę nad projektem jak i zapanowanie nad poszczególnymi etapami jego wykonania. Oczywiście nie ma sztywnych reguł jakimi należy się kierować.  Te „wypracowywane” są w czasie zarówno na bazie doświadczeń zespołu jak i jego członków.

Nasza metodologia opiera się luźno na założeniach Six Sigma a konkretnie na DMAIC -  Define (definiuj), Measure (mierz), Analyze (analizuj), Improve (poprawiaj) i Control (kontroluj).

Rys. Powyższy rysunek pokazuje tzw. flow czyli przepływ informacji i relacje zachodzące pomiędzy wykonawcą a Klientem.

• Definicja projektu.
  Zabierając się do pracy nad serwisem internetowym określamy jakie ma spełniać funkcje i w jaki sposób spełniać oczekiwania użytkowników.

• Brief kreatywny / Marketingowy
  Brief kreatywny to dokumentacja projektu graficznego. Określa grupę docelową, zawiera informacje o systemie identyfikacji wizualnej CI, koncepcje kreatywne oraz wiele innych. Brief marketingowy natomiast analizuje cele i potrzeby aktywnej obecności w internecie, określa budżet, strategię marketingową, analizuje rynek i konkurencję.

• Specyfikacja techniczna
  jest opisem funkcjonalności serwisu internetowego – zawiera jego strukturę, precyzuje założenia i dokumentuje działanie modułów które mamy zamiar na naszej stronie wdrożyć. Na jej bazie tworzymy również makiety i prototypy funkcjonalne.

• Projekt graficzny
  to nic innego jak wizualizacja serwisu WWW (jego szata graficzna) oparta o założenia funkcjonalne zawarte w briefach i specyfikacji technicznej.

• Development
  Składają się na niego działania developerów i programistów w sferze front-end i back-end, czyli oprogramowania serwisu po stronie przeglądarki internetowej i serwera.

• Product beta.
  Mamy gotowy serwis. Albo tak nam się tylko wydaje.. Okres pomiędzy publikację wersji beta a wersji finalnej to czas na testy funkcjonalne, optymalizację działania oraz eliminację błędów programowych i merytorycznych.

Więcej o testowaniu serwisów internetowych przeczytasz tutaj: 7 praktycznych wskazówek dot. testowania stron i aplikacji internetowych

Kompletujemy zespół

Bez pracy nie ma kołaczy a bez zespołu? Dobra i doświadczony ekipa to podstawa działalności każdej agencji interaktywnej. Kompletując takową do wykonania danego projektu musimy mieć na uwadze m.in. zakres prac, czas jego trwania (harmonogram) i zaangażowanie w obecne projekty agencji.

Przyjmuje się ze do niewielkiego zlecenia wystarczy zespół składający się z ok. 5-7 osób. Duże i skomplikowane projekty wymagają zaangażowania większej ilości specjalistów, a jej liczebność uwarunkowana jest nakładem pracy, zastosowaniem technik programistycznych czy też wykorzystaniem odpowiednich multimediów, powołaniem więcej niż jednego zespołu kreatywnego itp.

Komunikujemy się

Klient nasz Pan. Racja, ale… Powinniśmy mieć świadomość, że nie jesteśmy tylko wykonawcami ale także lub przede wszystkim ekspertami w danej dziedzinie, którzy Klientom powinni służyć swoją fachową wiedzą i doświadczeniem. Pamiętajmy, że nawet najlepsze pomysły kreatywne mogą zostać unicestwione już na samym początku jeżeli Klient nie zostanie przekonany co do słuszności podejmowanych przez nas działań.

Konkretną przeszkodą bywają zarówno brak wiedzy po stronie Klienta, niewystarczający poziom abstrakcji, schematyczne podejście (bo konkurencja tak ma!) a także niska asertywność po stronie agencji. Jak temu przeciwdziałać? Złotego środka chyba jeszcze nikt nie wymyślił. A jeśli już wymyśli to kolejna nagroda branżowa powędruje właśnie do niego.

Te przeszkody sprawiają że..

Błądzimy..

Mały błąd. Duży błąd. Wielbłąd.  Presja czasu, wymagania Klienta i nieubłagany deadline sprawiają często, że zaakceptowany w fazie prototypu projekt różni się zasadniczo od wersji finalnej. Dodatkowe moduły i funkcjonalności „dokładane” ad hoc przez Klienta  powodują wzrost „tkanki mięśniowej” projektu która nie przekłada się na zwiększenie poziomu funkcjonalności nie wspominając o UI i użyteczności. Quo vadis projekcie?

Warto wbić sobie do głowy „oczywistą oczywistość” – projektujemy dla Klienta ale odbiorcą jest Użytkownik. To na jego wygodzie i zadowoleniu z korzystania z projektu/aplikacji powinno nam najbardziej zależeć. Zleceniodawca, nie zawsze zdaje sobie z tego sprawę i sztuką jest aby skutecznie zaakcentować, że aspekty użytkowe są o wiele bardziej istotne w przypadku gdy mamy wybierać na przykład pomiędzy „kręcącym się logo” a poprawą nawigacji.

.. i odnajdujemy się

Odpowiednie przygotowanie projektu i stosowanie się do obranej wcześniej metodologii pozwoli nam w dużej mierze uniknąć nieporozumień na linii Klient – Wykonawca. Każda koncepcja, następnie jej analiza, akceptacja i wdrożenie przybliża nas do projektu finalnego.  Dlatego zdecydowanie warto jest poświęcić więcej czasu na koncept i brainstorming w obrębie zespołu kreatywnego niż potem tracić czas na poprawę błędów. Zapobieganie jest łatwiejsze i tańsze niż poprawianie. A siła tkwi w prostocie. Brzmi banalnie prawda?

To prawie koniec

Mając na względzie wiele wykonanych przez nas projektów możemy uczciwie przyznać, że nie zawsze było lekko. Zdarzały się owszem wisienki na torcie ale orki na ugorze bywało zdecydowanie więcej. Klientów nie zmienimy ale możemy edukować. Błędy dalej popełniamy ale jesteśmy mądrzejsi o te, na których się uczyliśmy. Wymagania rosną, rynek się zmienia  i każda szanująca się agencja powinna być na tyle elastyczna aby znaleźć na nim swoją niszę, trzymać rękę na pulsie, ustawicznie poszerzać horyzonty oraz inwestować w zespół. Taka inwestycja bowiem opłacalna jest zawsze.

Zdaję sobie sprawę, że podjęta przeze mnie próba przedstawienia cyklu powstawania serwisu czy może sposobu podejścia i pracy nad projektem jest bardzo powierzchowna. Dotyka ona najbardziej istotnych wg mnie aspektów bez zagłębiania się w szczegóły – wiele czynników jest bowiem niewymiernych, Klienci także bywają nieszablonowi a tematyka zleceń przeróżna.

Na koniec (tak to naprawdę będzie koniec)  TOP 10 najczęściej spotykanych błędów na stronach internetowych.

1. Skomplikowana nawigacja
2. Nieczytelny układ treści (w kolejnym artykule może będzie o GRID’ach?)
3. Nieczytelna i źle dobrana typografia (mnogość krojów czcionek i ich rozmiar)
4. Niechlujny i błędny kod (m.in. niezgodność ze standardami W3C)
5. Trudna w przyswojeniu treść (brak wyróżnień, akapitów, punktorów, list)
6. Brak spójności projektu (elementy pełniące te same funkcje powinny wyglądać i zachowywać się podobnie w obrębie całej struktury serwisu)
7. Nadmierne stosowanie okien typu pop-up
8. Nie działająca wyszukiwarka
9. Brak komunikatów błędów w formularzach
10. Nieczytelna i niefunkcjonalnie zaprojektowana szata graficzna

Spotykanych błędów jest znacznie więcej.  Wyszukujmy je, obserwujmy i uczmy się jak ich nie popełniać. Zęby też nas przestaną boleć :-)

Specjaliści od pozycjonowania (SEO) nie mylą się powtarzając, że content is the king. Unikalna zawartość serwisu to jeden z podstawowych kryteriów oceny jakości strony przez Google. Dobrze zoptymalizowana (odpowiednie użycie tagów H, wewnętrzne linkowanie, stosowanie atrybutów title w linkach, dobrze opisane Page Title itp.) oraz często aktualizowana treść (nie rzadziej niż raz w miesiącu) znacznie pomoże wypromować stronę wysoko w naturalnych wynikach wyszukiwania (SERP – Search Engine Results Page).

OK, załóżmy, że pod kątem SEO nie mamy sobie nic do zarzucenia. Czy wystarczy, że roboty wyszukiwarek ocenią wysoko treść naszej witryny a dla użytkowników będzie ona po prostu mało atrakcyjna?

Oczywiście, że nie!

Pomińmy ocenę merytoryczną contentu. Tego, póki co, na pewno Google poprawnie nie oceni. Dobry, to znaczy pisany z myślą o internecie, Copywriting jest bardzo często niedoceniany i traktowany po macoszemu. Wiele się ostatnio mówi o User Experience (UX) stron internetowych. O ile definicji UX znajdziemy w internecie wiele, to moim zdaniem kluczowym słowem opisującym istotę zagadnienia jest: empatia. To w jaki sposób (i na ile przyjemne) jest obcowanie użytkowników naszej strony z interfejsem i treścią sprowadza się do pozytywnego lub negatywnego User Experience. Mówiąc o treściach stron, niezwykle ważną rolę w UX pełnie właśnie wspomniany wcześniej Copywriting. Takie detale jak sposób nazwania elementów menu, nazwy buttonów czy treść komunikatów błędu budują szereg doświadczeń użytkowników i pośrednio kreują wizerunek marki naszego serwisu. Polecam lekturę artykułu traktującego o tzw. metodach Dark Patterns, które ocierają się o manipulację, psychologię i techniki wywierania wpływu.

W tym artykule pokażę kilka sposób i przykładów jak można skutecznie poprawić atrakcyjność contentu stosując narzędzia wizualizacji treści.

Narzędzia i przykłady wizualizacji treści na stronach

Jakie informacje można wizualizować? Prawie każdy rodzaj informacji nadaje się do wizualizacji, np.: wszelkie dane statystyczne, raporty, liczby, fakty, pytania, badania itd. Najczęściej stosowany, poczciwy wykres kołowy (ang. pie-chart) nie budzi już żadnych emocji. O wiele większym zainteresowaniem cieszą się dynamiczne, bardziej skomplikowane, ale pokazujące więcej zależności wizualizacje, np. projekt newsmap.jp:

Aplikacja (także screensaver) wyświetla aktualne wydarzenia (z Google News) w postaci kolorowych bloków. Na podstawie kategorii i istotności/popularności newsów algorytm odpowiednio dostosowuje wielkość i kolor bloku.

Inny przykład. Pracując nad koncepcją naszego agregatora zakupów grupowych GoDealla.pl szukaliśmy odpowiednich narzędzi, które pozwolą w dynamiczny i atrakcyjny sposób prezentować aktualne lokalne oferty z poszczególnych platform zakupów grupowych w Polsce. Nasza aplikacja na bieżąco pobiera i przetwarza znaczną ilość różnego rodzaju danych (200-300 ofert dziennie z kilkudziesięciu portali jednocześnie). Przygotowaliśmy odpowiednio strony informacyjne każdego z portali, na której oprócz adresu firmy i danych kontaktowych z obsługą klienta prezentujemy dynamicznie generowane wykresy dziennej (i miesięcznej) liczby dodawanych ofert. Tak prezentują się dane najpopularniejszego portalu w Polsce Groupon.

Dynamiczne wykresy dodawanych ofert Groupona oparte o bibliotekę JavaScript Raphaël

Warto przyjrzeć się demonstracyjnym wizualizacjom użytej biblioteki Raphaël‘a. Podobne wykresy umieściliśmy na pozostałych wizytówkach portali takich jak goniący lidera Gruper, należący do Grupy Allegro Citeam, międzynarodowy DealLX czy poznański FastDeal.

Kolejnym narzędziem, także opartym o JavaScript, na które na warto zwrócić uwagę jest InfoVis. Spektrum możliwości ciekawie pokazuje video:

Upowszechnienie się standardu WebGL przyczyni się do rozwoju i powszechniejszego zastosowania tego typu narzędzi.

Infografiki dziś. Interaktywne dokumenty jutro?

Można powiedzieć, że Infografiki szturmem weszły do powszechnego użytku nie tylko w mediach cyfrowych. Dziennikarze z prasy czy telewizji chętnie wzbogacają swoje materiały o kolorowe, bogato ilustrowane infografiki. Redaktorzy upodobali sobie taką formę prezentacji treści do tego stopnia, że wysyłając notkę prasową bez infografiki mamy znacznie mniejszą szansę na publikację.

Największym ograniczeniem infografik jest ich statyczna forma. Nie pozwalają “eksperymetnować” z danymi i relacjami, które prezentują. Dlatego myślę, że z czasem trend ten się rozwinie w kierunku tworzenia interaktywnych dokumentów (ang. reactive documents). Użytkownicy naszych stron nie chcą być tylko biernymi obserwatorami. Interaktywne dokumenty pozwolą ich zaangażować w treść serwisu, zmieniać dane, które będą reagowały dynamicznie w zależności od wybranych parametrów. Brzmi abstrakcyjnie?

Najciekawsze przykłady tzw. reactive documents.

Tangle:

Przykład strony z interaktywnym dokumentem. Użytkownik, czytając tekst może zmieniać jego zawartość (np. dane statystyczne) i obserwować analizowane wyniki.

Explorable Explanations:

Interaktywny dokument Explorable Explanations ukazujący relacje i konsekwencje wykorzystania energii elektrycznej w gospodarstwach domowych.

Liczę, że wiele firm wkrótce otworzy się na takie rozwiązania i pisząc treści na swoje strony www uwzględni opisane trendy i rozwiązania. Potencjał jest ogromny, grzechem byłoby tego nie wykorzystać.

Ps. Zainteresowanych tematem wizualizacji informacji odsyłam do świetnych blogów infosthetics i Information is Beautiful

Dlaczego zatem warto wykorzystywać video? Uzupełnia ono bowiem walory statycznej grafiki o kilka dodatkowych elementów. Ruch, dynamika, zmiany – to kolejne sposoby wpływania na nasze żądne wrażeń zmysły estetyczne. W video ogromną zaletą jest to, że to ich twórca decyduje jakie informacje i w jaki sposób zostaną zaprezentowane widzowi. Stawiamy go w bardzo komfortowej dla siebie i niego sytuacji – siedząc wygodnie przed monitorem, nie wykonując praktycznie żadnych operacji, zostanie uraczony naszym przekazem w odpowiednio przygotowanej  formie. Jakby tego było mało możemy zadziałać także na jego zmysł słuchu i w ten sposób „przemycić” dodatkowe wrażenia. Video to wszechstronna i niezwykle skuteczna broń w trudnej walce o uwagę i pamięć użytkowników.

Miło się ogląda, ale czy video jest narzędziem dla mojej firmy?

Form wykorzystania video jest bardzo wiele, nie trzeba decydować się na rozwiązania na poziomie produkcji hollywoodzkich. Wachlarz możliwości jest na tyle szeroki, że każdy może dobrać coś dla siebie, na przykład gdy chcemy:

- zaprezentować realizacje i osiągnięcia naszej firmy w interesujący i innowacyjny sposób,

- stworzyć filmową prezentację naszej firmy do pokazywania na stronie WWW, ale także spotkaniach czy targach,

- w nowoczesny sposób przesłać życzenia świąteczne partnerom i klientom,

- przykuć uwagę użytkowników strony WWW czy profilu social media wartościową treścią

- przekazać informacje w formie wywiadu eksperckiego

Pole dla wyobraźni jest tutaj wielkie, ograniczenia natomiast bardzo małe.

Co jest potrzebne do przygotowania filmu video?

Kluczem jest pomysł przelany na papier, czyli zarys scenariusza. Wykonawca na pewno wspomoże tutaj własnymi sugestiami, ale im lepiej sami przygotujemy się do tematu tym lepiej, nikt nie zna zalet naszej firmy czy produktu tak dobrze jak my sami. Ważnym elementem jest też czas trwania filmu, nie warto tutaj przesadzać z nadmierną długością. Postawmy na jakość i skuteczność przekazu, a nie przydługawe formy filmowe. Przygotowując się do tematu warto obejrzeć propozycje konkurencji czy przedstawicieli innych branż, wskażmy to co w danej produkcji najlepsze i mogło by zasilić nasz projekt.

Przejdźmy teraz do meritum sprawy, a zatem do określenia techniki wykonania. Tutaj decydującą sprawą są posiadane przez nas materiały i elementy, które chcemy pokazać. Jeżeli ich nie mamy to skąd je wziąć? Filmy można zbudować z:

- próbek video – filmów własnych, nagranych specjalnie do filmu przez ekipę czy wykupione z banków video

- zdjęcia – programy do montażu video (np. Adobe Premiere, Adobe After Effects, Final Cut) dają możliwość animowania statycznych zdjęć w bardzo atrakcyjnej formie

- grafiki statyczne – najlepiej pliki na warstwach, tak aby można było animować każdy element

Najlepszy efekt daje fuzja tych elementów, jako próbkę zobacz naszego showreela. O muzykę czy dźwięki też nie należy się martwić. Wybór komponentów do zakupienia jest tak szeroki, że każdy znajdzie coś dla siebie.

Do dzieła!

Jeżeli masz pomysł jak zdobyć serca swoich przyszłych i obecnych klientów porozmawiaj o tym jak wdrożyć Twój pomysł. Nie obawiajmy się ciekawych i innowacyjnych pomysłów. Poniżej znajduje się lista klipów video, które wyróżniają się nietypową intencją powstania lub formą.

1)      Firma to nie tylko marka, to także ludzie ją tworzący. Taką właśnie ludzką twarz pokazała firma Barnes & Noble w tym filmie:

http://www.rga.com/about/departments/planning

2)      Pewna francuska agencja interaktywna w 5s pokazała swoją prace, oto efekty

http://www.5emegauche.com/#!/5s

3)      Video jako tło strony? Czemu nie, HTML 5 daje takie możliwości

http://www.maerskfleet.com/

4)      Pokaż swoim klientom jak pracujesz, z tego założenia wyszła firma Camerom Moll umieszczając na swojej stronie głównej ciekawy klip

http://colosseotype.com/

5)      Wywiad też jest dobrym pomysłem. Wejdź na stronę YessBMX (która sama w sobie jest świetna) i zobacz przygotowany wywiad, który dodatkowo ją wzbogaca

http://yessbmx.com/#the-legend

6)      Brytyjska grupa muzyków tak właśnie namawiała swoich fanów na głosowanie w prestiżowym rankingu muzycznym:

http://www.youtube.com/watch?v=9lcJaAxpRpU

7)      Reklama firmy Lynx wykorzystująca augmented reality, czyli rozszerzoną rzeczywistość

http://www.youtube.com/watch?v=rFuUFeQIdpk

8)      Eksperyment w formie interaktywnego klipu video, w rolach głównych HTML5 i Google Maps

http://www.thewildernessdowntown.com/