Współpraca z projektantami ( w tym podstawowe pojęcia UCD, narzędzia: heurystyki Nielsena; test Kruga, makiety, badania)

Transkrypt

1 2012 Współpraca z projektantami ( w tym podstawowe pojęcia UCD, narzędzia: heurystyki Nielsena; test Kruga, makiety, badania) Tomasz Karwat Wyzwania w projektowaniu i programowaniu e-usługi Poznań, 11 października 2012

2 Nie jest lekko We re surrounded. That simplifies our problem of getting to these people and killing them.* - Chesty Puller * Motto z naszego biura

3

4

5 Cel biznesowy Cel biznesowy: Potrzeby użytkowników:

6 Analiza Analiza kontekstu użytkownika Przegląd rozwiązań konkurencyjnych

7 Analiza kontekstu użytkownika Jakie indywidualne cechy użytkowników mogą wpłynąć na ich zachowanie / percepcję podczas korzystania z serwisu? Jakie doświadczenie i wiedzę mają użytkownicy w wykonywaniu zadań? Jak silnie są zmotywowani użytkownicy, podczas wykonywania zadania? Jakie są przyczyny tego, że użytkownicy wykonują swoje zadania? Jakie doświadczenie i wiedzę mają w korzystaniu z innych serwisów? Wszystkie aspekty związane z użytkownikami, które będą miały znaczenie przy korzystaniu przez nich z serwisu

8 Źródła wiedzy o użytkownikach Użytkownicy Statystyki Ludzie kontaktujący się z użytkownikami Fora internetowe Znajomi Artefakty Eksperci My sami, jako użytkownicy

9 Analiza - Zasięg Alexa.com

10 Generowanie koncepcji Burze mózgów Techniki kreatywne Archiwizacja Ewaluacja ekspercka

11 Ewaluacja - Less is more Rozwiązuj jeden problem Omijaj trudne problemy Tylko niezbędne funkcje Nie dokumentuj, twórz prototypy Uruchamiaj jak najwcześniej Trzy osoby to idealny team

12 Prototypowanie 1. Scenariusze (use case) wybierzmy jeden 2. Diagramy przejść 3. Struktura 4. Architektura informacji 5. Makiety funkcjonalne 6. Działające prototypy 7. Dokumentacja

13 Diagramy przejść

14 Struktura serwisu Mało, kto wie, że mały gwint to E14. Aby zadowolić wszystkich użytkowników do kategorii dodano obrazki.

15 Struktura

16 Architektura informacji - Patterns

17 Makiety funkcjonalne

18 Makiety funkcjonalne - Axure

19 Testowanie - Test Kruga Co to jest za witryna (identyfikator witryny)? Na jakiej jestem stronie (nazwa strony)? Jakie są główne kategorie? Jakie mam opcje do wyboru na tym poziomie struktury? Gdzie znajduję się w odniesieniu do całej struktury? W jaki sposób mogę czegoś poszukać?

20 Testowanie testy z użytkownikami Przeprowadź testy. Zacznij od próbnego zadania na rozgrzewkę, aby odstresować badanego. Bądź uprzejmy i dbaj o poczucie własnej wartości użytkowników. Testujesz strony, nie ludzi. Podczas testów: Zachęcaj do głośnego myślenia. Jeśli nie wiesz, co myśli użytkownik zapytaj o to. Nie udzielaj wskazówek dotyczących tego jak mają postępować. Wydawaj proste i klarowne polecenia. Bezpośrednio po sesji rób notatki. Uprzedź użytkownika, że: Będzie nagrywany Nie będziesz w trakcie testu odpowiadać na jego pytania Wynagrodzenie nie zależy od wyniku testów Omów notatki z testów i przygotuj wnioski. Opcjonalnie opracuj nagrania video z testów.

21 Porównawcze testy usability Wersja 01 Wersja 02 Strona główna - skojarzenie ze sklepem, z możliwością porównania cen z innych sklepów - kojarzy się ze sklepem ze sprzętem komputerowym, ale też sprzedają inne rzeczy [bo widoczne różne zdjęcia] - nie rzuca się w oczy że jest to porównywarka - można coś kupić, dowiedzieć się jaka jest najlepsza cena, porównać, dowiedzieć się na co zwrócić uwagę - kojarzy się ze stroną, która jest bardziej nastawiona na sprzęt, na określoną tematykę [ze względu na zdjęcia] - kategorie w kolumnach lepiej się czyta niż listy w drugiej wersji, - zostawić kolumny kategorii ale dodać z poprzedniego ikony Box Najlepsze ceny - dobrze, że jest ale mało rzuca się w oczy, powinny być bardziej przejrzyste, może sama nazwą lub wyraźne okienko z najlepszą ceną.. - bardziej zaznaczone, że porównywarka ale wciąż mało rzuca się w oczy - kojarzy się ze stroną Allegro (podobna lista) - bardziej przejrzysta, klarowna, widoczna - przydałyby się te dwa kwadraty z I wersji, ale b. przejrzyste - można zakupić przez Internet, pooglądać, dowiedzieć się gdzie można kupić - jeśli szuka się ogólnie, różnych rzeczy to ta jest lepsza

