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/

„Chociażbym chodził ciemną doliną,
złego klienta się nie ulęknę,
bo Ty jesteś ze mną.
Twoja bystrość i Twoja intuicja
są tym, co mnie pociesza.”

Project Managerowie o Testerach Ps. 23 Wielkiej Księgi Merix

Testowanie jest to przede wszystkim proces mający na celu ocenę jakościową projektu, wskazać ewentualne poprawki oraz określić stronę/aplikację z perspektywy UX (User Experience)  w tym User Usability. Kierunek projektu zostaje opracowany przy tworzeniu specyfikacji natomiast testowanie koryguje ten kierunek nadając mu odpowiedni, bardziej efektywny kształt.

Jakie są podstawowe cele testowania?

• Ogólna ocena jakościowa projektu
• Poprzez testowanie sprawdza się projekt w poszukiwaniu błędów programisty oraz dawania propozycji rozwiązań do poprawy tych błędów.
• Poprzez testowanie sprawdza się projekt w poszukiwaniu zmian, które poprawiają działanie aplikacji. Duże znaczenie ma tutaj sprawdzenie strony pod kątem użyteczności i User Experience.

Aby lepiej poznać ideę testowania, charakter oraz sposób należało by zrozumieć założenie że:

„Testowanie to nie praca syzyfowa, a benedyktyńska.”

Testowanie to praca żmudna, momentami monotonna (w zależności od projektu), irytująca ze względu na powtarzający się schemat, ale dającą ogromny pożytek – przede wszystkim oszczędza cenny czas programisty, a po dokładnym przetestowaniu klient otrzymuje kompletny, w pełni funkcjonalny produkt (tu stronę internetową lub aplikację www), co ogranicza ilość późniejszych konfrontacji ;). W efekcie, dokładne testowanie dosyć skutecznie chroni skrzynkę pocztową od przegrzania ilością maili nadesłanych przez klienta dotyczących poprawek do projektu.

Testowanie samo w sobie nie służy do poprawienia jakości aplikacji czy strony, ale jest tej jakości miernikiem. Przystępując do testów należy zadać sobie pytanie “czy wszystko działa?” i co ważniejsze “na ile działa?”. Podczas tego procesu warto również wczuć się w rolę ostatecznego odbiorcy czyli użytkownika.

Zajmując się na co dzień testowaniem stron oraz aplikacji webowych (Quality Assurant) opiszę kilka praktycznych zasad, których warto się trzymać podczas testów.  Choć reguł i metod testowania jest wiele, tylko kilka kluczowych stanowi podstawę, kamień węgielny całego projektu.

7 praktycznych wskazówek dot. testowania i aplikacji internetowych

1 – Stand your ground

Bądź pewien na czym stoisz. Zapoznanie się ze specyfikacją i całym materiałem oraz przygotowanie instrukcji testów. Bardzo ważne na tym etapie jest zautomatyzowanie testów – o ile to możliwe. Nie musi się to wiązać z wysokim budżetem. Wszystko zależy od masy różnych czynników, ale bardzo ważne jest, aby wszelkie testy manualne wspomóc programami które zrobią za Nas niektóre zadania szybciej i lepiej. Na tym etapie również pojawia się zjawisko znane, jako ‘smoke test’ które polega na tym, że sprawdzamy czy strona/aplikacja ogólnie działa zgodnie z przewidywaniami, tzn. czy jej obszary krytyczne działają. Jeżeli okazuje się że oddana przez programistów strona/aplikacja nie zgadza się z ideą projektu, nie można przeprowadzać dalszych testów. Kolejne etapy testowania zależą głównie od przygotowanej przez Nas instrukcji.

2 – Teamwork

“Co trzy głowy to projekt lepiej wykonany” – krótka rozmowa z Project Managerem i Developerem to skuteczny sposób, aby wyjaśnić wszelkie nieścisłości, które napotkamy na samym początku testowania, tuż po zapoznaniu się ze specyfikacją od klienta. Zwykle na tym etapie współpraca z Project Managerem kończy się na ustaleniach dotyczących wstępnych założeń projektu, natomiast należy przygotować się na dłuższą współpracę z programistą przez kolejne etapy procesu testowania.

Przydatne pytania które należało by zadać przed rozpoczęciem procesu testowania:

• Jaki przeznaczyć czas na testowanie?
• Na których funkcjonalnościach/modułach/elementach strony należało by się skoncentrować (które są wyjątkowo ważne z punktu widzenia realizacji projektu)?
• Które funkcjonalności/moduły/elementy strony są najbardziej skomplikowane (im bardziej skomplikowane tym bardziej narażone na wystąpienie błędów)?
• Jakie funkcjonalności/moduły/elementy strony zostały wykorzystane, jeżeli nie były określone przez klienta?
• Co zostało zmienione w specyfikacji w późniejszych ustaleniach z klientem?

3 – World is a playground

Witamy w świecie ticketów! Teraz najważniejsza część, czyli platforma gdzie rozgrywa się akcja. Bardzo ważne, aby zapewnić odpowiednią płaszczyznę na której będzie istniała komunikacja między trzema podmiotami: Webdeveloperem, Testerem oraz Project Managerem oraz gdzie będzie można zawrzeć wszelkiego rodzaju uwagi dotyczące projektów.

Nasza agencja z powodzeniem wykorzystuje narzędzie Redmine (napisane we frameworku Ruby on Rails), które służy przede wszystkim jako system zarządzania projektem. Charakter działania polega głównie na tym że dodaje się tzw. tickety w których są zawarte informacje dotyczące projektu – w większości przypadków są to bugi które należało by poprawić, ale występują także features, supports czy zapytania (do PM’ów, Developerów oraz innych uczestników projektu). Ticketom można ustawiać odpowiednie statusy, nadawać priorytet oraz ustawić odpowiedni czas na wykonanie poprzez diagram Gantta . Dzięki temu można uporządkować w znaczący sposób pracę WebDevelopera.

BugTracker = Pole bitwy

Przynoszenie złych wiadomości nie jest przyjemne, ani dla nadawcy, ani dla adresata. Logiczne jest zatem, że BugTracker jest również polem bitwy, ponieważ często występuje konflikt polegający na tym że tester określa coś, jako błąd, natomiast programista, często stwierdza że to nie jest błędem jego pracy … Idealnie przedstawia tą sytuację poniższy szkic:

W sytuacji takiej jak powyższa lub gdy podczas testowania nie można zinterpretować dokładnie na czym polega błąd, trzeba uzbroić się w dużą cierpliwość do czasu wyjaśnienia tych delikatnych kwestii poprzez np. rozmowę. Należy pamiętać, że tester (lub osoba pełniąca jego rolę) oraz programista powinni nawzajem się uzupełniać, a nie wchodzić sobie nawzajem w drogę.

4 – Toolbox

Z dobrymi narzędziami to i amator coś zbuduje. To może nie do końca prawda, ale warto zaopatrzyć się w bardzo przydatne narzędzia, które zdecydowanie ułatwiają pracę i przyspieszają proces testowania (poniżej jest lista tych kilku najlepszych):

