“Zacznijmy od pierwszego wrażenia: zgodnie z zapowiedziami strona została odchudzona ze wszystkich funkcjonalności, poza tymi służącymi do wejścia do portalu. Taki kierunek zmian jest dobry, jednak mam wrażenie, że wcale nie przydało to stronie lekkości – ciemna kolorystyka oraz box reklamowy, w którym pojawiają się reklamy Google’a sprawia, że całość jest dość toporna. Zmiany na stronie ujawniają także, że portal systematycznie odchodzi od skojarzeń związanych ze szkolną „klasą” – zniknęła wyszukiwarka szkół, a nowym użytkownikom Nasza Klasa promowana jest tylko jako „miejsce spotkań”. W wyniku odchudzenia strony z pozostałych funkcjonalności, boxy logowania i rejestracji są obecnie bardzo dobrze widoczne, niepokoi tylko wygląd przycisku „Zaloguj”, który sprawia wrażenie nieaktywnego.”

Pełną recenzję oraz opinie pozostałych ekspertów przeczytać można w interaktywnie.com pod adresem http://interaktywnie.com/biznes/artykuly/social-media/koniec-szkolnego-klimatu-w-naszej-klasie-nowa-strona-logowania-19657

Zapraszamy do lektury.

więcej szczegółów http://www.hci.org.pl/

Jak zapewne wszyscy wiemy do głównych zadań systemu nawigacji na stronie internetowej należą:

• umożliwienie/ułatwienie dotarcia  do interesujących nas treści i dokumentów w serwisie.
• poinformowanie nas gdzie jesteśmy w strukturze serwisu (odpowiednie oznaczenie w menu).
• system nawigacji – jeśli jest stałym elementem strony  daje nam poczucie stabilności
• określa co w danym miejscu się znajduje – poprzez etykiety łączy, kategorii w menu
• informuje w jaki sposób możemy z tego skorzystać
• wpływa na wiarygodność witryny

Oczywiście nie będę się w tym miejscu rozwodzić nad klasyfikacją poszczególnych systemów i nie będę omawiać zalet o ograniczeń różnych rozwiązań. Nie wskażę też, które z nich są najlepsze, dlatego, że to zawsze zależy od zawartości serwisu i strategii biznesowej Klienta.  Zainteresowanych tematem odsyłam do książki „Designing Web Navigation” autorstwa Jamesa Kalbacha, w której autor obszernie i kompleksowo omawia temat.

W tym wpisie chciałabym się skoncentrować na kilku wybranych przeze mnie przykładach nawigacji, która wychodzi poza sztywną, narzuconą przez Klienta kategoryzację treści. Skupmy się na potrzebach czy sytuacji życiowej użytkowników, a także na przykładach nawigacji według głównych grup użytkowników.

Przykłady dobrych praktyk:

1.       Bank Barclays

Jak widać na powyższym przykładzie, nazwy głównych działów odzwierciedlają , nie konkretne produkty a potrzeby użytkownika: oszczędzania, pożyczenia pieniędzy, ubezpieczenia. To podejście jest szczególnym ułatwieniem dla osób, które jeszcze nie podjęły decyzji jaki konkretny produkt je interesuje, a na przykład wiedzą, że potrzebują pilnie dodatkowych pieniędzy. Podobne rozwiązania można znaleźć głębiej w serwisie, na podstronie z opisem oferty pożyczek i kredytów.

I w tym wypadku, poza standardową prezentacją oferty w centralnej części strony, po prawej znajdują się box „I need to…”, w którym umieszczono odnośniki opisujące najpopularniejsze sytuacje i cele, które użytkownik chce zrealizować pożyczając pieniądze.

2.       Bank Commonwealt

Jednym z moich ulubionych przykładów jest witryna australijskiego banku Commonwealth. Podobnie jak poprzednio – obok poziomego menu z kategoriami produktów, użytkownik ma do dyspozycji box „We’re ready to help you with…”. W nim potencjalny Klient może sprawdzić czy oferta banku zawiera produkty adekwatne do jego sytuacji życiowej.

