Strony WWW

Oceń tę pracę

Podstawowym składnikiem wszystkich witryn WWW są strony – dokumenty HTML, które możemy oglądać za pomocą przeglądarki. Strony WWW są plikami tekstowymi, w których zapisywane są informacje wyświetlane przez przeglądarki oraz etykiety HTML – polecenia interpretowane przez przeglądarkę, służące do określenia wyglądu strony.

Język HTML nie jest skomplikowany – ilość jego etykiet nie jest zbyt wielka, a sposób ich użycia jest prosty. Dzięki temu, że strony zapisywane są jako normalne pliki tekstowe, można je tworzyć nawet za pomocą najzwyklejszego edytora tekstowego, takiego jak program Notepad. Jednakże największym minusem takiego tworzenia stron WWW jest to, iż nie widzimy ostatecznej postaci strony, która czasami może się różnić od tego, co zaplanowaliśmy. Właśnie w tym miejscu można w pełni docenić pomoc jaką są programy wspomagające tworzenie stron WWW – nie tylko oddzielają one twórców od języka HTML i jego etykiet, lecz także od razu pozwalają na zobaczenie efektów pracy.

Tworzenie pierwszej witryny WWW

Możliwości projektowania witryny WWW:

q  Określenie zawartości witryny – pierwszym krokiem przy tworzeniu każdej witryny WWW jest jej zaplanowanie. Tu znajduje się omówienie określenia treści, trafienia do odpowiednich odbiorców i tego, czy używać zaawansowanych technologii, takich jak Java i ActiveX.

q  Wybór efektownego wyglądu – wpływ wyglądu witryny na odwiedzających. Wrażenie wizualne i odczucia są tak samo ważne, jak łatwość poruszania się po witrynie.

q  Importowanie istniejącej witryny – jeśli zaczęło się już budować witrynę WWW za pomocą innych narzędzi, można wykorzystać to jako punkt startowy dla nowej witryny WWW tworzonej za pomocą FrontPage 'a,

q  Rozpoczynanie od kreatora lub szablonu – tworzenie nowej witryny można rozpocząć bardzo szybko za pomocą niektórych kreatorów i szablonów, jakie udostępnia FrontPage.

q  Budowanie witryny WWW od podstaw – rozpoczynanie tworzenia witryny WWW od zera.

Edycja stron WWW

Dzięki temu, iż kod źródłowy stron WWW zapisywany jest jako normalny tekst, istnieje możliwość ich edycji za pomocą najprostszego nawet edytora tekstowego (Notepad). Tworzenie stron w taki sposób posiada wiele wad – niewątpliwie największymi są: konieczność znajomości języka HTML oraz duży nakład pracy niezbędny do stworzenia strony i nadania jej odpowiedniego wyglądu.

Zupełnie inaczej wygląda tworzenie dokumentów HTML za pomocą takich programów, jak FrontPage Editor. W programach tego typu praca jest znacznie  szybsza i efektywniejsza – wiele czynności, takich jak wyrównywanie tekstu, określanie jego kolorów, wielkości czcionki czy też stylów, wymaga jedynie kilku kliknięć myszką. Wykonywanie innych czynności, jak na przykład tworzenie tablic, formularzy, map graficznych, formatowanie wszelkich elementów stron, czy też dodawanie do nich różnego typu elementów aktywnych, jest w znacznym stopniu ułatwione poprzez okna dialogowe, które w całości oddzielają twórców stron od języka HTML, jego etykiet i parametrów.

Na strony WWW składa się wiele elementów. Jest to przede wszystkim tekst, który użytkownik będzie mógł przeczytać na stronie, umieszczona na niej grafika, elementy multimedialne, formularze itp. Sam tekst można organizować w różny sposób – w akapity, tabele czy też różnego typu listy.

Formatowanie stron WWW

O ile wpisywanie tekstu strony WWW nie jest zazwyczaj specjalnym problemem, o tyle może przysporzyć wielu trudności. Formatowanie tekstu obejmuje całość czynności służących do nakładania stronie WWW zamierzonej postaci. Określanie postaci może dotyczyć całej strony WWW, jak i poszczególnych jej elementów: paragrafów, tabel, hiperłączy czy też list.

W zasadzie  wszystkie operacje dotyczące określenia postaci tekstu wykonać można za pomocą przycisków dostępnych na pasku narzędzi Format.

FrontPage Editor udostępnia system okien dialogowych pozwalających na bardzo szybkie i wygodne określenie właściwości wyglądu wszystkich możliwych elementów , które mogą być umieszczane na stronach WWW. Okna te wyświetlane są poprzez wybranie odpowiedniej opcji z menu kontekstowego. Opcje dostępne w tym menu zależą bezpośrednio od miejsca strony WWW, w którym menu zostało wywołane.

Dodawanie elementów stron

Opisywane do tej pory czynności służyły bądź to zarządzaniu witrynami (w przypadku FrontPage Explorera), bądź tworzeniu lub formatowaniu stron WWW. Oprócz przedstawienia metod wpisywania tekstu – dodawania akapitów można umieszczać na stronach WWW elementy (listy, tablice, obrazki, czy też różnego typu elementy aktywne), które decydują o atrakcyjności tworzonych stron.

FrontPage Editor udostępnia narzędzia, które umożliwiają nie tylko dodawanie, lecz także określenie wyglądu i właściwości bardzo dużej ilości różnego typu elementów. Poczynając od pojedyńczych znaków, na stronach WWW możemy tworzyć listy, hiperłączy, dodawać obrazy lub inne pliki multimedialne, tabele, elementy aktywne – takie jak skrypty, obiekty ActiveX, aplety Javy; możemy także tworzyć dynamiczne strony prezentujące informacje zapisane w bazach danych.

Sposób umieszczania na stronach WWW poziomej linii lub wybranego symbolu jest bardzo prosty – wystarczy w tym celu wybrać jedną opcję lub podać dane w oknie dialogowym. Jednakże takie zagadnienia, jak tworzenie hiperłączy łączących poszczególne strony witryny i pozwalających na przemieszczanie się do innych stron WWW, znajdujących się w dowolnym miejscu Internetu, tworzenie skryptów lub korzystanie z innych elementów aktywnych – są znacznie bardziej skomplikowane i wymagają szerszego przedstawienia.