• 7 przeglądarek (FF, IE7, IE8, Opera, Chrome, Safari, ew. IE6) + Apple MAC lub jego emulator (w większości przypadków nie są lustrzanym odbiciem oryginału, dlatego wyniki testów nie zawsze są wiarygodne). Taki arsenał przeglądarek przyda się podczas sprawdzania tzw. “Cross-Browser Compatibility”, czyli weryfikacji poprawności wyświetlania strony/aplikacji przez popularne przeglądarki. Niestety każda z przeglądarek może wyświetlić tę samą stronę/aplikację zupełnie inaczej. Dobrym pomysłem jest zaopatrzenie się także w iPad’a (lub jego emulator), szczególnie klienci zagraniczni proszą nas o taką kompatybilność. Na szczęście dla koderów staruszek IE6 odszedł już w zapomnienie i przestał być częścią wymagań projektowych.
• Adobe Photoshop albo inny program graficzny – musisz mieć dostęp do wszelkich wymiarów layoutu, aby móc określić programiście  dlaczego się pomylił  przy ‘cięciu’.
• Irfan View (freeware)– genialny programik do przeglądania plików graficznych i w przypadku gdy mamy dwa monitory tej samej wielkości, można porównać layout z gotową stroną. Dbając o to, aby strona została zakodowania idealnie z projektem (pixel-perfect) można wspomóc się rozszerzeniem do Firefoxa – Pixel Perfect.

Dodatkowo przydatne mogą się okazać:

• Xenu Sleuth – jest to bardzo ważny program jeżeli chodzi o wspomnianą wyżej automatyzację testów. Program ma za zadanie sprawdzenie wszystkich martwych linków na stronie oraz wskazuje na której stronie utknął dany deadlink.
• VVCap – (freeware) doskonałe narzędzie dzięki któremu oszczędzamy czas przy tworzeniu screenshotów całej lub fragmentów interfejsu (screenshot  zapisany do pliku lub “schowka” w 2 sekundy ;))

5 – This is the end… for now!

Zakończenie pierwszego procesu testowania. Wynikiem jest bug/feature lista dla programisty do poprawki.

6 – Never ending story

Koło się zamyka, ale przynajmniej średnica robi się coraz mniejsza. Niestety po tym jak programista poprawi wszystko z listy trzeba sprawdzić czy poprawił to dobrze. Może się okazać, że na 100 rzeczy do poprawy o 10 zapomniał, 20 odrzucił że nie jest to błąd, 10 nie zostało poprawionych zgodnie z założeniami czyli faktycznie poprawił 60. Jednak z doświadczenia wiem, że na to 60 które poprawił, wskoczyło 20 nowych błędów, a połowę z tych które odrzucił jednak błędem są, więc po zaktualizowaniu listy okazuje się, że pozostaje jeszcze 40 poprawek. Ten etap należy powtórzyć 2-3 razy – aż do całkowitego wyczyszczenia listy z BugTrackera. Wysyłamy produkt do klienta.

7 – Loading – please wait…

Ttik tak, tik tak. Teraz pozostaje tylko poczekać na feedback od klienta. W momencie gdy tylko pojawią się jakieś uwagi należy zaktualizować bug/feature listę i powtórzyć Regułę no. 6.

Dobrze wykonany test = mniej poprawek = zadowolony developer, PM i klient

Podsumowując. Baba z wozu, koniom…

Testowanie wcale nie musi być to przysłowiową toporną babą na wozie, którą jak się zrzuci, będzie lżej. Wręcz przeciwnie – baba jest nawigatorem woźnicy, jakim jest PM, a Konie programistami… i dzięki tej babie ta bryczka nigdy się nie zgubi przez co dojedzie do celu na czas i bez większych problemów :)

Ale czym tak naprawdę jest agencja interaktywna? Czym się zajmuje? Kogo zatrudnia?

Według Wikipedii agencja interaktywna to :

Określenie firmy zajmującej się przygotowaniem i wdrożeniem strategii budowy wizerunku firm w Internecie na podstawie założeń marketingowych przedstawionych przez klienta.

Agencje interaktywne miały być odpowiednikiem agencji reklamowych, działających w internecie. W Polsce określenie to stosują też niewielkie firmy zajmujące się wyłącznie tworzeniem serwisów internetowych lub inną działalnością prowadzoną w sieci, której celem jest zwiększenie świadomości marki i/lub wzrost sprzedaży.

Do najpopularniejszych usług proponowanych przez agencje interaktywne należą: projektowanie serwisów WWW, systemów e-commerce i B2B, e-marketing i konsulting internetowy, przygotowywanie i obsługa kampanii reklamowych, hosting, SEO i pozycjonowanie stron internetowych. Firmy, które świadczą tak szeroki wachlarz usług, określa się mianem agencji full-service.

Agencji interaktywnych nie należy mylić z agencjami public relations prowadzącymi działania E-PR. Firmy te, mimo nierzadko zbieżnych celów, wykorzystują inne narzędzia i metody działania.

Agencja agencji nierówna

Ważną kwestią przy wyborze agencji interaktywnej jest sprawdzenie zakresu świadczonych przez nią usług. Pamiętajmy, że agencja zajmuje się czymś więcej niż tylko tworzeniem stron czy serwisów internetowych – to całe strategie działań marki w internecie a także hosting czy SEO. Co z tego, że otrzymamy serwis skoro nie będziemy potrafili go wypromować czy obsługiwać. A co z wprowadzaniem zmian i obsługą serwisu? Wybierając agencję wybierzmy taką, z którą będziemy mogli współpracować przez dłuższy czas. Sprawna kooperacja zapewni Nam spokój i pewność, że wszystko idzie tak jak powinno i w razie problemów mamy się do kogo zwrócić.

Strona internetowa za 199 zł? Takie rzeczy to tylko w akademiku ;)

I bądź tu konkurencyjny! ;) Która z agencji interaktywnych może wykonać stronę za takie pieniądze? Odpowiedź jest bardzo prosta – żadna!

Strona internetowa za 199 zł

Bo za takie pieniądze nie można zrobić nawet prostej strony, której wygląd cieszyłby oko odwiedzających a zaglądając w jej kod nie złapalibyśmy się za głowę! Wszystko rozbija się o jakość. Jakość, której za 199 zł nie dostaniemy. I ta właśnie jakość odróżnia agencje od “agencyjek” i studentów.  Co prawda cena czyni cuda ale w tej cenie cudów nie będzie ;) A problemy owszem – bo kto się nami zajmie jak strona padnie, coś się rozsypie albo będziemy chcieli coś zmienić? Pozostanie Nam szukanie wiatru w polu a takie rozwiązanie dla kogoś kto chce zaistnieć w internecie przecież nie wchodzi w grę.

Tak jak wszędzie, tak i w internecie jest pełno oszustów i naciągaczy, którzy kuszą niską ceną i obiecują cuda licząc na niewiedzę ludzi. Nie dajmy się zwieść pozorom. Jak coś wygląda zbyt pięknie, żeby mogło być prawdziwe najprawdopodobniej nie jest prawdziwe.

Bogate portfolio

“Sprawdź Nasze portfolio” i przekonaj się dla kogo pracowaliśmy – to chyba najbardziej popularna forma zachęty kierowana do nowego klienta. Sprawdzenie portfolio agencji, z która mamy zamiar współpracować wydaje się być bardzo rozsądnym posunięciem ale czy zawsze to co widzimy w portfolio jest prawdą?

Otóż nie. Niestety coraz więcej firm pretendujących do miana agencji interaktywnych używa podstępów w celu przyciągnięcia nowych klientów. Jednym z nich jest wkładanie do listy swoich klientów firm, które np. przysłały zapytania ofertowe, zaproszenie do przetargu lub dla, których został wykonany projekt graficzny do przetargu. Zdarza się też tak, że firmy umieszczają w portfolio logo marki dla, której na pozór realizowały projekty web’owe a w rzeczywistości przygotowały wizytówkę dla oddziału tej firmy w miejscowości X. Czy zaproszenie do przetargu przez dużą, dobrze znaną markę to to samo co wykonanie dla niej zlecenia? Oczywiście, że nie. Do przetargu zaprasza się wiele firm a zostaje tylko jedna, ta najlepsza z najciekawszym pomysłem na realizację projektu.