3.       Open Finance SA

Podobnie na stronie doradcy finansowego Open Finance  – serwis prezentuje użytkownikowi kilka głównych potrzeb, które można zrealizować dzięki ofercie serwisu , np. „Mam określone cele na przyszłość”, czy „Chcę gwarancji bezpieczeństwa”. Podobnie jak w poprzednich wypadkach – jest to ukłon w stroną użytkowników, którzy nie są zdecydowani na konkretny rodzaj produktu natomiast znają swoje oczekiwania i sytuacje życiową.

4.       Jakie Ubezpieczenie

Strona JakieUbezpieczenie.pl proponuje użytkownikom podział produktów według etapów życia. Potencjalni klienci mają do wyboru 12 kategorii – w zależności od tego jaki jest ich status życiowy, bądź co planują w przyszłości.

Oczywiście tego rodzaju rozwiązania nie są zarezerwowane wyłącznie dla branży finansowej, również branża turystyczna korzysta z tego rodzaju rozwiązań.

5.       Neckermann

Biuro podróży Neckermann – obok standardowych kategorii jak „Wycieczki”, „Last minute”, „Promocje” zawiera alternatywną prezentację oferty. Dział „Dopasowana oferta” zawiera wycieczki pogrupowane według potrzeb użytkowników. Dzięki temu rodzice planujący wyjazd z dziećmi jak i osoby zamożne, które szukają wycieczek z pełnym pakietem atrakcji, szybko znajdą odpowiedni dla siebie produkt.

Innym rozwiązaniem w zakresie nawigacji jest wyróżnienie kilku głównych typów użytkowników (adresatów strony) i stworzenie alternatywnej nawigacji w oparciu o takie grupy.

1.       Merlin.pl

Na stronie merlin.pl zastosowano podział na kategorie prezentów w zależności od obdarowywanej osoby. Zamiast kategorii produktowych strona oferuje prezenty dla dzieci, mamy, chłopaka, itp. Rozwiązanie to jest szczególnie przydatne dla osób, które nie znają dobrze upodobań obdarowywanej osoby i potrzebują podpowiedzi przed podjęciem ostatecznej decyzji.

2.       La Roche-Posay

W serwisie francuskiej marki dermokosmetyków, produkty zostały pogrupowane ze względu na cechy skóry. Twórcy strony wyszli w ten sposób naprzeciw potrzebom i oczekiwaniom użytkowników, którzy dzięki temu mają łatwy dostęp do wszystkich rodzajów produktów adresowanych do swojej cery.

3.       Gerber.pl

Rozwiązanie na stronie Gerber.pl uwzględnia odmienne potrzeby dzieci i niemowląt, w zależności od przedziału wiekowego. Takie rozwiązanie pozwala rodzicom uzyskać łatwy i szybki dostęp do pełni informacji związanych z potrzebami  ich dziecka – bez konieczności przeglądania pełnej oferty produktów tej firmy. Podobne rozwiązanie znajduje się na angielskiej stronie Cow&Gate – gdzie poza kategoriami obejmującymi przedziały wiekowe zastosowano menu zawierające podział na grupy użytkowników (New Mum, My Toddler, Dads).

4.       Cow&Gate

5.       Vichy

Na stronie Vichy potencjalne klientki  mają do wyboru 4 profile w zależności od wieku. Użytkowniczki serwisu najpierw wybierają profil zgodny z ich wiekiem a następnie mają możliwość przeglądania kosmetyków według potrzeb (screen poniżej). Zaletą tego rozwiązania jest to, że Panie otrzymują zakres informacji i produktów odpowiadający potrzebom ich cery.

A na zakończenie przykład negatywny:

1.       Dermika