22 Optymalizacja

23 Cele projektu Celem naszej pracy w tym etapie było przebudowanie strony biura podróży TUI w oparciu o wyniki badań użyteczności. Zaprojektowaliśmy i przeprowadziliśmy szereg testów, które pomogły nam w osiągnięciu tego celu. Metody Do badań użyteczności wybraliśmy narzędzia, które dostarczyły niezbędnych wskazówek do zaprojektowania nowego layoutu strony. 2a. Analiza statystyk 1. Analiza wymagań 2b. Audyt ekspercki 2c. Badania eyetrackingowe 3. Wnioski i rekomendacj e 4. Makiety funkcjonalne 5. Projekt graficzny 2d. Konsultacje eksperckie

24 1. Analiza wymagań Projekt rozpoczęliśmy od zapoznania się z wymaganiami biznesowymi i ograniczeniami technicznymi. Spotkaliśmy się z osobami odpowiedzialnymi za produkt, komunikację i tworzenie ofert, obsługę klientów, technologię i rozwój. Poza tym na bieżąco prowadziliśmy rozeznanie w branży, czytaliśmy artykuły, raporty i spotykaliśmy się z niezależnymi ekspertami z branży turystycznej. Na podstawie zdobytej wiedzy przeszliśmy do analizowania obecnej strony.

25 2a. Analiza statystyk Analiza ruchu w oparciu o statystyki Google Analytics pomogła nam wykryć problemy użyteczności i komunikacji na dużą skalę dzięki statystykom mieliśmy twarde ilościowe dane dotyczące poszczególnych elementów i stron. Poza tym wskazaliśmy, które elementy są dobre i nie wymagają większych zmian. Do pełnego obrazu potrzebowaliśmy kilku dodatkowych badań, które opisujemy na kolejnych slajdach. Niektóre landing pages, szczególnie promocje mają zbyt wysoki współczynnik odrzuceń. Serwis nie wykorzystuje potencjału opinii - ludzie korzystają z nich relatywnie rzadko. [ ] Ludzie trafiają do tej strony zbyt przypadkowo, nie planując wejścia w proces transakcyjny i szybko się wycofują.

26 2b. Audyt ekspercki Analiza przeprowadzona przez kilku niezależnych ekspertów pozwoliła na ocenę zgodności strony z wytycznymi usability. Poza wykryciem błędów i problemów związanych z użytecznością wzbogaciliśmy analizę o obszerne rekomendacje bazujące głównie na branży turystycznej. Przy okazji poznaliśmy dokładnie konkurencję i benchmarki ze świata.

27 2c. Badania eyetrackingowe Badanie eytrackingowe miało na celu wykrycie problemów związanych z użytecznością serwisu. Dzięki sprzętowi monitorującemu miejsca fiksacji mogliśmy zaobserwować co na stronie przyciąga wzrok, a co jest pomijane. Badanie miało charakter jakościowy. Wykorzystany eyetracker użyczony został przez Eyetracking.pl. Częstotliwość zbierania danych na poziomie 120 Hz i możliwość swobodnego poruszania głową pozwoliły na uzyskanie dokładnych danych, zebranych w warunkach zbliżonych do naturalnych.

28 2c. Badania eyetrackingowe Przykładowa mapa cieplna Strony Głównej dla pierwszej minuty przy zadaniu z wyszukaniem konkretnej wycieczki Przykładowa ścieżka wzroku. Kropki przedstawiają miejsca fiksacji (im większe kropki tym dłużej trwała fiksacja). Punkty łączące przedstawiają ruchy sakadyczne.

29 2d. Konsultacje eksperckie Poza badaniami, analizami i czytaniem niezliczonej ilości raportów i artykułów kierowaliśmy się wiedzą zaprzyjaźnionych ekspertów z branży turystycznej. To właśnie oni pomagali nam zrozumieć ten biznes i często wspierali nas w podejmowaniu decyzji projektowych.

30 3. Wnioski i rekomendacje. Po co tyle badań? Wnioski i rekomendacje z badań pozwoliły nam na opracowanie nowej koncepcji. Każde narzędzie służyło poznaniu fragmentu całości. Wnioski z badań eyetrackingowych potwierdzały wyniki analizy statystyk, a rekomendacje z analizy eksperckiej były źródłem pomysłów do projektowania.

31 4. Makiety funkcjonalne Po zebraniu wniosków i rekomendacji rozpoczęliśmy projektowanie, którego efektem były makiety funkcjonalne. Zrobiliśmy ponad 20 wersji prototypów i zaprojektowaliśmy ponad 30 widoków reprezentujących kluczowe strony. Strona główna Wyniki wyszukiwania Karta oferty

