1. Interfejsy użytkownika
w M-commerce
dobre praktyki, wzorce, potknięcia
Wojtek Chojnacki
A-Symetria

2. A-Symetria Projektowanie M-commerce 2
Spis tematów
1. Co, jak i dlaczego
2. Strona główna
3. Wyniki wyszukiwania
4. Informacje o produkcie
5. Koszyk i proces zakupowy

3. A-Symetria Projektowanie M-commerce 3
Co, jak i dlaczego

4. A-Symetria Projektowanie M-commerce 4
Teoria a realia
• Jakob Nielsen:
– „Mobile web 2009 =
Desktop web 1998
– Mobile user experience is
miserable”
• Miliony
użytkowników
• Miliardy dolarów

5. A-Symetria Projektowanie M-commerce 5
„Sklepy komórkowe”
• Możliwy szybki zwrot inwestycji jest dobrą
zachętą do niej
• M-commerce powinien być przedmurzem
użyteczności serwisów mobilnych
– Najbardziej dopracowane
– Tworzą standardy
– Obserwują i weryfikują efekty

6. A-Symetria Projektowanie M-commerce 6
Czołówka światowego m-commerce –
• 1. eBay, 5.03 million, 3.97 million, 26.7%
• 2. Amazon.com, 3.51 million, 2.46 million, 42.6%
• 3. GameSpot, 2.58 million, 1.93 million, 33.6%
• 4. Netflix, 1.85 million, 543,000, 240.6%;
• 5. Walmart.com, 1.67 million, 2008 data was not available;
• 6. Target Corp., 1.54 million, 815,000, 88.9%;
• 7. Buy.com Inc., 772,000, 629,000, 22.7%;
• 8. Overstock.com Inc., 766,000, 693,000, 10.5%;
• 9. Toys ‘R’ Us Inc., 521,000, 370,000, 40.8%;
• 10. 1-800-Flowers.com Inc., 442,000, 2008 data was not available;
http://www.internetretailer.com/dailyNews.asp?id=33080 , 6-01-2010
Kolejno: odwiedziny w X-09, X-08, wzrost

7. A-Symetria Projektowanie M-commerce 7
Co z tą Polską?
http://di.com.pl/informacje/galeria,28846,3752.html
• Tylko 7 na 20
polskich
największych
serwisów
e-commerce
(Megapanel VII
2009)
ma wersję
mobilną

8. A-Symetria Projektowanie M-commerce 8
Strona główna

9. A-Symetria Projektowanie M-commerce 9
Amazon.com – strona główna
• Logotyp
• Wyszukiwarka
– jako pierwszy element ekranu
• Oferta specjalna
– Kilka słów + grafika (jedna z
trzech na stronie)
• Kategorie
– Widoczne tylko najważniejsze
• Stopka
– pierwsze linki to koszyk i konto

10. A-Symetria Projektowanie M-commerce 10
m.ebay.com – strona główna
• Nie wykrywa
automatycznie mobilnego
urządzenia
• Kompletny brak oferty na
stronie głównej
• Logowanie już na
pierwszym ekranie

11. A-Symetria Projektowanie M-commerce 11
Strona główna - lokalizacja
• Wyszukiwarka:
– Produktu
– Sklepu firmowego

12. A-Symetria Projektowanie M-commerce 12
Strony główne - Polska

13. A-Symetria Projektowanie M-commerce 13
Wyniki wyszukiwania

14. A-Symetria Projektowanie M-commerce 14
Amazon.com – wyniki wyszukiwania
• Wyszukiwarka z narzędziem
sortowania na górze strony
• Logo graficzne zmienione na
tekstowe (z uwagi na ilość danych?)
• 5 wyników/ekran
• Kolejne wyniki odznacza odstęp,
numeracja i klikalny pierwszy wiersz
• Oszczędnie użyte wyróżnienia
kolorystyczne
• Typy produktów – zamiast ogólnej
kategorii podawana jest bardziej
szczegółowa (format, rodzaj okładki)

15. A-Symetria Projektowanie M-commerce 15
m.Ebay.com
• Czytelne wyniki z grafkami
• Zakładki jako sposób
nawigacji po aplikacji

16. A-Symetria Projektowanie M-commerce 16
Sears.com – wyniki wyszukiwania
• Zbyt duże grafiki mocno
wydłużają stronę
• Więcej narzędzi
dostosowania wyników,
brak opcji ponownego
szukania

17. A-Symetria Projektowanie M-commerce 17
m.Allegro.pl – wyniki wyszukiwania
• Niska trafność wyników
• Dłuższe nazwy – mniej
czytelnie
• Brak odstępów między
wynikami, zamiast tego
„zebra”

