Nowe kanały w eCommerce

33
Nowe kanały w eCommerce Tomasz Karwatka – Divante

description

Kanał mobilny, interaktywna telewizja, widgety, kioski multimedialne - jak wykorzystać nowe kanały w eCommerce.

Transcript of Nowe kanały w eCommerce

Page 1: Nowe kanały w eCommerce

Nowe kanały w eCommerce

Tomasz Karwatka – Divante

Page 2: Nowe kanały w eCommerce
Page 3: Nowe kanały w eCommerce

Ameryka Północna, 2008

$346 mln

Page 4: Nowe kanały w eCommerce

Ograniczenia

• mały ekran• proste metody nawigacji• wolne połączenia • niestabilne połączenia• zmienne otoczenie

– odblaski słońca na ekranie– hałas

Page 5: Nowe kanały w eCommerce

Dlaczego nie OneWeb?

• One Web – dopasowanie przez CSS, technicznie realizowalne.

• Ale co z ludźmi?– Serwis mobilny – inny kontekst.

• One Web – tak ale na wyższym poziomie.• Kompromis – automatyczne przekierowanie +

ew. powrót.

Page 6: Nowe kanały w eCommerce

Metody adaptacji

SSR

Reformat

Zmiana CSS

Wersja mobilna

Kom

plek

sow

ość

rozw

iąza

nia

Szybkość działania / ładowaniaW

arto

ść d

la u

żytk

owni

ka

SSR (Small Screen Rendering)

Rysunek na podstawie prezentacji Next Generation Mobile Web firmy Blue Favore.

Page 7: Nowe kanały w eCommerce

Płaszczyzny dostosowania

• Koszt – minimalizować koszty na jakie narażamy użytkowników poprzez lekki layout serwisu.

• Szybkość działania – techniki umożliwiające minimalizację opóźnień.

• Nawigacja – charakterystyka urządzeń mobilnych wymaga zupełnie innego zaprojektowania user-experience.

• Poprawne działanie – urządzenia mobilne nie wykształciły jeszcze spójnego standardu technologicznego.

• Kontekst – potrzeby użytkowników mobilnych są diametralnie różne od potrzeb użytkowników klasycznych. Konieczna jest analiza potrzeb dla ustalenia wartości kluczowych dla użytkownika mobilnego.

Page 8: Nowe kanały w eCommerce

Proces projektowy

1. Ustalenie celów biznesowych serwisu.2. Analiza kontekstu użytkownika.3. Projektowanie scenariuszy użycia.4. Przedstawienie scenariuszy użycia za pomocą

diagramów przepływu (flowcharts).5. Projektowanie architektury informacji.6. Projektowanie, badanie i ulepszanie

prototypów.

Page 9: Nowe kanały w eCommerce

Analiza kontekstu

• Polscy użytkownicy MobileWeb– Sprawdzanie adresów i godzin otwarcia– Rozkłady jazdy– Plany miast– Rezerwacja biletów

• Europejscy użytkownicy– Pogoda– Informacje– Sport– Informacje lokalne– Informacje giełdowe– Rozrywka

KPMG, 2007Online Publishers Association & OPA Europe

Page 10: Nowe kanały w eCommerce

Scenariusze użycia

1. Ustal, kto będzie używał serwisu.2. Wybierz aktorów.3. Ustal cele dla aktora. Każdy cel staje się podstawą do

scenariusza użycia.4. Dla scenariusza użycia zdefiniuj podstawowy jego

przebieg.5. Opisz kolejne kroki w scenariuszu.6. Gdy podstawowy przebieg scenariusza jest

zakończony, rozważ alternatywne przebiegi scenariusza.

Page 11: Nowe kanały w eCommerce

Flowcharts – diagramy przejść

Page 12: Nowe kanały w eCommerce

Struktura serwisu

• Ograniczaj wybory. Podawaj tylko treść adekwatną do potrzeb użytkowników mobilnych.

• Wyświetlaj nie więcej niż 5 kategorii na stronie.• Wyświetlaj nie więcej niż 10 linków na stronie.• Zawsze dostarczaj co najmniej jeden element treści na każdą

wyświetloną stronę (unikaj generowania stron bez treści).• Staraj się nadać treści priorytety według popularności lub

aktywności użytkowników.• Zadbaj, aby koniec strony zawierał link umożliwiający

kontynuację nawigacji.• Minimalizuj wielkość strony.

Page 13: Nowe kanały w eCommerce

Struktura

Page 14: Nowe kanały w eCommerce

Prototyp

• Pionowa lista odnośników (wraz z odpowiadającymi im accesskey od 0 do 9).

• Tylko jeden poziom nawigacji; podmenu należy pokazać dopiero na podstronie.

• Linki nawiązujące do kontekstu danej podstrony.

• Z każdej podstrony powinien prowadzić link do poprzedniej sekcji lub wyższego poziomu menu.

