Banner: engagement

Oceń tę pracę

Banery nie muszą być nudne!

Gdy truizmem jest już mówienie o ślepocie na banery, na pomoc przychodzi nowy paradygmat – zaangażowania użytkownika:

„Nawiązanie kontaktu między odbiorcą a nadawcą i sprowokowanie użytkownika do działania, prowadzi do zaangażowania go w życie witryny. Wypadkową wkładu emocjonalnego użytkowników jest właśnie czas, który przeznaczają na ulubiony serwis. (…)

Już niedługo podczas tworzenia raportów i analiz trzeba będzie brać pod uwagę jeszcze jeden wskaźnik, który zadecyduje o popularności serwisu i o czasie, jaki na sobie skupia.

Będzie to wskaźnik zaangażowania – engagement. Czynnik, który powoduje, że użytkownik przepada bez reszty w serwisie. (…) Już niedługo żadne badania nie będą pomijały tej sfery, podobnie jak kwestii experience.”

– Tak czytamy w Raporcie Strategicznym IAB Polska, Internet 2007, który ukazał się raptem niecały m-c temu. I chociaż fragment ten mówi o zaangażowaniu w serwisy jako takie, to kwestię zaangażowania użytkownika można przenieść na całą komunikację marketingową, w tym reklamowe banery.

Dobry przykład znaleźć można na stronie Jay is Games. W górnej części serwisu znajduje się baner wykonany przy pomocy flasha, który prócz tego, że pełni rolę identyfikacyjną dla serwisu, jest minigrą! Wodząc kursorem myszy po banerze i odkrywając kolejne elementy klikalne, szukamy związku pomiędzy nimi. Wchodząc w interakcje z banerem, odkrywamy ukryty w grze sens poszczególnych fragmentów przedstawionego tam świata (mnie wciągnęło na dobre!).

A tu film przedstawiający cały scenariusz gry. Ale UWAGA: jeśli nie chcesz się pozbawiać przyjemności z gry, nie oglądaj filmu wcześniej, nim sam nie poświęcisz kilku(nastu) minut na zabawę. W tym celu najpierw wejdź na stronę z banerem-grą, a dopiero potem oglądnij film.

***

Poniżej zamieszczam przykład kolejnej tego rodzaju minigry logicznej. (Jeśli masz trudności z jej przejściem, albo nie masz wystarczającej cierpliwości, to możesz zobaczyć, jak przechodzą ją inni).

Polecam także uwadze Super Serif Brothers. Zero grafiki, ale… to jest dopiero grywalność!

Disaster mobile PL

5/5 - (1 vote)

Wczoraj skończyłem dwudniowe testy, które robiłem razem z Andrew Swartzem z grupy Usability Serco na zlecenie Orange UK.

Andrew to doświadczony inżynier, z 10-letnim stażem w Apple, gdzie uczestniczył m.in. przy projekcie Apple Newton (to taki PDA wypuszczony na rynek o kilka lat za wcześnie). Nota bene po dziś dzień zwykło się o nim pisać w stylu: „The Newton Messagepad was an early (and unsuccessful) recursor of the now common personal digital assistant (PDA).” To akurat za Computers. An Illustrated History Christiana Wurstera.

Rozmawialiśmy o pracy dla Apple, o jego niezapomnianym spotkaniu z Stevem Jobsem (to temat na zupełnie osobny wpis), książce na temat prototypowania, którą teraz piszę, usługach mobilnych i ich rozwoju w europie zachodniej (nasze testy były częścią większego benchmarkingu, uwzględniającego rozwój usług mobilnych w sumie w czterech krajach europejskich); jedliśmy naleśniki i pokazywaliśmy sobie zdjęcia swoich domowych kotów (tak to już jest z kociarzami). Ale nade wszystko pracowaliśmy.

Tak jak praca z Andrew to czysta przyjemność, to praca z polskimi stronami rodzimych operatorów GSM to czysty… disaster – to najczęstsze słowo padające w ciągu 16 godzin naszych testów.

