WeTestWeb

Czy kolory tekstu i jego tła ma znaczenie? Zapewne stwierdzisz, że tak – mają one przecież spory wpływ na odczucia estetyczne wywoływane przez stronę. Ponadto źle dobrane kolory mogą znacznie utrudnić czytanie tekstu. Czy jednak są to jedyne kryteria, którymi należy oceniać dobór kolorów? Spójrzmy na to w kontekście pewnego przykładu.

Parę dni temu robiłem zakupy w internetowym sklepie Wólczanki. Po wybraniu interesujących mnie towarów, podaniu miejsca i sposobu dostawy przyszedł czas na zapłatę. Wybrałem płatność za pomocą systemu platnosci.pl. Gdy proces ten dobiegł końca, system przekierował mnie z powrotem do sklepu, gdzie czekał na mnie następujący komunikat:

Czy, na podstawie powyższego obrazka, jesteś w stanie zgadnąć, o czym informował ten komunikat? Domyślam się, że od razu skojarzył Ci się on z informacją o jakimś błędzie. Być może nawet pomyślałeś już o konieczności wykonywania telefonu do obsługi sklepu, wyjaśniania problemu, itd. Innymi słowy, jeszcze przed przeczytaniem komunikatu (a przecież bardzo rzadko czytamy je dokładnie), wywołał on w Tobie raczej negatywne i nieprzyjemne emocje.

Spójrzmy zatem, jaka była prawdziwa treść tego komunikatu:

Tego zapewne się nie spodziewałeś. Podejrzewam jednak, że nawet po dokładnym przeczytaniu komunikatu, odczuwasz pewien brak spójności i budzi on w Tobie (jako użytkowniku) pewien niepokój. Dzieje się tak, ponieważ w przyrodzie, kolor czerwony zazwyczaj informuje o zagrożeniu. I choć dość daleko nam już do świata przyrody, to jednak nasz mózg nadal kojarzy ten kolor z niebezpieczeństwem (a w przypadku komunikatów – z błędem).

Oczywiście problem ten można bardzo łatwo naprawić. Wystarczy zmienić kolorystykę tego komunikatu (najlepiej na zieloną).

Zastanów się czy podobny problem nie występuje na Twojej stronie. Nie chcesz przecież, aby odwiedzający kojarzyli ją z uczuciem niepokoju (szczególnie, jeśli jest to strona, na której prowadzisz sprzedaż).

W jednym z poprzednich wpisów zwróciłem Twoją uwagę na to, iż strona internetowa może wyglądać różnie, w zależności od przeglądarki, w której jest wyświetlana. Najwięcej tego typu problemów sprawiały zazwyczaj różne wersje Internet Explorera. Przeglądarki z tej rodziny mają około 32% udziału w rynku*, więc warto zadbać, aby strona wyświetlała się w nich poprawnie**.

Tutaj jednak pojawia się pierwsza przeszkoda. W jaki sposób mieć jednoczesny dostęp do trzech różnych wersji Internet Explorera? Jednym z rozwiązań tego problemu, jest posiadanie trzech komputerów, a na każdym z nich innej wersji tej przeglądarki (koniecznie uważaj, aby Windows Update jej nie zaktualizował ). Na szczęście istnieje też o wiele prostszy sposób, który nie wymaga aż trzech komputerów.

Możliwość obejrzenia naszej (i nie tylko) strony w różnych wersjach IE (5.5, 6, 7 i 8 ) daje nam program IETester. Jest to świetne, stosunkowo proste w obsłudze i, co najważniejsze, darmowe narzędzie, z którym niewątpliwie powinieneś się zaprzyjaźnić.

Nie zwlekaj ani chwili dłużej! Pobierz IETestera i sprawdź, jak Twoje strony prezentują się w różnych wersjach Internet Explorera.

* Oczywiście popularność tych przeglądarek wśród osób odwiedzających Twoją stronę może być inna.

** Google zapowiedziało, że od marca 2010 roku przestanie wspierać IE6. Czy jednak Ciebie stać na taki krok?

W styczniu media (przynajmniej we Wrocławiu) dość mocno rozpisywały się o starcie nowego portalu KreatywnyWroclaw.pl. Przyjrzyjmy się zatem tej stronie.

