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 klientachhttps://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 wellon the device they were using.

Adobe

Mobile web audiences arealmost 3 times bigger than appaudiences and growing faster.

ComScore

Wiele ekranóww procesiezakupowym

Ź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ęciai lokalizacja elementów

interaktywnych.

Prawidłowa wielkość obszarów do tapnięciai 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 PaszkiewiczSENIOR UX DESIGNER

dpaszkiewicz@squiz.pl+48 608 059 999

DZIĘKUJĘ ZA UWAGĘ