Moim zdaniem w liście obsługiwanych klientów powinni znajdować się tylko Ci, dla których faktycznie pracowaliśmy. Znaleźć się tam też powinny informacje  o zakresie prac jakie agencja wykonała. Każdy chciałby móc pochwalić się współpracą z najlepszymi markami ale uczynić to mogą tylko najlepsi. Uważajmy więc na agencje, o których nic wcześniej nie słyszeliśmy a ich portfolio świadczyłoby, że są najbardziej rozchwytywaną firmą w kraju. Naturalnie od każdej reguły jest wyjątek, ale nie jest to regułą ;)

Jeden za wszystkich, wszyscy za jednego

Kolejną ważna sprawą, na którą należy zwrócić uwagę przy wyborze agencji interaktywnej jest liczba zatrudnionych osób. Im większą liczbę specjalistów dana firma zatrudnia tym lepiej – daje Nam to pewność, że choroba czy nieobecność jednego z pracowników nie spowoduje opóźnienia w realizacji projektu. Poza tym im więcej specjalistów tym lepiej – mamy pewność, że nasz projekt będzie realizowany zgodnie ze sztuką, z zachowaniem wszystkich obowiązujących standardów, w razie opóźnień do projektu może zostać skierowana większa liczba developerów, a przy mniejszym obłożeniu, projekt może zostać zakończony przed czasem.

Zupełnie inaczej sprawa wygląda w małych lub mikro firmach, które zatrudniają po jednym specjaliście z danej dziedziny lub co gorsza jednego specjalistę od wszystkiego – a jak ktoś jest od wszystkiego to jest do niczego ;) ( patrz zdjęcie powyżej). I co się stanie jak ten ktoś zachoruje? Kto zajmie się projektem? Kto go poprowadzi, kto zrealizuje? Najprawdopodobniej nikt – specjalista w spokoju będzie wracał do zdrowia a klient rzeczone zdrowie będzie tracił. Ważną sprawą jest też forma współpracy specjalisty z agencją interaktywną – nie jedna agencja zapewni Nas, że zatrudnia 20 specjalistów, zapomni tylko dodać, że są to freelancerzy, którzy mogą ale nie muszą pracować przy Naszym projekcie. Pamiętaj – przed przystąpieniem do projektu sprawdź z kim masz do czynienia, sprawdź z ilu pracowników składa się firma, ilu zatrudnia specjalistów – jedno proste pytanie może zaoszczędzić Ci późniejszych problemów.

Jak Cię widzą, tak Cię piszą

Wykorzystam to polskie przysłowie, żeby przedstawić kolejny ważny element, który trzeba brać pod uwagę podczas wyboru agencji. Jak wszyscy wiemy pierwsze wrażenie jest niezmiernie ważne. To jak zostaniemy zapamiętani rzutuje na to jak później będziemy postrzegani.

Tak samo jest w przypadku rynku, na którym działają agencje interaktywne. Posłużę się przykładem z lokalnego rynku – załóżmy, że wchodzimy na stronę jednej z agencji interaktywnych z Poznania. Naszym oczom ukazuje się strona firmowa – niby wszystko jest… ale jest nie z tej epoki ;) Trend graficzny  sprzed lat, kod się nie waliduje, ostatnie uaktualnienie miało miejsce  kilka miesięcy temu…  A przecież strona firmowa to wizytówka firmy. Jak można zaufać agencji, która nie potrafi zadbać  o swój własny wizerunek w internecie? Pewnie jakoś można ale czy chcemy, żeby tacy ludzie zajęli się kreowaniem Naszego wizerunku ? Oczywiście, że nie!

Napisałem kilka słów o rynku lokalnym – a jak  się sprawy mają w skali kraju? Niestety większych różnic nie stwierdzono. Oczywiście jest szereg agencji, które świecą przykładem – jednak jest ich wciąż za mało. A szkoda – bo może udałoby się wyprzeć z rynku te firmy, których na rynku być nie powinno.

Kliencie – sprawdź stronę firmy, z którą chcesz pracować i odpowiedź sobie na pytanie – czy chcę, żeby to oni kreowali mój wizerunek?

Solidne fundamenty

Pod tym hasłem kryją się dwa elementy : ilość lat na rynku i siedziba firmy.

Jeżeli chodzi o ilość lat na rynku to zasada jest prosta – im dłużej tym lepiej. Dlaczego?

Ponieważ im dłużej firma jest na rynku tym bardziej  prawdopodobne, że jest firmą stabilną, o ugruntowanej pozycji. Miała czas na zebranie odpowiedniego doświadczenia do realizowania dużych, wymagających i złożonych projektów. Ma stabilną sytuację finansową i będzie potrafiła zagwarantować ciągłość prac na projektami – nawet tymi rozciągniętymi w czasie. Prawdopodobnie. Ponieważ zdarzają się też przypadki gdzie firma, która jest na rynku nie od wczoraj wcale nie musi być firmą stabilną.

Ale wracając do tematu. Sam staż to jedno a opinia  o firmie to kolejna sprawa, ale  o tym będzie później.

Siedziba firmy – na pozór sprawa oczywista – jest firma więc musi mieć swoją siedzibę. Ale to tylko na pozór.

Wróćmy do omawianych wcześniej mikro firm, które są niczym innym niż zbiorem kilku freelancerów. Gdzie jest ich siedziba? Pewnie w mieszkaniu każdego z nich. Dobrze jest przed podpisaniem umowy, czy nawet w fazie przetargowej spotkać się z reprezentantem agencji w jej siedzibie. Sprawdzić jak wygląda, dowiedzieć się więcej o firmie, “wybadać teren”.

And the winner is…

Webstary

Nagrody, wyróżnienia, dyplomy, medale… to wszystko świadczy o uznaniu dla agencji i jej pracy. Warto sprawdzić czy agencja, z którą chcemy rozpocząć współpracę ma w swoim dorobku jakieś nagrody, czy jej prace znaleźć można w galeriach CSS, czy ma coś co wyróżnia ją na tle innych agencji interaktywnych, wpływa na jej atrakcyjność. A może to jej pracownicy byli nagradzani za swoje pomysły, wyróżniani za wybitne osiągnięcia?

Pamiętajmy jednak, że jest wiele nagród czy wyróżnień, które otrzymać można po wpłacie odpowiedniej kwoty na konto organizacji takie zaświadczenia wydającej. Jeżeli agencja interaktywna chwali się wyróżnieniami sprawdźmy czy są one istotne i czy mają znaczenie w branży.

Co o nich mówią

Zanim kupimy telewizor nie raz sprawdzamy w internecie opinie na jego temat – czy jest dobry, wytrzymały, czy jakość jest taka o jakiej mówi producent.Generalnie chcemy upewnić się, że dokonamy właściwego wyboru. Tak samo powinniśmy postępować przy wyborze agencji interaktywnej, z którą chcemy współpracować.

Na pewno mamy znajomych, którzy współpracowali już wcześniej z jakąś agencją i to ich powinniśmy spytać jako pierwszych. Niech opowiedzą Nam jak przebiegała współpraca, czy nie było problemów w kontakcie, czy agencja potrafiła zrozumieć czego potrzebowali i czy im to zapewniła. Takie informacje są najbardziej wiarygodne.

Kolejnym krokiem jest sprawdzenie opinii na temat firmy w internecie. Ale tu musimy być ostrożni – zwracajmy uwagę na to kto pisze i gdzie pisze. Najbardziej wiarygodne są serwisu branżowe, w których informacje powinny być najbardziej wiarygodne. Kolejnym miejscem do sprawdzenia opinii są fora internetowe – ale opinie z tego medium traktujmy z lekkim przymrużeniem oka. Są ludzie, którzy specjalnie będą pisali jaka to firma nie jest zła i jak nie zepsuła projektu ale są też tacy, który będą ją wynosić pod niebiosa.

