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

Dziękuję za uwagę.

Więcej: Ideas2Action.pl

Tomasz Karwatka tkarwatka@divante.pl