Listy

Wiele jest elementów decydujących o atrakcyjności strony WWW. Przede wszystkim jest to na pewno ogólna jej kompozycja, dobór tła, kolorów, elementów graficznych. Elementem takim jest także sposób prezentacji informacji znajdujących się na stronie. Tekst umieszczać możemy na stronach WWW w postaci akapitów, w tabelach lub też w formie list.

Listy nie są żadnym elementem stron WWW – są one jedynie stylem prezentacji umieszczonego na nich tekstu. W polu Change Style na pasku narzędzi Format, znajdują się takie opcje, jak: Bulleted List, Directory List, Numbered List, Menu, Definition. Są to właśnie style, których można użyć do tworzenia list.

Listy mogą posłużyć do prezentowania różnego typu informacji. Na przykład lista numerowana (Numbered List) doskonale nadaje się do przedstawienia sekwencji czynności, w których istotna jest kolejność; natomiast lista punktowa (Bulleted List) jest lepsza do zaprezentowania grupy informacji związanych ze sobą tematycznie, lecz których kolejność nie odgrywa roli. Directory (katalog) przedstawia ciąg krótkich określeń.  FrontPage Editor pozwala także na tworzenie list o strukturze zagłębionej – list w listach, oraz na określenie sposobów numerowania i znakowania list.

Hiperłącza i znaczniki

Jednymi z najważniejszych elementów, jakie można umieszczać na stronach WWW, są hiperłącza. Dzięki nim możemy przechodzić do innych stron WWW – zarówno do tych, które wchodzą w skład tej samej witryny, jak i tych, które znajdują się w zupełnie innych witrynach WWW. Hiperłącza nie muszą zresztą wskazywać na strony WWW – mogą prowadzić do plików dowolnego typu. Dzięki temu możemy na przykład pozwolić użytkownikowi na skopiowanie wybranego pliku. Zazwyczaj jednak hiperłącza używane są do przemieszczania się pomiędzy stronami WWW.

Hiperłącza mogą mieć różne postaci – może to być fragment tekstu oznaczony w specjalny sposób, obrazek lub specjalna mapa graficzna – obrazek zawierający kilka obszarów, których kliknięcie powoduje przejście do różnych stron WWW.

Każde hiperłącze, niezależnie od swojego wyglądu, musi mieć adres docelowy – adres strony, która zostanie wyświetlona w przeglądarce po użyciu danego hiperłącza. Istnieją dwa podstawowe rodzaje adresów: bezwzględne i względne. Adres bezwzględny składa się z protokołu, adresu serwera oraz ścieżki dostępu do strony na serwerze – czyli nazwy pliku i kartoteki, w której jest on umieszczony. Adresów bezwzględnych używamy wtedy, gdy chcemy stworzyć hiperłącze ze stroną znajdującą się w dowolnej innej witrynie WWW. Natomiast połączeń względnych używamy wówczas, gdy chcemy stworzyć połączenie ze stroną wchodzącą w skład witryny. W adresie tego typu umieszczamy jedynie ścieżkę dostępu do pliku w którym zapisana jest strona.

Tabele

Tabele są bardzo ważnymi i niesłychanie przydatnymi elementami stron WWW. Mogą być wykorzystywane do wielu celów – począwszy od prostego wypisywania tekstu w formie kilkukolumnowej tabelki, poprzez tworzenie estetycznie wyglądających formularzy, na określaniu struktury całej strony skończywszy.

Tworzenie tabeli może mieć różną skalę trudności i jest zależne od tego, do czego chcemy użyć tabeli oraz jaki efekt planujemy osiągnąć. O ile stworzenie tabeli nie nastręcza problemów, to jednak nadanie jej odpowiedniego wyglądu nie jest już zadaniem zbyt łatwym. Pierwszym problemem może się okazać duża ilość dostępnych możliwości; na przykład możemy określać sposób podawania wielkości tabeli, szerokości jej ramek, wielkości obszaru pomiędzy zawartością komórki a jej ramką, sposób wyrównywania tekstu, możemy także łączyć komórki sąsiadujących wierszy czy też kolumn itp. Drugim problemem jest fakt, iż ostateczny kształt i wielkość tabeli zależą od zawartości wszystkich jej komórek; dzieje się tak dlatego, że wielkość komórki jest również zależna od jej zawartości.

Tabele nie muszą służyć jedynie do prezentowania tekstów; można w nich także umieścić elementy graficzne lub pola formularzy. Są one bardzo często używane także do określenia kształtu całej strony WWW. Za ich pomocą w bardzo wygony sposób można umieszczać wszystkie elementy strony w odpowiednich miejscach.

Narzędzia dostępne w menu Table FrontPage Edytora pozwalają na bardzo szybkie i wygodne tworzenie oraz określenie wyglądu tabel, bez jakiejkolwiek ingerencji w kod źródłowy HTML.

image_pdf

Interfejsy w e-commerce: produkty szyte na miarę

Oceń tę pracę

Dzisiaj mam jakiś napad inicjatyw prosumenckich…

Rano przeczytałem w AdMagazine wpis nt. Nokia Build, czyli nowej oferty firmy Nokia, dającej możliwość przez stronę WWW dowolnie spersonalizować wygląd swojego telefonu (konkretnie – modelu 7310 Supernova). Na podobnych zasadach jak wcześniej firma Nike powołała swoją inicjatywę NikeID.

Później, przeglądając materiały z tegorocznej edycji WUD w Berlinie, „Usability im Web 2.0”, w prezentacji Franka Hohenschuh trafiłem na slajd, w którym przedstawia akcję „My Müsli: custom-mixed cereals”, a tuż obok zrzut interfejsu ze znanego sklepu, w którym każdy może sobie stworzyć wzór koszulki – Spread Shirt, a sklep ten (czy raczej sieć sklepów, bo można tam także założyć swój sklep i zarabiać na sprzedaży), wydrukuje specjalnie dla Ciebie ten konkretny wzór. Tak jak książkę można wydrukować na zamówienie (w Helion, ale i w PWN), a już niebawem – jak głosi wieść – będzie można kupić w Amazon.com wydrukowane kilka stron z konkretnej książki, miast kupować ją całą.

