Kurs_Mobile

Kurs Mobile Web – Mobilny serwis WWW – wi

cej na:

www.divante.pl

Spis tre

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

ęŜ

ar serwisu .............................................................................................................................. 24

Nazwa serwisu....................................................................................................................................... 25

Kurs Mobile Web – Mobilny serwis WWW – wi

cej na:

www.divante.pl

Wst

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

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

strategi

mobiln

•

jak zdefiniowa

i zaspokoi

potrzeby u

ytkowników mobilnych,

•

jak budowa

yteczne i profesjonalne serwisy mobilne,

•

jak testowa

i ulepsza

serwisy mobilne,

•

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

Mobilny Internet - dlaczego warto?

Internet mobilny jest medium ł

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

wiecie. GSM Association szacuje,

e 29% ludzi na Ziemi

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

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

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

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

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

ytkownika mobilnego.

Serwisy mobilne musz

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

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

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

dzie jeszcze przez kilka nast

pnych lat.

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

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

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.

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

Przykłady zastosowa

Serwisy informacyjne

Najbardziej oczywiste zastosowanie Internetu mobilnego to oczywi

cie serwisy informacyjne. Maj

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

ytkowników – jeszcze dzi

boj

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,

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

e popularne stan

serwisy umo

liwiaj

ce poszukiwanie usług i produktów na zadanym obszarze. Popularne s

tak

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

Rysunek 4 - Serwis cloaters.mobi

Serwisy korporacyjne

Serwisy korporacyjne to klasyczne zastosowanie Internetu mobilnego. Warto w tym wypadku
zastanowi

, kto z otoczenia biznesowego firmy potrzebuje najbardziej dost

pu mobilnego. Cz

sto

to klienci biznesowi, media, inwestorzy, handlowcy firmy. Mobilny serwis korporacyjny stanie si

najbli

szych latach tak samo oczywistym kanałem komunikacji jak telefon, e-mail czy serwis WWW.

Swoje mobilne strony korporacyjne zbudowały ju

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

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

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ó

Ludzie podró

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ó

cych.

Serwis

http://hiltonfamily.mobi

pozwoli Ci znale

źć

i zarezerwowa

miejsce w hotelu sieci Hilton w

dym zak

tku

wiata.

Rysunek 8 - Serwis hostels.mobi

Kurs Mobile Web – Mobilny serwis WWW – wi

cej na:

www.divante.pl

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

da osoba nowa w

mie

cie. Mo

liwo

ść

sprawdzenia rozkładu komunikacji miejskiej, ciekawych wydarze

i informacji

lokalnych doceni

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

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

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

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

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,

user-experience tych serwisów jest optymalny dla u

ytkownika mobilnego. Mo

e zdarza

tak,

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

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

ytkowników, jakie serwis mobilny ma zaspokaja

. Najbardziej oczywista potrzeba to dost

p do

tre

ci, niemniej z perspektywy u

ytkownika mobilnego okaza

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

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).

•

liwo

ść

wietlania linków

reklamowych, reklam oraz informacji
marketingowych.

•

Budowanie wizerunku innowacyjnej firmy.

•

Dost

pno

ść

informacji w dowolnym czasie

i przestrzeni.

•

liwo

ść

korzystania z serwisu w trakcie

podró

y i innych nietypowych miejscach.

•

a niezawodno

ść

medium –

korzystanie w sytuacjach awaryjnych.

•

Korzystanie z informacji w kontek

cie

aktualnej lokalizacji.

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

e w kolejnym opisywanym etapie („Jak pozna

swoich

ytkowników?”). Przydatne mog

okaza

szczególnie takie narz

dzia badawcze, jak: przegl

konkurencji, grupy fokusowe, badania ankietowe, wywiady indywidualne.

Kurs Mobile Web – Mobilny serwis WWW – wi

cej na:

www.divante.pl

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

, 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

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

dok

d zaprowadzi go dany link. Przy ustalaniu nazewnictwa dla linków pomocna

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

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.

•

wietlaj nie wi

cej ni

5 kategorii na stronie.

•

wietlaj nie wi

cej ni

10 linków na stronie.

•

Zawsze dostarczaj co najmniej jeden element kontentowy na ka

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.

•

ywaj dobrego kodu dla minimalizacji problemów technicznych.

•

