Prezentacja z 3 edycji World Usability Day 2014 - Wud na Pradze, Wud w Krakowie, Wud w Trójmieście.

1. Jak zepsułem produkt
kilka lekcji pokory
Igor Farafonow

2. Lekcja 1
Pustka

3. 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

4. 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

5. Lekcja 1
Konferencje
Źródło: oficjalne
materiały prasowe
GG Network

6. Lekcja 1
zdjęcia…
Źródło: oficjalne
materiały prasowe
GG Network

7. Lekcja 1
gry…
Źródło: oficjalne
materiały prasowe
GG Network

8. Lekcja 1
Launch udany – na grafikach.
Źródło: oficjalne
materiały prasowe
GG Network

9. Lekcja 1
Jaki błąd użyteczności łączy
wszystkie te ekrany?

10. Lekcja 1
Prezentują produkt dojrzały.

11. 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?

12. 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

13. 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ść.

14. Lekcja 1
Koncentracja na przeczuciach,
doświadczeniach, branżowych
wzorcach projektowych.

15. Lekcja 1
A wzorce są bez sensu…
Przykład:

16. Lekcja 1
Właśnie utworzyłeś konto i jesteś tu
po raz pierwszy.
Źródło: zrzuty
facebook.com

17. Lekcja 1
Czy Ciebie, jako nowego
użytkownika te ekrany zachęcą
do korzystania z serwisu?

18. 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

19. 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

20. Lekcja 2
Kompletność

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

22. Lekcja 2
Czy w tym sklepie były systemy
ocen / recenzji produktów?
Źródło:
fotozakupy.pl

23. 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

24. 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.

25. Lekcja 2
Ale tu nie chodzi tylko o ilość

26. Lekcja 2
Czy ktoś z Was projektował kiedyś system
autentykacji?
Źródło: gg.pl (zrzut)

27. 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

28. Lekcja 2
Każda funkcjonalność powinna być kompletna.
Źródło: gg.pl (zrzut)

29. 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

30. Lekcja 3
Zakres

31. Lekcja 3
Odtwarzacz muzyki: nieskończenie piękny 

32. Lekcja 3
Jak to się miało do
rzeczywistości?
Nijak. Sztuka dla sztuki.

33. Lekcja 3
Rok pracy zanim produkt
powstanie?

34. 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ść

35. 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

36. Lekcja 3
Podobna historia w Uxerii
Źródło:
Uxeria.com

37. 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

38. Lekcja 3
Nie robimy sztuki dla sztuki.
Nie zawsze warto ratować świat.
Projekt powinien po prostu
być realizowalny.

39. Lekcja 4
Zasady

40. Lekcja 4
Każde kolejne pole formularza obniża
konwersję o 15 do 30 procent.
Prawda?
Źródło:
fotozakupy.pl (zrzut)

41. Lekcja 4
11.500
klientów w 70 krajach
1.900
klientów agencyjnych
Źródło:
hubspot.com(zrzut)

42. Formularz na ebooku hubspot
Lekcja 4
Źródło:
hubspot.com (zrzut)

43. Jeszcze raz…
Źródło:
hubspot.com (zrzut)

44. 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)

45. 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)

46. Lekcja 4
1 2
Konwersja porównywalna.
Z punktu widzenia biznesowego
różnica znaczna.
Źródło:
Uxeria.com (zrzut)

47. 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

48. Lekcja 5
Zaangażowanie

49. 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

50. Lekcja 5
Golden Circle – emotional design

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

52. Lekcja 5
Emotional design w marketingu

53. Lekcja 5
Emotional design w webie

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

55. 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).

56. 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

57. 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ę…

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

59. 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.

60. Dziękuję za uwagę
Igor Farafonow
igor@uxeria.com

61. 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