Tak popularne teraz social media to kolejne miejsce, w którym należy sprawdzić agencję. Sprawdźmy czy ma swój profil, czy komunikuje się  z klientami, jak kreuje swój wizerunek? Social Media mogą nam dużo powiedzieć na temat Naszego przyszłego kooperanta.

I ostanie ale równie ważne – opinie byłych i obecnych pracowników. Poszukajmy jak pracownicy wypowiadają się na temat swojego obecnego/byłego pracodawcy. Były pracownik jest potężnym źródłem wiedzy na temat agencji. W końcu w niej pracował, realizował projekty, kontaktował się z klientami, wie jak agencja wygląda od wewnątrz.

The end…

Przyszedł czas na podsumowanie całości. Kliencie – bo to do Ciebie kierowany jest ten wpis – pamiętaj, że przy wyborze agencji interaktywnej najważniejszy jest zdrowy rozsądek! Nie daj się skusić na niskie ceny, sprawdź co w sieci “piszczy”, porozmawiaj ze znajomymi i przetestuj firmę zanim zaczniesz z nią pracować! Jeżeli sprawdzisz wszystkie rzeczy, o których pisałem będziesz bardzo bliski wybrania najlepszej agencji do Twojego projektu. Jeżeli wciąż masz wątpliwości to pamiętaj, że jest w Poznaniu agencja interaktywna, która może Ci pomóc! :)

Tymczasem okazuje się, że Google Trends (narzędzie do badania popularności zapytań kierowanych do wyszukiwarki Google) wykazuje tendencję wręcz odwrotną do tej, której możnaby się spodziewać: w przeciągu ostatnich kilku lat da się zauważyć dość wyraźny spadek w wyszukiwaniach frazy „Usability”. W poszukiwaniu winowajców tej tendencji można doszukać się bardzo mnogich tropów. Ot, prostego wyjaśnienia doszukać się można w tym, że specjaliści w tej dziedzinie przedstawiają się na bardzo mnogie sposoby. Okazuje się bowiem, że w większości przypadków „UI Designer”, „User Experience Designer” czy „Usability Analyst” to w praktyce ta sama osoba.

Pójdźmy jednak o krok dalej. Trudno byłoby przecież za wszystko obarczać wyłącznie brak zdecydowania w nazewnictwie czy sposobie autoprezentacji specjalistów. Należy w tym momencie zadać sobie dość podstawowe, ale często pomijane pytanie:

Czym jest Web Usability w praktyce?

W ramach przykładu posłużmy się stereotypowym zamiłowaniem pasjonatów IT do filmów science-fiction. Załóżmy, że znaleźliśmy się w wystawnej restauracji na jakiejś odległej planecie. Choć nie znamy za dobrze tamtejszej kultury, radzimy sobie całkiem nieźle: siadamy przy całkiem normalnym stoliku, podchodzi do nas zielonoskóry pan w muszce i podaje nam menu. Wszystko wydaje się być w porządku, nawet pomimo nieznajomości tamtejszego języka udaje nam się sprawnie złożyć zamówienie dzięki zdjęciom potraw obok każdej pozycji w menu. W oczekiwaniu na swój pierwszy pozaziemski lunch, podziwiamy piękno wystroju wnętrz – kunsztownie zaprojektowana architektura pomieszczenia i dbałość o każdy detal wprowadziłyby w osłupienie nawet najsurowszego ziemskiego krytyka. Błyskawicznie wraca do nas kelner, stawia potrawę na stole i bez słowa odchodzi. Tutaj przychodzi rozczarowanie. Po chwili główkowania i nie uzyskaniu żadnej pomocy, zażenowani odchodzimy, pozostawiając za sobą talerz z kusząco pachnącą potrawą i… dwiema metalowymi obręczami w miejscu sztućców.

W obliczu tak abstrakcyjnego przykładu aż trudno uwierzyć, jak trafnie obrazuje on problemy, z którymi zmaga się na co dzień przeciętny użytkownik Internetu. Żadnemu serwisowi WWW nie pomoże ani piękny design, ani optymalnie napisany kod, ani nawet perfekcyjnie zaplanowany marketing, jeśli nie weźmiemy pod uwagę tego, co użytkownicy zechcą osiągnąć i jak można im to ułatwić.

Jak to działa?

Istnieją liczne znane i powszechnie stosowane metody dokonywania testów Usability. Nietrudno trafić na liczne artykuły opisujące sposoby wykorzystania słynnych „A/B testing” czy „Eye tracking” w celu zrozumienia tego, jak odwiedzający reagują na dany serwis WWW i poszczególne jego komponenty. Na podstawie tego typu badań zbierane są dane na temat zachowań użytkowników i tego, jakie rozwiązania najlepiej spełniają swoje zadanie.

Zanim przejdziemy do testowania, trzeba jednak zająć się czynnością o wiele bardziej skomplikowaną i z natury niezywkle trudną do opisania w formie suchych wytycznych czy jednoznacznej dokumentacji – zaprojektowaniem interfejsu.  Nie będzie chyba zbyt odważnym stwierdzenie, że właśnie tutaj kryje się swoista pięta achillesowa Usability, która prawdopodobnie bezpośrednio wiąże się ze spadkiem zainteresowania tematem; wielu specjalistów zapomina o tym, że jest to wciąż dość młoda dziedzina wiedzy, wymagająca od nich kreatywnego myślenia i innowacji. „Modne” okazuje się poprzestawanie na wykorzystywaniu tzw. „Best practices”, rozwiązań sprawdzonych i wielokrotnie powielanych, w praktyce sprowadzających się często do bezrefleksyjnej rutyny.

Nie (tylko) tędy droga!

Właśnie tutaj, niestety, najprawdopodobniej doszukiwać się można powodu wątle rysującej się popularności tej dziedziny. Usability na co dzień za bardzo kojarzone jest z twardymi i powszechnie stosowanymi zasadami, których należy się bezwzględnie trzymać; pewien wpływ na to może mieć dość konserwatywne podejście człowieka uważanego przez wielu za najwyższy autorytet w temacie Usability, Jakob’a Nielsen’a. Nietrudno trafić na blogi specjalistów pełne użytecznych wniosków wynikających z testów, dlaczego więc tak rzadko widuje się jakiekolwiek próby podjęcia dyskusji na temat samego procesu projektowania?

Web usability wciąż przeżywa wydłużony okres swojej młodości – choć mamy styczność z tą problematyką na co dzień, często wydajemy się zapominać, że wymaga ona ciągłego rozwoju; istnieje w tej kwestii pewna wszechobecna bierność. Wszyscy z zapałem korzystamy ze znanych nam gotowych rozwiązań i dostępnych materiałów, ale już dużo rzadziej widuje się ludzi przejawiających aktywny wkładu w rozwój tej dziedziny. Potraktujmy to więc jako swego rodzaju apel do polskiej części fascynatów Usability: pozwólmy sobie na kreatywność i innowację. Jesteśmy w trakcie budowania fundamentów pod coś, co służyć nam ma przez długie lata i spotykać się będzie z rosnącym zapotrzebowaniem. Nie dajmy sobie wmówić, że na wszystko trzeba szukać odpowiedzi w gotowcach i dostępnych materiałach. Zanim o czymś zadecydujemy, zanim wsadzimy potrzeby swojego klienta do jednego worka z poprzednimi, zadajmy sobie proste pytanie, które co mądrzejsze głowy Merix’u praktykują na porządku dziennym ;):

„A co by było, gdybym…?”

Możemy pomyśleć – mam zespół najlepszych programistów, więc nie będę tracił czasu na makiety – opowiem im o co mi chodzi a oni zrobią resztę; albo – klient opowiedział mi o swoim pomyśle, wiem o co chodzi więc zaczynam przygotowywać design. Ale czy aby na pewno wiemy o co chodzi klientowi? Nie ma nic bardziej błędnego niż takie podejście. Zbyt szybkie rozpoczęcie kodowania lub prac graficznych może przysporzyć nam tylko strat, zarówno czasu i pieniędzy.

