Prowadzący: Dominik Paszkiewicz - https://www.linkedin.com/in/dominikpaszkiewicz/ Prezentacja odbyła się podczas konferencji "Trendy FinTech 2018 - strategia, design, technologia" Więcej na temat Squiz znajdziecie na stronie: https://www.squiz.net/pl W razie pytań, zapraszamy do kontaktu: Kacper Skoczylas, Marketing Manager kskoczylas@squiz.pl www.squiz.pl

1. Jak projektować doświadczenia klientów
w mobilnych rozwiązaniach WWW
DOMINIK PASZKIEWICZ — SENIOR UX DESIGNER 9 LISTOPADA 2017

2. Agenda / Plan
Mobilne doświadczenie
Garść statystyk
Przykłady rozwiązań
Zweryfikuj sam
Strategia — najbliższe kroki
UŻYTECZNOŚĆ
DOŚWIADCZENIE
JAKOŚĆ

3. Charakterystyka doświadczenia mobilnego

4. Użytkownik oczekuje rozwiązania,
które dobrze działa na jego
urządzeniu. Nie spełnisz tych
oczekiwań serwisem rutynowo
wepchniętym na mały ekran.

5. Oczekiwania kontra
rzeczywistość #1

6. Oczekiwania kontra
rzeczywistość #2

7. Statystyki
„PRZECIEŻ MAMY APLIKACJĘ“

8. „The more channels they use,
the more money they spend.”
14-miesięczne badanie na 46 000 klientach
https://hbr.org/2017/01/a-study-of-46000-shoppers-shows-that-omnichannel-retailing-works
Harvard Business Review

9. 40% of people will choose a
different search result if the
first is not mobile friendly.
Skillcrush

10. Nearly 8 out of every 10
consumers would stop
engaging with a piece of
content if it didn’t display well
on the device they were using.
Adobe

11. Mobile web audiences are
almost 3 times bigger than app
audiences and growing faster.
ComScore

13. Wiele ekranów
w procesie
zakupowym
Źródło: Google — The New Multi-screen World:
Understanding Cross-platform Consumer Behavior

14. Dobre i złe praktyki
WYNIKI PRZEGLĄDU

15. Układ przypadkowy.
#botrzeba
#żebybyło

16. Układ dopasowany
do ekranu.

17. Użytkownicy korzystają z Twojego
rozwiązania, żeby zrealizować swoje
cele/potrzeby.
Kluczowe potrzeby
użytkowników w kontekście
mobilnym.

18. Użytkownicy korzystają z Twojego
rozwiązania, żeby zrealizować swoje
cele/potrzeby.
Kluczowe potrzeby
użytkowników w kontekście
mobilnym.

19. Nieprawidłowa wielkość
obszarów do tapnięcia
i lokalizacja elementów
interaktywnych.

20. Prawidłowa wielkość
obszarów do tapnięcia
i lokalizacja elementów
interaktywnych.

21. Wielkość tekstu
niedopasowana do małego
ekranu.

22. Wielkość tekstu
dopasowana do małego
ekranu.

23. Nieczytelne odróżnienie
bloków treści.

24. Korzystna gra światłem
(przestrzenią) i wyraźne
zarysowanie bloków treści.

25. Brak możliwości
powiększenia strony.

26. Możliwość powiększenia
strony zgodnie
z potrzebami.

27. Nieprawidłowy kontrast
tekstu do tła.

28. Prawidłowy kontrast
tekstu do tła.

29. Brak obsługi gestów.

30. Obsługa gestów.
Doświadczenie dopasowane
do możliwości urządzenia.

31. Zasłanianie głównej treści,
bez możliwości wyłączenia.

32. Zasłanianie głównej treści,
— możliwość wyłączenia.

33. 1. Zawsze widoczny
status systemu
• potwierdzenia wykonanej akcji
• pasek postępu
• komunikat
• animacja pokazująca
aktywność systemu
• kroki
• informacja o zakończeniu
przetwarzania
Użytkownik powinien wiedzieć co się
dzieje / co się wydarzyło.
Źródło: „How to Use Disney’s Principles of Animation to Improve UX”. Animacja powstała
na podstawie „How to Avoid Loading Indicators” Luke’a Wroblewski’ego.

34. 2. Dopasowanie
pomiędzy systemem
a światem
rzeczywistym
• zrozumiały (prosty) język
• zrozumiała symbolika (np. ikon)
• zrozumiała „logiczna” kolejność
Używanie pojęć
i terminologii znanej użytkownikowi.

35. 3. Poczucie kontroli
i swoboda działań
• możliwość wyjścia,
przerwania działania
• możliwość cofnięcia operacji
• możliwość zamknięcia okna
Użytkownik może opuścić dany stan,
zmienić wybrane opcje lub cofnąć
działania.

36. 4. Spójność
i standardy
• przewidywalne (raz nauczone)
działanie
• spójność wizualna
• podobna kolejność
• spójne działanie np. kontrolek,
poleceń
Podobny wygląd, podobne działanie,
podobne zachowanie.

37. 5. Zapobieganie
powstawaniu
błędów
• prawidłowa kolejność
przycisków (np. Anuluj,
Zatwierdź)
• walidacja formularzy
Wsparcie użytkownika zanim popełni
błąd.

38. 6. Rozpoznawania
zamiast
przypominania
• przypominanie na kolejnych
etapach / krokach działania
• opcje widoczne / pod ręką
• „ostatnio oglądane”
• autouzupełnianie
• schowki
Nie obciążaj pamięci użytkownika.

39. 7. Elastyczność
i możliwość pracy na
skróty
• skróty klawiszowe
• szybkie linki
• zapisywanie wyszukiwani
• schowki
Warstwy funkcjonalne dla użytkowników
o różnym poziomie zaawansowania.

40. 8. Estetyczny
i oszczędny design
• „im mniej tym lepiej”
• czytelne call to action
Prosto i bez przeładowania zbędnymi
funkcjami / informacjami.

41. 9. Pomoc
w rozpoznawaniu,
diagnozowaniu
i poprawianiu błędów
• skuteczna pomoc z
wewnętrznymi odniesieniami
• „czy miałeś na myśli…”
• niekomunikowanie kodami
systemowymi
Komunikaty napisane prostym językiem.

42. 10. Pomoc i
dokumentacja
• zrozumiała i czytelna pomoc
• najlepiej kontekstowa
• różne formy pomocy
i dokumentacji:
wprowadzenie (onboarding),
tutoriale, demo, podpowiedzi
Przyjazna, łatwa do odnalezienia
dokumentacja.

43. Strategia
Testuj na rzeczywistych
urządzeniach.
Sprawdź jakie jest obecnie zachowania
użytkowników w serwisie (analityka
WWW).
Przeanalizuj wzorce projektowe
w ramach analizy konkurencji.
Zapewnij użytkownikom propozycję
wartości uwzględniając kontekst
mobilny.
1 3
2 4

44. Dominik Paszkiewicz
SENIOR UX DESIGNER
dpaszkiewicz@squiz.pl
+48 608 059 999
DZIĘKUJĘ ZA UWAGĘ