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
Top Related