Użytkownicy, którzy wejdą na stronę dermika.pl będą musieli przeklikiwać się przez niewiele mówiące nazwy produktów. Kosmetyki na stronie nie zostały pogrupowane w żaden sensowny z punktu widzenia użytkowników sposób. Nazwy „Meritum”, „WitaminaP” niewiele mówią o zastosowaniu kosmetyków oraz nie odpowiadają na pytanie do jakiego rodzaju cery, czy do jakiego rodzaju pielęgnacji znajdują zastosowanie. W tym rozwiązaniu – użytkowniczki muszą klikać nazwy poszczególnych serii aby to ustalić. Klikając na nie, nie mają pewności czy wybrany produkt odpowiada ich potrzebom.

Reasumując – chcąc by użytkownik skorzystał z naszej oferty, pamiętajmy, że nie zawsze szuka on konkretnego produktu. Warto zaproponować przyjazne rozwiązania dla osób, które są w stanie określić swoje potrzeby, cele lub sytuację życiową. Wyjście poza sztywną kategoryzację ofert i produktów i przyjęcie perspektywy użytkownika z pewnością ułatwi temu ostatniemu znalezienie odpowiedniego dla siebie rozwiązania.

o autorze:

Agnieszka Jedynasta – Usability Consultant w UseLab. Ukończyła psychologię kliniczną na Uniwersytecie Gdańskim. Od 2007 roku zajmuje się badaniami użyteczności i dostępności a także badaniami jakościowymi (grupy kreatywne, zogniskowane wywiady grupowe). Prywatnie interesuje się architekturą krajobrazu, fotografią przyrodniczą i rękodziełem. Uwielbia czeskie kino.

Strona konferencji: http://www.ux-lx.com/index.html

Strona konferencji: http://2011.uxlondon.com/

Potrzeba prowadzenia takich złożonych badań wynika zazwyczaj z oczekiwań klienta, dlatego przed rozpoczęciem projektu niezwykle ważne jest wspólne zastanowienie się czy jest ona metodologicznie uzasadniona. Warto pamiętać, że badania Eyetracking są drogie i nie sprawdzają się wówczas gdy badamy serwis bez ostatecznej szaty graficznej. Nie znajdują także zastosowania przy badaniu złożonych, specjalistycznych aplikacji, nie ma też większego sensu korzystanie z tej metody wówczas gdy badania użyteczności są wstępem do rewolucji w zakresie całej architektury informacji badanego serwisu. W wyżej wymienionych przypadkach lepiej zastosować klasyczną obserwację użytkownika.

Jeśli wykluczymy te czynniki możemy zdecydować się na badanie metodą Eyetracking i wówczas należy zastanowić się, czy włączyć je w etap obserwacji, czy też przeprowadzić jako osobny etap projektu.

Rysunek 1 Przykładowa heatmapa – jeden z wyników uzyskiwanych w badaniu

W przypadku realizacji badań łączonych konieczne jest przede wszystkim:

• Zrekrutowanie większej (niż w przypadku klasycznej obserwacji) grupy osób badanych – wprawdzie w książce „Eyetracking Web Usability” Jacob Nielsen pisze o metodzie pozwalającej na jakościową interpretację danych typu eye tracking, jednak w mojej opinii, jeśli już porywamy się na taki projekt, to warto nie odcinać sobie możliwości ilościowej interpretacji zebranych danych i zbadać przynajmniej 20-25 osób.
• Skonstruowanie dość prostych scenariuszy zadań, które da się zrealizować kilkoma kliknięciami, ewentualnie podzielenie scenariuszy na takie, które analizować będziemy pod kątem danych o ruchach gałek ocznych i takich, które analizować będziemy tylko pod kątem zachowania użytkowników – analiza wszystkich danych może okazać się niemożliwa w zakładanym czasie realizacji projektu.
• Ograniczenie metody think aloud, lub wydzielenie tych fragmentów z danych analizowanych metodą Eyetracking – podczas mówienia użytkownik nie realizuje scenariusza, a fiksacje wzroku nie oddają naturalnego procesu skanowania strony w poszukiwaniu określonych informacji.
• Posiadanie komputera, który „udźwignie” jednoczesne działanie aplikacji do zbierania danych typu  eye tracking oraz aplikacji wspierających obserwację użytkownika .

