Prezentacja z konferencji Digital Mobility (Digital Think Tank).

1. what makes them love you,
mobilne ux
Igor Farafonow
Trochę
teorii
Szczegóły
projektowania
Kilka
caseów
Inspiracje
I wróżby

2. Trochę
teorii

3. 1,2 mln
aplikacji w Appstore
1,4 mln
aplikacji w Google Play

4. $0,4średni koszt pozyskania
użytkownika aplikacji mobilnej
pięć lat temu
$1,5-50
koszt pozyskania użytkownika
aplikacji mobilnej dziś – w
zależności od lokalizacji
Źródło: wypowiedzi Renato Iversena z Cynny

5. 80%
aplikacji mobilnych wywołuje tak
małe zainteresowanie, że nie są
nawet prezentowane w
rankingach aplikacji
75%aplikacji, mobilnych, które
zostaną pobrane, użytych
zostanie tylko raz

6. Co decyduje o tym, czy Klient
skorzysta
z naszej aplikacji? A jeśli już skorzysta
– co zrobić, by go zaangażować?

7. Źr.: http://johnhaime.com/2014/04/your-emotional-brain-a-key-in-performance/
Decyzja zakupowa jest wynikiem pracy
mózgu emocjonalnego, nie racjonalnego

8. Golden Circle – emotional design

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

10. Emotional design w marketingu

11. Emotional design w webie

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

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

14. Chcę stworzyć apkę, która
będzie robić …. i …., a poza tym
będzie jeszcze robić …

15. "You‘ve got to start with the
customer experience and work
back toward the technology - not
the other way around."
Steve Jobs
maj 1997, World Wide Developers Conference

16. Przykład (choć nie z mobile)

17. Czy tworzyliście
systemy ecommerce?

18. Czy w ramach tych systemów
przewidywaliście moduły ocen
produktów?

19. Czy projektowany system zakładał
powiadomienia mailowe 7 dni
po zakupie z prośbą o ocenę
produktu?

20. W większości przypadków odpowiedź brzmi
nie.
Czyli marnowany jest moduł o największym
potencjale w kontekście zwiększania
zaangażowania poprzez dodawanie ocen
produktów.
To jest przykład na projektowanie modułów
a nie doświadczeń. Wychodzenie
z funkcjonalności, a nie z doświadczeń

21. Dlatego od dziś mówmy:
chcę stworzyć aplikację, dzięki której użytkownicy
będą mogli robić …. oraz …. .
Moja apka będzie zapewniać doskonałe doświadczenie
w …. , a użytkownicy pokochają ją dlatego, że jest … .

22. Kilka zasad
projektowania

24. Persony
• Kim jest osoba, która będzie korzystać?
• W jakim jest wieku, jakiej jest płci?
• Jak często korzysta z komputera / komórki? Jak oceniasz jej
stopień świadomości?
• Czy korzysta z danego typu rozwiązań?
• Co sobie ceni w tych rozwiązaniach? Czego oczekuje?
• Co ją motywuje do realizacji pewnych działań? Co ją
inspiruje?
• Jakie ma wątpliwości, by je rozwiać?
• Jakich rozwiązań oczekuje?
• Jak często będzie korzystać z rozwiązań?
• Jak można ją zachęcić do korzystania
Dla person powinniśmy tworzyć spójne doświadczenia w zakresie
działań produktowych, marketingowych, sprzedażowych, itd.

25. Kontekst

26. • Gdzie użytkownicy będą korzystać z rozwiązań?
• Jak użytkownicy będą korzystać?
• Jak często będą rozpraszani w trakcie korzystania z
urządzenia?
• Ile czasu będzie trwało jednorazowa fiksacja na
ekranie?
• Jak często będą musieli przerwać korzystanie, bo
np. stojąc w kolejce dojdą do kasy?
• Ile interakcji wykonają w trakcie jednej sesji?
Dla person powinniśmy tworzyć spójne doświadczenia w
zakresie działań produktowych, marketingowych,
sprzedażowych, itd.
Kontekst

27. Kontekst
Attencja mobile i desktop

28. Kontekst
Interakcje mobile i desktop

29. Użytkownik mobilny to użytkownik
rozproszony.
Dodatkowo – czy kontekst w przypadku
użycia mobile będzie taki sam, jak dla
korzystania z webu?

30. Wielkość ma znaczenie

31. Wielkość ma znaczenie

32. Wielkość ekranu stanowi
ograniczenie – zarówno pod
kątem ilości informacji, jak
i proponowanych funkcjonalności.
• Na komórce nie napiszemy eseju w Wordzie
• Na komórce nie umieścimy głównych informacji w
pierwszym viewporcie
• Czasami dla użytkownika wchodzącego z komórki
inne informacje będą stanowić wartość – np. adres
i sposób dojazdu zamiast oferty firmy

33. Mobile First – redukcyjne
podejście do projektowania

34. Mobile First – redukcyjne
podejście do projektowania
• Skoncentruj się na treściach i komunikacji: jakiego typu
treści stanowią dla niego wartość w danym kontekście użycia?
• Układaj informacje w porządku chronologii komunikacji
(buduj dialog)
• Dialog musi być rzeczowy, konkretny, odpowiadający na
pytania użytkownika w taki sposób, jakby sam je zadawał
• Szkicuj – najpierw na komórce
• Skaluj – gdy dorysujesz zwiększ zakres – i rysuj dla większych
urządzeń, baw się układem