Zobaczmy ile czasu a tym samym pieniędzy można zaoszczędzić przygotowując prostą makietę? Dzięki szkieletowi unikamy nieporozumień i niepotrzebnych rozczarowań, graficy i programiści są spokojniejsi nie musząc co rusz czegoś zmieniać, cały proces przebiega prościej.

Naturalnie, nawet najlepiej przygotowany wireframe nie zawsze będzie w stanie nam to wszystko zagwarantować, ale zmniejsza ryzyko wystąpienia komplikacji i zwiększa komfort pracy przy projekcie.

Wireframe to nie Kaplica Sykstyńska –  nie róbmy z niego dzieła sztuki, chyba, że będzie to dzieło sztuki użytkowej

Tworząc wireframe nie starajmy się być perfekcjonistami w każdym szczególe. Wireframe ma pokazać tylko najważniejsze funkcjonalności serwisu lub aplikacji internetowej. W sieci krąży opinia ” Zobrazuj 20% funkcjonalności, która powtarza się w 80% stron serwisu” – moim zdaniem, opinia ta idealnie odwzorowuje ideę wireframe’ingu. Nie ma potrzeby pamiętać o każdym nawet najmniejszym button’ie czy kropce po linijce “Lorem ipsum”. Zwykło się mawiać, że diabeł tkwi w szczegółach – tak, ale w naszym przypadku to zbyt duża ilość szczegółów w wireframe’ie przywoła tego diabła.

Przykłady najpopularniejszych programów do tworzenia wireframe’ów

Poniżej postaram się przedstawić kilka najciekawszych dostępnych na rynku narzędzi do tworzenia wireframe’ów – tych płatnych, darmowych, desktop’owych i web’owych.

Balsamiq

Balsamiq wireframe

Balsamiq to prosta w obsłudze  aplikacja do tworzenia wireframe’ów stworzona w środowisku Adobe AIR.  Posiada intuicyjne menu, które nie powinno sprawiać problemów nawet mało doświadczonym użytkownikom. Balsamiq pozwala na tworzenie makiet, które wyglądają jakbyśmy narysowali je ręcznie. Głównym celem tego zabiegu było skupienie uwagi na funkcjonalności projektowanej strony czy aplikacji a nie na jej wyglądzie. Program oferuje wiele gotowych elementów – takich jak szablon iPhone’a, progress bar’y, cover flow’y czy video player’y, które przyśpieszą prace na makietą (dostępne do pobrania na stronie Mockups To Go)

Wszystko byłoby idealnie ale…

Balsamiq ma jeden duży brak – po wykonaniu makiety nie możemy wygenerować prototypu. Nie możemy wczuć się  w rolę użytkownika i “przeklikać” przez serwis. Wszystkie testy muszą być wykonywane na wireframe’ie lub dopiero po zakodowaniu. Sprawia to, że po Balsamiq możemy sięgnąć gdy chcemy wykonać jakąś szybką, prostą makietę, np. strony głównej – w tym celu możemy użyć darmowej wersji on-line. Gdyby ktoś jednak chciał kupić wersję desktop to jej koszt wynosi $79.

Axure RP

Wireframe wykonany w Axure RP Pro.

Axure to jeden z najlepszych dostępnych na rynku programów do tworzenia wireframe’ów i prototypów. Działa zarówno na Mac OS jak i na Windows. Axure posiada ogromną rzeszę fanów, którzy nie tylko tworzą dodatki, widget’y, biblioteki ikon czy gotowe panele dynamiczne ale służą radą i pomocą. Twórcy Axure nie zapomnieli o takich funkcjach jak generowanie prototypów czy specyfikacji technicznej. Program wart jest polecenia dla każdego, kto szuka czegoś więcej niż narzędzia do wykonania makiety strony głównej. Dzięki możliwości wewnętrznego linkowania i tworzenia działających prototypów Axure staje się jednym z tych narzędzi, bez których praca w agencji interaktywnej staje się trudniejsza.

Jest jeszcze coś…

Wersja desktop’owa kosztuje $589, ale naturalnie dostępna jest 30 dniowa wersja demo, która umożliwia zapoznanie się z produktem przed jego zakupem. Wydaje mi się, że program wart jest swojej ceny. Patrząc na ilość czasu, który pozwoli nam zaoszczędzić – jego zakup powinien się zwrócić.

Pencil Project

Wireframe wykonany w Pencil Project.

Pencil Project to darmowy plug-in do przeglądarki Mozilla Firefox w wersjach 3.5+ . Bardzo proste narzędzie do wireframe’owania nie wymagające instalacji. Wystarczy włączyć przeglądarkę i możemy zaczynać. Tak jak w przypadku swoich konkurentów Pencil Project działa na zasadzie drag&drop. Producent daje nam dostęp do sporej ilości gotowych elementów. Jednak jeżeli będziemy chcieli dodać jakiś niestandardowy element czeka nas przeprawa z jego tworzeniem.

Pencil Project jest idealnym rozwiązaniem dla osób, które dopiero zaczynają przygodę z wireframe’owaniem. Bardziej zaawansowanym użytkownikom zabraknie wielu funkcji, które oferuje konkurencja. Może z czasem twórcy dodadzą więcej funkcji, które pozwolą np. na automatyczne tworzenie specyfikacji czy prostsze tworzenie nowych elementów.

Największym plusem Pencil Project jest jego cena – $0. Wierząc zapewnieniom twórców, program jest i zawsze będzie darmowy.

ProtoShare

Wireframe wykonany w ProtoShare

ProtoShare to web’owe narzędzie do wireframe’owania. Jest to spora alternatywa dla desktop’owych rozwiązań oferowanych przez konkurencję. Nie wszystkim jednak może przypaść do gustu to, że gdy zabraknie internetu nie będziemy mieli dostępu do projektów.

ProtoShare tak jak inne produkty działa na zasadzie drag&drop, użytkownik dostaje do użytku gotowe elementy, które może wykorzystać do tworzenia makiety. Tak jak w Axure RP istnieje możliwość tworzenia prototypów i automatycznego generowania dokumentacji technicznej. ProtoShare oferuje też wielu użytkownikom dostęp do jednego projektu w tym samym czasie, jednak do tego potrzebne jest konto z odpowiednimi uprawnieniami.

Licencja na ProtoShare działa na zasadzie subskrypcji. Miesięczna opłata to $29 za pakiet standardowy umożliwiający korzystanie z jednego konta 2 użytkownikom, prowadzenie do 10 projektów jednocześnie i 2Gb przestrzeni dyskowej na nasze wireframe’y.

Rodzime produkty

W trakcie poszukiwań najlepszych programów do wireframe’owania starałem się znaleźć jakieś polskie, rodzime rozwiązanie. Nie udało się jednak takich znaleźć. Jeśli o nich wiecie – napiszcie w komentarzach. Dobrze byłoby pochwalić się polskim programem do tworzenia wireframe’ów. Pozostaje mieć nadzieję, że ten stan rzeczy się zmieni i w najbliższym czasie na rynku zadebiutuje rodzime oprogramowanie do tworzenia makiet, tym bardziej, że rynek wciąż czeka na dobre, elastyczne i konkurencyjne cenowo rozwiązanie!

Alternatywne formy wireframe’owania

Pwireframe (paper wireframe)

Pwireframe