I co najciekawsze wydaje się być w tej całej prosumenckiej inicjatywie, to rozwój interfejsów, które by tą ideę Szycia na Miarę mogły obsłużyć – by użytkownik się nie spocił zanadto i do FAQ-a zbyt często nie zaglądał, a wyrzeźbił swoje cacko takie, co by od razu zechciał ich karton kupić i, zadowolony, do znajomych linki porozsyłał (najlepiej jeszcze przy tym korzystając z – nomen omen – interfejsu „Eksportuj kontakty z poczty e-mail”). W tym sensie rację miał Gates, gdy na przełomie lipca / sierpnia ubiegłego roku stwierdził, że najbliższe czasy w technologiach będą należały do rozwoju interfejsów (a mamy też rozkwit interfejsów hardware’owych – multitouch w Apple Air (pisałem o tym), Wii, czy w końcu rezygnacja z klawiatury na rzecz touchscreen w telefonii jako takiej.

Poniżej kilka interfejsów z wymienionych wyżej inicjatyw prosumenckich. Warto się zastanowić czy aby i Twój biznes nie jest już gotowy do tego typu rozwiązań. Pytanie tym bardziej zasadne, że coraz częściej – pracując dla moich klientów – natrafiam na przypadki, gdzie klasyczne rozwiązania umożliwiające dotarcie do produktu, albo jego skonfigurowanie, już nie wystarczają.

I żeby pokazać coś z rodzimego podwórka – interfejs ze sklepu FajneUpominki.pl. Tysz fajny 😉

Aktualizacja: i jeszcze z innej prezentacji z WUD z Berlina (Steffena Hück), znalazłem stronę, na której, w ramach firmy jubilerskiej Swarovski, udostępniono klientom interfejs do zaprojektowania swojej biżuterii! Świetna rzecz. Nasz W. Kruk by mógł coś takiego wystawić 🙂

image_pdf

Grid: Boskie proporcje (teoria)

Oceń tę pracę

Siatki (ang. grids) to niezbyt popularny temat w krajowym środowisku projektowym, a który pojawia się czasem w dyskusjach, niekoniecznie oddając swój sens (zdarzyło mi się już kilkukrotnie słyszeć od klienta, bym mu poprawił siatki, mając na uwadze, że rozchodziło mu się o architekturę informacji).

Architekturę informacji – ale i layout – można opierać o siatki, ale nie jest to niezbędne dla czytelnej prezentacji danych (toczyłem zresztą w swoim czasie spór o to z jednym grafikiem). Podstawową przesłanką projektowania w oparciu o siatki jest teoria wywodząca się ze szkoły Pitagorejskiej (bliskiej mojej umysłowości), wg której u podstaw świata stały liczby i związki między nimi.

By pozwolić zrozumieć podstawy teorii siatki, spróbuję dokonać rekonstrukcji mojej wiedzy z zakresu studiów z filozofii 🙂

Elementy teorii piękna

Pitagorejczycy wierzyli, że najwyższym dobrem w świecie jest ład, który określali mianem harmonii (wcześniej ten termin nie istniał i to właśnie Pitagorejczycy nadali mu sens). Harmonia była wyrazem stosunków między poszczególnymi bytami, w tym stosunków w ramach elementów bytów. Teoria ta dotyczyła całej wiedzy na temat świata – zarówno spraw związanych z metafizyką jak i natury piękna, która jest przedmiotem estetyki. Wedle teorii tej by móc stwierdzić, czy dane dzieło jest piękne, należało zbadać stosunek poszczególnych części dzieła określanych mianem modułów. Dotyczyło to tak architektury, jak i sztuki sakralnej i użytkowej.

***

Na marginesie: na podstawie teorii piękna opartej o badanie stosunków modułów do siebie, powstał kanon (zapożyczony zresztą ze sztuki starożytnego Egiptu), w tym słynny kanon Leonarda da Vinci, zilustrowany jako mężczyzna z rozłożonymi ramionami, wpisany w kwadrat i koło.

***

Dążąc do określenia podziału idealnego, Pitagorejczycy odkryli liczbę φ (fi), wyznaczającą złote – czy też boskie – proporcje:

„boska proporcja (łac. sectio aurea) – podział odcinka na dwie części tak, by stosunek długości dłuższej z nich do krótszej był taki sam, jak całego odcinka do części dłuższej (stosunek ten nazywa się złotą liczbą i oznacza grecką literą φ).”

Liczba ta odegrała kolosalne znaczenie w architekturze, wyznaczając m.in. ślimaczycę głowicy jońskiej (na rysunku poniżej).

Na jej bazie wzniesiono także m.in. Partenon (studium proporcji), wyrzeźbiono słynne posągi – Apolla Belwederskiego (studium proporcji) czy Afrodytę z Milo. Ma także ona znaczenie w ramach tego co wiemy z zakresu teorii widzenia: otóż oko ludzkie ulega wielu złudzeniom optycznym i tak na przykład, by uniknąć deformacji widzianej ludzkim okiem kolumny, leciutko pogrubia się ją w 1/3 wysokości.

Teoria siatki

W formie uproszczonej złote proporcje oddaje się w ramach trójpodziału, dzieląc płaszczyznę na trzy części, w celu wydzielenia ram dla kompozycji: 2/3 + 1/3 (poniżej).

Jak widać na powyższych rysunkach, stosując zasadę trójpodziału tworzymy coś w rodzaju siatki, na bazie której będziemy mogli zakomponować podstawowe bloki treści (zdjęcia, video, tekst), określić ich szerokości, odstępy między nimi, a czasem nawet i wysokości tak, że w ten sposób powstała kompozycja będzie spełniała warunki harmonii (w sensie teorii Pitagorejczyków rzecz jasna).

W malarstwie sztukę opartą o studium siatek rozpropagował holenderski malarz, Piet Mondrian.

Oczywiście nie wszystkie siatki zbudowane są o zasady złotego podziału. Czasem efektem końcowym ma być dynamiczna kompozycja, albo taka, która wywołuje w widzu rozdrażnienie, a nie poczucie harmonii.

Metoda kompozycji na bazie siatek przyjęła się także w ramach składu prasy, książek i drukowanych produktów reklamowych (rysunek poniżej). Jeśli zaś chodzi o WWW, to pierwszą bodajże stroną internetową zbudowaną w oparciu o siatkę była witryna New York Times. Ale o tym będzie już w osobnym wpisie, poświęconym praktyce stosowania siatek.

Polecam uwadze knigi:

  • L. Roberts, Grids: Creative Solutions for Graphic Design, Wiley, 2008.
  • G. Ambrose, P. Harris, Basics Design: Grids, AVA Publishing, 2008.
  • T. Samara, Making and Breaking the Grid: A Graphic Design Layout Workshop, Rockport Publishers, 2005.
  • K. Elam, Grid Systems: Principles of Organizing Type, Princeton Architectural Press, 2004.
  • B. Tondreau, Layout Essentials: 100 Design Principles for Using Grids, Rockport Publishers, 2009.

W języku polskim chociażby:

  • G. Ambrose, P. Harris, Twórcze projektowanie, PWN, 2007 (chociaż generalnie dość średnia to pozycja).
image_pdf

Clicktracking: coraz lepsze narzędzie

5/5 - (1 vote)

Jak pisałem wcześniej o clicktrackingu, to omawiałem dostępne systemy, z których można skorzystać, a dzięki którym możemy badać skuteczność naszej strony WWW – w przełożeniu na oddane kliknięcia – i poprawiać zauważone mankamenty. Ale, jak się okazuje, clicktracking jest w stanie dostarczyć nam wiedzy również odnośnie tego, w CO ludzie klikają, gdy klikają na elementy graficzne; które fragmenty grafik pobudzają ich do oddania kliknięcia w to, a nie inne miejsce. Te badania dostarczają nam z jednej strony wiedzy na temat podnoszenia skuteczności reklam (w przeliczeniu na kliki) nie posilając się przy tym „metodami szemranymi”, w ramach których okłamuje się użytkowników umieszczając na grafikach elementy przypominające interfejsy (takie jak chociażby niby-radiobutton), z drugiej strony mówią nam coś na temat tego jak informacje pobierane przez percepcję wzrokową przekładane są na nasze decyzje i odnotowywane w formie kliknięć… co do piksela. Jak wcześniej palec wskazujący był przedłużeniem naszego wzroku, tak teraz jego przedłużeniem jest kursor myszy na ekranie.

Niedawno trafiłem na wyniki interesującego badania. Respondentów na stronie głównej Digg poproszono, by poświęcili chwilę czasu na oddanie kliknięć w elementy graficzne, które wcześniej zostały przygotowane.

Badanie rozpoczynało się od wyświetlonego szarego prostokąta (dalej: z czarnym kółkiem, napisem „click here”, uśmiechniętą buźką przypominającą emotikon i przecinającymi się liniami), a kończyło na wizualizacji wyników wszystkich oddanych kliknięć przez uczestniczących w badaniu respondentów, w tym wskazaniu na wyniki osoby, która wzięła udział w teście. Razem w badaniu uczestniczyło ponad 40 tys. osób, a przebieg samego badania można prześledzić chociażby na tej stronie.

Wszystkie wyniki kliknięć zagregowano później w celu analizy i wyodrębnienia stref, które w badaniu były najbardziej gorące (najczęściej klikane przez użytkowników).

Gdy nałożono na siebie wszystkie cieplne mapy okazało się, że użytkownicy najczęściej klikali w centralne elementy obrazków oraz na ich rogach.

Gdy przyglądnąć się samym obrazkom i wynikom kliknięć stwierdzimy, że centralne rejony były najczęściej klikane gdyż elementy, które oddziałują na osoby oglądające obrazki i klikające na nie, zostały umieszczone w centralnych częściach grafik. Widzimy w ten sposób jak ekspozycja wpływa na nasze wydawałoby się nic nie znaczące decyzje o kliknięciach.

Interesujące jest także to, że spora część kliknięć została oddana w rogi przygotowanych grafik, z przewagą po prawej stronie.

Badanie ewidentnie pokazuje, że kursor myszy nie jest tylko przedłużeniem naszej ręki, ale – co ważne – także czymś w rodzaju przedłużenia naszego wzroku.

Dodatkowym wnioskiem, jaki można wyciągnąć z wyżej opisanego badania, to możliwość wykorzystania systemu clicktrackingowego jako nowej metody badawczej w psychologii (a nie tylko w usability). Badanie, w które elementy widzianych obrazków klikamy, wydaje się być także przyszłym orężem w rękach specjalistów od reklamy internetowej, którzy będą mogli badać interakcje w coraz bardziej skomplikowanych grafikach w tym zdjęciach, jak na przykład to, zaprezentowane poniżej, i wyciągać wnioski dla swoich kampanii.

Clicktracking: coraz lepsze narzędzie stanowi obecnie jeden z kluczowych elementów analizy zachowań użytkowników w środowisku cyfrowym, zwłaszcza w obszarze projektowania interfejsów, marketingu internetowego oraz optymalizacji serwisów WWW i aplikacji. Clicktracking, rozumiany jako technika rejestrowania i analizowania miejsc oraz sekwencji kliknięć użytkowników, pozwala na empiryczne poznanie sposobu korzystania z systemów informatycznych. W przeciwieństwie do deklaratywnych metod badawczych, takich jak ankiety czy wywiady, clicktracking dostarcza danych opartych na rzeczywistych działaniach użytkowników, co znacząco zwiększa ich wartość poznawczą.

Początkowo clicktracking był narzędziem stosunkowo prostym, ograniczającym się do rejestrowania kliknięć w określone elementy strony internetowej. Jego głównym celem było ustalenie, które linki lub przyciski są najczęściej wybierane przez użytkowników. Z czasem jednak technologia ta uległa znacznemu rozwojowi, zarówno pod względem zakresu zbieranych danych, jak i możliwości ich interpretacji. Współczesne narzędzia clicktrackingowe oferują zaawansowane wizualizacje, integrację z innymi systemami analitycznymi oraz możliwość analizy zachowań w czasie rzeczywistym.

Jednym z najważniejszych osiągnięć rozwoju clicktrackingu jest wprowadzenie map ciepła, które w graficzny sposób prezentują intensywność interakcji użytkowników z danym interfejsem. Mapy te pozwalają szybko zidentyfikować obszary szczególnego zainteresowania, a także elementy ignorowane lub problematyczne. Dzięki temu projektanci i analitycy mogą lepiej zrozumieć, w jaki sposób użytkownicy interpretują układ strony oraz jakie decyzje podejmują w procesie nawigacji.

Coraz lepsze narzędzia clicktrackingowe umożliwiają również analizę sekwencji działań użytkownika, a nie jedynie pojedynczych kliknięć. Pozwala to na odtworzenie ścieżek nawigacyjnych oraz identyfikację momentów, w których użytkownik rezygnuje z dalszej interakcji lub napotyka trudności. Tego rodzaju analiza ma szczególne znaczenie w projektowaniu procesów złożonych, takich jak formularze, procesy zakupowe czy rejestracja konta, gdzie nawet drobne bariery mogą prowadzić do porzucenia zadania.

Warto podkreślić, że rozwój clicktrackingu wiąże się także z postępem w zakresie integracji danych. Nowoczesne narzędzia łączą dane o kliknięciach z informacjami demograficznymi, kontekstowymi oraz behawioralnymi, co umożliwia bardziej precyzyjną segmentację użytkowników. Dzięki temu możliwe jest nie tylko określenie, gdzie użytkownicy klikają, lecz także kim są, w jakim celu korzystają z systemu oraz jakie mają potrzeby i oczekiwania.

Clicktracking zyskuje coraz większe znaczenie w projektowaniu zorientowanym na użytkownika, ponieważ umożliwia iteracyjne doskonalenie interfejsów na podstawie danych empirycznych. Zamiast opierać się wyłącznie na intuicji projektanta, decyzje projektowe mogą być podejmowane w oparciu o realne wzorce zachowań. Takie podejście zwiększa użyteczność i dostępność systemów, a jednocześnie redukuje ryzyko kosztownych błędów projektowych.

Nie bez znaczenia pozostaje również rola clicktrackingu w obszarze marketingu i e-commerce. Analiza kliknięć pozwala ocenić skuteczność kampanii reklamowych, rozmieszczenie treści promocyjnych oraz efektywność tzw. wezwań do działania. Coraz lepsze narzędzia clicktrackingowe umożliwiają testowanie wariantów interfejsu i treści, co sprzyja optymalizacji konwersji oraz lepszemu dopasowaniu oferty do zachowań użytkowników.

Rozwój clicktrackingu rodzi jednak także pytania natury etycznej i prawnej, związane z ochroną prywatności i danych osobowych. Wraz ze wzrostem precyzji narzędzi analitycznych rośnie potrzeba transparentności oraz zgodności z regulacjami dotyczącymi ochrony danych. Współczesne systemy clicktrackingowe coraz częściej uwzględniają mechanizmy anonimizacji oraz świadomej zgody użytkownika, co stanowi odpowiedź na te wyzwania.

Clicktracking jako coraz lepsze narzędzie odgrywa istotną rolę w analizie i projektowaniu interakcji cyfrowych. Jego rozwój polega nie tylko na zwiększeniu dokładności pomiarów, lecz przede wszystkim na pogłębieniu interpretacji zachowań użytkowników oraz integracji danych z różnych źródeł. W efekcie clicktracking przestaje być prostą techniką statystyczną, a staje się zaawansowanym narzędziem wspierającym podejmowanie decyzji projektowych, marketingowych i strategicznych w środowisku cyfrowym.

image_pdf

Projektowanie: myślenie o konsekwencjach

Oceń tę pracę

Dawno nie pisałem… na blogu. Co zrobić, gdy chwilę czasu ma się tylko przy okazji choroby. Jako że morzy mnie gorączka, nadarza się okazja by spisać kilka przemyśleń.

***

1. Projektowanie to przede wszystkim myślenie – definiowanie problemów projektowych i ich rozwiązywanie. Rysowanie makiet i AI to sprawa wtórna w stosunku do „zobaczenia” (zdefiniowania) problemu i jego rozwiązania (koncepcji). Poza tym, czasem dany problem miewa kilka rozwiązań – jedne są lepsze, drugie gorsze. W dodatku bywa też i tak, że jedne rozwiązania są lepsze dla użytkowników, inne są lepsze dla wydawcy serwisu. Ostateczne rozwiązanie może okazać się nie trywialne.

2. Weźmy dla przykładu taką funkcję: „Wyrażanie opinii”.

Funkcja wyrażania opinii jest funkcją ogólną, tj. podpadają pod nią różne funkcje szczegółowe jak chociażby:

  • dodawanie komentarzy,
  • gwiazdkowanie,
  • system 'łapkowy’ – jak sam go określam, bazujący na dłoni z kciukiem wystawionym do góry, symbolizującym, że moja opinia jest na Tak, i z kciukiem zwróconym ku dołowi, symbolizującym, że jestem na Nie,
  • i inne systemy opiniowania.

3. Każdy z tych systemów opiniowania ma swoje konsekwencje – zarówno dla łatwości wykonywania czynności wyrażania opinii przez użytkowników (czyli tego, co określam mianem używalności), jak i dla wydawcy serwisu.

4. Każdy z nich to konkretna decyzja projektowa. Niby wszystkie z powyższych systemów opiniowania służą temu samemu – wyrażaniu opinii – jednak jedne rozwiązują pewne klasy problemów projektowych, inne nie.

5. Weźmy dla przykładu system wyrażania opinii przez komentarze.

System ten jest najlepszy z powyższych, gdy celem, który przed nami stoi, jest zbieranie wartościowego contentu, bądź gdy potrzebujemy informacji od użytkowników natury jakościowej.

Przeciwieństwem do niego będzie ilościowy system 'łapkowy’. Prosty w użyciu, lecz nie dający wiedzy merytorycznej, czasem niezbędnej innym użytkownikom.

System bazujący na komentarzach ma jednak pewne swoje daleko idące konsekwencje. Projektant musi zdecydować o tym czy:

  • użytkownicy mają mieć możliwość wyrażania swoich opinii anonimowo czy tylko przez osoby w jakiś sposób zweryfikowane przez system (np. tylko zalogowane, a więc i zarejestrowane);
  • konsekwencją powyższego jest także ustalenie czy – jeśli przyjąć, że także użytkownicy nie posiadający konta w danym systemie (nie zarejestrowani) będą mogli wyrażać swoje opinie przez komentarze, to powinien być jakiś inny system ich weryfikacji, np. podanie adresu e-mail. Jeśli tak, to po co? (Może po to, by w przyszłości powiadomić przy pomocy tego adresu osobę, że ktoś dodał także komentarz);
  • inną konsekwencją jest także przykładowy, a następujący fakt: w przypadku gdy damy możliwość dodawania opinii przez komentarze tylko osobom zarejestrowanym, współczynnik przyrostu komentarzy będzie dużo wolniejszy, niż w przypadku umożliwienia wyrażania takich opinii przez osoby nie zarejestrowane. Jednak to znowu może rodzić konsekwencje mniejszej ilości osób rejestrujących się, jeśli zaniedbamy kwestię uwypuklenia innych opcji, które dla użytkownika zarejestrowanego będą stanowiły (przynajmniej potencjalnie) wartość;
  • powstaje pytanie czy komentarze można komentować? Co powoduje powstanie struktury drzewiastej komentarzy, a przez to i – nierzadko – mniej czytelnej;
  • a może komentarze można oceniać? Jeśli tak, to czy tylko w ramach przyznawania plusików, czy także minusów? Czy wpływa to na sposób wyświetlania komentarzy – domyślnie będą wyświetlane najnowsze, czy też te z najwyższą ilością plusów?;
  • Itd.

6. Odmiennym, od powyższych systemów komentowania i 'łapkowania’, jest system gwiazdkowy, umożliwiający oddawanie głosów w ramach pewnej przyjętej wcześniej skali – powiedzmy od jeden do pięciu.

W sensie wizualnym (a więc i na AI) może to być klasycznych system gwiazdek, bądź slider, czyli interfejs analogowy z suwakiem przypominającym te z equalizera.

Ale… przyjęcie dwu różnych form wizualizacji wyników ma także swoje konsekwencje.

  • Możemy wyświetlać wyniki jako średnią ocenę zebraną przez głosowanie wraz z informacją ile głosów zostało oddanych. (I znowu – czy tylko zalogowani mogą głosować, czy niezalogowani też?).
  • Oraz możemy wyświetlać bardziej szczegółowo informacje – ile głosów na 5 gwiazdek zostało oddanych, ile na 4, na 3 itp.

Użytkownik odczytujący opinie w przypadku wizualizacji gwiazdek sposobem drugim ma więcej informacji nt. faktycznej wartości produktu ocenianego, niż w przypadku pierwszym. Gdyż może się zdarzyć, że średnia 3 bierze się raz z faktu, że wiele głosów na 5 zostało raz zaniżonych prze ocenę na 1, a innym razem, że produkt jest po prostu przez większość oceniany na 3, z małymi odchyleniami między 2 i 4.

Informacyjnie to dwa różne przypadki.

7. Wybór czasem też nie jest prosty. Musi godzić interesy użytkowników (w tym kwestie prostoty wykorzystania) z interesami wydawcy.

W sensie prostoty (tak ostatnimi czasy przecenianej przez osoby związane z tworzeniem aplikacji WWW i nadużywanej) najlepszym wyborem zapewne byłby system 'łapkowy’. Ale znowuż powstaje problem, gdyż w ramach interesów wydawcy może być gromadzenie unikalnych treści – wówczas lepszą odpowiedzią na zapotrzebowanie klienta będzie system dodawania komentarzy.

8. Dla komplikacji zadania, zawsze można jeszcze stworzyć systemy hybrydowe. Czyli takie, na które składają się elementy bądź nawet połączenia różnych rozwiązań.

Reasumując: definiuj problemy projektowe i – przywołując Einsteina – „Twórz rozwiązania tak proste jak to możliwe, ale nie prostsze.” I myśl… o konsekwencjach swoich projektów.

I rzecz na koniec, gdyż przeraża mnie już trochę narzędziowe podejście do projektowania: w projektowaniu to nie rysowanie jest najważniejsze. Jak mawia moja żona: dwie osoby o różnym poziomie talentu, wyposażone w płótno i farby (więc te same narzędzia), stworzą obrazy o zupełnie różnej wartości artystycznej. Chociaż ważne jest jak to, co zaprojektujesz, ostatecznie dla użytkownika będzie wyglądało, to definiowanie i rozwiązywanie problemów projektowych jest kwintesencją projektowania jako takiego. Jak, na przykład, kwestii stworzenia mechanizmów zwiększających ilość odsłon w serwisie Twojego klienta (problem projektowy) i to tak, by użytkownicy czuli się usatysfakcjonowani wprowadzonymi rozwiązaniami (jedna z wytycznych).

 

Social Web: projektowanie społecznościowe

Właśnie jestem w trakcie lektury „Serwisy społecznościowe. Projektowanie” autorstwa Portera; niedawno też przerobiłem „Neuro Web Design” Susan Weinschenk (o tej książce pisał też ostatnio Maciej). Ani jedna, ani druga lektura nie zrobiły (robią, gdyż Serwisy społecznościowe jeszcze czytam) większego wrażenia. Powody są dwa: 1) na studiach wpajano mi podstawy socjotechniki, w tym badania Stanleya Milgrama oraz 2) lektura książki Cialdiniego „Wywieranie wpływu na ludzi” była podstawowym podręcznikiem do tych zajęć, a w obu książkach – i Portera i Weinschenk – sporo odwołań do Cialdiniego. (Na marginesie: ostatnio uzupełniam listę książek z zakresu UCD, które posiadam, więc zainteresowanych odsyłam do mojej kolekcji).