32 5. Projekt graficzny Po zakończonym projekcie makiet zabraliśmy się za tworzenie grafiki. Zależało nam na stworzeniu świeżego i nowoczesnego projektu o przejrzystym interfejsie. Strona główna Wyniki wyszukiwania Karta oferty

33 Najważniejsze zmiany: Wyszukiwarka jest najważniejsza Zgodnie z przeprowadzonymi badaniami wyszukiwarka była najistotniejszym elementem serwisu. To dzięki niej większość użytkowników dociera do konkretnej oferty. W starszej wersji strony wyszukiwarka okazała się nieco problematyczna, a jej główne problemy dotyczyły nieintuicyjnych opcji i samego sposobu działania. Poza tym wyszukiwarka była niedostatecznie wyróżniona.

34 Najważniejsze zmiany: Wyszukiwarka jest najważniejsza Zaprojektowaliśmy nieco zmieniony układ. Wyszukiwarka została rozszerzona i zajmuje dokładnie ½ szerokości strony. W drugiej połowie znajduje się przewijany dynamicznie banner sprzedażowy, którego głównym celem jest prezentowanie najświeższych ofert i ożywienie wizualne strony. Zgodnie z przeprowadzonymi analizami poprawiliśmy pola wyszukiwarki, aby były bardziej intuicyjne i efektywne.

35 Najważniejsze zmiany: Czy tu można zamawiać? Poprzednia wersja strony nie wskazywała, że możliwe jest zamówienie przez nią wycieczek. Zaprojektowaliśmy jasne w przekazie teksty sugerujące rezerwację oraz wzbogaciliśmy stronę główną o atrakcyjną część informacyjną.

36 Najważniejsze zmiany: Jak zmieścić tyle informacji na stronie głównej? Poprzednia wersja strony przedstawiała bardzo mało konkretnych ofert. Postanowiliśmy to zmienić projektując duży element w formie zakładek. Dzięki temu na jednej stronie mieści się ponad sto ofert w bardzo atrakcyjnej formie.

37 Najważniejsze zmiany: Megadropdown jest super, ale czy zawsze? Po obserwacji użytkowników i wielu dyskusjach wewnątrz zespołu postanowiliśmy usunąć megadropdown, który był we wcześniejszej wersji strony. Dzięki takiemu uproszczeniu użytkownicy o wiele łatwiej mogą poruszać się po stronie.

38 Najważniejsze zmiany: Użytkownicy lubią porównywać ułatwmy im to. Specyfika branży z niezliczoną ilością parametrów i standardów ich zapisu powoduje, że niezwykle trudno jest porównywać oferty. Z kolei użytkownicy często porównują i starają się wybrać najlepszą dla nich ofertę. Waga poszczególnych opcji wycieczek jest zwykle sprawą indywidualną, a użytkownicy często są skłonni dopłacić w zamian za pewne udogodnienia. Aby ułatwić użytkownikom możliwość porównywania zaprojektowaliśmy nowy widok listy ofert. Dynamiczne filtry, czytelne wyniki oraz nowe ikony udogodnień zwiększyły efektywność wyszukiwania i porównywania ofert.

39 Najważniejsze zmiany: Odmieniony proces zamawiania Dzięki zupełnie nowemu sposobowi rezerwacji użytkownicy mają możliwość określania interesujących ich opcji i na bieżąco widzą zmieniającą się cenę. Poza tym od razu po wejściu na kartę oferty widzą cenę całkowitą, co ułatwia podejmowanie decyzji i usprawnia cały proces zamówienia.

40 Najważniejsze zmiany: Rezerwacja w trzech krokach Trzy kroki rezerwacji, które były obecne na starej stronie okazały się niezwykle łatwe do przejścia. Postanowiliśmy wprowadzić jedynie kosmetyczne zmiany wizualne i kilka drobnych zmian dla poprawy użyteczności.

41 Najważniejsze zmiany: Wdrożenie opinii społecznościowych Wdrożenie opinii opartych na mechanizmach Facebook. Zmniejszenie progu wejścia, ułatwienie dodawania opinii. Przyciąganie nowych użytkowników (publikacja opinii na ścianie użytkownika).

42 Rezultaty Wzrost zaangażowania użytkowników (przy wzroście odwiedzin) Wzrost średniej ilości stron na odwiedziny z 6,78 do 10,43 Wzrost średniego czasu spędzonego na witrynie z 4:12 do 4:56 Spadek wskaźnika odrzuceń z 27,55% do 22,54% Wskaźnik porzuceń stron ofertowych spadł z 9,45% do 6,4% Wskaźnik porzuceń z wyników wyszukiwarki spadł z 11,59% do 4,19% Konwersja (przy wzroście odwiedzin) Wzrost konwersji w serwisie o 150%

43 Dziękuję za uwagę Tomasz Karwatka