35. GUI Guidelines – skorzystaj,
chyba że umiesz lepiej…

36. Co to znaczy umieć lepiej?

37. Korzystaj z dobrodziejstw
natury
• Kamery front i back
• Mikrofon
• Nawigacja
• Akcelerometr
• Barometr
• Magnetometr
• Żyroskop
• Notyfikacje i powiadomienia
• Dostęp do płatności
• Dostęp do społeczności
• Multitasking
• Dostęp do informacji o osobie
• … i wiele więcej

38. Korzystaj z dobrodziejstw
natury

39. Always be testing
• Im wcześniej zbadasz swoją aplikację (nawet na poziomie
makiet), tym więcej pieniędzy zaoszczędzisz na jej
optymalizacji
• Użytkownik, który zrazi się do aplikacji, najpewniej już do
niej nigdy nie powróci – co więcej – poinformuje o tym też
swoich znajomych
• Nawet 5 osób potrafi wskazać w badaniu 85% utrudnień
usability, które realnie wpływają na konwersję /
zaangażowanie
• Testy usability wcale nie muszą być drogie
• Kiedyś mówiłem, że jestem wszechwiedzącą wyrocznią
usability – byłem po prostu głupi i leniwy

40. Podsumowanie 1
• Zawsze pamiętaj o personach
• To kontekst dyktuje scenariusze użycia
• Pamiętaj o wielkości ekranu i parametrach urządzeń – nie projektuj
funkcjonalności, które nie będą łatwe w użyciu ze względu na
ograniczenia urządzenia
• Mobile first – projektując serwisy responsywne zaczynaj od mobile – to
jest ćwiczenie na redukcję i syntetyzowanie pewnych elementów
architektury informacji
• Korzystaj z GUI Guidelines, chyba że umiesz lepiej ☺
• Korzystaj z dobrodziejstw urządzeń – zarówno pod kątem
funkcjonalności, jak i gestów i interfejsów
• Always be testing – badania usability na każdym poziomie potrafią
zmniejszyć ilość utrudnień użyteczności, zwiększyć zaangażowanie
i konwersję w aplikacji

41. Kilka
caseów

42. Przykład:
Na chwilę obecną głównym celem aplikacji
jest sprawienie, bym zaczął jej używać.

43. Pierwszy ekran po uruchomieniu

45. Unikaj syndromu pustego sklepu

46. Projektowanie musi być pod aktualny zakres, a mnie
pod nasze przewidywania lub (co gorsze) nadzieje.
Nie informuj użytkownika o tym, jaki jest stan
rzeczy – mów mu o tym, co ma zrobić, by zacząć
tego używać.
Inspiruj, wskazuj, doradzaj – przez powiadomienia
na urządzeniu i podsumowania mailowe.

47. Załóżmy, że nie znamy tego sajtu –
czy te ekrany zachęcają Was do
uzupełnienia informacji?

48. To co działa u innych, wcale nie
musi zadziałać u nas…

49. To że użytkownicy realizują zadanie na Facebooku
wcale nie wynika z tego, że Facebook jest użyteczny
i porządnie zaprojektowany.
Oni po prostu nie mają wyboru ;)

50. Wall aplikacji mobilnej
Wall, z którego korzysta 5 osób.
Ostatni wpis sprzed tygodnia.

51. Apple iPhone
pierwszy prawdziwy smartphone

52. Apple iPhone
wcale nie pierwszy…

53. Apple dało swoim Klientom
wygodę i seksowność

54. 2012 rok, raport porównawczy
IOS i Androida

55. 263 slajdy pełne drobnych szczegółów

56. 263 slajdy pełne szczegółów – które mają znaczenie.
Aplikacja w swoim zakresie musi być wygodna,
dopracowana w każdym szczególe, wydajna,
stabilna, skalowalna i łatwa do optymalizacji.

57. Podsumowanie 2
1. Kluczem do zaprojektowania skutecznej aplikacji
jest odpowiednie zdefiniowanie problemów i
zagadnień – nie są nimi problemy jutra, tylko te,
które będziemy mieli dziś.
2. Wykorzystując zaobserwowane na rynku wzorce
projektowe pamiętajmy, że fakt, że korzystają z
nich użytkownicy innych serwisów nie musi
wynikać z tego, że są dobrze zaprojektowane
3. To szczegóły budują pozytywne doświadczenia.
Zakres funkcjonalny określony w aplikacji musi
być wygodny, zgodny z przyzwyczajeniami
użytkowników, stabilny i wydajny.

58. Inspiracje
i wróżby

59. Interfejsy warstwowe

60. Podwójne i wielozadaniowe
swajpy

61. Kciukożercy

62. Kafelkowa, często łamana
architektura informacji

63. Nowe animacje interakcji

64. Flat bije skeumorphism

65. Jednolite wyraziste kolory,
prostota formy

66. Ikonki z pełnym wypełnieniem
lub jednopikselowym borderem

67. Duże rozmyte zdjęcia tła

68. Piękne, spójne i estetyczne typo

69. Dziwne i niezrozumiałe
uwielbienie do obiektów okrągłych

70. Dzięki za uwagę
Igor Farafonow
igor@uxeria.com
blog.uxeria.com