ALE… projektowanie na potrzeby Internetu wymaga by pamiętać o podstawowym czynniku komunikacji: Człowiek to nie tylko zwierzę (ze swoim bagażem psychofizjologicznym), ale i zwierzę społeczne! Co z tego wynika dla Weba? Zobaczmy.

„Tylu tu ich jest – musi być fajnie”

Taki efekt mają przynieść wlepki na blogi, na których widnieją portrety osób, które bądź to mają założone konto w danym serwisie, bądź też – jak w przypadku My BlogLog – odwiedzają jeden z blogów, którego autor zrzeszony jest w tym samym systemie agregacji informacji, co i jego czytelnicy.

Przypomina mi się tutaj jedna z rozmów, tocząca się bodajże na Flakerze, gdy ktoś komentujący Świstak.pl zarzucił Rafałowi Agnieszczakowi, że na stronie głównej widnieje boks „Zobacz kto do nas ostatnio dołączył” ze zdjęciami świeżo upieczonych użytkowników. Rafał – komentując po swojemu – słusznie zauważył, że statystyki Z boksem i BEZ boksu mówią same za siebie, czy boks jest wart cennej przestrzeni strony głównej.

Jak to działa? Ano trochę tak, jak w jednym z eksperymentów Milgrama (na spółę z Bickmanem i Berkowitzem) w ramach którego grupa osób stojących na ulicy wpatrywała się w okna szóstego piętra budynku, przy którym stali. Zauważano, że przechodnie przechodzący obok „gapiów”, w ramach społecznego bodźca także zaczęli spoglądać w owe wypatrywane miejsce, w oczekiwaniu, że dojrzą tam coś interesującego – coś, w co wpatrują się INNI. Przy czym – i to jest interesujące – czym owych INNYCH wpatrujących się było więcej, tym – stwierdzono – bodziec pobudzał większą część przypadkowych przechodniów.

