GUI w m-commerce – dobre praktyki, rodzące się standardy

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


Co, jak i dlaczego


Teoria a realia

• Jakob Nielsen:– „Mobile web 2009 =

Desktop web 1998– Mobile user experience is

miserable”

• Miliony użytkowników

• Miliardy dolarów


„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


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

http://www.internetretailer.com/dailyNews.asp?id=33080


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ą


Strona główna


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


m.ebay.com – strona główna

• Nie wykrywa automatycznie mobilnego urządzenia

• Kompletny brak oferty na stronie głównej

• Logowanie już na pierwszym ekranie


Strona główna - lokalizacja

• Wyszukiwarka:– Produktu– Sklepu firmowego


Strony główne - Polska


Wyniki wyszukiwania


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)


m.Ebay.com

• Czytelne wyniki z grafkami

• Zakładki jako sposób nawigacji po aplikacji


Sears.com – wyniki wyszukiwania

• Zbyt duże grafiki mocno wydłużają stronę

• Więcej narzędzi dostosowania wyników, brak opcji ponownego szukania


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”


Informacje o produkcie


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


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


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

…


Informacje o produkcie - recenzje


Informacje o produkcie –sposoby zakupu


Informacje o produkcie – sposoby zakupu

• Wszystkie formaty dostępne na jednej stronie produktowej

• Prostsze szukanie produktu, ale większe ryzyko przypadkowego złego wyboru


Koszyk i płatność


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


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


Sears.com - koszyk

• Duży obszar przypadający na produkt

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


Amazon.com – proces zakupowy

• Brak pomocy nawigacyjnych – paska postępu, – listy kroków, – opcji cofnięcia do

poprzedniego

• Jedyny link „ucieczki” to „Koszyk”


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


Płatności

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

• Zapewnienie o bezpieczeństwie – kluczowa informacja


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


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


Polacy nie gęsi


Onet zakupy


m.Skapiec.pl

• Nie rozpoznaje urządzenia mobilnego


Wirtualna Polska – tanio.pl


m.Radar.pl

Dziękuję za uwagę

Wojtek [email protected]

mailto:[email protected]

GUI w m-commerce – dobre praktyki, rodzące się standardy

Documents

Transcript of GUI w m-commerce – dobre praktyki, rodzące się standardy