SlideShare a Scribd company logo
1 of 44
Download to read offline
Jak projektować doświadczenia klientów
w mobilnych rozwiązaniach WWW
DOMINIK PASZKIEWICZ — SENIOR UX DESIGNER 9 LISTOPADA 2017
Agenda / Plan
Mobilne doświadczenie
Garść statystyk
Przykłady rozwiązań
Zweryfikuj sam
Strategia — najbliższe kroki
UŻYTECZNOŚĆ
DOŚWIADCZENIE
JAKOŚĆ
Charakterystyka doświadczenia mobilnego
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.
Oczekiwania kontra
rzeczywistość #1
Oczekiwania kontra
rzeczywistość #2
Statystyki
„PRZECIEŻ MAMY APLIKACJĘ“
„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
40% of people will choose a
different search result if the
first is not mobile friendly.
Skillcrush
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
Mobile web audiences are
almost 3 times bigger than app
audiences and growing faster.
ComScore
Wiele ekranów
w procesie
zakupowym
Źródło: Google — The New Multi-screen World:
Understanding Cross-platform Consumer Behavior
Dobre i złe praktyki
WYNIKI PRZEGLĄDU
Układ przypadkowy.
#botrzeba
#żebybyło
Układ dopasowany
do ekranu.
Użytkownicy korzystają z Twojego
rozwiązania, żeby zrealizować swoje
cele/potrzeby.
Kluczowe potrzeby
użytkowników w kontekście
mobilnym.
Użytkownicy korzystają z Twojego
rozwiązania, żeby zrealizować swoje
cele/potrzeby.
Kluczowe potrzeby
użytkowników w kontekście
mobilnym.
Nieprawidłowa wielkość
obszarów do tapnięcia
i lokalizacja elementów
interaktywnych.
Prawidłowa wielkość
obszarów do tapnięcia
i lokalizacja elementów
interaktywnych.
Wielkość tekstu
niedopasowana do małego
ekranu.
Wielkość tekstu
dopasowana do małego
ekranu.
Nieczytelne odróżnienie
bloków treści.
Korzystna gra światłem
(przestrzenią) i wyraźne
zarysowanie bloków treści.
Brak możliwości
powiększenia strony.
Możliwość powiększenia
strony zgodnie
z potrzebami.
Nieprawidłowy kontrast
tekstu do tła.
Prawidłowy kontrast
tekstu do tła.
Brak obsługi gestów.
Obsługa gestów.
Doświadczenie dopasowane
do możliwości urządzenia.
Zasłanianie głównej treści,
bez możliwości wyłączenia.
Zasłanianie głównej treści,
— możliwość wyłączenia.
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.
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.
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.
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.
5. Zapobieganie
powstawaniu
błędów
• prawidłowa kolejność
przycisków (np. Anuluj,
Zatwierdź)
• walidacja formularzy
Wsparcie użytkownika zanim popełni
błąd.
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.
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.
8. Estetyczny
i oszczędny design
• „im mniej tym lepiej”
• czytelne call to action
Prosto i bez przeładowania zbędnymi
funkcjami / informacjami.
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.
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.
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
Dominik Paszkiewicz
SENIOR UX DESIGNER
dpaszkiewicz@squiz.pl
+48 608 059 999
DZIĘKUJĘ ZA UWAGĘ

More Related Content

Similar to Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018

Gazeta w komórce? - Wojciech Kuśmierek, UseLab
Gazeta w komórce? - Wojciech Kuśmierek, UseLabGazeta w komórce? - Wojciech Kuśmierek, UseLab
Gazeta w komórce? - Wojciech Kuśmierek, UseLab
Biznes 2.0
 
Badania systemow finansowych. WUD Krakow 2012
Badania systemow finansowych. WUD Krakow 2012Badania systemow finansowych. WUD Krakow 2012
Badania systemow finansowych. WUD Krakow 2012
Paulina Makuch
 