Jaki z tego wniosek? Ano chociażby taki, że pokazywanie w serwisach INNYCH – na fotkach, w blokach „Ostatnio tu byli”, „Ostatnio zalogowani”, „Nowi zarejestrowani…” etc. – sprzyja procesowi rejestracji, włączenia się do społeczności.

I to jest patent numer 1.

„Skoro ON tego używa, to musi być fajne”

Patent numer dwa w pewnym sensie związany jest z pierwszym, acz bazuje na sile autorytetu, a nie na sile ilości (masy). Zobaczmy jak to działa.

Case polskich mikroblogów: „bitwa” systemów mikroblogingowych odbywa się przy pomocy celebrites. Kominek dołączając do Blipa przyprowadził ze sobą rzeszę swoich wiernych. Grzesiek pisząc na swoim AntyWebie achy i ochy pod adresem Flakera – a miało to miejsce jeszcze w pierwszych m-cach funkcjonowania serwisu – przyczynił się z pewnością do zwiększenia w tym czasie ilości nowych użytkowników, w tym rejestracji. Adam wręcz otwarcie mówi, że bitwę wygra ten, kto posiądzie Dodę (nie w dosłownym znaczeniu :). Stąd zresztą chwilę później Blip zaczął się chwalić pozyskaną Frytką.

