Jak zepsułem produkt kilka lekcji pokory

Igor Farafonow

Lekcja 1

Pustka

Lekcja 1

Portal społecznościowy usprawniający budowanie relacji wśród znajomych w GG

Źródło: oficjalne materiały prasowe GG Network

Lekcja 1

W czym jest lepszy?

• Adhocowe konferencje one-to-few, one-to-one

• Walle półprywatne

• Emotikony w streamie

• Integracja z komunikatorem

• Znacznie więcej – zdjęcia, wydarzenia, gry

Lekcja 1

Konferencje

Źródło: oficjalne materiały prasowe GG Network

Lekcja 1

zdjęcia…

Źródło: oficjalne materiały prasowe GG Network

Lekcja 1

gry…

Źródło: oficjalne materiały prasowe GG Network

Lekcja 1

Launch udany – na grafikach.

Źródło: oficjalne materiały prasowe GG Network

Lekcja 1

Jaki błąd użyteczności łączy wszystkie te ekrany?

Lekcja 1

Prezentują produkt dojrzały.

Lekcja 1

?

• Jak to będzie wyglądać przy niewielkiej ilości treści? • Jak to wyglądać, gdy nowe ciekawe treści będą

pojawiać się bardzo rzadko? • Gdzie są ekrany pierwszych wejść? Co ze

scenariuszami budowania zaangażowanie? / czy rozwijania krzywej uczenia?

• Zresztą – po co użytkownicy mają dodawać treść? W jaki sposób mają się poczuć zachęceni?

Lekcja 1

Tak wygląda rzeczywistość, gdy nie uwzględnimy mechanizmów budujących zaangażowanie oraz pominiemy

kwestie syndromu pustego sklepu.

Źródło: publikacja w serwisie internetowym gadunews.pl

Lekcja 1

Projekt nie uwzględniał aspektów braku treści i niewielkich ilości treści. Tylko w podstawowej

formie określał narzędzia budujące zaangażowanie użytkowników.

Nie był przewidziany jeden kluczowy aspekt

w cyklu życia produktu – rzeczywistość.

Lekcja 1

Koncentracja na przeczuciach, doświadczeniach, branżowych

wzorcach projektowych.

Lekcja 1

A wzorce są bez sensu… Przykład:

Lekcja 1

Właśnie utworzyłeś konto i jesteś tu po raz pierwszy.

Źródło: zrzuty facebook.com

Lekcja 1

Czy Ciebie, jako nowego użytkownika te ekrany zachęcą

do korzystania z serwisu?

Lekcja 1

To, że użytkownicy korzystają z funkcjonalności nie znaczy, że są one dobrze zaprojektowane.

Wpływ na ich korzystalność mają znajomość produktu, zaufanie do marki, świadomość, że inni korzystają i inne.

Źródło: zrzuty facebook.com

Lekcja 1

Jedynym wzorcem kierującym przy projektowaniu jest rzeczywistość.

Intuicje i inspiracje znajdują uzasadnienie tylko wtedy, gdy w całości uwzględniają skalę i problemy produktu.

PS> tych problemów z dziś, nie z jutra

Lekcja 2

Kompletność

Lekcja 2

Ile osób spośród Was projektowało kiedyś sklep internetowy?

Lekcja 2

Czy w tym sklepie były systemy ocen / recenzji produktów?

Źródło: fotozakupy.pl

Lekcja 2

Czy projektowaliście scenariusze wysyłek mailowych do klientów po zakupie z prośbą

o oceną produktu lub ocenę jakości dostawy.

Źródło: mail zalando.pl

Lekcja 2

Projektowanie modułów opiera się rysowaniu i składaniu klocków.

Rozwiązywanie zagadnień biznesowych to budowanie wielosesyjnych doświadczeń na różnych płaszczyznach.

Doświadczeń uwzględniających różne kanały komunikacji –

przeglądarka, email, mobile, social, itd.

Lekcja 2

Ale tu nie chodzi tylko o ilość

Lekcja 2

Czy ktoś z Was projektował kiedyś system autentykacji?

Źródło: gg.pl (zrzut)

Lekcja 2

Kto w swoim projekcie nie uwzględnił wszystkich usecase’ów i scenariuszy?