Taka konstrukcja badania daje nam wówczas duże możliwości w zakresie interpretacji danych. Zdobywamy, nie tylko pogłębione opinie grupy użytkowników, wiedzę na temat ścieżek eksploracji serwisu, ale możemy także wnioskować o możliwych przyczynach, takiego a nie innego, zachowania badanych (np. w obrębie elementów nawigacyjnych znaleźć odpowiedź na częste pytanie: Czy element był niewidoczny? Czy błędnie nazwany?).

Jeśli jednak podstawowym celem badania jest pogłębiona analiza użyteczności serwisu (wykrycie jak największej ilości potencjalnych błędów użytkownika) i zależy nam przede wszystkim na zebraniu jakościowego feedbacku od osób badanych (opinie i komentarze) to warto rozważyć poprzestanie na klasycznej obserwacji użytkownika w laboratorium. Przeprowadzenie badania metodą Eyetracking można uwzględnić jako osobny etap projektu, mogący np. służyć wsparciu wcześniejszych wniosków jakościowych fizjologicznymi danymi z badania na większej grupie użytkowników.

Więcej na ten temat:

James Breeze, UX Magazine „Eye tracking: best way to test rich app usability”, http://www.uxmag.com/technology/eye-tracking-the-best-way-to-test-rich-app-usability

Jacob Nielsen, Kara Pernice “Eyetracking web usability” http://www.useit.com/eyetracking/methodology/

o autorze: Teresa Bartoszewicz od 3 lat w UseLab jako Usability Consultant. Absolwentka socjologii i studentka Środowiskowych Studiów Doktoranckich IP PAN i SWPS. Zawodowo prowadzi projekty badawcze związane z badaniami użyteczności oraz eyetracking. Prywatnie podróżuje.

To już druga polska edycja tego prestiżowego spotkania na najwyższym światowym poziomie, która odbędzie się 7-8 kwietnia 2011 w Warszawskiej Zachęcie.

Podobnie jak w roku 2010 planujemy spotkanie doświadczonych praktyków, specjalistów oraz wszystkich  zainteresowanych tematyką Architektury Informacji.

Jak na razie do tegorocznej listy prelegentów należą:

• Marianne Sweeney (USA fatDUX)

• Claire Rowland (UK Fjord)

• Martin Belam (UK Guardian)

• Peter Boersma ( Holandia Adaptive Path )

• James Page ( UK Webnographer )

• Marek Kasperski ( ThinkLab )

• Eryk Orłowski ( Offline )

• Agnieszka Szóstek ( OPI )

• Alek Tarkowski ( ICM UW )

• Tomasz Kopacz ( Microsoft )

Wydarzenie, dotyczyć będzie rozwoju i pogłębienia wiedzy z zakresu architektury informacji, dziedziny, polegającej na projektowaniu funkcjonalnych i użytecznych środowisk informacyjnych. Podczas konferencji i cyklu wykładów, zostaną zaprezentowane polskie i światowe praktyki wizualizacji architektury informacji.

Już niedługo ruszy sprzedaż biletów.

Konferencja UX Masterclass odbędzie się w Kopenhadze. Spotkanie rozpocznie się 31 marca 2011 i potrwa 2 dni.

Więcej szczegółów pod adresem: http://www.uxmasterclass.com/

Poniżej przedstawię kilka uwag, sformułowanych w trakcie szukania informacji i próby zakupu ubezpieczenia mieszkania.

1. Na pierwszy rzut oka nie widać jakie produkty lub ich grupy oferuje strona.