Na pierwszy rzut oka, wszystko wydaje się być w porządku. Co prawda wygląd strony w niektórych miejscach trochę się “rozjeżdża”, jeśli nie korzystamy z FireFoxa, a zbyt mały rozmiar części tekstów powoduje, że nawet użytkownik z dobrym wzrokiem musi przybliżyć się do monitora, to jednak ogólnie stronę można ocenić pozytywnie. A właściwie można by było ją tak ocenić, gdyby nie jeden drobny szczegół…

Wyobraźmy sobie bowiem, że przeglądając stronę trafiliśmy na ciekawy artykuł, o którym chcemy powiedzieć znajomym. Oczywiście najłatwiejszy sposób nakierowania ich na tenże artykuł to podanie im do niego linka. I właśnie tu czeka nas spore zdziwienie. Adresy podstron w portalu są bowiem… olbrzymie. Spójrzmy na jeden przykład:

http://kreatywnywroclaw.pl/wps/portal/creative/kreatywny/aktualnosci/muzyka/koncerty/!ut/p/c5/hY5bjoIwAEXX4gImbQUBPzHlIW8FFPpDCiIgWBAQxNUPG5hMzufJyb2AgBVGp6qgY9Uy2oAIECFxbFXVTQ1BTdUgPPKyo4uhi6AEVx__7SH8pzYAKZo2XXeuOKs_eDjOWMHngQtm392SGsnbboY1LY300Shtt9yDZi_qOL3XPcuKFuvas3ZuN6GROdTRAzKDeMfH7xdps9iMsx3bl4bBkdyjEmWDQNLUT-QDskpWzfndmqg4WEu0OyXIseYf4OjtMwcxIGIiY8nd-5iDrqfj9bXC8UhFnOQKIAAR5BP_IXWupTTOd0nMwPG9h53YJqzHpZ7sKpPGnvZ2MJ50_501ly5knzKPVDdiF9_sF1v0fMiP5ouFXzFsL_NJnq70XMibDeie0TfXis0vzvT7tQ!!/dl3/d3/L2dJQSEvUUt3QS9ZQnZ3LzZfTk1GRkhLRzEwR0ZHMDBJNEFOSDdVTzEwODA!/?nID=6_NMFFHKG10GFG00I4ANH7UO1080&cID=6_NMFFHKG10GFG00I4ANH7UO1080

Spokojnie, Twoja przeglądarka wcale nie ma błędu. Ten link naprawdę jest aż tak długi (ponad 700 znaków!). Wbrew pozorom nie jest to także link do artykułu ukrytego bardzo głęboko w strukturze strony, lecz do jednej z głównych podstron (dział koncerty w aktualnościach).

Czy wyobrażasz sobie przesłanie takiego adresu SMSem lub (jeszcze gorzej) przekazanie go ustnie? Równie niemożliwe jest jego zapamiętanie. Powoduje to, że chcąc trafić na daną podstronę, za każdym razem jesteśmy zmuszeni do jej odnajdowania. A kto z nas lubi być do czegokolwiek zmuszany?

Odwiedź teraz własną stronę internetową i sprawdź, czy adresy podstron są łatwe do podyktowania i zapamiętania. Koniecznie podziel się z nami wynikami tego testu.

Bardzo często budując stronę internetową chcemy, aby była ładna, aby miała “fajne” funkcje i dużo “bajerów”. Często wzorujemy się na stronach, które nam się podobają. Niestety równie często zapominamy o tym, co w rzeczywistości jest najważniejsze – czego na stronie szukać będą nasi klienci/czytelnicy/użytkownicy,  jak będą to robić oraz kim są.

Świetnym przykładem takiej strony może być serwis internetowy wrocławskiej Straży Miejskiej. Zastanówmy się, jakich informacji mogą szukać odwiedzający tę stronę? Mnie przychodzą do głowy następujące rzeczy:

• informacje kontaktowe (przede wszystkim telefon alarmowy, który powinien być bardzo łatwy do znalezienia – w końcu jest telefonem alarmowym),
• instrukcje, jak, co i gdzie załatwić,
• jakiś kontakt z mieszkańcami (np. odpowiedzi na często zadawane pytania),
• ogłoszenia, aktualności, itd.

Przyjrzyjmy się zatem stronie http://strazmiejska.wroclaw.pl