Zadanie n: ściągnij grę karcianą Pasjans.
Przebieg testów: zaraz, zaraz, gdzie są gry? Ok, mam. Gdzie są gry karciane? Nie ma takiej kategorii! Jasne, przecież gry w kategorii Filmowe na pewno są dużo bardziej popularne (sic!). Może spróbujmy skorzystać z wyszukiwarki? Ok, coś znalazła. W jakiej kategorii? Nie wiadomo! Ok, ściągnijmy ją (7 zl). Mamy. Zaraz, zaraz, ale ta gra jest w języku angielskim… Czemu nikt wcześniej o tym mnie nie powiadomił? Disaster. Sprawdźmy jakie jeszcze są tu gry – spróbujmy znaleźć kategorię, gdzie jest więcej niż jedna gra. Po odwiedzeniu kilku – o jest! Szkoda, że piętro wyżej architekt informacji nie napisał ile obiektów znajduje się w tej kategorii. No cóż… disaster.

Zadanie n+1: zobacz co grają dzisiaj w kinach i spróbuj zamówić na wybrany seans bilety.
Przebieg testów: świetnie, mamy filmy. Alfabetycznie – zaczyna się od tytułu na A i ciągnie przez kolejne strony końca nie widać… a szukamy „Rodzinka Robbinsonów”. Listowanie po 10 wyników. Klik w „Następna”, klik w…, klik, klik, … (Jakby nie można zrobić listowania alfabetycznego.) Ok. Mamy. Wchodzę na film, chcę oglądnąć jego trailer. Jaki trailer? Jedyne co tu mamy to kilkanaście linków zatytułowanych: „Zdjęcie i stosowny numerek„. Zobaczmy w jakich kinach grają i o której. Kina są (z nazwy tylko) wraz z godzinami rozpoczęcia seansu. Ale Andrew przyjechał z UK, ja dopiero co 4 m-c w Wa-wie… Które z tych kin jest najbliżej nas? Disaster. Może byśmy zadzwonili do nich, spytali na jakiej są ulicy, czy są jeszcze bilety? Disaster. Ani adresu, ani telefonu.

Zadanie n+n: …
Przebieg testów: disaster, disaster, disaster.

Porównanie stanu dostępności do usług i treści mobilnych wypadło dla PL katastrofalnie. Strony operatorów nie przemyślane pod względem zawartości, pozbawione nawet podstawowej logiki w architekturze informacji (dział Muzyka mieszczący w sobie kolejny Muzyka to standard), przestarzałe, nic nie mówiącej nazewnictwo w ramach kategorii (Ubaw – co to za kategoria i to w głównym menu?) o reszcie nawet nie wspominam.

Jedno jest pewne, jest jeszcze dużo do zrobienia… co akurat mnie cieszy 🙂

Motto

„Wykwalifikowani inżynierowie producenci kuchenek mikrofalowych, projektując przyciski, zasięgają zazwyczaj rady specjalistów z dziedziny zachowań ludzkich. Chcą, by te przyciski były dobrze widoczne i by manipulowanie nimi nie sprawiało trudności. Eksperci od czynnika ludzkiego przystosowują przyciski do oczu i palców użytkowników, ale nie do ich umysłów.”

[A. Cooper, Wariaci rządzą domem wariatów, s. 44.]

Pora coś z tym zrobić…

Web Design: trendy w Internecie

Oceń tę pracę

Przełom roku zawsze sprzyja podsumowaniom, stąd nie powinien dziwić ów wpis.

Ubiegły rok, w ramach projektów layoutów stron internetowych, był raczej rokiem kontynuacji zastałych już paternów, które pojawiły się wraz ze standardem CSS i niejako upowszechniają. Znakiem rozpoznawczym stał się styl retro, nawiązujący do stylistyki z przełomu wieków XIX i XX oraz bliski wiktoriańskiej Anglii. W kolorystyce dominowały brązy; coraz powszechniej stosowane są desenie i ciężkie tekstury, przywodzące na myśl tapety ekskluzywnych lokali i materiały, z których nasze praprababki szyły sobie suknie.

Kolejnym z elementów są motywy roślin, pojawiające się zarówno jako elementy logotypów, ozdobników nadających życie stronom internetowym oraz wzorów tekstur teł.

W kolorystyce brązy łączone były z niebieskościami – wzorem Pownce (zamieszczam link do zrzutu, bo serwis 15 grudnia 2008 został zamknięty) – bądź uzupełniane przez orzeźwiające zielenie. Czasem też przyjmowały formę kolorystycznej triady: Niebo Świat tego co naziemne (roślinność)Świat podziemny. Pojawiały się też brudne odcienie szarości, w sporej części przy okazji tekstur – albo z motywami kwiatowymi (niczym wzory tapet), albo jak odrapane ściany; także jako tekstury drewna, ale z brązów sprowadzone do ciemnych szarości.

