Upload
divante
View
1.060
Download
2
Embed Size (px)
DESCRIPTION
Kanał mobilny, interaktywna telewizja, widgety, kioski multimedialne - jak wykorzystać nowe kanały w eCommerce.
Citation preview
Nowe kanały w eCommerce
Tomasz Karwatka – Divante
Ameryka Północna, 2008
$346 mln
Ograniczenia
• mały ekran• proste metody nawigacji• wolne połączenia • niestabilne połączenia• zmienne otoczenie
– odblaski słońca na ekranie– hałas
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.
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.
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.
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.
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
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.
Flowcharts – diagramy przejść
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.
Struktura
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
Testy z użytkownikami
(…)
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.
Projektowanie graficzne
Różnice w interpretacji
Fragment grafiki ze strony Love Pixel (http://www.lovepixel.idv.tw/), stworzonej na bazie metody pixel by pixel.
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.
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.
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.
Testowanie
• Desktop testing (Quick and Dirty). • Testowanie przy pomocy emulatora. • Walidator. • Serwisy typu DeviceAnywhere. • Testowanie w urządzeniu.
długi ogon
IPTV (t-commerce)
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
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.
Philips - YouTube, TomTom, eBay, MeteoGroup, Funspot, MyAlbum and Netlog
Sharp – Flash, Widgety
LG - Netflix
Mobile Web, Video – narzędzieMobile, Interactive TV – kanał
Cel: Integracja kanałów