• Ekran odzyskiwanie hasła • Niepoprawny email w procesie odzyskiwania hasła • Potwierdzenie wysłania instrukcji do utworzenia nowego hasła • Treść emaila odzyskiwania hasła • Ekran tworzenia nowego hasła – po kliknięciu w link z maila • Ekran potwierdzenia założenia nowego emaila • Ekran tworzenia nowego konta • Ekran wykorzystania Facebooka / G+ do założenia konta / zalogowania • Ekran potwierdzający założenie nowego konta • Treść emaila z linkiem aktywującym konto (dla double opt-in) • Ekran po potwierdzeniu założenia nowego konta • Ekran, gdy token zawarty w linku z maila już wygasł • Przypomnienie o potwierdzeniu adresu email • Walidacja formularzy dla wszystkich ustandaryzowanych elementów • Spójne GUI w ramach całego projektu – wszystkich formularzy, labeli, pól • Wszystkie dodatkowe komunikaty potwierdzające sukces porażkę w każdym usecase

Lekcja 2

Każda funkcjonalność powinna być kompletna.

Źródło: gg.pl (zrzut)

Lekcja 2

Nie układamy klocków – projektujemy doświadczenia. Powinny być wielowątkowe, wielokanałowe,

ale i kompletne w ramach scenariuszy.

Źródło: materiały własne

Lekcja 3

Zakres

Lekcja 3

Odtwarzacz muzyki: nieskończenie piękny

Lekcja 3

Jak to się miało do rzeczywistości?

Nijak. Sztuka dla sztuki.

Lekcja 3

Rok pracy zanim produkt powstanie?

Lekcja 3

Produkt musi być realizowalny

• Ciągła współpraca z IT • Określenie listy funkcjonalności kluczowych biznesowo • Realna wycena, jeszcze zanim powstaną makiety • Projektowanie ustalonego zakresu – ‘nie projektujemy

do szuflady’ • Konsekwencja – nie zmieniamy zakresu funkcjonalnego

w międzyczasie • Dyscyplina – nie zmieniamy projektu w nieskończoność

Lekcja 3

Bo co by było, gdybyśmy przygotowali prosty player MP3?

• Mielibyśmy gotowy produkt w ciągu trzech miesięcy • Skonfrontowalibyśmy interfejs użytkownika z Klientami • Poznalibyśmy, w jaki sposób korzystają z naszego

systemu i jakie problemy rozwiązują • Wdrażalibyśmy kolejne funkcjonalności mając już

działający produkt

Lekcja 3

Podobna historia w Uxerii

Źródło: Uxeria.com

Lekcja 3

Większy zakres funkcjonalny opóźnia launch i wprowadza dodatkowe ryzyka

• wydłuża czas oczekiwania na wydanie • zwiększa ryzyko, że coś się wysypie • zmniejsza elastyczność na zmiany – czasami

konieczne po pierwszej weryfikacji z rynkiem • z punktu widzenia produktowego potrafi

zmniejszyć przejrzystość głównych cech produktu

Lekcja 3

Nie robimy sztuki dla sztuki. Nie zawsze warto ratować świat.

Projekt powinien po prostu

być realizowalny.

Lekcja 4

Zasady

Lekcja 4

Każde kolejne pole formularza obniża konwersję o 15 do 30 procent.

Prawda?

Źródło: fotozakupy.pl (zrzut)

Lekcja 4

11.500 klientów w 70 krajach

1.900 klientów agencyjnych

Źródło: hubspot.com(zrzut)

Formularz na ebooku hubspot

Lekcja 4

Źródło: hubspot.com (zrzut)

Jeszcze raz…

Źródło: hubspot.com (zrzut)

Lekcja 4

Co więc tak naprawdę decyduje o konwersji formularza?

• Zaufanie – użytkownicy nie uzupełnią formularza, gdy nie ufają produktowi i intencjom • Opisanie celowości – użytkownicy muszą wiedzieć, po co uzupełniają formularz, po co

podają poszczególne dane – jeżeli to wiedzą, zrozumiały jest dla nich fakt podania tych danych

• Znajomość kontekstu uzupełnienia – forma formularza uzależniona powinna być od kontekstu uzupełnienia danych – czasem ktoś chce zrobić szybko bazując na standardowych form-fieldach; czasem warto dać więcej playability

• Pola umieszczone w odpowiedniej kolejności – kolejność pól nie może być przypadkowa – labele czytane jeden po drugim same z siebie powinny opowiadać historię – tworzyć nić komunikacji