Jak skutecznie wykorzystać badania w procesie projektowania serwisów internet...
Jak skutecznie wykorzystać badania w procesie projektowania serwisów internet...Jak skutecznie wykorzystać badania w procesie projektowania serwisów internet...
Jak skutecznie wykorzystać badania w procesie projektowania serwisów internet...
Biznes 2.0
 
Usability i UX - podstawy
Usability i UX - podstawyUsability i UX - podstawy
Usability i UX - podstawy
rtaraszka
 

Similar to Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018 (20)

Użytkownik – charakterystyki – percepcja
Użytkownik – charakterystyki – percepcjaUżytkownik – charakterystyki – percepcja
Użytkownik – charakterystyki – percepcja
 
2010.09 Eyetracking - zobacz co widzi Twój Klient
2010.09 Eyetracking - zobacz co widzi Twój Klient2010.09 Eyetracking - zobacz co widzi Twój Klient
2010.09 Eyetracking - zobacz co widzi Twój Klient
 
Świadomy UX, czyli jak słuchanie użytkowników może skrócić drogę do sukcesu ...
Świadomy UX, czyli jak słuchanie użytkowników może skrócić drogę do sukcesu ...Świadomy UX, czyli jak słuchanie użytkowników może skrócić drogę do sukcesu ...
Świadomy UX, czyli jak słuchanie użytkowników może skrócić drogę do sukcesu ...
 
Lean UX to stan umysłu - Warsztaty Lean UX
Lean UX to stan umysłu - Warsztaty Lean UXLean UX to stan umysłu - Warsztaty Lean UX
Lean UX to stan umysłu - Warsztaty Lean UX
 
Gazeta w komórce? - Wojciech Kuśmierek, UseLab
Gazeta w komórce? - Wojciech Kuśmierek, UseLabGazeta w komórce? - Wojciech Kuśmierek, UseLab
Gazeta w komórce? - Wojciech Kuśmierek, UseLab
 
Prezentacja IQS
Prezentacja IQSPrezentacja IQS
Prezentacja IQS
 
Badania systemow finansowych. WUD Krakow 2012
Badania systemow finansowych. WUD Krakow 2012Badania systemow finansowych. WUD Krakow 2012
Badania systemow finansowych. WUD Krakow 2012
 
Jak skutecznie wykorzystać badania w procesie projektowania serwisów internet...
Jak skutecznie wykorzystać badania w procesie projektowania serwisów internet...Jak skutecznie wykorzystać badania w procesie projektowania serwisów internet...
Jak skutecznie wykorzystać badania w procesie projektowania serwisów internet...
 
Skuteczne wykorzystanie badań w projektowaniu użytecznych produktów
Skuteczne wykorzystanie badań w projektowaniu użytecznych produktówSkuteczne wykorzystanie badań w projektowaniu użytecznych produktów
Skuteczne wykorzystanie badań w projektowaniu użytecznych produktów
 
UX is (almost) dead. Now what?
UX is (almost) dead. Now what?UX is (almost) dead. Now what?
UX is (almost) dead. Now what?
 
Aplikacje mobilne krok po kroku.
Aplikacje mobilne krok po kroku.Aplikacje mobilne krok po kroku.
Aplikacje mobilne krok po kroku.
 
4
44
4
 
Konferencja e-commerce 2007 Funkcjonalnosc witryn internetowych i metody ich ...
Konferencja e-commerce 2007 Funkcjonalnosc witryn internetowych i metody ich ...Konferencja e-commerce 2007 Funkcjonalnosc witryn internetowych i metody ich ...
Konferencja e-commerce 2007 Funkcjonalnosc witryn internetowych i metody ich ...
 
Usability i UX - podstawy
Usability i UX - podstawyUsability i UX - podstawy
Usability i UX - podstawy
 
Audyt użyteczności - webinar
Audyt użyteczności - webinarAudyt użyteczności - webinar
Audyt użyteczności - webinar
 
Czas i pieniądze 4 developers
Czas i pieniądze 4 developersCzas i pieniądze 4 developers
Czas i pieniądze 4 developers
 