18. A-Symetria Projektowanie M-commerce 18
Informacje o produkcie

19. A-Symetria Projektowanie M-commerce 19
Informacje o produkcie – amazon.com
• Akcje zakupowe w
centrum ekranu, tuż pod
nazwą i zdjęciem
• Na pierwszym ekranie
konkrety:
– Co kupujemy
– Jak kupić
– Za ile i na jakich warunkach
– Oferta specjalna

20. A-Symetria Projektowanie M-commerce 20
Informacje o produkcie – m.ebay.com
• Przyciski aukcji dostępne
tuż pod nagłówkiem
produktu, jeden z nich
odświeża stronę
• Opis produktu w
zakładkach,
• Wyraźne etykiety i wartości
danych

21. A-Symetria Projektowanie M-commerce 21
Informacje o produkcie – dobór treści
• Hierarchia strony
mobilnej pokrywa się
z hierarchią wersji
„desktop”
• Dłuższe opisy zostają
zwinięte do linków
prowadzących do
osobnych ekranów
…

22. A-Symetria Projektowanie M-commerce 22
Informacje o produkcie - recenzje

23. A-Symetria Projektowanie M-commerce 23
Informacje o produkcie –
sposoby zakupu

24. A-Symetria Projektowanie M-commerce 24
Informacje o produkcie – sposoby
zakupu
• Wszystkie formaty
dostępne na jednej
stronie produktowej
• Prostsze szukanie
produktu, ale
większe ryzyko
przypadkowego
złego wyboru

25. A-Symetria Projektowanie M-commerce 25
Koszyk i płatność

26. A-Symetria Projektowanie M-commerce 26
Amazon.com - koszyk
• Pierwszy interaktywny
element – przejście do
zakupu
• Prosta budowa wpisu
produktu:
– tytuł, numer w koszyku
– cena
– ilość z mechanizmem zmiany
– sprzedawca
– „przenieś do przechowalni”
• Poniżej produktów
rekomendacje oparte o
zawartość koszyka

27. A-Symetria Projektowanie M-commerce 27
BN.com
• Czytelny projekt
• Rozsądny obszar na
produkt, choć nie
wszystkie informacje
wydają się konieczne
• Zbyt wiele
przycisków osłabia
siłę najważnieszego,
na dole strony

28. A-Symetria Projektowanie M-commerce 28
Sears.com - koszyk
• Duży obszar
przypadający na
produkt
• Zakończenie zakupów
– link na dole strony

29. A-Symetria Projektowanie M-commerce 29
Amazon.com – proces zakupowy
• Brak pomocy
nawigacyjnych
– paska postępu,
– listy kroków,
– opcji cofnięcia do
poprzedniego
• Jedyny link „ucieczki” to
„Koszyk”

30. A-Symetria Projektowanie M-commerce 30
BN.com – proces zakupowy
• Czytelny ekran,
pozwala wracać do
poprzednich kroków
• Dużo więcej
czytania i
przewijania, nie
mieści się w
szerokości 240 px

31. A-Symetria Projektowanie M-commerce 31
Płatności
• Dostępne sposoby:
– karta kredytowa
– bon zakupowy
• Zapewnienie o
bezpieczeństwie –
kluczowa informacja

32. A-Symetria Projektowanie M-commerce 32
Podsumowanie
• Problemem jest nie tylko użyteczność, ale
przede wszystkim dostępność wersji mobilnych
• W zakresie użyteczności doskwiera ograniczona
przestrzeń, ale i detale dotyczące dostępnych
interakcji:
– wskazywanie informacji,
– przewijanie stron,
– zapamiętywanie danych formularza
– dynamiczne reakcje na zmiany wartości pól

33. A-Symetria Projektowanie M-commerce 33
Wskazania
• Wykrywaj urządzenie mobilne lub przynajmniej
wskazuj drogę do wersji „m”
• Wyszukiwarka – problematyczna, ale
niezastąpiona
• Budowa ekranów - minimum z minimum opcji
• Surowość graficzna to bezpieczeństwo w
zakresie wyświetlania
• Wertykalne ułożenie elementów jest zazwyczaj
mądrzejszym wyborem

34. A-Symetria Projektowanie M-commerce 34
Polacy nie gęsi

35. A-Symetria Projektowanie M-commerce 35
Onet zakupy

36. A-Symetria Projektowanie M-commerce 36
m.Skapiec.pl
• Nie rozpoznaje urządzenia mobilnego

37. A-Symetria Projektowanie M-commerce 37
Wirtualna Polska – tanio.pl

38. A-Symetria Projektowanie M-commerce 38
m.Radar.pl

39. Dziękuję za uwagę
Wojtek Chojnacki
wojciech.chojnacki@symetria.pl