Brązy reprezentowane były przez wspomniany motyw ziemi (w sensie gleby), ale także przez dość często stosowane desenie drewna; dodatkowo pojawiały się kartony i szary papier, w ramach kolaży. W opozycji pojawiały się cukierkowe błękity, żółcienie i róże (ale te – ze względu na strony poświęcone tematyce kobiecej – występowały od zawsze).

Innym często przywoływanym motywem głównym layotu były… jak to nazwać… robótki ręczne? Odwołanie z jednej strony do motywów paper & sketch (kartony, kartki z notatników, rysunki ołówkiem, długopisem, czasem także wyryte napisy rylcem), z drugiej do materiałów i motywów przywodzących na myśl krawiectwo (motywy nożyczek i przerywanych linii, które wyznaczają trasę cięcia, pojawiające się tu i ówdzie materiały, z których szyte są stroje – jeans, filc w kratę, lny, etc.).

Zaczęły się także pojawiać elementy charakterystyczne dla teatrzyków kukiełkowych, jak to, że części layoutu zwisają na sznurkach. Upowszechnił się w końcu motyw określany przez zachodnich projektantów jako Zig-Zag, czyli ząbkowanie grafik, przypominające znaczki pocztowe bądź brzegi niektórych ciasteczek (np. Leibniz – oryginalne 52 ząbki ;).

Wszystkie one tworzyły menażerię Internetu minionego właśnie roku.

Jeśli chodzi o fonty, to – jako uzupełnienie wyżej opisanej stylistyki – coraz częściej projektanci i graficy sięgają po fonty przypominające pismo odręczne oraz czcionkę maszyn do pisania.

Wykorzystywane wcześniej do spamerskiego pozycjonowania stopki stron internetowych, które straszyły do niedawna umieszczanymi tam linkami mającymi na celu wypozycjonowanie naszej strony w ramach wyszukiwarek, zaczynają błyszczeć umieszczanymi tam rozszerzonymi motywami ilustracyjnymi, sekcjami o funkcjonalności quick link (np. spis najciekawszych artykułów), czy też formularzami kontaktu i danymi z popularnych wlepek (widgetów, np. miniaturami zdjęć z Flickr czy spisem ulubionych utworów z Last.fm oraz listą osób, które ostatnio odwiedziły blog).

A oto garść wybranych przykładów (więcej mam zebranych w prezentacji-raporcie, o którym słów kilka na końcu postu).

Retro rządzi!

Technikalia, którymi fascynowali się nasi dziadkowie (patefony, roboty, samochody, rakiety, lotnictwo): Jef Sarmiento, Level2d.com, Travis Singleton, tomatic.com, Mister Aero.

Pin-up girls i dziewczyny z tamtych lat: Practice Cafe, Style 4 You, Margot Blanche.

Promienie słoneczne (charaktyrystyczne m.in. dla pierwszcyh lat lotnictwa): Yo Vivo en Vigo, Dude Design, Phizz, Max Black.

Maszynowe, np. Courier: Mariska, Blog do Ronaldo, iSpoil.net.

Odręczne: Bootb, David Hellmann, Li Chin’s, PSYOP, Last Tweet, Starbucks Coffe At Home.

Stylizowane: McCoy, Training by Collective Idea.

Kolorystyka

Brązy i szarości: Smallman Records, Revolution Church, Matt Brett, Score Reviews.

Brązy z niebieskim: WebStock, Magpie Page, Ryan Long.

Brązy, niebieski i zielenie: Future Online Advertising, Tijs Vrolix, CSS Ninjas.

Jaskrawa kolorystyka (w opozycji do brudnych brązów i szarości): Derlington Weddings, C’est Magnifique, Smooth Habitat.

***

To wycinek z tego, co w ciągu ostatnich trzech lat dzieje się w grafice na potrzeby WWW (layoutach).

Raport-prezentacja, nad którym obecnie pracuję, zawierający znacznie więcej wytycznych oraz dużo szerszą analizę popartą przykładami (ma już blisko 1 tys. slajdów), będzie niebawem dostępny na mojej firmowej stronie. Ze względu na ogrom prac, jakie w przygotowanie jego włożyłem, będzie dostępny odpłatnie (z przeznaczeniem głównie dla agencji interaktywnych i ich klientów).