Lean Canvas - Biznes plan na jednej kartce papieru
Lean Canvas - Biznes plan na jednej kartce papieruLean Canvas - Biznes plan na jednej kartce papieru
Lean Canvas - Biznes plan na jednej kartce papieru
 
Content na www - Agnieszka Galczynska I More Bananas
Content na www - Agnieszka Galczynska I More BananasContent na www - Agnieszka Galczynska I More Bananas
Content na www - Agnieszka Galczynska I More Bananas
 
Usability i UCD - case study Generali i Gazeta.pl
Usability i UCD - case study Generali i Gazeta.plUsability i UCD - case study Generali i Gazeta.pl
Usability i UCD - case study Generali i Gazeta.pl
 
Lean UX - Wszyscy jesteśmy projektantami
Lean UX - Wszyscy jesteśmy projektantamiLean UX - Wszyscy jesteśmy projektantami
Lean UX - Wszyscy jesteśmy projektantami
 

More from Squiz Poland

More from Squiz Poland (20)

Case study wdrożenia nowego serwisu e-commerce dla marki NC+
Case study wdrożenia nowego serwisu e-commerce dla marki NC+Case study wdrożenia nowego serwisu e-commerce dla marki NC+
Case study wdrożenia nowego serwisu e-commerce dla marki NC+
 
Case study wdrożenia nowej strony internetowej dla BGŻOptima
Case study wdrożenia nowej strony internetowej dla BGŻOptimaCase study wdrożenia nowej strony internetowej dla BGŻOptima
Case study wdrożenia nowej strony internetowej dla BGŻOptima
 
Jak Progressive Web Apps rewolucjonizują User Experience
Jak Progressive Web Apps rewolucjonizują User ExperienceJak Progressive Web Apps rewolucjonizują User Experience
Jak Progressive Web Apps rewolucjonizują User Experience
 
Cyfrowa transformacja w polskim sektorze edukacyjnym na przykładzie wdrożenia...
Cyfrowa transformacja w polskim sektorze edukacyjnym na przykładzie wdrożenia...Cyfrowa transformacja w polskim sektorze edukacyjnym na przykładzie wdrożenia...
Cyfrowa transformacja w polskim sektorze edukacyjnym na przykładzie wdrożenia...
 
Jak wykorzystać wiedzę o potrzebach użytkowników do podniesienia konwersji w ...
Jak wykorzystać wiedzę o potrzebach użytkowników do podniesienia konwersji w ...Jak wykorzystać wiedzę o potrzebach użytkowników do podniesienia konwersji w ...
Jak wykorzystać wiedzę o potrzebach użytkowników do podniesienia konwersji w ...
 
Rola zespołów i procesu projektowego w skutecznych wdrażaniu rozwiązań cyfrowych
Rola zespołów i procesu projektowego w skutecznych wdrażaniu rozwiązań cyfrowychRola zespołów i procesu projektowego w skutecznych wdrażaniu rozwiązań cyfrowych
Rola zespołów i procesu projektowego w skutecznych wdrażaniu rozwiązań cyfrowych
 
Jak zepsuć wdrożenie, skłócić zespół i roztrwonić budżet w procesie cyfrowej ...
Jak zepsuć wdrożenie, skłócić zespół i roztrwonić budżet w procesie cyfrowej ...Jak zepsuć wdrożenie, skłócić zespół i roztrwonić budżet w procesie cyfrowej ...
Jak zepsuć wdrożenie, skłócić zespół i roztrwonić budżet w procesie cyfrowej ...
 
Co łączy customer journey map z CRM - konferencja "Zrozumieć digital #5"
Co łączy customer journey map z CRM - konferencja "Zrozumieć digital #5"Co łączy customer journey map z CRM - konferencja "Zrozumieć digital #5"
Co łączy customer journey map z CRM - konferencja "Zrozumieć digital #5"
 