• Konwersacja – forma opisów labeli powinna być jasna i czytelna – powinno się unikać słów kluczowych i generycznych haseł

• Podobne pola powinny być pogrupowane (razem) • Koncentracja na formularzu – no distractions please! • Autouzupełnianie możliwie największej ilości danych (np. miejscowość na podstawie

kodu) • Unikanie błędów zamiast ich walidowanie postsubmitowe • Proces to tunel • Na pewno nie ilość pól (zwłaszcza, gdy spełnione są powyższe)

Lekcja 4

Jeśli użytkownik rozumie celowość formularza i wie, do czego posłużą umieszczone tam dane,

formularz nie musi być kompaktowy.

Źródło: Inwestorwkapitalludzki.pl (zrzut)

Lekcja 4

1 2

Konwersja porównywalna. Z punktu widzenia biznesowego

różnica znaczna.

Źródło: Uxeria.com (zrzut)

Lekcja 4

Ogólne zasady, wzorce i statystyki są przydatne jako inspiracje i tezy.

Nie powinniśmy ich uznawać za prawdziwe,

dopóki nie zweryfikujemy na swoim podwórku.

• Testy A/B • Analytics • Badania z użytkownikami • Mouse tracking, heatmapy • Grupy fokusowe

Lekcja 5

Zaangażowanie

Lekcja 5

Źr.: http://johnhaime.com/2014/04/your-emotional-brain-a-key-in-performance/

Decyzja zakupowa nie jest wynikiem pracy mózgu racjonalnego, lecz emocjonalnego

Lekcja 5

Golden Circle – emotional design

Lekcja 5

Klienci kupują emocjonalnie. Determinantem wcale nie muszą być są logiczne przesłanki. Często jest nią wiara we wspólne wartości.

Lekcja 5

Emotional design w marketingu

Lekcja 5

Emotional design w webie

Lekcja 5

Emocjonalne doświadczenie powinno być spójne we wszystkich touchpointach Klienta z produktem

Lekcja 5

Emocje wynikają z sumy wszystkich doświadczeń Klienta z firmą / produktem. Tych dobrych i tych złych. Niestety gorsze doświadczenia i emocje są zawsze silniejsze (negativity bias).

Lekcja 5

Projektujemy emocje – stąd nasze projekty powinny być spójne z emocjonalnym nastawieniem klientów do produktu

• Jeśli jest to dyskont, powinien wyglądać jak dyskont • Jeśli jest to sklep z produktami premium, taką też

powinien mieć architekturę informacji • Jeśli to jest aplikacja wspierająca biznes, to też

powinna mówić strona – rozumiemy Twój biznes

To wszystko zarówno w kontekście architektury informacji, jak i estetyki witryny

Lekcja 5

źr.: http://jesserogerson.com/tag/brain/

A nasz projekt składa się z treści i formy, które powinny budować spójną komunikację…

Lekcja 5

Emotional design – połączenie formy i treści, by zbudować spójne doświadczenie emocjonalne.

Lekcja 5

Naszym zadaniem jest projektowanie doświadczeń emocjonalnych.

Czym ten produkt ma być dla Klienta – jakie

emocje mają ich łączyć? To nie decyzja projektanta, lecz biznesu.

Ta konsekwencja i spójność produktowa

powinna być zachowana na każdym touchpoincie.

Dziękuję za uwagę

Igor Farafonow igor@uxeria.com

Pragnę poinformować, że wszystkie przykłady i grafiki wykorzystane w tej prezentacji są oficjalnymi materiałami podmiotów, bądź też zrzutami ekranów aktualnych systemów i stron internetowych – dostępnymi wszystkim użytkownikom Internetu (przy każdym wpisane źródło pochodzenia). Żadne z zaprezentowanych w prezentacji grafik i informacji nie są objęte tajemnicą firmową ani nie są materiałami wewnętrznymi jakiegokolwiek podmiotu. Informuję również, że prezentowane przeze mnie przykłady nie powinny świadczyć o tym, że w ramach mojej dotychczasowej pracy realizowałem którykolwiek z przedstawionych projektów. Celem umieszczenia tych materiałów jest wskazanie moich subiektywnych odczuć i przemyśleń dotyczących pewnych rozwiązań. Nie powinno się przypuszczać, żebym bym był w jakikolwiek sposób powiązany z tymi witrynami i systemami, bądź podmiotami za nie odpowiedzialnymi. Igor Farafonow.

Uwaga dodatkowa