Wystarczy wziąć kartkę i długopis i przelać swoje pomysły na papier. Pwireframe to nic innego niż papierowa makieta. Jej niewątpliwą zaletą jest to, że możemy ją stworzyć praktycznie wszędzie – czy to na spotkaniu z klientem czy na kolanie w drodze do pracy – a jedyne czego będziemy potrzebowali to kartka i długopis. Ten rodzaj wireframe’owania pozwala nam skupić się na ogólnym wyglądzie serwisu, jego użyteczności i funkcjonalności pomijając przy tym detale, które dodamy później, przenosząc go do komputera. W naszej agencji używamy tego sposobu podczas spotkań z klientami czy rozmów z grafikami i programistami. W ten sposób mamy możliwość najszybszego zobrazowania naszych myśli i pomysłów.

Papierową makietę możemy stworzyć na czystej kartce papieru ale o wiele prościej i wygodniej jest to zrobić na gotowym szablonie. W sieci jest wiele serwisów oferujących takie darmowe szablony. Co ciekawe, ta forma wireframe’owania ma tylu zwolenników, że bez problemu znajdziemy nawet szablony iPhone’a, iPad’a czy innych urządzeń mobilnych.

Jednym z przykładów serwisu  z prostymi ale użytecznymi szablonami jest ten serwis (do pobrania, gotowe do druku kartki w PDF)

And the winner is…

Jako, że niemal każdego dnia spędzamy wiele czasu tworząc makiety stron/aplikacji internetowych czy projektujemy różnego typu interfejsy potrzebowaliśmy szybkiego, elastycznego i  stosunkowo rozbudowanego programu do wireframe’owania. Cześć z nas stawiała na Balsamiq, część na Axure RP jeszcze inni upierali się przy ProtoShare. Jednak mnogość funkcji, możliwość automatycznego generowania prototypów i specyfikacji technicznych przechyliło szalę zwycięstwa w stronę Axure RP. Nie można zapomnieć też o bogatym zapleczu rozszerzeń i dodatków takich jak zbiory widget’ów, ikon czy gotowych paneli dynamicznych. Szczególnie warta uwagi jest biblioteka Better Defaults.

To wszystko oraz fakt ciągłego udoskonalania tego oprogramowania sprawił, że ten program wydaje nam się najlepszym rozwiązaniem.

Na zakończenie

Reasumując – wireframe to sposób na tworzenie i/lub rozwijanie  funkcjonalności serwisu lub aplikacji internetowej przed rozpoczęciem jakichkolwiek prac graficznych. Wireframe można zaprezentować klientom lub współpracownikom bez obaw, że zostaną rozproszeni przez design a czas na projekt graficzny przyjdzie zaraz po skończeniu makiety.  Zaprojektowanie dobrego wireframe’u przed przystąpieniem do jakichkolwiek prac graficznych pozwala zaoszczędzić czas i pieniądze, które tracone są np. na kolejne poprawki graficzne, tylko dlatego, że jakiś element zmienił swoje miejsce.

Integracja z płatnościami online

Wydaje się, że jest to najbardziej popularna integracja. Zasada jest prosta: przyśpieszenie i ułatwienie płatności za towar poprzez specjalne usługi sieciowe. Liderem branży w Polsce jest serwis Platnosci.pl, który oferuje szereg usług płatniczych – od zapłaty kartą kredytową, poprzez przelewy w najpopularniejszych bankach, aż po realizację przelewu pocztowego. Usługi różnią się nieco sposobem realizacji płatności, a co za tym idzie czasem oczekiwania na przepływ środków. Najczęściej jednak odbywa się to zgodnie z systemem bankowym (o wybranych godzinach każdego dnia roboczego).

Jest też możliwość wykonania tzw. Express Payment przy wykorzystaniu karty kredytowej. Środki wówczas momentalnie znajdą się na rachunku odbiorcy. Podobnie działa serwis PayPal, korzystający również z kart kredytowych. Sprawdza się ona bardzo dobrze w przedsięwzięciach o charakterze międzynarodowym ze względu na spójność systemu w 190 krajach i 17 walutach. Integracja z PayPal i podobnymi serwisami odbywa się poprzez wstawianie do kodu strony specjalnych znaczników i zmiennych HTML.

Udostępniane są materiały instruktażowe jak tego typu połączenie wykonać, ale warto takie przedsięwzięcie powierzyć doświadczonemu specjaliście. Powstało również mnóstwo wtyczek i modułów do platform e-commerce typu open-source, dlatego wdrożenie systemu płatności online do sklepu internetowego to rzecz nieskomplikowana, a przynosząca spore korzyści.

Integracja z porównywarką cen

Za przykład wyszukiwarki niech posłuży popularny na naszym rynku Nokaut (nawiasem mówiąc jeden z klientów naszej agencji). Tego typu integracja jest czymś bardzo powszechnym obecnie, także ze względu na łatwość z jaką można to uczynić. Model biznesowy tego typu serwisów opiera się właśnie jak największej bazie towarów, stąd duże wsparcie dla użytkownika. Serwisy porównujące ceny udostępniają swoje API, czyli interfejs programowania aplikacji. Daje to takie możliwości jak  selekcjonowanie produktów, które mają trafić do porównywarki czy przypisania ich do konkretnej kategorii. Dostarczanie danych polega na eksporcie produktów ze sklepu internetowego do sytemu porównywania cen za pomocą specjalnie wygenerowanych plików XML.

Integracja z aukcjami Allegro

Wiele firm zajmujących się handlem internetowym, poza działaniem własnej platformy, korzysta z aukcji internetowych, gdzie palmę pierwszeństwa posiada Allegro (co godne podkreślenia miejscem powstania firmy jest Poznań). Serwis udostępnił swoje API w dwóch wersjach – darmowej i płatnej. Moduł podstawowy (darmowy) umożliwia automatyczne wystawiane towarów na aukcję, dostęp do panelu Moje Allegro i wyszukiwania towarów. W porównaniu do niego moduł profesjonalny jest dodatkowo wyposażony w możliwość składania ofert, obsługę płatności Allegro, narzędzia do zarządzania licencjami, statystykami i informacjami na stronie użytkownika. Stworzenie tego typu interfejsu przez Allegro umożliwia ścisłą integrację z tym serwisem i automatyzację przepływu danych pomiędzy naszym e-commercem, a popularnym serwisem aukcyjnym.

Integracja z programem firmy kurierskiej

Współpraca z firmą dostarczającą paczki do klienta jest stałym i bardzo ważnym elementem działania e-commerce. Wiele firm udostępnia swoje własne programy do drukowania listów przewozowych. Najczęściej są to aplikacje desktopowe, które po umieszczeniu danych w swojej bazie umieszczają je na specjalnym szablonie listu, zgodnym ze standardami firmy. Tak jak do tego miejsca sprawa wydaje się prosta i oczywista w odtworzeniu pod kątem naszego panelu administracyjnego, komplikuje się w momencie tworzenia kodu kreskowego dla danej przesyłki. Konieczna jest zatem integracja z narzędziem dostarczanym przez firmę które z racji swojego „niesieciowego” charakteru i sporych ograniczeń w eksporcie danych do plików zewnętrznych może być problematyczne.

Część firm (np. DPD) wprowadziła jednak swoje webklienty do tego celu, a zatem wspomogła możliwości integracyjne. Programy tego typu korzystają z baz SQL oraz często posiadają możliwość eksportu danych do pilków XLS lub XML, co czyni je łatwo integrowalnymi.

Integracja z programem księgowo – rachunkowym

Na Polskim rynku zdecydowany prym wiedzie program Subiekt GT i to on jest najczęściej integrowanym oprogramowaniem księgowym.  Łatwo można spoić go z platformami osCommerce, Virtuemart, Magento czy PrestaShop. Koszty odpowiednich modułów do tego celu są stosunkowo niskie, a nie pojawiają się błędy podczas synchronizacji baz czy wyrównywania stanów magazynowych z opóźnieniem.

