Jak stworzyć użyteczną stronę mobilną?

UX w sklepie internetowym
Ekomercyjnie

eKomercyjnie.pl

Autorką poniższego artykułu jest Urszula Holik – marketing communication specjalist w firmie NETFACE.

Dziś trudno sobie wyobrazić, by popularne strony czy aplikacje webowe nie były kompatybilne z urządzeniami przenośnymi. Liczba użytkowników iPhona i Androida wciąż rośnie, zaś smartfony powoli stają się urządzeniami, za pomocą których wielu Internautów korzysta z zasobów sieci. Dobrze zaprojektowana strona desktopowa będzie się wyświetlała na komórkach bez konieczności rezygnacji z możliwości XHTML czy JavaScript.

Już dziś rynek urządzeń mobilnych, stanowi dla wielu osób główny kanał dystrybucji informacji, reklam i usług elektronicznych. W parze z tym zjawiskiem idzie stopniowy wzrost użytkowników Internetu, którzy łączą się z siecią za pomocą urządzeń mobilnych. W 2010 roku producenci Opery Mini odnotowali 118% wzrost ilości odwiedzonych stron internetowych za pośrednictwem urządzeń mobilnych. Nie trudno się domyślić, że ten trend w kolejnych latach będzie miał tendencje zwyżkową.

Dwa podstawowe parametry, jakie mają dla mobilnych Internautów kluczowe znaczenie to szybki dostęp do informacji i wygodna obsługa. Użytkownicy, którzy korzystają z urządzeń mobilnych, zazwyczaj nie mają czasu, ani chęci na żmudne przeszukiwanie zasobów sieci, czy kilkakrotne przewijanie strony w celu znalezienia interesujących ich informacji. Dlatego też strony na smartfony muszą cechować się maksymalną prostotą, często kosztem rezygnacji z rozbudowanej grafiki, intuicyjną nawigacją i szybkim transferem danych.

Z danych producentów opera mini wynika, że polscy internauci najczęściej korzystają z zasobów sieci łącząc się z nią za pomocą urządzeń mobilnych w celu zapoznania się z wiadomościami (sportem, informacjami, pogodą), znalezienia adresu lub nr telefonu, sprawdzenia poczty i odwiedzenia portali społecznościowych, zobaczenia rozkładu jazdy, czy znalezienia informacji turystycznych.

Dostosowanie stron desktopowych do potrzeb urządzeń mobilnych możliwe jest na kilka sposobów – wyjaśnia Michał Chołuj z Netface. Pierwszym jest technologia small screen rendering, pozwalająca na automatycznym formatowaniu i zmniejszaniu strony do potrzeb mobilnej przeglądarki. Kolejną metodą jest formatowanie kodu HTML, w taki sposób, że jest on upraszczany i wyświetlany w ograniczonym zakresie. Technologia stylesheets pozwala na opracowanie osobnego arkusza stylów CSS, uruchamianego automatycznie w wypadku wykrycia urządzenia mobilnego. Te metody polegają na formatowaniu stron do potrzeb i parametrów urządzeń mobilnych, co może prowadzić do pojawienia się błędów. Zdecydowanie lepszymi rozwiązaniami są zaprojektowanie od podstaw serwisu mobilnego zgodnie z wytycznymi stron na urządzenia przenośne lub tworzenie tzw. serwisów uniwersalnych, które prezentują treść stron dektopowych i mobilnych w identyczny sposób.

Do najczęstszych celów, jakie spełniać ma strona mobilna należą stworzenie nowego kanału dystrybucji informacji lub produktów, budowanie społeczności wokół maki i innowacyjnego image firmy. By jednak dobrze zaprojektować stronę czy aplikację mobilną należy połączyć powyższe cele z potrzebami użytkownika – wygodą użytkowania, określeniem struktury i hierarchii treści, określeniu zasad nawigacji. Szczególnie ważne jest stworzenie prostej, przejrzystej i czytelnej struktury serwisu, a w tym zaprojektowanie przemyślanej architektury informacji. W tym celu niekiedy tworzy się prototypy serwisu, które pozwalają na określenie tzw Click Streams (ścieżek informacji, jakimi „poruszają się” użytkownicy po serwisie) oraz zidentyfikowanie problemów jakie mogą wystąpić podczas korzystania z serwisu.

To co różni strony mobilne od desktopowych to ich ciężar – zazwyczaj ok. 40 kB, rozdzielczość (zazwyczaj max 200 x 250 px). Takie strony zazwyczaj tworzy się w XHTML – Basic Profile. Najważniejsze elementy serwisów mobilnych to:

  • Nagłówek z informacją o ścieżce kliknięć i miejscu, w którym znajduje się użytkownik. Linki na ścieżce kliknięć powinny pozwalać na powrót do poprzedniej podstrony;
  • Linia pionowa po lewej stronie – ikony prowadzące do podstron serwisu ikonom, można również nadać wartość od 1 – 9, dzięki czemu, każdy z klawiszy numerycznych telefonu może bezpośrednio prowadzić do kolejnej podstrony serwisu – tzw. access key.
  • W środku treść główna strony, bez nadmiaru grafiki o odpowiednim kontraście, który pozwoli na zapoznanie się z informacją, nawet pod światło.
  • Stopka strony z danymi teleadresowymi.
  • Skrócony adres URL oraz krótkie tytuły dla poszczególnych podstron serwisu.
  • Unikanie stosowania tabel definiowanych w px (w przypadku konieczności ich wstawienia lepiej podać wymiary procentowe), elementów we flashu, ramek,
  • Unikanie obrazków, animacji i grafik na początku strony

Reklama

Pozycjonowanie stron internetowych

Przeczytaj również:

Artykuł
25.09.2023

Nagrania wizyt. Jak czytać dane o zachowaniach?

Kamila Kotowska

Kamila Kotowska

Head of marketing
cux.io

Artykuł
24.07.2023

Błędy pogarszające komunikację marek. Jak ich unikać?

Marcin Cichocki

Marcin Cichocki

CEO
agencjakuznia.pl

Ekomercyjni

Nowa, zamknięta grupa na facebooku. Dużo ekomercyjnej wiedzy, networking, pomoc. Tu się poznasz na e-commerce.

Zobacz grupę