Case Adtaily: przebiegał trochę inaczej, acz ważną rolę odegrał tu Maciej Budzich, na którego blogu chyba jako pierwszym zaczęły pojawiać się reklamy z systemu AdTaily oraz informacje 'z czym to się je’.

Społeczna siła autorytetu (również anty-autorytetu czy po prostu oszołomstwa) istotna jest z punktu widzenia projektowania do Internetu. Łącząc patent nr 1 z patentem nr 2 otrzymujemy mieszankę wybuchową, gdyż nagle się okazuje, że czytelnikami bloga X są same znane osobistości. Przekaz tego komunikatu dla osób postronnych jest tak silny, że – chcąc nie chcąc – blog taki szybko ląduje w zaskrybowanych kanałach RSS. Pisze też o tym Porter podając przykład używania internetowej aplikacji przez Setha Godin, autora m.in. znanej u nas „Fioletowej krowy” i skrzętnego wykorzystania tego faktu przez ludzi z marketingu w celu zwiększenia ilości rejestracji przez odwołanie się do faktu posiadania tak zacnego użytkownika.

Podsumowania czas

Istnieją pewne wariacje, a czasem i zagrożenia w stosowaniu powyższych technik. Na przykład:

  • Opcja „Tylu ich tu jest” to także miecz obosieczny. Gdy liczba aktywności w Twoim serwisie nie jest zbyt duża, a w dodatku liczba zarejestrowanych użytkowników jest raczej licha, pokazując jak mało się u Ciebie dzieje, strzelasz sobie gola. Dla tego problemu zdaje się być dobra ilustracją Szufler. Serwis z opiniami nt. gier, książek, muzyki i filmów, w ramach którego główną szpaltę na stronie głównej poświęcono listowaniu tego, co w danym momencie robią użytkownicy serwisu. Nie ma tego zbyt wiele, co INNYCH nie zachęca raczej do rejestracji.
  • Opcja „Jesteśmy hermetyczni” jest bardzo ciekawa. W naszej sieci wspierały się nią grono.net w początkach swojego istnienia, gdzie konto w serwisie można było założyć tylko i wyłącznie na zaproszenie, nie było możliwości zobaczenia podstron bez zalogowania, a strona główna nie wyjaśniała czym w istocie serwis jest. Podobna strategia została obrana przy prowadzeniu zamkniętego outlettu internetowego Bao.pl.
  • Opcja „Niech Twoi użytkownicy mówią za Ciebie” w kilku miejscach widoczna chociażby w GoldenLine: na stronie „O nas”, gdzie użytkownicy serwisu chwalą czym dla nich jest GL, czy stronie dodawania oferty pracy, gdzie zebrano wypowiedzi osób, które skorzystały z oferty.