Podróż klienta w digital - jak zwiększyć szansę na konwersję - konferencja "Z...
Podróż klienta w digital - jak zwiększyć szansę na konwersję - konferencja "Z...Podróż klienta w digital - jak zwiększyć szansę na konwersję - konferencja "Z...
Podróż klienta w digital - jak zwiększyć szansę na konwersję - konferencja "Z...
 
Performance mobilnych serwisów bankowych - analiza, optymalizacja i dobre pra...
Performance mobilnych serwisów bankowych - analiza, optymalizacja i dobre pra...Performance mobilnych serwisów bankowych - analiza, optymalizacja i dobre pra...
Performance mobilnych serwisów bankowych - analiza, optymalizacja i dobre pra...
 
Nie ma dobrego doświadczenia bez dostępności
Nie ma dobrego doświadczenia bez dostępnościNie ma dobrego doświadczenia bez dostępności
Nie ma dobrego doświadczenia bez dostępności
 
Jak przekonywać managerów do wdrażania rozwiązań digital w organizacjach
Jak przekonywać managerów do wdrażania rozwiązań digital w organizacjachJak przekonywać managerów do wdrażania rozwiązań digital w organizacjach
Jak przekonywać managerów do wdrażania rozwiązań digital w organizacjach
 
8 kluczowych funkcjonalności nowoczesnego portalu internetowego
8 kluczowych funkcjonalności nowoczesnego portalu internetowego8 kluczowych funkcjonalności nowoczesnego portalu internetowego
8 kluczowych funkcjonalności nowoczesnego portalu internetowego
 
Optymalizacja doświadczenia użytkownika w obszarze digital
Optymalizacja doświadczenia użytkownika w obszarze digitalOptymalizacja doświadczenia użytkownika w obszarze digital
Optymalizacja doświadczenia użytkownika w obszarze digital
 
Zrozumieć digital - CRM jako hub do zarządzania doświadczeniem klienta w om...
Zrozumieć digital - CRM jako hub do zarządzania doświadczeniem klienta w om...Zrozumieć digital - CRM jako hub do zarządzania doświadczeniem klienta w om...
Zrozumieć digital - CRM jako hub do zarządzania doświadczeniem klienta w om...
 
E-commerce dla B2B - czyli jak zwiększyć sprzedaż dzięki wdrożeniu strategii ...
E-commerce dla B2B - czyli jak zwiększyć sprzedaż dzięki wdrożeniu strategii ...E-commerce dla B2B - czyli jak zwiększyć sprzedaż dzięki wdrożeniu strategii ...
E-commerce dla B2B - czyli jak zwiększyć sprzedaż dzięki wdrożeniu strategii ...
 
Customer first - obsługa klienta w kanałach cyfrowych
Customer first - obsługa klienta w kanałach cyfrowychCustomer first - obsługa klienta w kanałach cyfrowych
Customer first - obsługa klienta w kanałach cyfrowych
 
Marketing automation dla początkujących - 4 kluczowe kroki przed wdrożeniem
Marketing automation dla początkujących - 4 kluczowe kroki przed wdrożeniemMarketing automation dla początkujących - 4 kluczowe kroki przed wdrożeniem
Marketing automation dla początkujących - 4 kluczowe kroki przed wdrożeniem
 
E-commerce dla B2B - czyli jak zwiększyć sprzedaż dzięki nowemu kanałowi
E-commerce dla B2B - czyli jak zwiększyć sprzedaż dzięki nowemu kanałowiE-commerce dla B2B - czyli jak zwiększyć sprzedaż dzięki nowemu kanałowi
E-commerce dla B2B - czyli jak zwiększyć sprzedaż dzięki nowemu kanałowi
 
5 sposobów na wykorzystanie CRM i Marketing Automation w sprzedaży
5 sposobów na wykorzystanie CRM i Marketing Automation w sprzedaży5 sposobów na wykorzystanie CRM i Marketing Automation w sprzedaży
5 sposobów na wykorzystanie CRM i Marketing Automation w sprzedaży
 

Jak projektować doświadczenia klientów w mobilnych rozwiązaniach WWW - Trendy FinTech 2018