KURS MOBILE WEB wersja 1 najnowszej wersji szukaj na

Transkrypt

1 KURS MOBILE WEB wersja 1 najnowszej wersji szukaj na Twój serwis w wersji na urządzenia przenośne. Wydane przez: 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. 1

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 PodróŜe Miasta w mobilnym Internecie Strategia mobilna Cele serwisu mobilnego Projektowanie Jak poznać swoich uŝytkowników? Architektura informacji Wytyczne dla mobilnej architektury informacji Click Streams Scenariusze uŝycia (use cases) Persony Prototypowanie Wytyczne dla mobilnego layoutu Najczęstsze prototypy Testowanie Jak przeprowadzić test z uŝytkownikami Ilu uŝytkowników powinno brać udział w testach? RóŜne urządzenia Feature Phones Smart Phones PDA Voice-Only Phones Projektowanie graficzne Projektowanie na róŝne wielkości wyświetlacza Kolory Wiarygodność WdroŜenie Adaptacja Idea One Web Rekomendacje dla serwisów mobilnych Szybkość działania Kodowanie znaków Tytuł strony Tabele Ramki Ilość linków Unikaj przeładowania Access keys Unikaj wprowadzania tekstu Fonty Rozmiar obrazków Alternatywny tekst Zewnętrzne elementy serwisu CięŜar serwisu Nazwa serwisu

3 Testowanie serwisu mobilnego Jak testować Desktop testing ( Quick and Dirty ) Testowanie w emulatorze Walidator Serwisy typu DeviceAnywhere Testowanie w urządzeniu Więcej informacji

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

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

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, % 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 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 6

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

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 ( Gazeta ( WP ( jak i vortali typu Bankier ( Firma Bankier.pl S.A. mobilną wersję swojego serwisu zaprezentowała 20 czerwca Na jego promocję przeznaczy ponad 1,1 mln zł. Serwis 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 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 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ŝ 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 ( 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

9 Serwisy korporacyjne Rysunek 4 - Serwis cloaters.mobi 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, czy serwis WWW. Swoje mobilne strony korporacyjne zbudowały juŝ między innymi ING DiBa ( Neckerman ( BMW ( 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 9

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 ( 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 ( mobilne mikro-blogi ( oraz streaming audio i video ( PodróŜe Rysunek 7 - Serwis itsmy.mobi 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 umoŝliwia rezerwację hosteli w Europie docelowo będzie to doskonałe źródło informacji dla podróŝujących. Serwis pozwoli Ci znaleźć i zarezerwować miejsce w hotelu sieci Hilton w kaŝdym zakątku świata. Rysunek 8 - Serwis hostels.mobi 10

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 ( 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 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 W Polsce powstaje katalog stron mobilnych 11

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 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. Cele uŝytkownika 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. 12

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, 13

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

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). Najczęstsze prototypy Rysunek 12 - Sugerowany layout serwisu mobilnego 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 15

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: 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 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. 16

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 17

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

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

20 Metody adaptacji: SSR (Small Screen Rendering) przeglądarka (jak np. Opera Mini) modyfikuje serwis. Więcej o SSR na 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. 20