Upload
symetria-sp-j
View
573
Download
3
Embed Size (px)
DESCRIPTION
Citation preview
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