Istnieje też możliwość zastosowania rozwiązania oscGT działającego z platformą osCommerce, ale wymaga ono dodatkowo oprogramowania Subiekt GT Sfera, będącego mechanizmem do tworzenia rozszerzeń systemu Subiekt GT. Programy tego typu innych producentów (jak np. Symfonia czy CDN Optima) są również możliwe do bezbolesnej integracji z naszym e-commercem. Pewnym ograniczeniem jest często korzystanie z rozwiązań sieciowych, zatem konieczność zastosowania serwera celem ciągłości komunikacji pomiędzy programem, a panelem administracyjnym.

Plusy takiej integracji są jednak bardzo wyraźne. Przykładem niech będzie pojawienie się nowego produktu w bazie za pomocą importu z pliku XML od dostawcy. Z dostarczonych danych moduł integracji zaktualizuje dane w programie księgowym w sposób automatyczny pomijając niepotrzebne informacje. Gdy nasz szanowny klient zdecyduje się na zakup jakiegoś towaru to po sygnale z panelu nastąpi również zmiana stanu w bazie danych. Znaczna oszczędność czasu i redukcja możliwości popełnienia błędu – to naprawdę niebagatelne atuty rozwiązania.

Analogiczne przykłady zastosowań można mnożyć: złożone zamówienie ciągnie za sobą automatyczne wystawienie faktury, zatwierdzenie realizacji zamówienia w programie księgowym powoduje wysłanie maila o zmianie stanu zamówienia do klienta, możliwa jest również automatyczna rozbudowa bazy klientów po zarejestrowaniu się w sklepie czy integracja kilku sklepów internetowych z jednym programem księgowym. Proste i profesjonalne.

Integracja z partnerami zewnętrznymi

Możliwości automatyzacji sklepu pozwalając również ma integrację naszej platformy do e-handlu z bazami partnerów zewnętrznych, najczęściej chodzi tu o dostawców. Jakie są korzyści takiego rozwiązania? Nie ma konieczności ręcznego dodawania towaru z poziomu panelu administracyjnego (a zatem żmudnego wprowadzania kilku-kilkunastu parametrów, zdjęć i opisów), wszystko odbywa się automatycznie np. z plików XML czy CSV. Umożliwia to nie tylko przepływ informacji, ale również zakup towarów u dostawcy i to nie tylko u jednego. Wyobraźmy sobie takie możliwości:

• poziom ilości towaru spada poniżej wyznaczonego poziomy krytycznego i następuje automatyczne złożenie zamówienia na ten produkt u dostawcy na bazie aktualnych cen
• stworzony skrypt automatycznie porównuje oferty kilku dostawców i samemu wybiera najkorzystniejszą ofertę, dodaje odpowiednią wartość prowizji i umieszcza towar w kolejce do zaakceptowania przez administratora czy aby wszystko jest w porządku
• promocja lub zmiana ceny u dostawcy powoduje automatyczne dostosowanie się naszej oferty do nowych warunków, zachowując odpowiedni poziom zyskowności
• system automatycznie generuje faktury i wykonuje płatności za towar

Liczbę tego typu zaawansowanych integracji ogranicza tylko wyobraźnia.

Podsumowanie

Zaproponowane koncepcje rozwiązań to tylko niewielka część możliwość dostępnych na rynku. Zastosowanie tego typu integracji może ograniczyć rolę człowieka do absolutnego minimum. Platformy do prowadzenia e-handlu (zarówno te open-source jak i płatne) dają ogromne możliwości integracji z innymi usługami. Zapewnia to duże uproszczenie, znaczne obniżenie kosztów działalności oraz podnosi również poziom obsługi klienta. Automatyzacja sklepu internetowego to inwestycja, którą z pewnością warto przemyśleć i dobrać do swoich potrzeb rozwiązania z bardzo szerokiego wachlarza. Masz pomysł na wprowadzenie takiej usługi w swoim e-commerce lub takie rozwiązanie ułatwi Twoją pracę? Zgłoś się do nas, chętnie doradzimy.

Zainstalować w naszym WordPressie plugin o nazwie WP e-Commerce.

Czym jest plugin WP e-Commerce?

Jest to darmowa wtyczka wyposażająca nasz mniej lub bardziej skromny serwis internetowy we wszystkie podstawowe funkcje, których można by oczekiwać od sklepu internetowego. Mamy tu narzędzie do zarządzania produktami,  ich kategoriami, zestawienie transakcji, widget zawierający w pełni funkcjonalny koszyk. Do tego mamy obsługę płatności dokonywanych przez Google Checkout, PayPal i kilka innych systemów.

To oczywiście podstawy, w porządnym sklepie nie może zbraknąć możliwości organizowania promocji czy też przyznawania rabatów. I tak, rabat możemy przyznać np. za zakup pewnej ilości danego produktu czy też za zrobienie zakupów, których cena przekroczy ustaloną przez nas wartość.

Do tego dodajmy obsługę wielu walut, kosztów przesyłki, konfigurowalny formularz wypełniany przez użytkownika “przy kasie” i otrzymamy całkiem zgrabną aplikację sklepową. Cały obraz uzupełniają jeszcze przydatne sklepowe widgety prezentujące choćby najnowsze produkty lub kategorie produktów czy też promujące losowy produkt ze sklepu.

Jak to zainstalować?

Tradycyjnie. Pobieramy WP e-Commerce ze strony WordPressa, kopiujemy do naszego katalogu wp-content/plugins i aktywujemy w panelu administracyjnym WordPressa. Voila!

Nasz sklepik już działa, wymaga jednak konfiguracji. Ustawienie walut, wariantów produktów, ich kategorii i marek wymaga zdecydowanie mniej czasu niż choćby pobieżne zapoznanie się z dokumentacją którejkolwiek z typowych aplikacji sklepowych. O wiele mniej, jeśli masz chociaż trochę doświadczenia w obcowaniu z WordPressem.

Zalety pluginu WordPress e-Commerce

Zdecydowanie jest to jeden z najtańszych i najłatwiejszych do uruchomienia sklepów na rynku.  Nie wymaga tworzenia od podstaw motywu (theme) zgodnego z pozostałą częścią strony, co umożliwia osiągnięcie sporych oszczędności w kosztach (zarówno finansowych jak i psychicznych) startu sklepu.

Łatwość obsługi i konfiguracji – jak przystało na aplikacje WordPressowe – to standard. Do tego należy dodać znakomitą integrację z serwisem, w którym nasz sklep jest osadzony – tu bezproblemowo unikamy wrażenia, że sklep to inna aplikacja niż serwis (jakże to nieprofesjonalne, a jakże często spotykane…).

WP e-Commerce pozostaje również rozłączny z naszą stroną czy też blogiem w miejscach, w których rozłączności oczekujemy – choćby w przypadku kategorii: kategorie produktów to zupełnie co innego niż kategorie postów na blogu.

Nie ma róży bez kolców…

Niestety, WP e-Commerce pod wieloma względami ustępuje “dużym” sklepom, takim jak na przykład Magento – ma niezbyt rozbudowane statystyki sprzedaży, małe możliwości konfigurowania widoku produktów, nie wystawia faktur, a co najgorsze na naszym rynku – nie obsługuje polskich systemów płatności (jeszcze)…

Ale nie ma tego złego, co by na dobre nie wyszło. Możliwości naszego WordPressowego sklepu możemy rozszerzyć instalując stosowne dodatki – niestety w większości płatne. A jeśli chodzi o obsługę polskich systemów płatności, to niedawno ukazało się rozszerzenie umożliwiające współpracę WP e-Commerce z DotPayem, a w planach są również bramki do innych systemów.

Komu to potrzebne?