Jak widać, na pierwszy rzut oka wszystko wygląda w porządku. Telefon alarmowy jest dość widoczny.

Niestety został on umieszczony w animowanym obrazku. Niby nie jest to żaden problem, gdyż animacja jest stosunkowo prosta i nie utrudnia odczytania numeru. Okazuje się jednak, że nie jest to do końca prawda.

W przypadku strony Straży Miejskiej istnieje dość spore ryzyko, że będziemy ją oglądać na telefonie komórkowym (jeśli chcemy skorzystać z telefonu alarmowego, to przecież nie będziemy czekać, aż znajdziemy się w pobliżu komputera). I tu właśnie pojawia się problem. Spora większość telefonów animacji tej nie wyświetla (a dokładniej wyświetla jej pierwszą klatkę – patrz obrazek obok).

Oczywiście nie ma jeszcze tragedii. Numer ten można znaleźć w innym miejscu. Sprawdź, jak szybko Ci się tu uda (najlepiej spróbuj za pomocą przeglądarki w telefonie). Aby dotrzeć do tej informacji wystarczy:

• wybrać pozycję “Kontakt” z menu (i poczekać, aż strona załaduje się nam ponownie – wyświetli się w zasadzie to samo, ale menu “Kontakt” będzie tym razem rozwinięte),
• wybrać pozycję “Adresy i telefony”,
• przejrzeć stronę z dość obszerną tabelką zawierającą wszystkie sposoby kontaktu i dostrzec, że na samym jej dole znajduje się poszukiwany numer 986.

Pomyśl teraz o własnej stronie internetowej. Zastanów się, czego szukają na niej użytkownicy. Odwiedź ją teraz sam i sprawdź, czy informacje te są łatwe do znalezienia. Jeśli istnieje taka możliwość, poproś o znalezienie tych informacji także kogoś innego (członka rodziny, znajomego, itd. – ktokolwiek będzie pod ręką). Obserwuj jak to robi, gdzie szuka i z czym ma problemy.

PS. Ciekawe, jak wiele osób odwiedzających stronę wrocławskiej Straży Miejskiej jest zainteresowana tym, ile osób aktualnie ją ogląda oraz ile osób odwiedziło ją danego dnia (informacja ta wyświetlana jest tuż pod głównym menu).

Niecałe dwa tygodnie temu gazeta.pl opisała przypadek konkursu organizowanego przez Ministerstwo Rozwoju Regionalnego. Za pomocą strony http://przymierzsie.pl można było zagłosować na najciekawszy projekt. Niestety internauci bardzo szybko zauważyli, że można dość łatwo oszukać i oddać znacznie więcej niż jeden głos.

Nie jest to pierwsza głośna wpadka internetowego głosowania. Kilka miesięcy temu Wrocław opublikował na swoich stronach internetowych sondę, w której mieszkańcy mogli wybierać, jak ma wyglądać nowy Tramwaj Plus. Sonda ta była trzykrotnie zdejmowana – za każdym razem z powodu wykrycia oszustw.

Zapewne dziwisz się, jak to możliwe, że nawet tak spore przedsięwzięcia nie radzą sobie z tak (mogłoby się wydawać) prostym problemem. Okazuje się jednak, że zagadnienie to wcale nie jest takie trywialne.

Gdzie tkwi trudność?

Żeby uniemożliwić oddanie drugiego głosu, sonda musi zapamiętać, że ta osoba już głosowała. Oczywiste, prawda? Jednak właśnie ta czynność wcale nie jest taka prosta, gdyż przeglądarka nie informuje strony internetowej, że to właśnie Ty oddałeś głos. Dostępne są jedynie informacje o tym, że:

• głos został oddany z komputera o danym adresie IP – może być wspólny dla wielu komputerów (zdarza się to dość często w sieciach osiedlowych), może być zmienny (np. jeśli korzystamy z neostrady),
• za pomocą danej przeglądarki internetowej i systemu operacyjnego – można mieć jednocześnie kilka przeglądarek i systemów operacyjnych na jednym komputerze.

Ponadto, jeśli użytkownik na to pozwoli, możemy ustawić mu tzw. ciasteczko. Użytkownik może je jednak w każdej chwili usunąć (musi jedynie wiedzieć, jak to zrobić).