Kolejno

ść

kodu powinna odpowiada

strukturze dokumentu. Koduj semantycznie

•

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

cie

ki jakimi pod

ąŜ

ytkownicy w serwisie. Zazwyczaj w serwisie

istnieje kilka

cie

ek (na

cie

składa si

kilka kolejnych stron) które s

najbardziej popularne w

ród

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

ytkownika po

cie

kach, mo

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

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

Prototypowanie

Posiadaj

c architektur

informacji oraz scenariusze zachowa

ytkowników mo

na przyst

projektowania prototypów (zwanych te

makietami, wireframes, mockups). Prototyp powinien

oddawa

to, jak wygl

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

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

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

ąŜ

dla siebie”) lub

Kurs Mobile Web – Mobilny serwis WWW – wi

cej na:

www.divante.pl

zamkni

ty („znajd

ostatni

ksi

ąŜ

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

ąŜ

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

c (zach

caj

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

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

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

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).

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

nad mo

liwo

ciami,

jakie chcemy da

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

Smart Phones

Od Featured Phones ró

liwo

uruchomienia aplikacji zewn

trznych oraz wi

kszym

ekranem. Telefony te u

ywaj

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

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

dej wa

niejszej podstronie serwisu. To doskonała podstawa do prac dla grafika.

Projektowanie graficzne pod mobile z pewno

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

zalety obu metod. Z pewno

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

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

serwis w słabym lub bardzo mocnym

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

ść

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

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

sto gry na urz

dzenia przeno

ne i konsole.

Kurs Mobile Web – Mobilny serwis WWW – wi

cej na:

www.divante.pl

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

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.

•

zyk: XHTML - Basic Profile.

•

Kodowanie znaków: UTF-8.

•

Format obrazków: JPEG, GIF 89a (non-interlaced, non-transparent, non-animated).

•

ęŜ

ar strony: 20kB.

•

Kolory: Web safe.

•

Obsługa arkuszy styli: CSS Level 1.

Pod adresem

http://www.w3.org/TR/mobileOK-basic10-tests/

esz zapozna

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.

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

redni

jest wykorzystywanie wybranych tre

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

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

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

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

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

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

ąŜę

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

k przestrzenny i

mysz optyczna) a do czego innego terenowe auto (mały wy

wietlacz, prosta klawiatura). Mo

stworzy

pomi

dzy, ale czy ktokolwiek zechce z tego skorzysta

? Taki hybrydowy serwis na

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

Co zatem z dost

pno

, standardami i wszystkim dookoła? Jest to szalenie istotne. Moim zdaniem

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

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

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

i standardami.

Kurs Mobile Web – Mobilny serwis WWW – wi

cej na:

www.divante.pl

Rekomendacje dla serwisów mobilnych

Szybko

ść

działania

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

wietla

nieprawidłowo z urz

dzeniu mobilnym. Wi

kszo

ść

przegl

darek mobilnych zakłada,

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

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

ywania tabel. Szczególnie niewskazane s

zagnie

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

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ó

poprzez umieszczenie ich najwy

ej na li

cie linków. Pami

taj,

dla u

ytkownika najwa

niejsze jest odnalezienie interesuj

cych ich informacji w jak najmniejszej ilo

klików.

Na ko

cu ka

dej strony powinny znajdowa

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

ytkowników – ka

da strona powinna zawiera

dalsze propozycje nawigacji po serwisie.

Kurs Mobile Web – Mobilny serwis WWW – wi

cej na:

www.divante.pl

Unikaj przeładowania

Zbyt wiele opcji mo

e skutecznie odstraszy

ytkownika. Eksperymentowanie z wersj

mobiln

jest

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

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

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

ytkownicy maj

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

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

ść

wietlaczy mo

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

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

ść

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

Nazwa serwisu

Wraz z uruchomieniem domeny .mobi

wiat IT podzielił si

na dwa obozy. Cz

ęść

specjalistów uwa

e powinni

my d

ąŜ

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

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

do swojego dedykowanego adresu i b

korzysta

wprost z niego bez konieczno

czekania na przeł

czenie.

Testowanie serwisu mobilnego

Testowanie serwisu jest szalenie istotne i powinno nast

jak najszybciej. Testowanie opisane ni

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

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.

na u

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

wygl

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

•

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

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

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