Nagłówek

Nawigacja

Treść

Nawigacja

Stopka

Page 15: Nowe kanały w eCommerce

Testy z użytkownikami

(…)

Page 16: Nowe kanały w eCommerce

Od prototypu do wdrożenia• Feature Phones. To najczęściej występujące dziś telefony. Zazwyczaj mają

12 klawiszy, obsługują SMS oraz transmisję danych. Wiele z nich posiada też aparat cyfrowy oraz możliwość odtwarzania MP3.

• Smart Phones. Od Featured Phones różnią się możliwością uruchomienia aplikacji zewnętrznych oraz większym ekranem.

• PDA. To mobilne komputery z zintegrowanym telefonem. Ich głównym zastosowaniem jest organizacja zadań i spotkań. Odróżnia je od Smart Phones klawiatura w standardzie QWERTY oraz często jeszcze większy wyświetlacz (nierzadko dotykowy).

• Voice-Only Phones. Najprostsze telefony, nieobsługujące transmisji danych. Ich użytkownicy nie mogą korzystać z mobilnych serwisów WWW.

Page 17: Nowe kanały w eCommerce

Projektowanie graficzne

Page 18: Nowe kanały w eCommerce

Różnice w interpretacji

Page 19: Nowe kanały w eCommerce

Fragment grafiki ze strony Love Pixel (http://www.lovepixel.idv.tw/), stworzonej na bazie metody pixel by pixel.

Page 20: Nowe kanały w eCommerce

Wdrożenie

• Dokument Mobile Web Best Practices 1.0 sugeruje następujące parametry dla serwisu mobilnego:– Szerokość ekranu: 120 pikseli.– Język: XHTML — Basic Profile.– Kodowanie znaków: UTF-8.– Format obrazków: .JPEG, .GIF 89a (non-interlaced, non-

transparent, non-animated).– Ciężar strony: 20 kB.– Kolory: Web safe.– Obsługa arkuszy styli: CSS Level 1.

Page 21: Nowe kanały w eCommerce

Na styku

• Szybkość działania. Użytkownik powinien móc przewidzieć czas pobierania danych.

• Tytuł strony. Odpowiedni tytuł strony ułatwia użytkownikom dodawanie stron do ulubionych, wyszukiwanie ulubionych oraz nawigowanie po serwisie. – Opis treści podstrony — nazwa serwisu.

• Liczba linków. Liczba linków rekomendowanych w serwisie mobilnym nie powinna przekroczyć 10. Warto też stosować access key, aby ułatwić nawigowanie po linkach z użyciem klawiatury telefonu.

Page 22: Nowe kanały w eCommerce

Na styku

• Unikanie wprowadzania tekstu. Użytkownicy mają często problemy z wprowadzaniem tekstu za pomocą telefonu komórkowego.

• Maska. Gdy można ograniczyć wprowadzane dane, np. tylko do znaków numerycznych, dobrze jest zastosować maskę. Przykładowo: <input type="text" style=' –wap-input-format: "N" /> pozwoli wprowadzać tylko znaki numeryczne i automatycznie przełączy w taki tryb wprowadzania znaków.

• Zewnętrzne elementy serwisu. Zaleca się szczególną ostrożność w pobieraniu przez serwis mobilny zewnętrznych zasobów.

Page 23: Nowe kanały w eCommerce

Testowanie

• Desktop testing (Quick and Dirty). • Testowanie przy pomocy emulatora. • Walidator. • Serwisy typu DeviceAnywhere. • Testowanie w urządzeniu.

Page 24: Nowe kanały w eCommerce
Page 25: Nowe kanały w eCommerce

długi ogon

Page 26: Nowe kanały w eCommerce

IPTV (t-commerce)

Page 27: Nowe kanały w eCommerce

To już było• JC Penney – pilotaż w1980 dla 30 000 konsumentów• 13% z nich zrobiło zakupy, średnia wartość $60• Po 25 latach JP Penny kontynuuje Interactive TV

Page 28: Nowe kanały w eCommerce

tCommerce

• 33% użytkowników łącz szerokopasmowych oczekuje widgetów na swoich TV• Open Cable Application Platform (OCAP).• 1800flowers już ma w pełni funkcjonalny widget TV.

Page 29: Nowe kanały w eCommerce

Philips - YouTube, TomTom, eBay, MeteoGroup, Funspot, MyAlbum and Netlog

Sharp – Flash, Widgety

LG - Netflix

Page 30: Nowe kanały w eCommerce
Page 31: Nowe kanały w eCommerce
Page 32: Nowe kanały w eCommerce

Mobile Web, Video – narzędzieMobile, Interactive TV – kanał

Cel: Integracja kanałów

Page 33: Nowe kanały w eCommerce

Dziękuję za uwagę.

Więcej: Ideas2Action.pl

Tomasz Karwatka [email protected]