Interfejsy użytkownika w M-commerce

dobre praktyki, wzorce, potknięcia

Wojtek ChojnackiA-Symetria

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

A-Symetria Projektowanie M-commerce 3

Co, jak i dlaczego

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

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

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

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ą

A-Symetria Projektowanie M-commerce 8

Strona główna

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

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

A-Symetria Projektowanie M-commerce 11

Strona główna - lokalizacja

• Wyszukiwarka:– Produktu– Sklepu firmowego

A-Symetria Projektowanie M-commerce 12

Strony główne - Polska

A-Symetria Projektowanie M-commerce 13

Wyniki wyszukiwania

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)

A-Symetria Projektowanie M-commerce 15

m.Ebay.com

• Czytelne wyniki z grafkami

• Zakładki jako sposób nawigacji po aplikacji

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

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”

A-Symetria Projektowanie M-commerce 18

Informacje o produkcie

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

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

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

…

A-Symetria Projektowanie M-commerce 22

Informacje o produkcie - recenzje

A-Symetria Projektowanie M-commerce 23

Informacje o produkcie –sposoby zakupu

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

A-Symetria Projektowanie M-commerce 25

Koszyk i płatność

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

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

A-Symetria Projektowanie M-commerce 28

Sears.com - koszyk

• Duży obszar przypadający na produkt

• Zakończenie zakupów – link na dole strony

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”

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

A-Symetria Projektowanie M-commerce 31

Płatności

• Dostępne sposoby:– karta kredytowa– bon zakupowy

• Zapewnienie o bezpieczeństwie – kluczowa informacja

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

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

A-Symetria Projektowanie M-commerce 34

Polacy nie gęsi

A-Symetria Projektowanie M-commerce 35

Onet zakupy

A-Symetria Projektowanie M-commerce 36

m.Skapiec.pl

• Nie rozpoznaje urządzenia mobilnego

A-Symetria Projektowanie M-commerce 37

Wirtualna Polska – tanio.pl

A-Symetria Projektowanie M-commerce 38

m.Radar.pl

Dziękuję za uwagę

Wojtek Chojnackiwojciech.chojnacki@symetria.pl