gui w m-commerce – dobre praktyki, rodzące się standardy
DESCRIPTION
TRANSCRIPT
![Page 1: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/1.jpg)
Interfejsy użytkownika w M-commerce
dobre praktyki, wzorce, potknięcia
Wojtek ChojnackiA-Symetria
![Page 2: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/2.jpg)
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
![Page 3: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/3.jpg)
A-Symetria Projektowanie M-commerce 3
Co, jak i dlaczego
![Page 4: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/4.jpg)
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
![Page 5: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/5.jpg)
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
![Page 6: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/6.jpg)
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
![Page 7: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/7.jpg)
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ą
![Page 8: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/8.jpg)
A-Symetria Projektowanie M-commerce 8
Strona główna
![Page 9: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/9.jpg)
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
![Page 10: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/10.jpg)
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
![Page 11: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/11.jpg)
A-Symetria Projektowanie M-commerce 11
Strona główna - lokalizacja
• Wyszukiwarka:– Produktu– Sklepu firmowego
![Page 12: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/12.jpg)
A-Symetria Projektowanie M-commerce 12
Strony główne - Polska
![Page 13: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/13.jpg)
A-Symetria Projektowanie M-commerce 13
Wyniki wyszukiwania
![Page 14: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/14.jpg)
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)
![Page 15: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/15.jpg)
A-Symetria Projektowanie M-commerce 15
m.Ebay.com
• Czytelne wyniki z grafkami
• Zakładki jako sposób nawigacji po aplikacji
![Page 16: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/16.jpg)
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
![Page 17: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/17.jpg)
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”
![Page 18: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/18.jpg)
A-Symetria Projektowanie M-commerce 18
Informacje o produkcie
![Page 19: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/19.jpg)
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
![Page 20: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/20.jpg)
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
![Page 21: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/21.jpg)
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
…
![Page 22: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/22.jpg)
A-Symetria Projektowanie M-commerce 22
Informacje o produkcie - recenzje
![Page 23: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/23.jpg)
A-Symetria Projektowanie M-commerce 23
Informacje o produkcie –sposoby zakupu
![Page 24: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/24.jpg)
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
![Page 25: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/25.jpg)
A-Symetria Projektowanie M-commerce 25
Koszyk i płatność
![Page 26: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/26.jpg)
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
![Page 27: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/27.jpg)
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
![Page 28: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/28.jpg)
A-Symetria Projektowanie M-commerce 28
Sears.com - koszyk
• Duży obszar przypadający na produkt
• Zakończenie zakupów – link na dole strony
![Page 29: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/29.jpg)
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”
![Page 30: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/30.jpg)
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
![Page 31: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/31.jpg)
A-Symetria Projektowanie M-commerce 31
Płatności
• Dostępne sposoby:– karta kredytowa– bon zakupowy
• Zapewnienie o bezpieczeństwie – kluczowa informacja
![Page 32: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/32.jpg)
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
![Page 33: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/33.jpg)
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
![Page 34: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/34.jpg)
A-Symetria Projektowanie M-commerce 34
Polacy nie gęsi
![Page 35: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/35.jpg)
A-Symetria Projektowanie M-commerce 35
Onet zakupy
![Page 36: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/36.jpg)
A-Symetria Projektowanie M-commerce 36
m.Skapiec.pl
• Nie rozpoznaje urządzenia mobilnego
![Page 37: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/37.jpg)
A-Symetria Projektowanie M-commerce 37
Wirtualna Polska – tanio.pl
![Page 38: GUI w m-commerce – dobre praktyki, rodzące się standardy](https://reader031.vdocuments.net/reader031/viewer/2022013003/549c9376b47959a0318b479e/html5/thumbnails/38.jpg)
A-Symetria Projektowanie M-commerce 38
m.Radar.pl