Nie bez przyczyny rok 2011 został okrzyknięty rokiem „mobilnego Internetu”. W samych Stanach Zjednoczonych ponad 91 mln użytkowników łączy się z siecią za pomocą urządzeń mobilnych. W Polsce ten pułap jest równie wysoki jak za Oceanem. Zdaniem Ericsson Consumer użytkownicy mobilnego internetu na rynku krajowym stanowią 55% wszystkich internautów. To siła, której nie można bagatelizować.
Z artykułu dowiesz się m.in.:
- jakie są różnice w podejściu usability pomiędzy stroną desktopową i mobilną,
- jakie cele stawiają sobie mobilni użytkownicy internetu,
- jakie cechy powinna mieć użyteczna strona mobilna,
- jak projektować strony w wersji lajt, które zapewnią pozytywne user experience.
Ze stronami mobilnymi jest tak jak z ludźmi – liczy się pierwsze wrażenie. Im bardziej pozytywne ono będzie, tym większe prawdopodobieństwo, że uda się nawiązać trwałą relację z użytkownikiem. Dlatego też w dobie mobilnego internetu pojęcie użyteczności nabiera nowego znaczenia. Nie chodzi już bowiem o samo skompresowanie strony www do rozmiarów wyświetlaczy telefonów komórkowych, lecz o stworzenie nowej jakości dostosowanej do rosnących wymagań świadomych swoich potrzeb użytkowników. Na czym polegają główne różnice w podejściu do problemu usability w przypadku strony desktopowej i mobilnej?
Różnice pomiędzy stroną desktopową i mobilną
Zmiany w definiowaniu usability wynikają z różnic, jakie dzielą terminale mobilne od tradycyjnych „czytników” informacji, takich jak laptopy czy komputery stacjonarne. Okazało się bowiem, że skompresowanie strony czy usunięcie z niej grafik musi iść w parze ze zmianą zasad projektowych, zarówno w zakresie architektury informacji, jak również budowy szaty graficznej. Z przeprowadzonych przez Jakoba Nielsena badań wynika, że blisko 1/3 użytkowników ma problemy z obsługą mobilnych wersji stron www, podczas gdy w przypadku witryn desktopowych ten wskaźnik wynosi zaledwie 15%.
Projektując strony mobilne, należy wziąć pod uwagę wiele aspektów, które w przypadku witryn desktopowych będą miały drugorzędne lub marginalne znaczenie. Podstawowe ograniczenia, takie jak stosunkowo niewielka przekątna wyświetlacza oraz niski transfer danych, stanowią wyzwanie dla deweloperów, którzy muszą przygotować stronę prezentującą najistotniejsze informacje w wygodnej i czytelnej dla użytkownika formie.
Warto mieć również na uwadze różne cele, jakimi kierują się użytkownicy takiej www. To, co jest istotne dla internautów korzystających z tradycyjnych urządzeń, może mieć marginalne znaczenie dla posiadaczy smatrfonów. Badania wskazują, że korzystając z internetu, użytkownik mobilny poszukuje konkretnych i czytelnych danych i informacji, pozostawiając w tyle takie aspekty, jak warstwa estetyczna czy rozrywkowa witryny. Kontekst użycia, jakim w tym wypadku jest chęć zapoznania się z najświeższymi, skrótowymi informacjami, determinuje funkcjonalność strony. Użytkownik mobilny z reguły nie ma potrzeby wnikliwego analizowania artykułów, porównywania ofert czy dokładnego przeglądania galerii zdjęciowej produktu. Strona w wersji lajt nie powinna też być kopią na siłę dostosowywaną do rozdzielczości telefonów komórkowych. Nawigacja przy pomocy precyzyjnie działającej myszki i klawiatury znacznie różni się od tej dokonywanej za pomocą np. ekranów dotykowych czy dżojstików. Nie każdą użyteczną dla użytkowników komputerów stacjonarnych witrynę da się w prosty sposób „zaadaptować” do wersji mobilnej.
Może się więc zdarzyć, że podczas identyfikacji potrzeb użytkowników mobilnych powstanie projekt strony w wersji lajt, który będzie bardzo odbiegał wyglądem od szaty graficznej i architektury informacji tradycyjnej strony WWW. Często oznacza to rezygnację lub redukcję key visuali stosowanych przez daną markę. Zmiana ta, choć dla niektórych trudna do zaakceptowania, ma na celu zwiększenie wygody użytkowników i czytelności serwisu.
Połowicznym rozwiązaniem okazuje się natomiast stosowanie programów, które kompresują tradycyjną stronę internetową do formatów wyświetlaczy urządzeń mobilnych, jak np. Opera Mini. W tym przypadku niejednokrotnie strona staje się mało przejrzysta, a niektóre jej elementy mogą zmienić rozmieszczenie lub w ogóle się nie wyświetlać. Na dodatek poszczególne urządzenia różnią się rozmiarami wyświetlaczy, sposobem nawigacji czy systemem operacyjnym, co daje użytkownikom różniące się między sobą możliwości i podejścia interfejsowe.
Co należy brać pod uwagę, projektując stronę mobilną?
Podstawowym priorytetem jest jednak nadal wydajność transferu. Chociaż oferta dostawców mobilnego internetu stale się powiększa, to jednak wciąż transfer danych będzie stanowił główną oś, wokół której deweloperzy projektujący stronę mobilną będą poszukiwać najbardziej optymalnych rozwiązań. Okazuje się bowiem, że zagadnienie wygody użytkowania zajmuje w świadomości mobilnego internauty znacznie wyższą pozycję niż względy estetyczne. Bo i cóż począć ze stroną, która chociaż zachwyci grafiką, to będzie się długo ładowała i będzie przysparzać wielu problemów z nawigacją?
W związku z tym w podejściu do użyteczności stron mobilnych główne zmiany dotyczą w szczególności ilości publikowanej treści, jak również hierarchii zamieszczanych na stronie informacji. Oznacza to, że całość witryny powinna być widoczna przy wykonaniu jak najmniejszej liczby przewinięć ekranu. W praktyce pociąga to za sobą słabszą ekspozycję niektórych promowanych na stronie desktopowej treści kosztem innych, które są z kolei istotne dla użytkowników mobilnych. Zmiany te skutkują również odmiennymi mechanizmami nawigacji takiego serwisu, często powodując redukcję zakładek prezentowanych w menu czy na topie www.
Menu
W przypadku stron mobilnych zdecydowanie większą popularnością cieszą się ścieżki nawigacji, paski menu oraz przyciski opcji niż mniej wygodne, lecz nadal popularne w przypadku stron desktopowych, otwarte pola tekstowe. Chociaż perspektywa rozwijanego menu brzmi atrakcyjnie (pozwala przecież na lepsze „zagospodarowanie” przestrzeni), to w przypadku użytkowników mobilnych rzadko cieszy się ich uznaniem. Problem stanowi kłopotliwa nawigacja – użytkownik musi precyzyjnie manewrować, by wybrać interesującą go opcję, a nierzadko menu zwija się lub zamyka, gdy mobilny internauta przypadkowo oderwie palec od ekranu urządzenia. Dlatego zdecydowanie lepiej jest projektować menu w formie ścieżki nawigacji, która pozwala wyświetlić listę dostępnych opcji, oraz przesuwanie, przeciąganie i wybieranie elementów widocznych na ekranie. Równie dobrze sprawdzą się duże, czytelne przyciski. Warto jednak mieć na uwadze, że zmuszają one użytkownika do wykonania większej liczby „kliknięć” w poszukiwaniu pożądanej informacji.
Nie mniej ważna jest architektura wyszukiwarki na stronie mobilnej. Dobrze zaprojektowana ma niebagatelne znaczenie w przypadku serwisów czy sklepów internetowych, ponieważ pozwala użytkownikowi szybko dotrzeć do konkretnego newsa lub produktu. Moduł ten warto wyposażyć w opcję automatycznego rozszerzania, tak aby okno formularza wypełniało większą część ekranu. Dzięki temu użytkownik dokładnie widzi, jakie informacje wpisuje, zaś dodatkowe przyciski „szukaj”, „następny”, „poprzedni” umieszczone pod paskiem wyszukiwarki usprawniają poruszanie się po stronie i ułatwiają uzupełnienie formularza.
Projektując strony mobilne, warto wziąć też pod uwagę systemy operacyjne, z których korzystają internauci. Dla przykładu: w przypadku platformy Android stosowanie automatycznie rozszerzających się elementów może prowadzić do znikania niektórych etykiet lub paska menu, co może okazać się kłopotliwe w przypadku dalszej nawigacji strony.
Kontent
To oczywiste, że ładna i ciekawa grafika strony internetowej przyciąga wzrok. Jednak użytkownik mobilny zdecydowanie większy nacisk kładzie na wygodę jej obsługi. O trwałości relacji decydowała będzie więc użyteczność oraz to, czy dana aplikacja będzie wygodna w obsłudze. Użytkownik szybko zniechęci się, jeśli oprogramowanie będzie powoli się ładowało, miało przestoje lub będzie zawierało błędy.
Chociaż nadal brakuje jednoznacznych standardów dotyczących użyteczności stron mobilnych, to można jednak wskazać kilka podstawowych cech, jakimi powinny charakteryzować się witryny dedykowane dla użytkowników smartfonów czy tabletów. Unikanie nadmiaru grafik czy elementów pełniących funkcje typowo estetyczne gwarantuje, że strona mobilna będzie szybciej się wczytywała, zaś transfer nie będzie zanadto obciążony. Dotyczy to w szczególności zdjęć lub galerii produktowych, a także elementów flashowych czy JavaScript.
Strony mobilne można dodatkowo wyposażyć w aplikacje, które rzadko stosowane są w przypadku witryn desktopowych. Moduł geolokalizacji GPS pozwala np. na identyfikowanie miejsc (restauracji, kawiarni, banków, stacji benzynowych) znajdujących się w najbliższej okolicy użytkownika. Inne popularne, choć kosztowne rozwiązanie to wdrażanie modułów, które mają funkcję rozpoznawania urządzeń i dzięki temu dostosowują automatycznie rodzaj strony do wyświetlacza urządzenia danego użytkownika.
User experience
Kładąc szczególny nacisk na user experience, korzystniej jest, jeżeli interakcja użytkownika z daną aplikacją zwiększa jego świadomość, rozpoznawalność i zaufanie do marki. Na tej drodze możliwe jest budowanie długotrwałych i pozytywnych relacji opartych na lojalności, co ma niebagatelne znaczenie w przypadku sklepów internetowych. Umiejętne stosowanie key visuali, elementów grafiki, kolorystyki oraz architektury treści pozwoli osiągnąć te cele bez szkody dla założeń użyteczności witryny.
Takim przykładem jest statyczne menu w formie paska z umiejscowionym na nim logo, które zawsze znajduje się u góry, niezależnie od liczby przewinięć ekranu wykonanych przez użytkownika. Nieco inne rozwiązanie warto zaproponować właścicielom sklepów internetowych. Tutaj – podobnie jak w świecie rzeczywistym – kupujący wyznacza sobie dwa podstawowe cele: znaleźć interesujący go produkt i kupić go po jak najkorzystniejszych warunkach. Dlatego stronę mobilną wirtualnych sklepów warto „podzielić” na dwa funkcjonalne obszary. Po lewej stronie ekranu dobrze jest umiejscowić elementy związane z wyszukiwaniem przedmiotów: katalog produktów, minigalerię obrazkową, wyszukiwarkę wraz z opcjami wyszukiwania, listę powiązanych produktów, itp. Prawą stronę powinny natomiast zajmować informacje związane już z konkretnym przedmiotem oraz warunkami jego zakupu – opis produktu, zdjęcie, cena, forma i sposób dostawy oraz płatności.
Podsumowanie
Problematyka usability w przypadku urządzeń mobilnych nadal ewoluuje. To, co jeszcze kilka lat temu pozostawało w sferze marzeń, dziś staje się standardem. Chociaż zasady projektowania stron mobilnych i desktopowych różnią się od siebie, to nie zmieniła się podstawowa zasada stanowiąca fundament usability. W obu przypadkach na pierwszym miejscu stawia się przede wszystkim wygodę i zadowolenie użytkowników.
AUTORSKI ZESTAW ZASAD USABILITY
Rosnąca popularność smartfonów również na polskim rynku sprawia, że twórcy i projektanci stron internetowych nie mogą ignorować mobilnego internetu. Chociaż nadal nie powstał żaden obowiązujący kanon reguł mających zastosowanie w przypadku stron mobilnych, to jednak można wskazać kilka podstawowych trendów, którymi należy się kierować, przygotowując stronę dla użytkowników urządzeń mobilnych.
- Rozdzielczość
Chociaż na rynku spotkać można wiele urządzeń z dostępem do internetu, praktyka pokazuje, że najwięcej mobilnych internautów wywodzi się z grona osób wykorzystujących urządzenia z przekątną ekranu nie mniejszą niż 4,3 cala. Posiadacze standardowych komórek stanowią zdecydowaną mniejszość spośród użytkowników mobilnych, zaś górę biorą właściciele smartfonów z ekranami dotykowymi. Dlatego też wersja mobilna danej witryny powinna być w szczególności dostosowana pod względem architektury treści oraz układu elementów właśnie pod kątem użytkowników tego typu urządzeń.
- Dostosowanie do przeglądarki
Każdy z systemów operacyjnych może w inny sposób wyświetlić witrynę. Dla przykładu: Android ma własną przeglądarkę treści, co jednak nie wyklucza możliwości korzystania na nim z Opery Mini czy Firefoksa Mobile. Dlatego też strony mobilne należy tworzyć i testować przy wykorzystaniu progresywnych przeglądarek internetowych, które niejednokrotnie „samodzielnie” kompresują stronę do rozmiarów wyświetlacza telefonu. Wiele jednak zależy również od projektu danej strony. Dla przykładu: mobilna strona onet.pl (http://m.onet.pl) ma ustawioną stałą maksymalną szerokość. Ale na mniejszym ekranie ona się zmieni i dopasuje do rozmiaru wyświetlacza.
- Duże przyciski
Internauta mobilny to w wysokim stopniu prawdopodobieństwa posiadacz telefonu z ekranem dotykowym. By ułatwić mu nawigację, należy stosować duże przyciski i nie umieszczać ich w grupach, lecz z zachowaniem pewnych odstępów. Dzięki temu możliwe będzie precyzyjne wybranie pożądanej przez użytkownika opcji.
- Ścieżki nawigacji i ścieżki menu
W przypadku złożonych serwisów oraz sklepów internetowych najlepszym rozwiązaniem jest zastosowanie ścieżek menu. Pozwala to na szybszą nawigację i stanowi niejako nawiązanie do zasady „3 kliknięć” obowiązującej podczas projektowania stron desktopowych. Ścieżka pozwala na szybsze przeglądanie treści, łatwiejsze odnajdywanie informacji oraz zastępuje przycisk „wstecz”.
- Architektura informacji
Układ informacji i elementów na stronie mobilnej często pociąga za sobą redukcję kolumn do jednego „strumienia” informacji. Większość telefonów ma ekrany pionowe, więc rzadko kiedy wskazane jest zastosowanie więcej niż jednej kolumny treści.
- Rezygnacja z „ozdobników”
Dla użytkowników mobilnych wciąż poważną barierę stanowi ograniczony transfer danych. By strona ładowała się szybko, a użytkownik nie był narażony na przeciążenie limitu transferu, korzystniej jest zrezygnować z nadmiernej grafiki przy jednoczesnym zachowaniu estetyki, np. ograniczając „ozdobniki” do dominującego key visuala, zaś treść modyfikując tak, by odnosiła się ona tylko do najistotniejszych newsów.
- Rezygnacja z elementów flash i JavaScript
Stanowią one problem dwojakiego rodzaju: po pierwsze, nadmiernie obciążają transfer, po drugie – nie zawsze będą mogły się wyświetlić. Warto jednak zwrócić uwagę na nowe trendy panujące w tym segmencie „mobilności internetowej”. Dla przykładu: dotychczas strony w Operze Mini ładowane były dopiero po całkowitym przesłaniu danych na urządzenie, teraz są ładowane partiami – tak jak to się dzieje w wersji desktopowej. Rozwiązanie to zdecydowanie przyśpiesza – albo przynajmniej sprawia takie wrażenie – ładowanie się stron. Ma to szczególne znaczenie przy grafikach, które ładowane są w niższej jakości, przez co są znacznie „lżejsze”.
Autor: Urszula Holik, marketing community manager; Michał Chołuj, chief executive officer, Netface netface.pl
Artykuł pochodzi z magazynu MARKETER+.
Chcesz mieć dostęp do eksperckiej wiedzy? Zamów prenumeratę na www.marketerplus.pl
