jak projektować doświadczenia klientów w mobilnych rozwiązaniach www - trendy fintech 2018
TRANSCRIPT
![Page 1: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/1.jpg)
Jak projektować doświadczenia klientów
w mobilnych rozwiązaniach WWW
DOMINIK PASZKIEWICZ — SENIOR UX DESIGNER 9 LISTOPADA 2017
![Page 2: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/2.jpg)
Agenda / Plan
Mobilne doświadczenie
Garść statystyk
Przykłady rozwiązań
Zweryfikuj sam
Strategia — najbliższe kroki
UŻYTECZNOŚĆ
DOŚWIADCZENIE
JAKOŚĆ
![Page 3: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/3.jpg)
Charakterystyka doświadczenia mobilnego
![Page 4: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/4.jpg)
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.
![Page 5: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/5.jpg)
Oczekiwania kontra rzeczywistość #1
![Page 6: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/6.jpg)
Oczekiwania kontra rzeczywistość #2
![Page 7: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/7.jpg)
Statystyki
„PRZECIEŻ MAMY APLIKACJĘ“
![Page 8: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/8.jpg)
„The more channels they use, the more money they spend.”
14-miesięczne badanie na 46 000 klientachhttps://hbr.org/2017/01/a-study-of-46000-shoppers-shows-that-omnichannel-retailing-works
Harvard Business Review
![Page 9: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/9.jpg)
40% of people will choose a different search result if the first is not mobile friendly.
Skillcrush
![Page 10: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/10.jpg)
Nearly 8 out of every 10 consumers would stop engaging with a piece of content if it didn’t display wellon the device they were using.
Adobe
![Page 11: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/11.jpg)
Mobile web audiences arealmost 3 times bigger than appaudiences and growing faster.
ComScore
![Page 12: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/12.jpg)
![Page 13: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/13.jpg)
Wiele ekranóww procesiezakupowym
Źródło: Google — The New Multi-screen World:Understanding Cross-platform Consumer Behavior
![Page 14: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/14.jpg)
Dobre i złe praktyki
WYNIKI PRZEGLĄDU
![Page 15: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/15.jpg)
Układ przypadkowy.
#botrzeba#żebybyło
![Page 16: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/16.jpg)
Układ dopasowany do ekranu.
![Page 17: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/17.jpg)
Użytkownicy korzystają z Twojego rozwiązania, żeby zrealizować swoje
cele/potrzeby.
Kluczowe potrzeby użytkowników w kontekście
mobilnym.
![Page 18: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/18.jpg)
Użytkownicy korzystają z Twojego rozwiązania, żeby zrealizować swoje
cele/potrzeby.
Kluczowe potrzeby użytkowników w kontekście
mobilnym.
![Page 19: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/19.jpg)
Nieprawidłowa wielkość obszarów do tapnięciai lokalizacja elementów
interaktywnych.
![Page 20: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/20.jpg)
Prawidłowa wielkość obszarów do tapnięciai lokalizacja elementów
interaktywnych.
![Page 21: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/21.jpg)
Wielkość tekstu niedopasowana do małego
ekranu.
![Page 22: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/22.jpg)
Wielkość tekstu dopasowana do małego
ekranu.
![Page 23: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/23.jpg)
Nieczytelne odróżnienie bloków treści.
![Page 24: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/24.jpg)
Korzystna gra światłem (przestrzenią) i wyraźne
zarysowanie bloków treści.
![Page 25: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/25.jpg)
Brak możliwości powiększenia strony.
![Page 26: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/26.jpg)
Możliwość powiększenia strony zgodnie z potrzebami.
![Page 27: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/27.jpg)
Nieprawidłowy kontrast tekstu do tła.
![Page 28: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/28.jpg)
Prawidłowy kontrast tekstu do tła.
![Page 29: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/29.jpg)
Brak obsługi gestów.
![Page 30: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/30.jpg)
Obsługa gestów.Doświadczenie dopasowane
do możliwości urządzenia.
![Page 31: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/31.jpg)
Zasłanianie głównej treści, bez możliwości wyłączenia.
![Page 32: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/32.jpg)
Zasłanianie głównej treści, — możliwość wyłączenia.
![Page 33: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/33.jpg)
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.
![Page 34: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/34.jpg)
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.
![Page 35: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/35.jpg)
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.
![Page 36: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/36.jpg)
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.
![Page 37: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/37.jpg)
5. Zapobieganie powstawaniu błędów
• prawidłowa kolejność przycisków (np. Anuluj, Zatwierdź)
• walidacja formularzy
Wsparcie użytkownika zanim popełni błąd.
![Page 38: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/38.jpg)
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.
![Page 39: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/39.jpg)
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.
![Page 40: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/40.jpg)
8. Estetyczny i oszczędny design
• „im mniej tym lepiej”• czytelne call to action
Prosto i bez przeładowania zbędnymi funkcjami / informacjami.
![Page 41: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/41.jpg)
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.
![Page 42: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/42.jpg)
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.
![Page 43: Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018](https://reader031.vdocuments.pub/reader031/viewer/2022030318/5a6632137f8b9a214f8b62b9/html5/thumbnails/43.jpg)
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