Jeśli nie całkowicie, to może choć trochę?

Teraz zapewne domyślasz się już, że bardzo trudno jest sprawić, aby użytkownik mógł oddać tylko jeden głos oraz by jednocześnie każdy mógł zagłosować. Korzystając tylko z powyższych informacji jest to wręcz niemożliwe.

Ważne zatem, aby zabezpieczyć się przed najpoważniejszym zagrożeniem – automatami oddającymi głosy. W tym celu możesz wykorzystać np. captchę (na pewno spotkałeś się już z różnego typu nieczytelnymi obrazkami, których zawartość należy przepisać).

Dość dobrze jest także bazować na czymś więcej niż tylko ciasteczku (część użytkowników ma je po prostu wyłączone).

Gdy jednak postanowisz zapisywać w bazie danych jakieś informacje o użytkownikach, warto zabezpieczyć się przed kontrolą z GiODO. Ponieważ jednak wcale nie musimy umieć odczytać, z jakich adresów IP i za pomocą jakich przeglądarek oddano głosy, wystarczy, że zapamiętamy jakiś kod wygenerowany na podstawie tych danych. Powinien on zapewniać, że z bardzo dużym prawdopodobieństwem nie uzyskamy tego samego kodu dla różnych danych oraz że znając kod, nie będziemy umieli odgadnąć z jakich danych powstał. Na szczęście nie musimy sami wymyślać takiego mechanizmu. Znane są bowiem tzw. funkcje haszujące (np. md5, sha1, itd.).

W przypadku bardzo ważnych głosowań możemy posunąć się o jeszcze jeden krok dalej i prosić użytkownika o zarejestrowanie się lub potwierdzenie oddanego głosu za pomocą kliknięcia w link otrzymany emailem (na pewno nie raz już otrzymałeś takiego emaila). W takim przypadku warto jedynie uważać na serwisy typu mailinator.com.

Świadomość niedoskonałości

Teraz już wiesz, że Twoje sondy także przekłamują wyniki. Ważne jednak, by sprawić, że będą one jak najmniej odbiegały od rzeczywistości.

Śmiało – sprawdź teraz, w jaki sposób działają Twoje sondy. Jeśli nie jesteś w stanie sprawdzić tego sam, zapytaj o to ich twórców.

Niemożliwe? Przyjrzyjmy się zatem stronie SunsetSuits.pl. Aby ułatwić Ci zadanie, poniżej zamieściłem trzy zrzuty ekranu. Pokazują one tę właśnie stronę, otwartą w przeglądarce w trzech różnych rozdzielczościach ekranu:

• 1200×1600 (monitor w proporcjach 4:3 ustawiony pionowo),
• 1600×1200 (typowy monitor o proporcjach 4:3),
• 1280×800 (rozdzielczość popularna w dzisiejszych laptopach).

Ciekawe, czy domyślasz się już, z jakiego monitora korzystają osoby odpowiedzialne za tę stronę.

A czy Ty sprawdziłeś kiedykolwiek, jak wygląda Twoja strona w różnych rozdzielczościach? Czy jesteś pewien, że nie ukrywa ona części informacji (na przykład loga Twojej firmy) przed częścią odwiedzających?

W poprzednim wpisie obiecałem Ci, że pokażę, jak sprawdzić poprawność kodu html strony internetowej. Zapewniam – nie jest to nic trudnego. Zapraszam do obejrzenia poniższego filmiku.

Teraz z pewnością poradzisz już sobie z przetestowaniem poprawności swojej strony internetowej. Powodzenia!

W poprzednim wpisie zwróciłem Twoją uwagę na to, jak ważne jest sprawdzenie, czy Twoja strona wygląda tak samo w różnych przeglądarkach. Posłużyła mi do tego calu strona SprzedawcaInternetowy.pl, która nie tylko znacznie różniła się wyglądem, lecz także w niektórych przeglądarkach (na przykład w Chrome) znacznie utrudniała czytelnikowi zapoznanie się z treścią (czarne litery na granatowym tle).

Po nieco dokładniejszym przyjrzeniu się tej stronie, okazało się, że powodem całego zamieszania są błędy w kodzie html strony – innymi słowy – strona się nie walidowała.