Centralną część zajmuje duża reklama, która obniża zasadniczą część strony. W pierwszej chwili sądziłam, że są to promowane produkty z oferty PZU. W rzeczywistości są to odnośniki do serwisów zewnętrznych, co było dla mnie zaskoczeniem – spodziewałam się, że kliknięcie w „Więcej” jednej z nich przeniesie mnie od razu do strony z opisem produktu. Niestety za każdym razem jestem „wyrzucana” poza serwis.

Przyglądając się uważniej sekcji „Zostań klientem” znajdującej się pod logowaniem dom odnośników, które się tam znajdują dodałabym jeszcze jedne „Poznaj naszą ofertę”. Pozostałe są jak najbardziej ok. ale adresowane są do osób, które  już jakieś pojęcie na temat oferty PZU mają (zamów kontakt z agentem, zadaj pytanie) – mi zabrakło tego wcześniejszego kroku.

Dotarcie do oferty możliwe jest poprzez znajdujące się pod bannerem cztery boxy z rodzajami produktów, które z pewnością dla użytkowników netbooków są słabo lub zupełnie niewidoczne na pierwszym ekranie przewijania. Twórcom strony zasugerowałabym zmniejszenie obszaru, który zajmują w tej chwili reklamy serwisów zewnętrznych. Dzięki temu kluczowe elementy strony będą lepiej widoczne.

2. Słabo widoczne działanie filtra produktów.

Narzędzie to jest rozwiązaniem alternatywnym dla tradycyjnego, obecnego na stronach innych ubezpieczycieli, układu według rodzajów produktów bądź według przedmiotu ubezpieczenia.
Aby użytkownik szybko nauczył się korzystać z tego narzędzia warto zadbać o to, by widoczna była informacja, że filtr przeszukuje bazę produktów oraz dobrze widoczny powinien być efekt końcowy przeszukiwania. Zaznaczenie opcji „Dla mnie” na pierwszy rzut oka nie wywołuje żadnej reakcji serwisu. Wyszarzenie kategorii „Promocje” jest zupełnie niewidoczne. Przy dłuższej interakcji z serwisem okazuje się również, że wbrew temu, co sugeruje filtr, oferty promocyjne są jak najbardziej dostępne dla użytkownika.

3. Filtr prezentuje produkty niezgodne z oczekiwaniami użytkowników.
Przykładowo zaznaczenie opcji „Dla mnie” i „Dom i mieszkanie” powoduje wyświetlenie na pierwszym miejscu Autocasco(AC) (!). Zaznaczyłam dodatkowo „Majątek” i w rezultacie Autocasco(AC) wyświetliło się na dwóch pierwszych miejscach a opisy  ubezpieczenia mieszkania były dopiero na trzecim miejscu.

4. Opis produktu jest dość czytelny i przejrzysty.
Wypunktowania i podział na bloki tematyczne ułatwiają przeglądanie tekstu. Zaskoczył mnie jednak mechanizm oceny znajdujący się pod treścią, który można zobaczyć na stronach z newsami, blogach czy serwisach typu You Tube. Nie jest jasne co użytkownicy powinni w ten sposób ocenić – sam produkt czy opis produktu? Etykieta „Oceń artykuł” sugeruje, że oceniamy artykuł, po kliknięciu okazuje się, że jednak oceniamy produkt…W tym miejscu warto zastosować konsekwentną komunikację – ja właściwie nie wiedziałam co ostatecznie oceniam…

5. W opisie produktu zabrakło mi również wskazania co np. ruchomości znajdujące się w mieszkaniu nie podlegają ochronie? Brakowało też porównania obu wersji ubezpieczenia PZU DOM i PZU DOM Plus. Czytając oba opisy trudno było mi wyłapać kluczowe różnice miedzy tymi produktami. Takie zestawienie, na przykład w formie tabeli byłoby bardziej czytelne i dzięki niemu łatwiej  byłoby podjąć decyzję, który wybiorę.