***

Era społecznego zaangażowania moim zdaniem dopiero się rozpoczyna. I nie mówię tu o serwisach społecznościowych, a o projektowaniu społecznościowym. Mechanizmy, które mamy – opisane powyżej, ale także te z e-commerce: „klienci, którzy kupili, kupili także”, „ten produkt ma tyle i tyle opinii pozytywnych” – to dopiero początek wykorzystania społecznego zaangażowania. Stosowanie wlepek z Facebook w sklepach, pokazujących ile mamy fanów, które wśród odwiedzających zwiększają poziom zaufania do oferty. Funkcjonalności w stylu FlakTesty, które realnie podwyższają sprzedaż. To kolejne kroki. W dobie aplikacji społecznych nawet blogi tracą już swój pierwotny sens – w aktualnej formule nie są w stanie agregować wszystkich moich aktywności sieciowych. A w przeważającej części – IMHO – ludzie nie czytają blogów – czytają INNYCH.

Warto przeczytać także: Maciej Lipiec, Większość nie może się mylić.

I zupełnie na koniec – osobiście uważam, że aktualnie najlepsze patenty społecznościowe funkcjonujące w obrębie polskiego internetu ma… (i te trzy kropki będą z pewnością najlepiej klikalnym linkiem tego wpisu :). Chociaż – dodam łyżkę dziekgciu – system ten jest za trudny w użyciu dla przeciętnego użytkownika, co dobrze by było, by jego Autorzy zdali sobie jak najszybciej z tego sprawę.