CoolBrands: sympatycznie

Oceń tę pracę

Co prawda nie interfejsowo, ani nawet nie usabilitowo, ale za to sympatycznie 🙂

W ramach konkursu CoolBrands dostaliśmy nagrodę (wczoraj była gala, dzisiaj nagroda wędrowała w biurze z rąk do rąk).

Jak napisał Albert na blogu działu IT: „Grono.net zostało uhonorowane statuetką CoolBrands jako lider WEB 2.0 i znalazło się wśród nagrodzonych gigantów Internetu takich jak Google, Allegro.pl, czy Onet.pl.”

Mnie tam cieszy, że wertując wydany przy okazji album jesteśmy zaraz po Google.pl. Co prawda alfabetycznie, ale zawsze. 😉

A tak na poważnie, to cieszą ostatnio pojawiające się tu i ówdzie dobre opinie o naszej robocie:

1. „(…) sam używam grono i ostatnio je nawet polubiłem…”

2. „Po chwilowej czkawce z zmianami designu (…) zaczynam postrzegać grono coraz pozytywniej. Jak ktoś na tym forum zauważył, ich strategia z zasięgowej zmienia się w jakościową. Zamiast testować gdzie leży granica możliwej do osiągnięcia liczby użytkowników w polskim internecie, zaczynają aktywizować i ujakosciowiać już posiadaną potężną grupie użytkowników.

Teraz jeszcze otwierają się z API (aczkolwiek nie sprawdzałem na ile dobrze napisanym i przydatnym). Już na nich psów nie wieszam, tylko się z zainteresowaniem przyglądam. (…)”

[za: net_talk@googlegroups.com, 5 czerwca 2007]

Sympatycznie.

Axure 5.5: biblioteki GUI… w końcu

Oceń tę pracę

Od kilku dni dostępna już jest (beta) wersja Axure 5.5. Z istotnych zmian pojawiły się – w końcu – edytowalne biblioteki elementów GUI (ramka Widgets w programie, poniżej na rysunku), dzięki czemu elementy, które przygotujemy sobie raz będą nam mogły służyć przy wielu różnych projektach (co prawda można to było obchodzić korzystając z Masters, ale było to bardzo niewygodne). Dobrze się stało, bo to była najwyższa pora – programy MS Visio (wzorniki kształtów w formie plików .VSS) czy OmniGraffle (biblioteki) już dawno udostępniały takie możliwości.

Korzystanie z bibliotek elementów GUI jest banalnie proste. Możemy je stworzyć samodzielnie, traktując każdą stronę (Page) w Axure jako część roboczą dla jednego z elementów. W związku z czym gdy tworzymy bibliotekę złożoną z n-elementów, to będziemy mieli projekt stworzony z n-stron.

Ważne: ułatwieniem jest możliwość oprogramowywania elementów naszej biblioteki. W związku z czym, jeśli przygotujemy sobie powiedzmy przycisk interfejsu edytora tekstu, odpowiedzialny za funkcję pogrubienie, i oprogramujemy go tak, że najechanie na nim kursorem myszy będzie wywoływało podświetlenie tego przycisku, zawsze gdy będziemy korzystali z niego jako z biblioteki, będzie on już tak oprogramowany.

Biblioteki zapisujemy jako pliki z rozszerzeniem .RPLIB.

Axure udostępnił już bibliotekę złożoną z wybranych elementów wchodzących w skład Yahoo! Design Stencil Kit. Są to m.in.:

  • siatki (grids) – do projektowania kompozycji layoutu (bardzo słabe niestety, w zasadzie do niczego się nie nadają),
  • klikalny kalendarz w formie okienka i oprogramowane karuzele (te elementy już od pewnego czasu były dostępne w sieci),
  • okienka kontrolek,
  • zwymiarowane elementy reklamy,
  • elementy interfejsów na telefony komórkowe,
  • i inne.

Pełną listę zmian, które wprowadza wersja 5.5 Axure, można zobaczyć na stronie producenta. Oczywiście najlepiej ją ściągnąć i samemu zapoznać się z nimi. Aby zaś móc rozkoszować się funkcjonalnością bibliotek, najlepiej ściągnąć ich pierwszą paczkę.Smacznego!