case study: Usability na stronach dwujęzycznych

Odwiedź stronę Polskich Kolei Państwowych www.PKP.com.pl. Ukaże się strona tytułowa, typowy, NEGOWANY przez marketerów, splash screen. Nie raz już pisałem, że splash screen to fatalny pomysł, zwłaszcza na komercyjnej stronie, ale nie tym chcę się w tym artykule zająć.

SPLASH SCREEN - strona tytułowa nie zawierająca istotnych informacji. Zwykle zawiera tylko logo i slogan, ew. multimedialną prezentację. Pojawia się jako przejaw dumy i niedoświadczenia właściciela serwisu lub jego twórcy.

Mamy do wyboru dwie opcje językowe. Niestety nie jest to takie oczywiste póki nie najedziemy na grafikę w języku polskim lub angielskim. Zamiast małym druczkiem pod tymi nagłówkami umieścić: wersja polska, english version, twórca tegoż serwisu poprzestał na zdefiniowaniu znacznika ALT - co i tak należy uznać na dużo, bo wielu tego nie robi.

Po kliknięciu na "POLSKIE KOLEJE PAŃSTWOWE Spółka Akcyjna" zostajemy przerzuceni do polskiej wersji jezykowej pod adresem http://www.pkp.com.pl/pl/indexpl.html

Teraz możemy sprawdzić rozkład pociągów itd. - swoją drogą część serwisu pozwalająca sprawdzić rozkłady jazdy jest bardzo dobra, często z niej korzystam... ale nie o tym chciałem napisać.

Zamknijmy teraz okno z tą stroną i ponownie połączmy się z www.pkp.com.pl. Co nam się pojawia?

Strona tytułowa z wyborem języka Ta sama, którą zobaczyliśmy za pierwszym razem. Niedobrze. Bardzo niedobrze.

Gdyby za ten serwis odpowiadał ktoś bardziej doświadczony w kwestii usability strona http://www.pkp.com.pl/pl/indexpl.html i odpowiednia strona dla wersji angielskiej wystawiałaby nam cookie z informacją, że jesteśmy zainteresowani wersją polskojęzyczną / angielskojęzyczną. Przy następnych odwiedzianach, strona główna od razu kierowałaby nas na odpowiednią wersję językową.

USABILITY - w bezpośrednim tłumaczeniu jest to "użyteczność", ponieważ jednak termin angielski jest popularniejszy, takiego będę używał. Usability to łatwość używania. Im większe usability danej rzeczy - software'u, serwisu www, pralki - tym łatwiej z niego korzystać, tym jest przyjemniejszy dla użytkownika. W obecnych czasach usability ma bardzo duże znaczenie dla pozycji produktu na rynku. Serwisy, w których zadbano o usability cieszą się większą skutecznością w pozyskiwaniu klientów. Usability jest więc częścią prac marketingowych a nie tylko webdesignerskich. Wielokrotnie przytaczanym przykładem serwisu ze świetnym usability jest Amazon.com. Więcej o zagadnieniu na: http://usability.gov/ i http://useit.com

System rozpoznający wersję językową

Jak bardzo skomplikowany jest system rozpoznający wersję językową?

Na stronie z wersją polską umieszczamy następujący skrypt:

<?php

// dajemy uzytkownikowi cookie oznaczajacy wersje polska
setcookie(LngVer, 'pl', (time()+10*365*24*3600));

?>

Na stronie z wersją angielską umieszczamy następujący skrypt:

<?php

// dajemy mu cookie oznaczajacy wersje angielska
setcookie(LngVer, 'en', (time()+10*365*24*3600));

?>

Na stronie www.pkp.com.pl umieszczamy następujący skrypt:

<?php

if (isset($LngVer)) { // Jesli ma cookie

	if ($LngVer == 'pl') {
	
        // idz do strony z polska wersja jezykowa
        $go = "http://www.pkp.com.pl/pl/indexpl.html";
        header("Location: $go");
	
	} elseif ($LngVer == 'en') {

        // idz do strony z angielska wersja jezykowa
        $go = "http://www.pkp.com.pl/en/indexen.html";
        header("Location: $go");
	
	}
	
}

?>

I to koniec tego skomplikowanego systemu . 3 pliki, 20 linii kodu, 10x mniej irytacji u odwiedzających, większa skuteczność serwisu - większe dochody. Gdybyś miał wątpliwości - strona www.pkp.com.pl jest stroną komercyjną i jej jakość ma wpływ na dochody spółki, zapewne niewielki ale jeśli coś robimy to należy to robić dobrze.

Niepodważalne fakty

Niepodważalny (sprawdzony i logiczny) fakt dotyczący usability: im trudniej dokonać zakupu tym mniej osób go dokona. Drugi fakt dotyczący usability: im więcej kroków dzieli klienta od formularza tym mniej osób kupi.

Splash screen z wyborem języka to jest krok, który klient musi wykonać. Amerykanie robili badania na temat stron tytułowych. Okazało się, że bardzo duży odsetek osób rezygnuje z dalszej wędrówki, jeśli napotka taką stronę - zwłaszcza jeśli jest ona przeładowana grafiką.

Poszukaj w najbliższym empiku gazety lub czasopisma, które zawiera na okładce tylko swoją nazwę i nic więcej. Wszystkie gazety umieszczają na okładce jakiś kontent, albo nagłówki artykułów albo same ich części (prasa codzienna). W interencie są Ci sami klienci, którzy kupują te gazety. Zasady się więc NIE zmieniają.