Extreme usability: użyteczność ekstremalna

1. Nie cierpię tzw. audytów użyteczności i raportów, które w wyniku nich powstają. Takich klasycznych mówiących, że logo ma być u góry po lewej, musi być tagline, bo inaczej -5 do końcowej oceny, a stopka krótka (kto to wymyślił? Znam przynajmniej kilka powodów dla których warto rozbudować stopkę). Są przeważnie długie – autor piszący raport chce w ten sposób wykazać, ile pracy włożył i za co ostatecznie bierze wynagrodzenie – nudne i w przeważającej części oderwane od faktycznych problemów z serwisem.

Miałem okazję już trochę czytać raportów powstałych tu i ówdzie, biorących pod uwagę tzw. heurystyki Nielsena, które są albo przestarzałe, albo bez znaczenia dla użytkowników i ich scenariuszy użycia różnych stron; nie wspominając, że nie rzadko nie mają wiele wspólnego z celami biznesowymi klienta oraz strategią.

2. Odświeżyłem sobie niedawno lekturę „Szybcy i mądrzy” Marka Breiera i chociaż spora część książki wywołuje już uśmiech na twarzy (’managerowie, używajcie poczty e-mail, to oręż, dzięki któremu wygracie nie jeden bój’ :), to w swym przesłaniu, sposobie działania, który wniósł Jeff Bezos, książka jest wybitnie aktualna. Bądź szybki! Reaguj i wprowadzaj innowacje szybciej, niż Twoja konkurencja – inaczej przegrasz.

3. Miałem okazję uczestniczyć w ostatnim 1,5 m-ca czasu w licznych spotkaniach – zarówno jako prelegent (ClearWeb, w Realu, @rewolucja biznesu, warsztaty z usability dla Informedia), jak i słuchacz (Aula Polska). Wspominam o tym nie bez kozery, gdyż główne dwie myśli, które przy okazji spotkań starałem się przekazać, to ROZWIĄZUJCIE FAKTYCZNE PROBLEMY oraz TESTUJCIE (Always be Testing)… na żywym organizmie.

Świetnie w tą ideę wpisywało się wystąpienie Witolda Ferenc z frisco.pl na Auli, który na spotkaniu opowiadał o spontanicznym (chociaż przemyślanym) wprowadzaniu do sklepu funkcjonalności i innowacji.

Szybcy i Mądrzy!

4. Użyteczność ekstremalna, to szybkie rozwiązywanie problemów natury funkcjonalnej. Definiowanie problemów i szukanie rozwiązań – najlepsze rozwiązania powstają na styku użytkowania, w wyniku wdrożenia i interakcji z użytkownikami.

Użyteczność ekstremalna (podobnie jak programowanie ekstremalne) to wyznaczanie sobie celów, definiowanie podzadań i ich rozwiązywanie. Myślenie w ramach definiowania problemów i szukania dla nich rozwiązań. Zero heurystyk Nielsena. Zero nastawienia na gotowe rozwiązania (NIE – chcę sklep internetowy, tylko – chcę sprzedawać w Internecie; NIE – chcę badanie eyetrackingowe, tylko szukam odpowiedzi, czy slogan reklamowy zostanie zauważony, jakiego rodzaju badanie możecie zaproponować?; w końcu NIE – robimy redesign strony, może byś nam pomógł, ALE – mamy sygnały od użytkowników, że jest taki problem na stronie, poza tym chcemy wstawić tam nową ofertę i dział – uważamy, że w aktualnej wersji strony to będzie trudne, co radzicie?).

Jak przekonywałem na prezentacjach – w wielu przypadkach to nie redesing jest potrzebny serwisom, tylko przemyślane funkcjonalności. Rozwiązania potrafią być gdzie indziej, niż wzrok osób prowadzących projekt.

5. W użyteczności ekstremalnej, gdy liczy się czas i gdy testuje się na żywym organizmie, trzeba niekiedy przerzucić kwestię badań PRZED, na badania PO wdrożeniu. W tej wersji liczą się obserwacje i szybka reakcja zespołu tworzącego.

Użyteczność ekstremalna świetnie nadaje się przy tworzeniu serwisów wymagających krótkiego czasu realizacji od załogi i szybkiego wdrożenia. Nadaje się też tam, gdzie liczba zmian jest duża i przez to odczuwalna dla użytkownika (case strony głównej Allegro, zresztą – na pohybel krytykom – świetnie zrealizowany przez zespół projektowy tej firmy).

Użyteczność ekstremalna to także najlepsza metoda dla firm, które tworzą swoje wewnętrzne działy od użyteczności – dodatkowo walczą z konkurencją, bądź w szybkim czasie chcą pozyskać część rynku. Muszą być szybcy. Muszą umieć ryzykować. Trudno sobie wtedy pozwolić na długie iteracje w fazie tylko projektowej.

6. Mój ogląd z zakresu projektowania nie rzadko różni się od tych powszechnie spotykanych. Większość tego co wiem, to nie książki (chociaż przeczytałem ich trochę, a sama część mojej biblioteczki z HCI to blisko 0,5 tys. tytułów), tylko testy i badania. Większość badań i testów, które przeprowadziłem, to te na żywym organizmie.

Nie słuchaj co użytkownicy mówią (a przynajmniej nie zawsze) – patrz co robią! Wprowadzaj poprawki, uaktualnienia, czasem coś „zepsuj” – i obserwuj co robią użytkownicy, a uzyskasz wiedzę czy faktycznie zepsułeś. Ale przede wszystkim myśl problemami, a nie gotowymi przepisami. Szybko i mądrze.

image_pdf