Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
1
KURS MOBILE WEB
wersja 1 – najnowszej wersji szukaj na
www.biznes20.pl
Twój serwis w wersji
na urządzenia przenośne.
Wydane przez:
www.divante.pl
Informacje o prawach autorskich:
Autorem dokumentu oraz wła
ś
cicielem praw autorskich jest Tomasz Karwatka. Tre
ść
dokumentu nie mo
ż
e by
ć
wykorzystywana ani przetwarzana bez zgody autora. Wszystkie wykorzystane ilustracje s
ą
własno
ś
ci
ą
ich
autorów i zostały u
ż
yte jedynie w celach edukacyjnych.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
2
Spis tre
ś
ci
Wst
ę
p ....................................................................................................................................................... 4
Rozwój Kursu Mobile Web .............................................................................................................. 4
O autorze ........................................................................................................................................ 4
Mobilny Internet - dlaczego warto? ......................................................................................................... 5
Najwa
ż
niejsze zalety Internetu mobilnego .......................................................................................... 5
Rynek mobilny ..................................................................................................................................... 6
Potrzeby internautów mobilnych ......................................................................................................... 7
Przykłady zastosowa
ń
......................................................................................................................... 8
Serwisy informacyjne ...................................................................................................................... 8
eCommerce .................................................................................................................................... 8
Serwisy korporacyjne ...................................................................................................................... 9
Rozrywka ...................................................................................................................................... 10
Podró
ż
e ......................................................................................................................................... 10
Miasta w mobilnym Internecie ...................................................................................................... 11
Strategia mobilna ................................................................................................................................... 12
Cele serwisu mobilnego .................................................................................................................... 12
Projektowanie ........................................................................................................................................ 13
Jak pozna
ć
swoich u
ż
ytkowników? ................................................................................................... 13
Architektura informacji ....................................................................................................................... 13
Wytyczne dla mobilnej architektury informacji .............................................................................. 14
Click Streams .................................................................................................................................... 14
Scenariusze u
ż
ycia (use cases) ................................................................................................... 14
Persony ......................................................................................................................................... 14
Prototypowanie .................................................................................................................................. 15
Wytyczne dla mobilnego layoutu .................................................................................................. 15
Najcz
ę
stsze prototypy ................................................................................................................... 15
Testowanie .................................................................................................................................... 15
Jak przeprowadzi
ć
test z u
ż
ytkownikami ...................................................................................... 15
Ilu u
ż
ytkowników powinno bra
ć
udział w testach? ........................................................................ 16
Ró
ż
ne urz
ą
dzenia ............................................................................................................................. 16
Feature Phones ............................................................................................................................ 16
Smart Phones ............................................................................................................................... 17
PDA ............................................................................................................................................... 17
Voice-Only Phones ....................................................................................................................... 17
Projektowanie graficzne .................................................................................................................... 17
Projektowanie na ró
ż
ne wielko
ś
ci wy
ś
wietlacza ........................................................................... 17
Kolory ............................................................................................................................................ 18
Wiarygodno
ść
............................................................................................................................... 18
Wdro
ż
enie .............................................................................................................................................. 19
Adaptacja ...................................................................................................................................... 19
Idea One Web ............................................................................................................................... 20
Rekomendacje dla serwisów mobilnych ........................................................................................... 22
Szybko
ść
działania ....................................................................................................................... 22
Kodowanie znaków ....................................................................................................................... 22
Tytuł strony ................................................................................................................................... 22
Tabele ........................................................................................................................................... 22
Ramki ............................................................................................................................................ 22
Ilo
ść
linków .................................................................................................................................... 22
Unikaj przeładowania .................................................................................................................... 23
Access keys .................................................................................................................................. 23
Unikaj wprowadzania tekstu ......................................................................................................... 23
Fonty ............................................................................................................................................. 23
Rozmiar obrazków ........................................................................................................................ 23
Alternatywny tekst ......................................................................................................................... 23
Zewn
ę
trzne elementy serwisu ...................................................................................................... 23
Ci
ęż
ar serwisu .............................................................................................................................. 24
Nazwa serwisu....................................................................................................................................... 25
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
3
Testowanie serwisu mobilnego ............................................................................................................. 25
Jak testowa
ć
...................................................................................................................................... 25
Desktop testing (“Quick and Dirty”) ............................................................................................... 25
Testowanie w emulatorze ............................................................................................................. 25
Walidator ....................................................................................................................................... 26
Serwisy typu DeviceAnywhere ..................................................................................................... 26
Testowanie w urz
ą
dzeniu ............................................................................................................. 26
Wi
ę
cej informacji ................................................................................................................................... 27
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
4
Wst
ę
p
Internet mobilny to najpro
ś
ciej mówi
ą
c serwisy WWW dost
ę
pne z poziomu telefonów
komórkowych i wszelkich innych urz
ą
dze
ń
przeno
ś
nych. Na całym
ś
wiecie zaczyna si
ę
era
mobilnego Internetu. Telefon nadal b
ę
dzie słu
ż
ył do rozmów telefonicznych i wysyłania SMS, ale
coraz cz
ęś
ciej b
ę
dziemy za jego pomoc
ą
surfowa
ć
po Internecie.
Ten kurs ma za zadanie wprowadzi
ć
Ci
ę
do
ś
wiata mobilnego Internetu.
Kurs kierowany jest do osób zajmuj
ą
cych si
ę
Internetem w korporacjach i firmach zajmuj
ą
cych si
ę
ebiznesem. Szczególnie pomocny powinien by
ć
menad
ż
erom i specjalistom kieruj
ą
cym pracami nad
nowymi kanałami komunikacji z klientami.
Z kursu dowiesz si
ę
:
•
jak rozwija si
ę
Internet mobilny na
ś
wiecie i w Polsce,
•
jakie s
ą
udane wdro
ż
enia mobilne, kto mo
ż
e by
ć
inspiracj
ą
,
•
jak stworzy
ć
i wdro
ż
y
ć
strategi
ę
mobiln
ą
,
•
jak zdefiniowa
ć
i zaspokoi
ć
potrzeby u
ż
ytkowników mobilnych,
•
jak budowa
ć
u
ż
yteczne i profesjonalne serwisy mobilne,
•
jak testowa
ć
i ulepsza
ć
serwisy mobilne,
•
sk
ą
d czerpa
ć
dalsz
ą
wiedz
ę
.
Zapraszam do zapoznania si
ę
z Kursem. B
ę
dzie on sukcesywnie rozwijany, zapraszam te
ż
do pisania
swoich uwag i pomysłów na rozwój Kursu.
Rozwój Kursu Mobile Web
Serdecznie zapraszam ka
ż
dego, kto chce pomóc w promowaniu, ulepszaniu, publikowaniu kursu do
kontaktu –
tkarwatka@divante.pl
. Jestem otwarty na wszelkie pomysły na współprac
ę
w zakresie
mobile Internetu. Nowych wersji Kursu Mobile Internet szukaj w serwisiewww.biznes20.pl.
O autorze
Tomasz Karwatka jest dyrektorem operacyjnym w Divante. Tomasz Karwatka
jest absolwentem Politechniki Wrocławskiej, członkiem Usability Professional
Association, Fundacji Internet PR oraz Akademii Internetu. Pracował w agencji
reklamowej, firmie informatycznej i agencji interaktywnej.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
5
Mobilny Internet - dlaczego warto?
Internet mobilny jest medium ł
ą
cz
ą
cym elastyczno
ść
Internetu (głównie serwisów WWW) i
dost
ę
pno
ś
ci telefonów komórkowych. Zacznijmy od zasi
ę
gu tego medium. Według bada
ń
Outlook
2007: The Future is Now opublikowanych przez Fortune w 2007 Rynek mobilny ju
ż
dzi
ś
jest
najwi
ę
ksz
ą
platform
ą
dystrybucyjn
ą
na
Ś
wiecie. GSM Association szacuje,
ż
e 29% ludzi na Ziemi
u
ż
ywa telefonów komórkowych. Ju
ż
w 2006 Ipsos podawał,
ż
e około 28% u
ż
ytkowników telefonów
komórkowych korzystało za ich pomoc
ą
z Internetu. Wida
ć
powstaj
ą
cy wielki rynek, z wieloma
u
ż
ytkownikami nie korzystaj
ą
cymi dotychczas z Sieci. W Japonii ju
ż
w ubiegłym roku ilo
ść
telefonów z
dost
ę
pem do Sieci przekroczyła ilo
ść
komputerów. Gdy w pa
ź
dzierniku 2006 ruszyła rejestracja
domen .mobi – przeznaczonych do umieszczania na nich stron w wersjach mobilnych w pierwszych 8
godzinach zarejestrowano 75 000 domen. Zainteresowanie Internetem mobilnym ro
ś
nie wraz z
ci
ą
głym wzrostem ilo
ś
ci jego u
ż
ytkowników.
Z technologicznego punktu widzenia Internet mobilny dzi
ś
to głównie serwisy WWW
przystosowane do ogl
ą
dania na przegl
ą
darkach w urz
ą
dzeniach mobilnych.
Przystosowanie serwisu WWW do wersji mobilnej nast
ę
puje w kilku obszarach.
•
Koszt – bardzo cz
ę
sto u
ż
ytkownicy mobilni s
ą
rozliczani za pobrane dane. Nale
ż
y
minimalizowa
ć
koszty na jakie ich nara
ż
amy poprzez lekki layout serwisu.
•
Szybko
ść
działania – dost
ę
p mobilny odbywa si
ę
zazwyczaj wolniej ni
ż
na popularnych
ł
ą
czach szerokopasmowych. Nale
ż
y zastosowa
ć
techniki umo
ż
liwiaj
ą
ce minimalizacj
ę
opó
ź
nie
ń
.
•
Nawigacja – charakterystyka urz
ą
dze
ń
mobilnych wymaga zupełnie innego zaprojektowania
user-experience. Nale
ż
y bra
ć
pod uwag
ę
małe wymiary wy
ś
wietlacza, prac
ę
w ci
ęż
kich
warunkach, mo
ż
liwo
ść
wyst
ą
pienia nawigacji z klawiatury lub ekranu dotykowego oraz wiele
innych czynników.
•
Poprawne działanie – urz
ą
dzenia mobilne nie wykształciły jeszcze spójnego standardu
technologicznego. Nale
ż
y dopasowywa
ć
serwowane dane w zale
ż
no
ś
ci od wykrytej
przegl
ą
darki w urz
ą
dzeniu. Nale
ż
y te
ż
przeprowadzi
ć
testy serwisu w najpopularniejszych
urz
ą
dzeniach.
•
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.
Serwisy mobilne musz
ą
ś
ci
ś
le odpowiada
ć
potrzebom swoich u
ż
ytkowników. Nie mo
ż
emy mówi
ć
zatem o przenoszeniu 1:1 serwisów tradycyjnych do wersji mobilnej. Nawet w rozwi
ą
zaniach
umo
ż
liwiaj
ą
cych automatyczn
ą
konwersj
ę
(Volantis) wybierana jest ta tre
ść
, która odpowiada
potrzebom u
ż
ytkowników kanału mobilnego.
Najwa
ż
niejsze zalety Internetu mobilnego
1. Mo
ż
liwo
ść
dost
ę
pu do informacji wsz
ę
dzie gdzie posiadamy z sob
ą
telefon. Telefon jest te
ż
zawsze wł
ą
czony.
2. Zasi
ę
g Internetu mobilnego ju
ż
teraz jest dwa razy wi
ę
kszy ni
ż
zasi
ę
g Internetu klasycznego. Dzi
ś
1/3 ludzi na Ziemi ma dost
ę
p do Internetu mobilnego. Przed rokiem 2010 prawdopodobnie połowa
ludzi na Ziemi b
ę
dzie mie
ć
taki dost
ę
p. (
ź
ródło: Informa Telecoms & Media, 2007)
3. Umo
ż
liwia zwi
ę
kszenie funkcjonalno
ś
ci serwisów WWW poprzez mo
ż
liwo
ś
ci zwi
ą
zane z
nawigowaniem głosowym, zarz
ą
dzaniem kontaktami, lokalizacj
ą
(zarówno poprzez GPS jak i
stacje bazowe i usługi operatorów).
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
6
Rynek mobilny
Wielu analityków zauwa
ż
a analogi
ę
pomi
ę
dzy rozwojem Internetu a rozwojem Internetu mobilnego.
Ten drugi szacuje si
ę
,
ż
e jest około 4-8 lat wcze
ś
niej w rozwoju. Oznacza to,
ż
e najwi
ę
kszy rozwój
mobilnego Internetu wła
ś
nie si
ę
zaczyna.
Rynek mobilny jest najwi
ę
ksz
ą
platform
ą
dystrybucyjn
ą
na
Ś
wiecie. Mamy dwa miliardy u
ż
ytkowników
telefonów komórkowych w opozycji do miliarda u
ż
ytkowników Internetu i miliarda u
ż
ytkowników
telewizji.
- "Outlook 2007: The Future is Now," Fortune Magazine, 2007
29% ludzi na Ziemi u
ż
ywa telefonów komórkowych.
- GSM Association, 2007
Około 28% u
ż
ytkowników telefonów komórkowych korzystało za ich pomoc
ą
z Internetu przynajmniej
raz.
- Ipsos, 2006
W Europie mobilny Internet jest najpopularniejszy w Niemczech i we Włoszech, korzysta z niego 34%
populacji internautów w tych krajach.
-comScore Networks, 2006
Rysunek 1 - U
ż
ywanie i penetracja Internetu mobilnego. Badanie wykonane w grudniu 2006 przez
Online Publishers Association & OPA Europe. Liderami s
ą
UK, Włochy i USA.
W 2006 roku ilo
ść
urz
ą
dze
ń
mobilnych z dost
ę
pem do Sieci wyniosła 2,4 miliarda.
- GSM Association, 2007
Firmy i osoby indywidualne zarejestrowały około 75 000 stron w domenie .mobi w pierwszych 8
godzinach 27 pa
ź
dziernika 2006 gdy domena ta trafiła do publicznego obrotu.
- dotmobi, 2006
Analitycy przewiduj
ą
rozwój Internetu mobilnego podobnie do rozwoju Internetu klasycznego. Dzi
ś
rynek mobilny szybko ro
ś
nie, ale dojrzewa
ć
b
ę
dzie jeszcze przez kilka nast
ę
pnych lat.
Ni
ż
ej fragment prezentacji Next Generation Mobile Web firmy Blue Flavor.
Web 1.0 -> Web 2.0
Proprietary -> Standards
Walled Gardens -> Web Services
First to market -> Web as a Platform
Brand-centered -> User-centered
Mobile 1.0 -> Mobile 2.0
Proprietary -> Standards
Walled Gardens -> Web Services
First to market -> Web as a Platform
Brand-centered -> User-centered
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
7
Potrzeby internautów mobilnych
Wraz z rozwojem platformy Internetu mobilnego u
ż
ytkownicy coraz cz
ęś
ciej deklaruj
ą
swoje potrzeby.
Gazeta Wyborcza opublikowała wyniki bada
ń
KPMG - przebadano 400 osób w wieku 25-40 lat - ludzi,
którzy intensywnie korzystaj
ą
z Internetu i telefonów komórkowych. Ilo
ść
takich osób w Polsce
oszacowano na od 2 do 4 milionów. Z opublikowanego raportu wynika mi
ę
dzy innymi,
ż
e badani
ch
ę
tnie w Internecie mobilnym sprawdzaliby adresy, godziny otwarcia, rozkłady jazdy, przeszukiwali
plan miasta lub rezerwowali bilety. Według autorów raportu istnieje du
ż
e, niezaspokojone
zapotrzebowanie na mobilne usługi internetowe. W dalszej cz
ęś
ci omówi
ę
kilka udanych realizacji
bazuj
ą
cych na tych potrzebach.
Ni
ż
ej prezentuj
ę
wyniki badania dotycz
ą
cego serwisów wykorzystywanych przez u
ż
ytkowników
mobilnych w Europie.
Rysunek 2 - Z jakich serwisów korzystaj
ą
mobilni internauci. Badanie wykonane w grudniu 2006 przez
Online Publishers Association & OPA Europe.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
8
Przykłady zastosowa
ń
Serwisy informacyjne
Najbardziej oczywiste zastosowanie Internetu mobilnego to oczywi
ś
cie serwisy informacyjne. Maj
ą
c
przy sobie telefon komórkowy praktycznie zawsze masz dost
ę
p do aktualnych informacji. W tej
kategorii serwisów umieszczam zarówno mobilne wersje portali – Onet (
http://lajt.onet.pl
), Gazeta
(
http://mobile.gazeta.pl
), WP (
http://mobi.wp.pl
) jak i vortali typu Bankier (
http://m.bankier.pl
). Firma
Bankier.pl S.A. mobiln
ą
wersj
ę
swojego serwisu zaprezentowała 20 czerwca 2007. Na jego promocj
ę
przeznaczy ponad 1,1 mln zł. Serwis
http://m.bankier.pl
oferuje notowania giełdowe, komunikaty
spółek, kursy walut, komentarze analityków, wiadomo
ś
ci ekonomiczne.
eCommerce
Powstaj
ą
pierwsze internetowe sklepy mobilne. Dla Kolporter uruchomili
ś
my (Divante.pll) mobiln
ą
wersj
ę
sklepu
http://mobi.Kolporter.pl
. Umo
ż
liwia ona dost
ę
p do list najpopularniejszych produktów i
ich recenzji. Mo
ż
na te
ż
przeczyta
ć
zapowiedzi nowych produktów. Zakup jest realizowany dwoma
drogami – poprzez infolini
ę
lub poprzez przesłanie informacji o produkcie na e-mail i sfinalizowaniu
transakcji ju
ż
z klasycznego komputera. Tego rodzaju proces zakupowy powstał w wyniku analizy
zachowa
ń
u
ż
ytkowników – jeszcze dzi
ś
boj
ą
si
ę
oni realizowa
ć
transakcje z poziomu telefonów
komórkowych. Ciekawym przykładem mobilnego sklepu internetowego jest te
ż
http://telekwiaty.mobi
,
pozwalaj
ą
cy kupi
ć
okazjonalne wi
ą
zanki z poziomu telefonu.
Rysunek 3 - Serwis mobi.kolporter.pl
Gdy jeste
ś
my ju
ż
przy eCommerce warto wspomnie
ć
o mobilnej porównywarce cen. Pierwsza w
Polsce mobiln
ą
porównywark
ę
cen stworzył Nokaut.pl (
http://m.nokaut.pl
). Serwis pozwala sprawdzi
ć
ponad 3,5 mln cen produktów. Mobilno
ść
zapewnia dost
ę
p do porównywana z dowolnego miejsca,
mo
ż
na zatem podczas zakupów w sklepie tradycyjnym porówna
ć
atrakcyjno
ść
oferty z tym, co oferuj
ą
sklepy internetowe.
Bior
ą
c pod uwag
ę
lokalny charakter dost
ę
pu mobilnego nale
ż
y zało
ż
y
ć
,
ż
e popularne stan
ą
si
ę
te
ż
serwisy umo
ż
liwiaj
ą
ce poszukiwanie usług i produktów na zadanym obszarze. Popularne s
ą
tak
ż
e
serwisy ułatwiaj
ą
ce kupno czy wynajem nieruchomo
ś
ci (np.
http://coalters.mobi
,
http://greatlakesrealestate.mobi
).
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
9
Rysunek 4 - Serwis cloaters.mobi
Serwisy korporacyjne
Serwisy korporacyjne to klasyczne zastosowanie Internetu mobilnego. Warto w tym wypadku
zastanowi
ć
si
ę
, kto z otoczenia biznesowego firmy potrzebuje najbardziej dost
ę
pu mobilnego. Cz
ę
sto
s
ą
to klienci biznesowi, media, inwestorzy, handlowcy firmy. Mobilny serwis korporacyjny stanie si
ę
w
najbli
ż
szych latach tak samo oczywistym kanałem komunikacji jak telefon, e-mail czy serwis WWW.
Swoje mobilne strony korporacyjne zbudowały ju
ż
mi
ę
dzy innymi ING DiBa (
http://diba.mobi/
),
Neckerman (
http://neckermann.mobi
), BMW (
http://www.bmw.mobi
). Brali
ś
my udział w pracach nad
mobilnymi stronami internetowymi dla Viessmann oraz Enea. Ka
ż
da z korporacyjnych stron mobilnych
musi zawiera
ć
esencj
ę
tego czego oczekuj
ą
u
ż
ytkownicy „w ruchu”. Przykładowo dla Viessmann, firmy
produkuj
ą
cej systemy grzewcze, istotne było zamieszczenie listy dystrybutorów i serwisów. Koncern
Energetyczny mo
ż
e natomiast dzi
ę
ki serwisowi mobilnemu informowa
ć
np. wył
ą
czeniach i
uszkodzeniach linii energetycznych, gdy
ż
mobilne urz
ą
dzenia s
ą
o wiele bardziej niezawodne ni
ż
tradycyjne.
Rysunek 5 - Serwis bmw.mobi
Rysunek 6 - Serwis diba.mobi
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
10
Rozrywka
Hitem ostatnich miesi
ę
cy w USA jest Twitter - aplikacja pozwalaj
ą
ca wieloma kanałami powiadamia
ć
znajomych o tym, co wła
ś
nie robimy (polski odpowiednik to Blip.pl). Głównym kanałem jest oczywi
ś
cie
mobile. Twitter obok popularnym blogów mobilnych (
http://moblog.pl
) jest kolejnym doskonałym
przykładem ł
ą
czenia Internetu klasycznego z mobilnym. W okresie przej
ś
ciowym takich hybryd b
ę
dzie
wiele. Ju
ż
teraz popularno
ść
zyskuj
ą
mobilne serwisy społeczno
ś
ciowe (
http://itsmy.mobi
), mobilne
mikro-blogi (
http://miniblogs.mobi
) oraz streaming audio i video (
http://talkstreamlive.mobi
).
Rysunek 7 - Serwis itsmy.mobi
Podró
ż
e
Ludzie podró
ż
uj
ą
cy s
ą
jedn
ą
z najbardziej podstawowych grup zainteresowanych dost
ę
pem do
Internetu mobilnego. Nie dziwi nikogo fakt,
ż
e powstaje mnóstwo serwisów mobilnych dotycz
ą
cych
turystyki, rezerwacji biletów, wycieczek. Rozwijaj
ą
cy si
ę
serwis
http://hostels.mob
i umo
ż
liwia
rezerwacj
ę
hosteli w Europie – docelowo b
ę
dzie to doskonałe
ź
ródło informacji dla podró
ż
uj
ą
cych.
Serwis
http://hiltonfamily.mobi
pozwoli Ci znale
źć
i zarezerwowa
ć
miejsce w hotelu sieci Hilton w
ka
ż
dym zak
ą
tku
ś
wiata.
Rysunek 8 - Serwis hostels.mobi
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
11
Powstaje te
ż
sporo przewodników turystycznych dla osób odwiedzaj
ą
cych konkretne miejsca. Londyn
zainwestował w obszerny przewodnik turystyczny poł
ą
czony z mobilnym serwisem miejskim
(
http://londonengland.mobi
).
Rysunek 9 - Serwis londonengland.mobi
Miasta w mobilnym Internecie
Miasta przyci
ą
gaj
ą
ce wielu obcokrajowców (Wrocław, Warszawa, Kraków) mog
ą
wyj
ść
im naprzeciw
tworz
ą
c mobilne wersje informatorów miejskich z których mo
ż
e skorzysta
ć
ka
ż
da osoba nowa w
mie
ś
cie. Mo
ż
liwo
ść
sprawdzenia rozkładu komunikacji miejskiej, ciekawych wydarze
ń
i informacji
lokalnych doceni
ą
te
ż
rodowici mieszka
ń
cy miast. Na
ś
wiecie mobilne portale miejskie prze
ż
ywaj
ą
rozkwit. W USA niektóre miasta maj
ą
po kilka portali mobilnych, które ju
ż
teraz konkuruj
ą
ze sob
ą
o
budowanie zasi
ę
gu. Jaki
ś
czas temu gło
ś
no było o portalu stolicy Finlandii. Serwis
http://Helsinki.mobi
przedstawia w u
ż
ytecznej formie najwa
ż
niejsze dla u
ż
ytkowników mobilnych informacje. Kategorie
menu na Helsinki.mobi to Shopping, Wining & Dining, Entertainment & Events, Sites & Attractions,
Getting Around, Useful Information. Projektem prowadzi Greater Helsinki Promotion - organizacja
powołana dla promocji miasta.
Rysunek 10 - Serwis helsinki.mobi
Inspiracja. Wyró
ż
nione serwisy mobilne mo
ż
esz zobaczy
ć
na
http://mtld.mobi/showcase
. W Polsce
powstaje katalog stron mobilnych
http://direk.mobi
.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
12
Strategia mobilna
Budowanie strategii mobilnej powiniene
ś
oczywi
ś
cie zacz
ąć
od banalnego pytania „Dlaczego
powinni
ś
my tworzy
ć
serwis mobilny?”. Posiadanie mo
ż
liwo
ś
ci technicznych i tre
ś
ci, któr
ą
mo
ż
na
serwowa
ć
mobilnie, zazwyczaj nie jest wystarczaj
ą
cym argumentem, aby tworzy
ć
serwis mobilny.
Twoim celem powinno by
ć
stworzenie warto
ś
ci dla Twoich u
ż
ytkowników. Warto
ść
ta powinna
wynika
ć
z poł
ą
czenia Twoich usług i tre
ś
ci z dost
ę
pem mobilnym do nich.
Niektóre z nowych telefonów potrafi
ą
pokazywa
ć
klasyczne serwisy WWW. Nie oznacza to jednak,
ż
e
user-experience tych serwisów jest optymalny dla u
ż
ytkownika mobilnego. Mo
ż
e zdarza
ć
si
ę
tak,
ż
e
tre
ść
poszukiwana szczególnie przez u
ż
ytkowników mobilnych b
ę
dzie w serwisie klasycznym trudna
do odnalezienia (zwłaszcza z ograniczonej przegl
ą
darki urz
ą
dzenia mobilnego). Zdarza si
ę
tak
ż
e,
ż
e
poszczególne strony klasycznego serwisu nie działaj
ą
poprawnie na urz
ą
dzeniu mobilnym.
Problemem dla u
ż
ytkowników mobilnych b
ę
dzie te
ż
zbyt du
ż
y rozmiar klasycznych stron WWW (czas
oczekiwania i koszt pobrania danych).
Gdy znajdziesz uzasadnienie, potrzeb
ę
stworzenia wersji mobilnej, nast
ę
pne pytania dotycz
ą
potrzeb
u
ż
ytkowników, jakie serwis mobilny ma zaspokaja
ć
. Najbardziej oczywista potrzeba to dost
ę
p do
tre
ś
ci, niemniej z perspektywy u
ż
ytkownika mobilnego okaza
ć
si
ę
mo
ż
e,
ż
e wi
ę
kszo
ść
tre
ś
ci, jak
ą
oferujesz jest zupełnie nieinteresuj
ą
ca. Bardzo cz
ę
sto nale
ż
y kompletnie zmieni
ć
architektur
ę
informacji i struktur
ę
serwisu, aby zaspokoi
ć
potrzeby u
ż
ytkowników mobilnych.
Skup si
ę
na okre
ś
leniu głównych celów Twoich u
ż
ytkowników.
Cele serwisu mobilnego
Strategia mobilna ma ł
ą
czy
ć
cele biznesowe Twojej organizacji z celami funkcjonalnymi Twoich
u
ż
ytkowników. Zbadaj i okre
ś
l obie grupy celów. Przykładowe cele.
Cele biznesowe
Cele u
ż
ytkownika
•
Polepszenie efektywno
ś
ci biznesu poprzez
nowy kanał dotarcia do klientów,
dostawców, mediów.
•
Generowanie nowego biznesu.
•
Budowanie lojalno
ś
ci w stosunku do marki
(do kontaktu tak
ż
e bez uczestnictwa
komputera). Nakłanianie do cz
ę
stszego
(mo
ż
e cyklicznego) kontaktu z mark
ą
.
•
Dotarcie do nowych grup docelowych
(osoby nie posiadaj
ą
ce dost
ę
pu do
Internetu z komputera domowego).
•
Mo
ż
liwo
ść
wy
ś
wietlania linków
reklamowych, reklam oraz informacji
marketingowych.
•
Budowanie wizerunku innowacyjnej firmy.
•
Dost
ę
pno
ść
informacji w dowolnym czasie
i przestrzeni.
•
Mo
ż
liwo
ść
korzystania z serwisu w trakcie
podró
ż
y i innych nietypowych miejscach.
•
Du
ż
a niezawodno
ść
medium –
korzystanie w sytuacjach awaryjnych.
•
Korzystanie z informacji w kontek
ś
cie
aktualnej lokalizacji.
U
ż
ytkownicy mobilni zazwyczaj chc
ą
zrealizowa
ć
konkretne potrzeby w jak najkrótszym czasie.
Urz
ą
dzenia mobilne na razie s
ą
rzadko wykorzystywane do ogólnego wyszukiwania informacji.
Weryfikacja ustalonych celów nast
ą
pi
ć
mo
ż
e w kolejnym opisywanym etapie („Jak pozna
ć
swoich
u
ż
ytkowników?”). Przydatne mog
ą
okaza
ć
si
ę
szczególnie takie narz
ę
dzia badawcze, jak: przegl
ą
d
konkurencji, grupy fokusowe, badania ankietowe, wywiady indywidualne.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
13
Projektowanie
Sugerujemy projektowanie w oparciu o User-Centered Design. Projektowanie zorientowane na
u
ż
ytkownika (ang. UCD – User-Centered Design) pozwala na projektowanie produktów przyjaznych
dla u
ż
ytkowników poprzez ukierunkowanie procesu projektowego na potrzeby finalnego u
ż
ytkownika.
W UCD w kolejnych fazach testuje si
ę
produkty otrzymywane w procesie kreacji serwisu, usuwa
wykryte problemy i ponownie poddaje testom.
Testowaniu podlegaj
ą
:
koncepcja,
makiety systemu,
projekty graficzne,
działaj
ą
cy system.
Pod poj
ę
ciem makiety rozumiem zarówno papierowe, proste makietki, jak i interaktywne makiety
opracowane w PowerPoint lub HTML.
Jak pozna
ć
swoich u
ż
ytkowników?
Poznanie odbiorców serwisu mobilnego (jak i ka
ż
dego innego) jest jednym z najwa
ż
niejszych zada
ń
projektanta. Poznawanie przyszłych u
ż
ytkowników mo
ż
na zacz
ąć
od analizy danych rynkowych,
demograficznych oraz analizy innych serwisów odwiedzanych przez t
ę
grup
ę
(przegl
ą
d konkurencji).
Zaanga
ż
owanie u
ż
ytkowników w etapie projektowania serwisu dla nich jest najlepszym sposobem na
poznanie ich potrzeb. Jest to tak
ż
e kluczowa czynno
ść
we wspomnianym wcze
ś
niej User-Centered
Design.
Najwa
ż
niejsze metody umo
ż
liwiaj
ą
ce wł
ą
czenie u
ż
ytkowników do projektowania:
grupy fokusowe,
ankiety,
wywiady indywidualne z u
ż
ytkownikami,
obserwacja pracy u
ż
ytkowników,
testy u
ż
yteczno
ś
ci na makietach,
testy u
ż
yteczno
ś
ci na prototypie,
testy u
ż
yteczno
ś
ci wersji alfa,
testy beta serwisu z u
ż
ytkownikami.
W Massachusetts Institute of Technology przeprowadzono niedawno ankiet
ę
na temat technologii.
Wyniki s
ą
bardzo ciekawe. W pytaniu dotycz
ą
cym technologii, której dana osoba nienawidzi, ale nie
potrafiłaby bez niej
ż
y
ć
, najcz
ęś
ciej wskazywano jako odpowied
ź
telefon komórkowy (30%).
Znienawidzony budzik (25%) i telewizja (23%) znalazły si
ę
za telefonem. Internetowe fora pełne s
ą
za
ż
artych dyskusji o wy
ż
szo
ś
ci telefonów Nokia nad modelami Motoroli i vice versa. Telefony
komórkowe jako wci
ąż
nowa, a jednocze
ś
nie masowa technologia, wywołuj
ą
wiele emocji.
Architektura informacji
W serwisach mobilnych szczególnie wa
ż
ne jest, aby stworzy
ć
prost
ą
struktur
ę
serwisu (architektur
ę
informacji). Podczas budowania architektury informacji dla serwisu mobilnego we
ź
pod uwag
ę
szczególnie ilo
ść
klików potrzebnych do odnalezienia przez u
ż
ytkownika informacji. U
ż
ytkownicy
mobilni s
ą
szczególnie podatni na frustracje zwi
ą
zane z długim czasem oczekiwania na informacj
ę
.
Skracaj drog
ę
do informacji jak tylko to mo
ż
liwe.
Z drugiej strony u
ż
ytkownik, któremu zaprezentujemy czytelny dla niego model funkcjonowania
serwisu, mo
ż
e ch
ę
tniej tolerowa
ć
opó
ź
nienia, bo jest pewien tego,
ż
e w tym serwisie zrealizuje swoje
potrzeby.
By zbudowa
ć
takie odczucie powiniene
ś
dba
ć
o klarowno
ść
komunikacji – u
ż
ytkownik nie powinien
zastanawia
ć
si
ę
dok
ą
d zaprowadzi go dany link. Przy ustalaniu nazewnictwa dla linków pomocna
mo
ż
e by
ć
metoda nazywana sortowaniem kart (wi
ę
cej o niej w darmowym Kursie Usability,
www.webusability.pl
).
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
14
Wytyczne dla mobilnej architektury informacji
•
Ograniczaj wybory. Podawaj tylko tre
ść
adekwatn
ą
do potrzeb u
ż
ytkowników mobilnych.
•
Stwórz prost
ą
architektur
ę
informacji skierowan
ą
na potrzeby 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 kontentowy 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.
•
Koniec strony powinien zawiera
ć
link umo
ż
liwiaj
ą
cy kontynuacj
ę
nawigacji.
•
Minimalizuj wielko
ść
strony.
•
U
ż
ywaj dobrego kodu dla minimalizacji problemów technicznych.
•
Kolejno
ść
kodu powinna odpowiada
ć
strukturze dokumentu. Koduj semantycznie
•
U
ż
ywaj klawiszy dost
ę
pu.
Zaprojektowan
ą
struktur
ę
informacji mo
ż
na przedstawi
ć
za pomoc
ą
mapy my
ś
li (tutaj wykorzystano
darmowy program Freemind).
Rysunek 11 - Struktura serwisu mobi.kolporter.pl
Click Streams
Poj
ę
cie „Click Streams” okre
ś
la
ś
cie
ż
ki jakimi pod
ąż
aj
ą
u
ż
ytkownicy w serwisie. Zazwyczaj w serwisie
istnieje kilka
ś
cie
ż
ek (na
ś
cie
ż
k
ę
składa si
ę
kilka kolejnych stron) które s
ą
najbardziej popularne w
ś
ród
u
ż
ytkowników. W serwisie mobilnym poj
ę
cie click streams jest szalenie istotne dla zachowania
dobrego user-experience (przyjemno
ś
ci u
ż
ytkowania). Dysponuj
ą
c małym wy
ś
wietlaczem chc
ą
c czy
nie, jeste
ś
zmuszony do rozbijania informacji na wiele podstron. Bardzo wa
ż
ne jest, aby u
ż
ytkownik
płynnie poruszał si
ę
po prezentowanej tre
ś
ci.
By ułatwi
ć
projektowanie nastawione na efektywne poruszanie si
ę
u
ż
ytkownika po
ś
cie
ż
kach, mo
ż
na
zastosowa
ć
metod
ę
zwan
ą
use cases.
Scenariusze u
ż
ycia (use cases)
Scenariusze u
ż
ycia opisuj
ą
jak u
ż
ytkownicy wykonuj
ą
zadania na podstawie typowych zada
ń
. S
ą
tworzone zawsze z perspektywy u
ż
ytkownika i jego potrzeb.
Persony
Persona to opracowany profil typowego u
ż
ytkownika. Cz
ę
sto persony wyst
ę
puj
ą
jako aktorzy w
scenariuszach u
ż
ycia. By stworzy
ć
person
ę
, piszesz charakterystyk
ę
finalnego u
ż
ytkownika dla ka
ż
dej
grupy docelowej serwisu. W opisie uwzgl
ę
dniasz charakterystyk
ę
osoby (np. stopie
ń
znajomo
ś
ci
technologii) oraz typowe cele, zadania i potrzeby jakie ma na u
ż
ytek persony realizowa
ć
system.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
15
Prototypowanie
Posiadaj
ą
c architektur
ę
informacji oraz scenariusze zachowa
ń
u
ż
ytkowników mo
ż
na przyst
ą
pi
ć
do
projektowania prototypów (zwanych te
ż
makietami, wireframes, mockups). Prototyp powinien
oddawa
ć
to, jak wygl
ą
da
ć
b
ę
d
ą
poszczególne strony serwisu mobilnego. Mo
ż
na go wykona
ć
wieloma
metodami.
Wytyczne dla mobilnego layoutu
•
Najcz
ę
stsz
ą
metod
ą
tworzenia layoutu mobilnego jest posłu
ż
enie si
ę
pionow
ą
list
ą
odno
ś
ników (wraz z odpowiadaj
ą
cymi im accesskey od 0 do 9).
•
Zazwyczaj najlepiej pokazywa
ć
tylko jeden poziom nawigacji. Podmenu nale
ż
y pokaza
ć
dopiero na podstronie. Ogólna zasada mówi o pokazywaniu tylko linków nawi
ą
zuj
ą
cych do
kontekstu danej podstrony.
•
Z ka
ż
dej podstrony powinien prowadzi
ć
link do poprzedniej sekcji lub wy
ż
szego poziomu
menu. Taki link najlepiej sprawdza si
ę
na górze podstrony (u
ż
ytkownik nie musi przewija
ć
strony) oraz na dole (u
ż
ywany po przeczytaniu tre
ś
ci).
Rysunek 12 - Sugerowany layout serwisu mobilnego
Najcz
ę
stsze prototypy
•
Papierowe – narysowane na kartce papieru, proste w modyfikacji.
•
Elektroniczne – wykonane w programie typu PowerPoint, Visio – umo
ż
liwiaj
ą
szybk
ą
modyfikacj
ę
i tworzenie du
ż
ej ilo
ś
ci wariacji, osobi
ś
cie najcz
ęś
ciej z nich korzystam.
•
HTML – wykonane najcz
ęś
ciej w graficznych edytorach HTML, umo
ż
liwiaj
ą
w łatwy sposób
testowanie interakcji.
•
Graficzne – tworzone w programach graficznych, zbli
ż
one do finalnych projektów graficznych,
wymagaj
ą
du
ż
o pracy i z tego powodu s
ą
rzadko stosowane.
Testowanie
Sens tworzenia prototypów opiera si
ę
na mo
ż
liwo
ś
ci przetestowania tego, jak radz
ą
sobie z nimi
u
ż
ytkownicy. Badanie z u
ż
ytkownikami jest uznawane za podstawowe (najefektywniejsze) narz
ę
dzie
testowania prototypów.
Jak przeprowadzi
ć
test z u
ż
ytkownikami
1. Przygotowujesz zadania testowe (najlepiej oprze
ć
ja na wcze
ś
niej zdefiniowanych celach
serwisu). Zadania mog
ą
mie
ć
charakter otwarty („znajd
ź
ciekaw
ą
ksi
ąż
k
ę
dla siebie”) lub
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
16
zamkni
ę
ty („znajd
ź
ostatni
ą
ksi
ąż
k
ę
Sapkowskiego”). Zada
ń
powinno by
ć
kilka – do 10, gdy
ż
sam test nie powinien zaj
ą
c wi
ę
cej ni
ż
1,5 h.
2. Wykonujesz wszystkie zadania samodzielnie dla zweryfikowania ich realizowalno
ś
ci.
3. Prosisz kogo
ś
o asyst
ę
w charakterze obserwatora. Osoba ta b
ę
dzie notowa
ć
wszystkie
problemy, jakie napotkał u
ż
ytkownik podczas testów, Ty mo
ż
esz nie zd
ąż
y
ć
zapisa
ć
wszystkiego. Opcjonalnie mo
ż
esz przygotowa
ć
sprz
ę
t nagrywaj
ą
cy test.
4. Rekrutujesz u
ż
ytkownika do testu (osoba nie zwi
ą
zana z serwisem badanym, najlepiej z grupy
docelowej serwisu),
5. Prowadzisz test. U
ż
ytkownik wykonuje poszczególne zadania, gło
ś
no my
ś
l
ą
c (zach
ę
caj
u
ż
ytkownika do dzielenia si
ę
tym, co my
ś
li, co go denerwuje, jak rozumie serwis). Obserwator
i Ty wykonujecie notatki.
6. Po zako
ń
czeniu testu porównujecie notatki i nanosisz poprawki na makiety.
Ilu u
ż
ytkowników powinno bra
ć
udział w testach?
Pierwsi u
ż
ytkownicy zazwyczaj odkrywaj
ą
najwi
ę
cej bł
ę
dów. Jakob Nielsen i Tom Landauer wykazali,
ż
e testowanie z 5 u
ż
ytkownikami pozwala na wykrycie 85% problemów dotycz
ą
cych funkcjonalno
ś
ci
witryn. Zatrudnianie wi
ę
kszej ilo
ś
ci u
ż
ytkowników nie gwarantuje liniowego wzrostu liczby wykrytych
bł
ę
dów. Zamiast jednego testu z 8 u
ż
ytkownikami lepiej przeprowadzi
ć
dwie tury testów z 3
u
ż
ytkownikami. Najcz
ęś
ciej du
ż
e bł
ę
du zasłaniaj
ą
te mniejsze i dopiero usuni
ę
cie ich i przeprowadzeni
drugiej tury pozwala na odkrycie mniejszych bł
ę
dów. Je
ś
li na bie
żą
co testujesz i modyfikujesz
makiety, mo
ż
esz po ka
ż
dej modyfikacji przeprowadza
ć
1-2 testy.
Rysunek 13 - Wykres przedstawia ilo
ść
znalezionych problemów usability w odniesieniu do ilo
ś
ci
badanych u
ż
ytkowników. Wykres na podstawie bada
ń
J. Nielsen i T. Landauer.
Bardzo dobry artykuł o badaniach z u
ż
ytkownikami znajdziesz pod adresem:
http://www.uzytecznosc.pl/publikacje/metody/testy
. Opisano tam przebieg profesjonalnego badania
z u
ż
ytkownikami (wi
ę
kszo
ść
bada
ń
jest realizowanych skromniejszymi
ś
rodkami).
Wi
ę
cej informacji o testach z u
ż
ytkownikami znajdziesz te
ż
w darmowym Kursie Usability
–
www.webusability.pl
.
Ró
ż
ne urz
ą
dzenia
Obecnie mówi si
ę
o czterech typach telefonów. Projektuj
ą
c nale
ż
y zastanowi
ć
si
ę
nad mo
ż
liwo
ś
ciami,
jakie chcemy da
ć
ka
ż
dej z grup u
ż
ytkowników.
Feature Phones
To najcz
ęś
ciej wyst
ę
puj
ą
ce telefony. Zazwyczaj maj
ą
12 klawiszy, obsługuj
ą
SMS oraz transmisj
ę
danych. Wiele z nich posiada te
ż
aparat cyfrowy oraz mo
ż
liwo
ść
odtwarzania MP3.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
17
Smart Phones
Od Featured Phones ró
ż
ni
ą
si
ę
mo
ż
liwo
ś
ci
ą
uruchomienia aplikacji zewn
ę
trznych oraz wi
ę
kszym
ekranem. Telefony te u
ż
ywaj
ą
cz
ę
sto systemów Symbian lub Windows Mobile.
PDA
To mobilne komputery ze zintegrowanym telefonem. Ich głównym zastosowaniem jest organizacja
zada
ń
i spotka
ń
. Wyró
ż
nia je od Smart Phones klawiatura w standardzie QWERTY oraz cz
ę
sto
jeszcze wi
ę
kszy wy
ś
wietlacz (cz
ę
sto dotykowy).
Voice-Only Phones
Najprostsze telefony, nie obsługuj
ą
ce transmisji danych. Ich u
ż
ytkownicy nie mog
ą
korzysta
ć
z
mobilnych serwisów WWW.
Obecnie na rynku najwi
ę
cej jest urz
ą
dze
ń
klasy Feature Phones.
Projektowanie graficzne
Efektem poprzednich etapów jest komplet makiet opisuj
ą
cych rozmieszczenie elementów serwisu na
ka
ż
dej wa
ż
niejszej podstronie serwisu. To doskonała podstawa do prac dla grafika.
Projektowanie graficzne pod mobile z pewno
ś
ci
ą
jest sporym wyzwaniem dla designerów. Mimo
rozwoju urz
ą
dze
ń
mobilnych i przegl
ą
darek mobilnych nadal istnieje mnóstwo ogranicze
ń
rzutuj
ą
cych
na layouty serwisów mobilnych. Nale
ż
y bra
ć
pod uwag
ę
takie problemy, jak długi czas ładowania,
ró
ż
ne wielko
ś
ci wy
ś
wietlaczy i ilo
ść
obsługiwanych kolorów, czy wreszcie niekompatybilno
ś
ci w
obsłudze CSS.
Projektowanie na ró
ż
ne wielko
ś
ci wy
ś
wietlacza
Obecnie wi
ę
kszo
ść
PC pracuje na rozdzielczo
ś
ci 1024*768 lub wy
ż
szej. W
ś
wiecie urz
ą
dze
ń
mobilnych zró
ż
nicowanie jest du
ż
o wi
ę
ksze.
Rysunek 14 - Rysunek pochodzi z wydanego przez W3C Mobile Web Developer's Guide. W3C zaleca
stosowanie rozdzielczo
ś
ci do 200x250px.
Radzi
ć
sobie z ró
ż
nymi wielko
ś
ciami wy
ś
wietlacza mo
ż
na na wiele sposobów. Jedna z metod mówi o
tworzeniu odr
ę
bnych arkuszy styli dla ró
ż
nych rozdzielczo
ś
ci, inna proponuje skalowania layotu i
dopasowanie do ekranu w locie. Osoby maj
ą
ce do
ś
wiadczenia w projektowaniu pod PC znaj
ą
wady i
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
18
zalety obu metod. Z pewno
ś
ci
ą
dla ka
ż
dego z projektów nale
ż
y szuka
ć
optymalnego rozwi
ą
zania.
Niemniej nam dzi
ś
wydaje si
ę
,
ż
e projektowanie pod sugerowan
ą
rozdzielczo
ś
ci - do 200*250 px jest
najlepszym rozwi
ą
zaniem.
Kolory
Nadal wiele urz
ą
dze
ń
mo
ż
e nie posiada
ć
kolorowego wy
ś
wietlacza. Upewnij si
ę
,
ż
e informacja jest
czytelna tak
ż
e przy przegl
ą
daniu serwisu w skali szaro
ś
ci. Wa
ż
ne te
ż
, aby grafika serwisu mobilnego
posiadał odpowiedni kontrast – u
ż
ytkownicy mog
ą
przegl
ą
da
ć
serwis w słabym lub bardzo mocnym
o
ś
wietleniu. Istnieje wiele aplikacji (tak
ż
e darmowych) automatycznie sprawdzaj
ą
cych, czy kontrast
jest odpowiedni.
Wiarygodno
ść
Internet mobilny jest dzi
ś
w fazie dynamicznego rozwoju. Dla u
ż
ytkowników wa
ż
ne jest poczucie
bezpiecze
ń
stwa, wiarygodno
ść
aplikacji i serwisów, z których korzystaj
ą
. Wiarygodno
ść
mo
ż
e
budowa
ć
wiele elementów (marka, referencje), ale najprostszym z nich jest profesjonalny projekt
graficzny. Warto przygotowa
ć
projekt graficzny dla serwisu mobilnego, który b
ę
dzie dobrze wygl
ą
dał
na ograniczonych wy
ś
wietlaczach. By
ć
mo
ż
e warto poszuka
ć
grafika specjalizuj
ą
cego si
ę
w grafice
pixel by pixel, który stworzy miniaturowe elementy graficzne. Graficy o takich umiej
ę
tno
ś
ciach
projektuj
ą
cz
ę
sto gry na urz
ą
dzenia przeno
ś
ne i konsole.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
19
Wdro
ż
enie
Tworzenie stron mobilnych jest zasadniczo proste. Głównym wyzwaniem dla twórców serwisów
mobilnych jest sprostanie bardzo zró
ż
nicowanym wymaganiom wielu przegl
ą
darek mobilnych.
Sytuacja
ż
ywo przypomina t
ę
gdy udr
ę
k
ą
webmasterów było ci
ą
gle sprawdzanie czy strona
prawidłowo działa zarówno w InternetExplorer jak i Netscape. W wypadku urz
ą
dze
ń
mobilnych
przegl
ą
darek jest znacznie wi
ę
cej – tutaj firmy tworz
ą
ce serwisu mobilne maj
ą
najwi
ę
cej pracy.
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: 20kB.
•
Kolory: Web safe.
•
Obsługa arkuszy styli: CSS Level 1.
Pod adresem
http://www.w3.org/TR/mobileOK-basic10-tests/
mo
ż
esz zapozna
ć
si
ę
z dokumentem
W3C opisuj
ą
cym test poprawno
ś
ci kodu serwisu mobilnego.
Adaptacja
W tym dokumencie opisujemy serwisy mobilne tworzone specjalne na u
ż
ytek telefonów komórkowych.
Mo
ż
na jednak stosowa
ć
jedn
ą
z metod adaptacji klasycznych serwisów WWW do wersji mobilnej.
Niestety nie ma wtedy mowy o projektowaniu strategii mobilnej czy dopasowywaniu serwisu do
potrzeb u
ż
ytkowników. Metody takie, jak reformatowanie serwisu klasycznego czy podmiana plików
CSS umo
ż
liwia przegl
ą
danie serwisu w urz
ą
dzeniu mobilnym, ale zazwyczaj serwis taki nie realizuje
poprawnie potrzeb u
ż
ytkownika mobilnego. Metod
ą
po
ś
redni
ą
jest wykorzystywanie wybranych tre
ś
ci
z klasycznego serwisu i automatyczna transformacja ich do formatu mobilnego.
Rysunek 15 - Przykład pochodzi z prezentacji Next Generation Mobile Web firmy Blue Favore.
Przykład prezentuje ró
ż
ne metody adaptacji serwisu mobilnego. Ostatni ze screenów pokazuje serwis
w wersji specjalnie zaprojektowanej do urz
ą
dze
ń
mobilnych.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
20
Metody adaptacji:
•
SSR (Small Screen Rendering) – przegl
ą
darka (jak np. Opera Mini) modyfikuje serwis. Wi
ę
cej
o SSR na
http://www.opera.com/products/mobile/smallscreen/
.
•
Reformat – kod HTML jest upraszczany i wy
ś
wietlany.
•
Stylesheets – podmiana arkusza stylów dla osi
ą
gni
ę
cia lepszego wygl
ą
du pod mobile.
•
Mobile Specific – dedykowana wersja mobilna dla urz
ą
dze
ń
mobilnych.
Rysunek 16 - Wersja mobilna umo
ż
liwia uzyskanie najwi
ę
kszej warto
ś
ci dla u
ż
ytkownika.
Nowoczesne rozwi
ą
zania, jakich jestem zwolennikiem umo
ż
liwiaj
ą
generowanie wersji mobilnych
serwisu poprzez integrowanie kilku kanałów danych – wersja mobilna mo
ż
e składa
ć
si
ę
z:
automatycznie konwertowanych elementów strony klasycznej, informacji pobieranych w formie XML i
RSS, dedykowanych elementów wprowadzonych za pomoc
ą
CMS dla stron mobilnych. Z mojej
praktyki wynika,
ż
e wiele serwisów WWW mo
ż
na bez trudu konwertowa
ć
do wersji mobilnej – nie
generuj
ą
c dodatkowej pracy dla klienta. Procedura polega na zdefiniowaniu tych elementów serwisu
WWW, które mog
ą
okaza
ć
si
ę
przydatne u
ż
ytkownikom mobilnym – nast
ę
pnie specjalne
oprogramowanie pobiera tre
ść
z serwisu WWW i konwertuje j
ą
do postaci mobilnej. Mówimy wtedy o
dedykowanej wersji mobilnej (najwy
ż
sza warto
ść
dla u
ż
ytkownika), ale tworzonej w oparciu o
istniej
ą
ce dane (najmniejszy wysiłek dla klienta).
Idea One Web
Pojawiaj
ą
si
ę
sugestie by serwisy mobilne budowa
ć
w filozofii One Web. Oznacza to tyle,
ż
e zale
ż
nie
od przegl
ą
darki u
ż
ywany jest tylko inny arkusz stylu aby dopasowa
ć
tre
ść
do formatu wy
ś
wietlania.
Teoretycznie umo
ż
liwi to przegl
ą
danie dowolnego serwisu WWW na dowolnym urz
ą
dzeniu. Moim
zdaniem technicznie mo
ż
na to oczywi
ś
cie zrealizowa
ć
, ale.. ale tak naprawd
ę
tracimy z pola widzenia
u
ż
ytkownika. To wi
ąż
e si
ę
nie tylko z utrat
ą
usability, ale te
ż
pogorszeniem biznesowych
współczynników.
Serwis mobilny jest zazwyczaj u
ż
ywany w zupełnie innych sytuacjach i wi
ążę
si
ę
z realizacj
ą
innych
potrzeb. Serwowanie u
ż
ytkownikom klasycznego Internetu oraz mobile tego samego contentu mija si
ę
z celem. Do czego innego słu
ż
y auto sportowe (broadband, 17 calowy monitor, d
ź
wi
ę
k przestrzenny i
mysz optyczna) a do czego innego terenowe auto (mały wy
ś
wietlacz, prosta klawiatura). Mo
ż
na
stworzy
ć
co
ś
pomi
ę
dzy, ale czy ktokolwiek zechce z tego skorzysta
ć
? Taki hybrydowy serwis na
ka
ż
dym z rynków b
ę
dzie ust
ę
pował swoim natywnym konkurentom.
Wbrew pozorom realizacja idei One Web mo
ż
e zosta
ć
moim zdaniem wcielona w
ż
ycie.. ale na
poziomie wy
ż
szym ni
ż
kod. Dla u
ż
ytkownika najwygodniejsz
ą
sytuacj
ą
jest gdy wchodz
ą
c do serwisu
WWW zostanie on przeł
ą
czony automatycznie na wersj
ę
klasyczn
ą
lub mobiln
ą
. One-web, czyli jeden
adres i automatyczne przenoszenie do odpowiedniej wersji.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
21
Co zatem z dost
ę
pno
ś
ci
ą
, standardami i wszystkim dookoła? Jest to szalenie istotne. Moim zdaniem
ka
ż
dy serwis WWW powinien by
ć
zbudowany w sposób umo
ż
liwiaj
ą
cy jego przegl
ą
danie na
dowolnym urz
ą
dzeniu. Zupełnie nie wyklucza to zbudowania dedykowanych wersji mobilnych.
Idealna sytuacja: Mamy jak najbardziej dost
ę
pn
ą
wersj
ę
klasycznego serwisu do przegl
ą
dania przez
osoby niewidome, niedowidz
ą
ce, roboty wyszukiwarek oraz awaryjnie przez urz
ą
dzenia mobilne (np.
musimy mie
ć
jak
ąś
informacj
ę
z klasycznej wersji serwisu). Do tego dokładamy automatyczne
przekierowanie do dedykowanej wersji mobilnej (z mo
ż
liwo
ś
ci
ą
powrotu do wersji klasycznej). To
rozwi
ą
zanie wydaje si
ę
maksymalizowa
ć
zarówno u
ż
yteczno
ść
dla u
ż
ytkowników, jak i spełnia
ć
wymagania zwi
ą
zane z dost
ę
pno
ś
ci
ą
i standardami.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
22
Rekomendacje dla serwisów mobilnych
Szybko
ść
działania
U
ż
ytkownik powinien móc przewidzie
ć
czas pobierania danych. W wypadku gdy jest wiele danych do
pobrania, powinno si
ę
informowa
ć
o tym u
ż
ytkownika. Generalnie warto jest dba
ć
o jak najszybsze
działanie serwisu. U
ż
ytkownicy mobilni s
ą
wra
ż
liwi na ten parametr i nie chc
ą
korzysta
ć
z wolno
działaj
ą
cych serwisów (tak
ż
e w obawie przed wpływem tego na wielko
ść
rachunków, nawet gdy ta
obawa jest nie uzasadniona).
Kodowanie znaków
Odpowiednie kodowanie znaków jest krytycznie wa
ż
ne dla czytelno
ś
ci serwisu mobilnego. Aby
uzyska
ć
dobre kodowanie znaków, u
ż
ywaj UTF-8 w dokumentach XML oraz ISO 8859-1 w
dokumentach text/html. Je
ś
li nie zdefiniujesz odpowiedniego kodowania znaków serwis mobilny mo
ż
e
wy
ś
wietla
ć
si
ę
nieprawidłowo z urz
ą
dzeniu mobilnym. Wi
ę
kszo
ść
przegl
ą
darek mobilnych zakłada,
ż
e
strony text/html s
ą
kodowane jako ISO 8859-1.
Tytuł strony
Odpowiedni tytuł strony ułatwia u
ż
ytkownikom dodawanie stron do ulubionych, wyszukiwanie
ulubionych oraz nawigowanie po serwisie. W przegl
ą
darce mobilnej tytuł jest cz
ę
sto skracany zatem
nale
ż
y tworzy
ć
krótkie, unikalne tytuły dla ka
ż
dej z podstron.
Dla serwisów mobilnych warto stosowa
ć
odwrotn
ą
konwencj
ę
ni
ż
dla serwisów klasycznych, czyli
zapis: Opis tre
ś
ci podstrony – nazwa serwisu.
Tabele
Tabele na mniejszych wy
ś
wietlaczach sprawiaj
ą
problemy. Generalnie w projektowaniu pod
urz
ą
dzenia mobilne powinno unika
ć
si
ę
u
ż
ywania tabel. Szczególnie niewskazane s
ą
zagnie
ż
d
ż
one
tabele, nie działaj
ą
poprawnie w wielu przegl
ą
darkach mobilnych. Do tworzenia layoutu powinny by
ć
wykorzystywane warstwy oraz arkusze styli CSS.
Ramki
Ramki nie s
ą
obsługiwane przez wiele przegl
ą
darek mobilnych, sprawiaj
ą
te
ż
problemy zwi
ą
zane z
usability. Nie korzystaj z ramek.
Ilo
ść
linków
Ilo
ść
linków rekomendowanych w serwisie mobilnym nie powinna przekroczy
ć
10. Stosuj te
ż
Access
key, aby ułatwi
ć
nawigowanie po linkach z u
ż
yciem klawiatury telefonu.
Najwa
ż
niejsze linki mo
ż
na wyró
ż
ni
ć
poprzez umieszczenie ich najwy
ż
ej na li
ś
cie linków. Pami
ę
taj,
ż
e
dla u
ż
ytkownika najwa
ż
niejsze jest odnalezienie interesuj
ą
cych ich informacji w jak najmniejszej ilo
ś
ci
klików.
Na ko
ń
cu ka
ż
dej strony powinny znajdowa
ć
si
ę
linki umo
ż
liwiaj
ą
ce powrót do poprzedniego poziomu
struktury lub przej
ś
cie do powi
ą
zanej relatywnie tre
ś
ci. Wa
ż
ne aby dba
ć
o dobr
ą
płynno
ść
ruchu
u
ż
ytkowników – ka
ż
da strona powinna zawiera
ć
dalsze propozycje nawigacji po serwisie.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
23
Unikaj przeładowania
Zbyt wiele opcji mo
ż
e skutecznie odstraszy
ć
u
ż
ytkownika. Eksperymentowanie z wersj
ą
mobiln
ą
jest
du
ż
o bardziej kłopotliwe ni
ż
z klasycznym serwisem WWW (dłu
ż
szy czas ładowania, trudniejsza
interakcja, trudna w obsłudze wielozadaniowo
ść
). Nigdy nie pokazuj dodatkowych opcji, zanim
u
ż
ytkownik nie zobaczy tego, czego szuka (wynika to z analizy kontekstu u
ż
ytkownika). Pami
ę
taj o
filozofii „Less is more” - w wypadku urz
ą
dze
ń
mobilnych to bardzo wa
ż
ne.
Access keys
Zwane inaczej klawiszami dost
ę
pu, maj
ą
umo
ż
liwia
ć
nawigowanie za po
ś
rednictwem klawiatury.
Standardowo proponuje si
ę
przypisanie access keys od 0 do 9 - ka
ż
dy telefon ma 10 klawiszy zatem
to kolejny powód, by na jednej stronie nie zamieszcza
ć
wi
ę
cej ni
ż
10 linków.
Dobr
ą
praktyk
ą
staje si
ę
przypisywanie access key 0 linkowi umo
ż
liwiaj
ą
cemu powrót do głównego
menu.
Unikaj wprowadzania tekstu
U
ż
ytkownicy maj
ą
cz
ę
sto problemy z wprowadzaniem tekstu za pomoc
ą
telefonu komórkowego.
Warto minimalizowa
ć
ilo
ść
wymaganych do wprowadzenia informacji. Tam gdzie to mo
ż
liwe, u
ż
ywaj
listy wyboru i radio butonów. Je
ś
li u
ż
ytkownik musi wprowadzi
ć
teksty staraj si
ę
, aby były to tylko
niezb
ę
dne Ci informacje.
Staraj si
ę
wsz
ę
dzie, gdzie u
ż
ytkownik wprowadza dane ustala
ć
ich format. Podawaj u
ż
ytkownikom
oczekiwany format danych oraz przykłady. Gdy mo
ż
na ograniczy
ć
wprowadzane dane, np. tylko do
znaków numerycznych, stosuj 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.
Fonty
Wi
ę
kszo
ść
przegl
ą
darek mobilnych wy
ś
wietla cał
ą
tre
ść
jednym fontem (Sans-serif)..
Wielko
ść
fontów (W3C sugeruje aby nie u
ż
ywa
ć
px ale em) sugerowana przez Nokia to:
•
Heading 1: 18px, bold
•
Heading 2: 16px, bold
•
Heading 3: 14px, bold
•
Heading 4: 12px, bold
•
Body text: 12px, normal
Rozmiar obrazków
Zadbaj o odpowiedni rozmiar obrazków, aby u
ż
ytkownik nie pobierał du
ż
ego obrazka, który nast
ę
pnie
jest pomniejszany (dłu
ż
sze pobieranie, gorsza jako
ść
). Zdecydowana wi
ę
kszo
ść
wy
ś
wietlaczy mo
ż
e
pokaza
ć
obrazek o szeroko
ś
ci 120 pikseli bez skalowania go. Zazwyczaj grafika wymaga obróbki
przed publikacj
ą
w tak małej rozdzielczo
ś
ci. Nale
ż
y zmniejszy
ć
ilo
ść
szczegółów da uzyskania
czytelno
ś
ci przekazu.
Pami
ę
taj o deklarowaniu rozmiarów obrazka w kodzie. Zapobiegnie to automatycznemu
przeskalowaniu grafiki przez przegl
ą
dark
ę
. Pozwoli to tak
ż
e skróci
ć
czas renderowania strony i
zapobiegnie efektowi „je
ż
d
ż
enia” strony podczas ładowania.
Alternatywny tekst
Umieszczenie tekstu alternatywnego dla ka
ż
dej z grafik pozwoli odczyta
ć
serwis bez ładowania grafiki
(lub podczas ładowania si
ę
grafiki). Alternatywny tekst pomaga tak
ż
e uzyska
ć
dobre SEO serwisu.
Zewn
ę
trzne elementy serwisu
Zaleca si
ę
szczególn
ą
ostro
ż
no
ść
w pobieraniu przez serwis mobilny zewn
ę
trznych zasobów.
Wydłu
ż
a to czas ładowania serwisu oraz mo
ż
e prowadzi
ć
do nieprzewidzianych sytuacji gdy
zewn
ę
trzny zasób ulegnie zmianie.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
24
Ci
ęż
ar serwisu
Obecnie zakłada si
ę
jako dobr
ą
praktyk
ę
utrzymanie wielko
ś
ci ka
ż
dej ze stron serwisu mobilnego w
granicach 10kB – 20kB.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
25
Nazwa serwisu
Wraz z uruchomieniem domeny .mobi
ś
wiat IT podzielił si
ę
na dwa obozy. Cz
ęść
specjalistów uwa
ż
a,
ż
e powinni
ś
my d
ąż
y
ć
do realizacji idei One Web, czyli projektowanie stron WWW, które wygl
ą
daj
ą
dobrze w ka
ż
dych warunkach. Cz
ęść
– na czele z najwi
ę
kszymi firmami (Ericsson, Google, GSM
Association, Microsoft, Nokia, Samsung Electronics, T-Mobile, Vodafone) stworzyła organizacj
ę
dotmobi, która promuje domen
ę
.mobi oraz tworzenie dedykowanych stron mobilnych. Domena .mobi
jest jasnym komunikatem,
ż
e serwis pod ni
ą
umieszczony jest przeznaczony do urz
ą
dze
ń
mobilnych.
Wiele projektów powstaje jednak w innych nazwach – cz
ę
sto s
ą
to mobile.domena.pl lub
domena.pl/mobile.
W praktyce obie idee nazewnictwa mo
ż
na ł
ą
czy
ć
– te firmy, które chc
ą
promowa
ć
jeden adres, mog
ą
u
ż
ywa
ć
skryptu, który wykrywa,
ż
e przegl
ą
darka u
ż
ytkownika jest przegl
ą
dark
ą
mobiln
ą
i w tym
wypadku przekierowuje u
ż
ytkownika na mobiln
ą
wersj
ę
serwisu. U
ż
ytkownicy mobilni z czasem
przyzwyczaj
ą
si
ę
do swojego dedykowanego adresu i b
ę
d
ą
korzysta
ć
wprost z niego bez konieczno
ś
ci
czekania na przeł
ą
czenie.
Testowanie serwisu mobilnego
Testowanie serwisu jest szalenie istotne i powinno nast
ą
pi
ć
jak najszybciej. Testowanie opisane ni
ż
ej
nie zast
ą
pi w
ż
adnym wypadku testowania usability i koncepcji serwisu, opisanego wcze
ś
niej.
Testowanie tutaj opisane skupia si
ę
na poprawnym działania serwisu w warstwie technicznej.
Rysunek 17 - Ten sam kod, nawet prosty i semantycznie poprawny mo
ż
e wygl
ą
da
ć
ró
ż
nie na ró
ż
nych
platformach. Przykładowo w pierwszym zrzucie ekranu wszystkie nagłówki zostały tak samo
sformatowane. Przykład pochodzi z prezentacji Cameron Moll.
Jak testowa
ć
Desktop testing (“Quick and Dirty”)
Pierwszym testowaniem, jakie mo
ż
na wykona
ć
, to przetestowanie serwisu z poziomu komputera PC.
Mo
ż
na u
ż
y
ć
kilku ułatwie
ń
, przykładowo przegl
ą
darka Opera pozwala wł
ą
czy
ć
widok symuluj
ą
cy mały
ekran telefonu. Mo
ż
na te
ż
stworzy
ć
ramk
ę
o rozmiarze odpowiadaj
ą
cym wielko
ś
ci ekranów mobilnych
i nast
ę
pnie uruchamia
ć
w takiej ramce strony do testów.
Testowanie w emulatorze
Istnieje wiele emulatorów urz
ą
dze
ń
mobilnych. Renderowane na nich strony s
ą
tylko przybli
ż
eniem
tego, jak b
ę
d
ą
wygl
ą
da
ć
w prawdziwym urz
ą
dzeniu.
•
Emulator 18 popularnych telefonów
http://www.mobilerunner.wap3.net/emu_wap3/p/wap3/
•
Emulator przegl
ą
darki WWW telefonu komórkowego – Openwave
http://developer.openwave.com/dvl/tools_and_sdk/
•
Emulator przegl
ą
darki Opera Mini, która jest cz
ę
sto stosowana w urz
ą
dzeniach mobilnych.
http://www.opera.com/products/mobile/operamini/demo.dml
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
26
•
Emulator Nokia
http://www.forum.nokia.com/info/sw.nokia.com/id/db2c69a2-4066-46ff-81c4-
caac8872a7c5/NMB40_install.zip.html
•
Do testowania stron tworzonych na WAP mo
ż
na u
ż
ywa
ć
WinWAP Smartphone Browser
Emulator
http://www.winwap.com/products_2_3.php
•
Emulator Black Berry
http://na.blackberry.com/eng/developers/downloads/simulators.jsp
Walidator
Serwis
http://ready.mobi/
umo
ż
liwia pobie
ż
ne sprawdzenie, czy kod Waszego serwisu b
ę
dzie
poprawnie wy
ś
wietlany na przegl
ą
darkach mobilnych. Wersja beta walidatora W3C:
http://validator.w3.org/mobile/
.
Serwisy typu DeviceAnywhere
Serwisy typu DeviceAnywhere (
http://deviceanywhere.com
) umo
ż
liwiaj
ą
zdalne testowanie serwisów
WWW na wielu urz
ą
dzeniach. Obecnie DeviceAnywhere umo
ż
liwia dost
ę
p do ponad 300 urz
ą
dze
ń
.
Testowanie w urz
ą
dzeniu
Nic nie zast
ą
pi testowania w prawdziwym urz
ą
dzeniu. Oczywi
ś
cie w im wi
ę
kszej ilo
ś
ci urz
ą
dze
ń
przetestujesz serwis tym lepiej. Jednak gdy Twoje zasoby s
ą
ograniczone, skup si
ę
na kilku
najwa
ż
niejszych platformach, które pokrywaj
ą
najwi
ę
cej rynku. Przykładowo w publikacji DotMobi Wev
Developer’s Guide autorzy wspominaj
ą
o pi
ę
ciu najwa
ż
niejszych ich zdaniem platformach: Nokia
Series 40, Motorola V series, Samsung, Smartphone jak np. Nokia s60, PDA jak np. Treo lub jeden z
PDA na Windows Mobile.
W trakcie cz
ę
stych testów mo
ż
esz u
ż
ywa
ć
poł
ą
cze
ń
WiFi (w modelach w nie wyposa
ż
onych), aby
przyspieszy
ć
testy i obni
ż
y
ć
ich koszt.
Pami
ę
taj,
ż
e działaj
ą
cy ju
ż
serwis mo
ż
na (i nale
ż
y) przetestowa
ć
tak
ż
e pod k
ą
tem usability. Wi
ę
cej o
testach z u
ż
ytkownikami znajdziesz w Kursie Usability –
www.webusability.pl
.
Kurs Mobile Web – Mobilny serwis WWW – wi
ę
cej na:
www.divante.pl
27
Wi
ę
cej informacji
•
Mobile Web Best Practices 1.0,
http://www.w3.org/TR/2006/WD-mobile-bp-20060113/
•
Mobile Web Developer’s Guide Part I,
http://dev.mobi/node/293
•
Mobile Web Developer’s Guide Part II (w trakcie prac),
http://dev.mobi/node/413
•
MobileOK Basic Tests,
http://www.w3.org/TR/mobileOK-basic10-tests/
•
Scope of Mobile Web Best Practices,
http://www.w3.org/TR/mobile-bp-scope
•
Opera's Making Small Devices Look Great,
http://my.opera.com/community/dev/device
•
OpenWave,
http://developer.openwave.com/dvl/support/documentation/guides_and_references/best_pract
ices_in_xhtml_design/index.htm
•
Nokia Guidelines for XHTML-MP on Series 60
http://sw.nokia.com/id/4f7b6805-47d7-4914-
885c-6ef2b487adf6/Series_60_Platform_Designing_XHTML_MP_Content_v1_4_en.pdf
•
Browsing on Mobile Phones,
http://www.research.att.com/~rjana/WF12_Paper1.pdf
•
Little Spring Design,
http://www.littlespringsdesign.com/design/styleguides.html
•
Study by Segala M Test on Scrolling vs. Pagination,
http://www.mobilefriendly.org
•
Mobile Usability: How Nokia Changed the Face of the Mobile Phone, Christian Lindholm,
Turkka Keinonen and Harri Kiljander (eds), McGraw-Hill © 2003
•
XHTML Mobile Profile Tutorial,
http://www.developershome.com/wap/xhtmlmp/
•
Mobile Design,
http://www.mobiledesign.org
•
Mobile Monday,
http://mobilemonday.com
•
Mobile Web Design Series,
http://cameronmoll.com
•
Usable Products,
http://usableproducts.com
•
MEX 2007: The PMN Mobile User Experience Report
•
Global Authoring Practices for the Mobile Web,
http://www.passani.it/gap/
•
Blog Mobilny Internet,
http://www.nowakowski.mobi/blog/
•
Blog Webmobile,
http://webmobile.pl/
•
Blog Mobiletrends,
http://mobiletrends.pl
/
Wyszukiwarka
Podobne podstrony:
Mobile Web Development Smashing Magazine mowede
Mobile Web Development Smashing Magazine
Mobile Web Development Smashing Magazine
Mobile Web Development Smashing Magazine 2
instrukcja Mobiola Web Camera for Windows Mobile v3 1 8
KURS ETYKI
Choroba hemolityczna p odu na kurs
zapotrzebowanie ustroju na skladniki odzywcze 12 01 2009 kurs dla pielegniarek (2)
kurs
wady postawy kurs
ostre białaczki 24 11 2008 (kurs)
Mobile OS Security
AT kurs analityka giełdowego 3
Pielęgniarki kurs wersja 6 V 01
więcej podobnych podstron