WP e-Commerce znakomicie sprawdzi się wszędzie tam, gdzie potrzebny jest sklep dobrze zintegrowany z serwisem internetowym, ale gdzie nie wymaga się ogromnych możliwości. Dobrze służyć będzie firmie sprzedającej niezbyt liczne produkty, artyście handlującemu swoimi pracami, czy też organizacji non-profit sprzedającej np. jakieś gadżety by uzbierać pieniądze na działalność statutową.

Dzięki znikomym nakładom pracy wymaganym do uruchomienia aplikacja ta przyda się również firmie rozpoczynającej działalność handlową, lub takiej, dla której handel nie jest podstawowym rodzajem działalności. Jak nie trudno zgadnąć – obszary zastosowania ogranicza przede wszystkim wyobraźnia użytkownika…

WordPress powstał w odpowiedzi na potrzebę stworzenia łatwej w obsłudze platformy służącej publikacji treści opartej na PHP i MySQL. Z początku przeznaczony był głównie jako oprogramowanie służące prowadzeniu blogów. Z czasem jednak, dzięki współpracy wielu programistów, którzy zafascynowali się nowym narzędziem oraz licencji GPL, na której jest udostępniany, WordPress stał się tym, czym jest obecnie – dojrzałym, rozbudowanym narzędziem o sporych możliwościach, praktycznie nieograniczonej liczbie zastosowań i banalnie łatwej obsłudze.

Elastyczny CMS

Podstawą elastyczności WordPressa jest uniwersalna, abstrakcyjna a za razem dość prosta struktura danych wywodząca się z blogów – większość bytów ma tu postać mniej lub bardziej zmodyfikowanego wpisu blogowego, składającego się z tytułu, treści i daty publikacji. Oczywiście struktura ta jest wzbogacona o dodatkowe informacje (autor, kategorie, w których wpis jest umieszczony itp), ale jej spiritus movens to tzw. “custom fields”, czyli “dowolne pola”, składające się z nazwy i wartości, które użytkownik może dodawać i modyfikować wedle własnych potrzeb.

Jednak struktura danych to tylko fundament. Dzięki oddzieleniu całej warstwy prezentacji od back-endu i mechanizmowi “skórek” (ang. themes) twórcy serwisów opartych na WordPressie otrzymali niczym nieograniczoną wolność prezentowania treści i interakcji z użytkownikiem.
Oczywiście, sposób tworzenia “skórki” został tak pomyślany, by poradził sobie z tym nawet początkujący developer.

Obrazu całości dopełnia mechanizm umożliwiający tworzenie różnych dodatków (plug-inów) rozszerzających funkcjonalność serwisu, co przy licznej i bardzo aktywnej społeczności programistów tworzących zarówno skórki jak i plug-iny umożliwia  “złożenie” nawet bardzo rozbudowanego serwisu z gotowych elementów. Użytkownicy komercyjnych aplikacji tego typu mogą o takim wyborze jedynie pomarzyć.

Przykładowe zastosowania

Oczywiście podstawowym obszarem zastosowań WordPressa są blogi. Instalacja bloga zajmuje tyle czasu ile wymaga wysłanie plików na serwer oraz wpisanie w konfiguracji danych połączenia z bazą danych, tytułu bloga oraz hasła i e-maila administratora. Przy dobrym łączu już po 5 miutach od pobrania plików ze strony wordpress.org można zacząć blogować. Dzięki możliwości łatwego wstawienia galerii zdjęć do wpisu, stworzenie fotobloga również nie powinno stanowić problemu.

Tylko krok dzieli bloga od rozbudowanego e-magazynu z dużą ilością newsów, artykułów i autorów. Wystarczy zainstalować odpowiedni theme (do wyboru są setki gotowych, zarówno darmowych jak i płatnych, nietrudno też stworzyć własny) i zacząć publikować treści. Oczywiście naszą e-gazetę możemy ulepszyć instalując plug-iny dodające interesujące nas funkcje.

GreenFudge - przykład e-magazynu stworzonego przez nas w oparciu o WordPressa

Możliwość prezentacji dużej ilości informacji w przejrzysty i uporządkowany sposób, oraz łatwego nią zarządzania czyni WordPressa doskonałą platformą wykorzystywaną jako “silnik” serwisów firmowych – zarówno dla małych, kilkuosobowych firm jak i dla korporacji. Ograniczeniem jest tu jedynie wyobraźnia twórców serwisu. Dzięki łatwości zarządzania treścią i tworzenia specyficznej, dostosowanej do CI danej organizacji, szaty graficznej, wiele firm (nie tylko z branży internetowej) zdecydowało się oprzeć swoje serwisy na WordPressie.

ChannelFuse to serwis korporacyjny, do budowy którego z powodzeniem wykorzystaliśmy WordPressa.

Jeśli myślimy o firmach i zarabianiu pieniędzy, praktycznie od razu przychodzi nam na myśl handel internetowy. Tak, stworzenie sklepu internetowego z użyciem WordPressa również jest możliwe, a co więcej – bardzo łatwe. Dzięki plug-inowi o nazwie WP Shopping Cart udało mi się w 15 minut uruchomić w pełni funkcjonalny sklep internetowy z kilkoma przykładowymi produktami, obsługą płatności on-line i możliwością oceniania towarów przez użytkownika. Oczywiście możliwe i niezbyt skomplikowane jest rozbudowanie takiego serwisu o dodatkowe funkcje.

WordPress a pozycjonowanie

Możliwość poskładania całego serwisu z gotowych elementów skłania do zadania sobie pytania: jak to wszystko wpływa na pozycję mojej strony w wyszukiwarkach? Cóż, pozycja w wyszukiwarkach zależy od bardzo wielu czynników, jednak nad tymi, na które twórca strony ma wpływ, WordPress daje nam pełną kontrolę. Obsługa “przyjaznych” linków, to tylko wierzchołek góry lodowej. Jakość kodu HTML zależy od twórcy “skórki” – a więc tu też wszystko zależy od nas.

W tej materii również przychodzą nam z pomocą liczne plug-iny: umożliwiają automatyczne dodawanie zawartości atrybutu alt dla obrazków, automatycznie wstawiają linki łączące strony składające się na nasz serwis, tworzą mapy serwisu w html-u oraz xml-u… wymieniać można długo.

Nikt nie jest doskonały…

Niestety WordPress ma też kilka swoich wad. Należy do nich spora ilość plików tworzących całą aplikację, co powoduje, że aby uruchomić mały, prosty serwis, tzw. brochure site, musimy na serwerze umieścić o wiele więcej plików niż by to miało miejsce w przypadku zastosowania rozwiązania dedykowanego.

Inną wadą jest przystosowanie WordPressa do pracy z tylko jednym typem bazy danych – MySQL. Uruchomienie serwisu wodpressowego w oparciu  o bazę PostgreSQL czy Oracle niestety odpada.

Do niedawna nieciekawie wyglądała też możliwość wykorzystania WordPressa jako platformy do budowy serwisów społecznościowych. Jednakże ukazanie się BuddyPress rok temu rozwiązało ten problem.

Podsumowanie

Mimo kilku wad, które eliminują WordPressa z obszarów zastosowań wysoce specjalistycznych, pozostaje on znakomitą podstawą do budowy licznych typów serwisów internetowych. Spore możliwości, łatwość obsługi i tworzenia dodatków oraz całkowity wpływ programisty na prezentację treści powodują, że serwisy oparte na WordPressie świetnie spełniają pokładane w nich nadzieje pozostając jednocześnie łatwymi, a więc tanimi w budowie oraz utrzymaniu.
Łatwość integracji z serwisami społecznościowymi i możliwość łatwego przygotowania serwisu otwartego na dialog z użytkownikami to dodatkowy atut.

Ciekawie rysuje się też przyszłość. Nadchodząca wielkimi krokami wersja WordPress 3.0 ma mieć m. in. możliwość tworzenia własnych typów danych czy nowych menu. Będzie się działo!