Aby Ci problem jeszcze lepiej zobrazować. Wyobraź sobie 2 supermarkety w takiej samej odległości od Twojego domu, z takim samym towarem na półkach. Oba supermarkety organizują trwającą miesiąc promocję dla mieszkańców najbliższych okolic - Twoja ulica się załapała.

W pierwszym supermarkecie za każdym razem gdy wchodzisz, strażnik sprawdza Twoje dokumenty i daje Ci jednorazową plakietkę informujący o tym, że jesteś objęty promocją - tak działa www.pkp.com.pl.

W drugim supermarkecie przy pierwszych odwiedzinach otrzymałeś mały identyfikator do powieszenia na ubraniu. Strażnik widząc taki identyfikator już Cię nie pyta o dokumenty, a kasjerka od razu daje Ci zniżkę - tak działa google.com po wybraniu opcji językowej.

Zakładając, że zamierzasz odwiedzić 10 razy supermarket w ciągu tego miesiąca, który wybierzesz?

Czy teraz rozumiesz dlaczego strony dwu i wielo-językowe dla własnego dobra powinny rozpoznawać klientów?

A co jeśli klient chce zmienić wersję językową?

I znowu, gdyby serwis www.pkp.com.pl robiła tak doświadczona osoba jak ta odpowiedzialna za usability w google.com, gdzieś w widocznym miejscu, NA KAŻDEJ STRONIE pojawiłaby się flaga lub tekst innej wersji językowej będący do niej bezpośrednim linkiem.

W przypadku www.pkp.com.pl możliwość wyboru języka pojawia się w module rozkładu jazdy i tylko tam. Każdy, kto szuka innej informacji musi przejść na stronę główną.

Na stronach firmy Adobe (www.adobe.com) na samej górze, w bardzo widocznym miejscu znajdziemy rozwijaną listę wszystkich dostępnych wersji językowych. Moim zdaniem jest to najlepsze rozwiązanie w przypadku gdy tych wersji jest naprawdę dużo.

Gdy mamy ich do 5 zalecam małe flagi dla każdej wersji językowej. Każdy z nas jest w jakimś stopniu patriotą i widok własnej flagi bardziej działa na podświadomość niż tekst "Wersja Polska". Zawsze opłaca się połechtać klienta, zwłaszcza gdy nast. to nic nie kosztuje.

Jak to zrobić?

Rozwijana lista zbudowana ze znacznika SELECT (jak w Adobe.com)
http://javascript.internet.com/navigation/menu-automatic.html

Powyższa wersja ale z przyciskiem "Idź"
http://javascript.internet.com/navigation/menu.html

Ciekawsze, graficzne rozwiązanie
http://javascript.internet.com/navigation/cool-pulldown-menu.html

Ucz się do google

Google.com posiada Ustawienia Językowe (Language Tools), gdzie można wybrać odpowiedni język. Mało tego, google.com rozpoznaje kraj z którego się łączysz i na stronie głównej Polacy znajdą "Go to Google Polska" bedacy linkiem do google.pl, a na stronie www.google.pl: "Google.com in English" Skrypt wykrywający język używanej przeglądarki http://javascript.internet.com/user-details/user-language-and-country.html

Jeśli masz np. tylko trzy wersje językowe - polską, niemiecką i angielską - Polakom pokaż wersję polską, Niemcom niemiecką, reszcie świata Angielską. Po przerobieniu, powyższy skrypt przybrałby formę:

<SCRIPT language="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

if (navigator.browserLanguage.substr(0,2) == "de")
  document.write('<a href="LINK_DO_NIEMIECKIEJ">Zobacz wersję niemiecką</a>');
else if (navigator.browserLanguage.substr(0,2) == "pl")
  document.write('<a href="LINK_DO_POLSKIEJ">Zobacz wersję polską</a>');
else 
  document.write('<a href="LINK_DO_ANGIELSKIEJ">Zobacz wersję angielską</a>');
//  End -->

</script>

Jeśli skrypt miałby od razu przekierowywać klienta na stronę wg powyższych zasad, należałoby go trochę zmodyfikować i umieścić w sekcji stron. Przybralby on taką formę:

<HEAD>

<SCRIPT language="JavaScript">

<!-- Begin

var plURL = 'LINK_DO_POLSKIEJ';
var deURL = 'LINK_DO_NIEMIECKIEJ';
var URL = 'LINK_DO_ANGIELSKIEJ';   

if (navigator.browserLanguage.substr(0,2) == "de")
  location = deURL
else if (navigator.browserLanguage.substr(0,2) == "pl")
  location = plURL
else 
  location = URL
//  End -->
</script>

</HEAD>

Minusem tego rozwiązania jest przypadek gdy np. Polak używa angielskojęzycznej przeglądarki. Dlatego należy połączyć ten skrypt z pierwzymi obsługującymi cookie i tamte zrobić nadrzędne.

Zadanie domowe

Jeśli masz więcej niż jedną wersję językową swojego serwisu, w ciągu najbliższych 3 dni chcą abyś go zmodyfikował według powyższych zaleceń.

Aby Cię lepiej zmotywować: olewanie usability to mniejsza skuteczność serwisu. Jeśli Twój serwis ma skuteczność np. o 10% niższą niż mógłby mieć dzięki takim drobnym zmianom, to głupio tracisz 10% obrotów, bardzo głupio.

Sprawdź ile masz rocznie obrotu, podziel go przez 0,9 i odejmij od uzyskanego wyniku swój roczny obrót. Pomyśl, że tyle tracisz rocznie. Nie wiem ile to jest, ale jeśli robisz choćby 30 000 tysięcy rocznie, to taka zmiana może zwiększyć tą liczbę o ponad 3 tysiące złotych. Nieźle to brzmi, prawda?

Więc do roboty.