Najprawdopodobniej wiesz, że to, jak wygląda Twoja strona opisane jest za pomocą kodu html i arkuszy stylów css. Na podstawie tych kodów przeglądarka generuje obraz, który pokazywany jest odwiedzającym stronę. To, w jaki sposób należy wyświetlić odpowiedni fragment kodu, opisane jest standardami (przeglądarki nie do końca je spełniają, ale nie jest też tragicznie i większość twórców stron umie sobie z tym radzić). Gdy jednak w kodzie pojawią się błędy, zachowanie przeglądarki nie jest określone, co sprawia, że każda przeglądarka może zrobić to, co chce.

Tak też było w przypadku SprzedawcyInternetowego. Fakt, że strona dobrze wyglądała w Firefoksie wynikał tylko i wyłącznie z tego, że przeglądarka ta stara się poprawiać błędne kody stron (i tym razem jej się udało).

Pamiętaj także, że błędny kod strony może utrudnić życie nie tylko osobom odwiedzającym Twoją stronę, lecz także wszelkim automatom (np. crawlerom – co może mieć znaczny wpływ na pozycję strony w wynikach wyszukiwania).

Czy sprawdzałeś poprawność kodu Twojej strony? Jeśli nie, zrób to teraz. Jeśli nie wiesz, jak się za to zabrać, nie martw się – wkrótce Ci o tym opowiem.

“Cóż za głupie pytanie – oczywiście, że wiem, jak wygląda!” Mniej więcej takie słowa za pewne przebiegły przez Twoją głowę po przeczytaniu tytułu tego wpisu. Czy jednak jesteś tego pewien?

Mimo, że internet, html i css istnieją już od dłuższego czasu, przeglądarki nadal nie do końca spełniają wszystkie standardy. Oznacza to, że Twoja strona może świetnie wyglądać w przeglądarce, z której korzystasz na co dzień, a jednocześnie straszyć odwiedzających w innej.

Przykładem takiej strony może być SprzedawcaInternetowy.pl. Poniżej możesz zobaczyć porównanie tego, jak wyświetlana jest ta strona w Google Chrome i Mozilla Firefox 3.5.

W tej chwili prawdopodobnie masz już ochotę sprawdzić, jak Twoja strona prezentuje się w innych przeglądarkach. Jednak na jakie przeglądarki warto zwrócić uwagę? Najlepiej, gdybyś mógł sprawdzić te, z których korzystają odwiedzający Twoją stronę (praktyczie wszystkie systemy statystyk potrafią podać takie zestawienie). Na większości stron, do których statystyk mam dostęp, popularnymi przeglądarkami są (według malejącej popularności): Firefox, Internet Explorer (7, 6 i 8), Opera i Chrome.

Jeśli jeszcze nie sprawdzałeś, jak wygląda Twoja strona w innych przeglądarkach, zrób to teraz. Podziel się z nami wynikami tych testów.

Zapewne nie raz spotkałeś się z nazwą PayPal. Być może nawet korzystałeś z tego systemu. Jeżeli jednak nie wiesz za bardzo, czym to jest, to się nie martw – na potrzeby tego wpisu wystarczy wiedzieć, że jest to system obsługujący płatności za pomocą karty kredytowej. Niewątpliwie zatem domyślasz się już, że jego sukces w znacznej mierze zależy od zaufania, jakim darzą go klienci. Przecież nie powierzyłbyś swoich pieniędzy byle komu.

Spójrz zatem na fragment listu, który niedawno dostałem (po dokonaniu płatności) od PayPala (kliknij w obrazek, aby powiększyć):

Jeśli nie zauważyłeś w nim nic dziwnego, to przyjrzyj się dokładniej znajdującym się w nim linkom.

Oczywiście można uznać, że nic wielkiego się nie stało. Jest to przecież tylko email potwierdzający (którego i tak prawie nikt nie czyta). Skoro jednak w takim miejscu pojawia się błąd, to skąd mam (jako użytkownik) mieć pewność, że część systemu odpowiedzialna za wykonywanie i księgowanie przelewów jest ich pozbawiona?

Tego typu błąd nie spowoduje oczywiście, że PayPal “padnie”, gdyż serwis ten zdobył już zaufanie wielu klientów. Jednak w przypadku mniejszych systemów, szczególnie na początku działalności, należy bardzo uważać na tego typu wpadki.