6. Formularze kontaktu.
Tutaj również dało się zauważyć kilka usterek. Komunikaty błędu są widoczne dopiero po najechaniu kursorem na czerwoną ikonkę przy etykiecie.
Brak informacji, że numer telefonu musi być wpisany bez spacji.
Użytkownik musi podać zarówno adres e-mail i numer telefonu – moim zdaniem mógłby to podać zamiennie.
Jeśli już użytkownik decyduje się na podanie numeru telefonu – warto, by mógł wybrać optymalną porę, kiedy agent mógłby do niego oddzwonić.
Nie jest do końca jasne, czy agent może do klienta przyjechać, czy też po nawiązaniu kontaktu z agentem użytkownik i tak będzie musiał udać się do jego biura.
Formularz domyślnie w polu „Co mnie interesuje” ma zaznaczoną opcję „Spotkanie w sprawie ubezpieczenia komunikacyjnego”. Oczekiwałabym, ze skoro zamawiam kontakt z agentem ze strony z opisem polisy mieszkaniowej to domyślnie zaznaczoną opcją będzie dotycząca aktualnie przeglądanego produktu – czyli w sprawie ubezpieczenia majątkowego.

7. Serwis wprowadza użytkownika w błąd – na przykład komunikując, że znalazł mniej produktów niż jest faktycznie dostępnych. W serwisie znajduje się informacja, że znaleziono 5 produktów, które spełniają zaznaczone przeze mnie kryteria. Strona z wynikami zawiera ich zdecydowanie więcej – jak widać na poniższym screenie:

Nietrudno zauważyć, że dostępnych jest więcej niż 5 produktów, z czego niektóre są wymienione na liście po kilka (2-3) razy.

8.  Mapa serwisu zawiera identycznie nazywające się odnośniki, które prowadzą do zupełnie innych produktów. Na przykład w dziale „Dom i mieszkanie” znajdują się 3 identyczne odnośniki „Ubezpieczenie dla całego domu”. Odruchowo kliknęłabym na ostatni, najlepiej widoczny – i jak się okazuje jest to niedostępne dla mnie ubezpieczenie grupowe.

9.  Brak odróżnienia linków odwiedzonych od nieodwiedzonych.
Wydawać by się mogło, że jest to podstawowa informacja i cenny feedback dla użytkownika, dzięki któremu orientuje się on jakie produkty już widział. Tu w całym serwisie brakuje takiego rozróżnienia i jest to szczególnie uciążliwe przy dłuższym korzystaniu, zwłaszcza w sytuacji, gdy przeglądałam kilka wersji ubezpieczenia.

Podsumowując uważam, że nowemu serwisowi PZU należy się plus za lekkość i przejrzystość layoutu. Do minimum ograniczone zostały wszystkie zbędne i rozpraszające elementy graficzne, w obszarze artykułów zadbano o to, by przyciski akcji były dobrze widoczne. Dobrym rozwiązaniem jest też według mnie zakładkowy układ nawigacji w obszarze opisu produktu. Dzięki niemu od razu widać, że poza zwykłym opisem, użytkownik ma też dostęp do plików i dokumentów do pobrania, a także może sprawdzić czy są dostępne oferty promocyjne.

Serwis przed ostateczną premierą zdecydowanie wymaga jednak dopracowania w zakresie nawigacji, a ponieważ zanotowałam też błędy techniczne, warto również sprawdzić poprawność działania strony i dostępność wszystkich podstron.

o autorze:

Agnieszka Jedynasta – Usability Consultant w UseLab. Ukończyła psychologię kliniczną na Uniwersytecie Gdańskim. Od 2007 roku zajmuje się badaniami użyteczności i dostępności a także badaniami jakościowymi (grupy kreatywne, zogniskowane wywiady grupowe). Prywatnie interesuje się architekturą krajobrazu, fotografią przyrodniczą i rękodziełem. Uwielbia czeskie kino.