fot. © Scanrail - Fotolia.com
fot. © Scanrail – Fotolia.com
Z urządzeń mobilnych korzysta rokrocznie coraz więcej użytkowników. Koniecznością już zatem staje się zaprojektowanie własnej strony mobilnej. Jak jednak tego dokonać, żeby taka strona nie tylko świetnie wyglądała, ale też okazała się funkcjonalna i przyjazna dla naszych klientów czy odbiorców?
Do wyboru mamy dwie drogi: dedykowaną stronę mobilną oraz responsive web design. Podczas, gdy ta druga wygląda identycznie jak nasza strona bazowa, jest ona jednak graficznie dopasowywana do wyświetlacza danego urządzenia w celu uzyskania najlepszego efektu wizualnego, to ta pierwsza w całości zaprojektowana jest od podstaw. Poniżej prezentujemy 7 rad na co należy zwrócić szczególną uwagę.
Nawigacja: dotyk, a nie „klik”
Pierwszym zasadniczym elementem projektowania nowej strony mobilnej jest zrozumienie zasad działania sprzętu, na którym będzie ona wyświetlana. Urządzenia dotykowe obsługuje się zupełnie inaczej niż stacjonarne komputery czy nawet laptopy. Kursory są mniejszy bardziej precyzyjne, tymczasem używając palca musielibyśmy wykonywać skomplikowane gesty, by kliknąć w te same drobne elementy. Warto zatem przemyśleć sposób nawigacji i odpowiednio rozmieścić elementy w naszym menu. Powinniśmy pamiętać także, że należy stosować tylko przewijanie pionowe (lub ewentualnie tylko poziome). Dwukierunkowe przesuwanie strony utrudnia korzystanie z serwisu.
Content: hierarchia treści
Należy szczegółowo przemyśleć, do kogo kierowana jest nasza strona mobilna i kiedy potencjalny jej użytkownik będzie z niej korzystał. Gdy uda nam się to już ustalić, powinno się odpowiednio dobrać treści w serwisie z zachowaniem zasad hierarchii i priorytetów. Czyli przykładowo, jeżeli nasz serwis jest sklepem internetowym na pierwszych pozycjach powinny się znaleźć przyciski umożliwiające przeglądanie produktów i ich zakup. Dopiero w dalszej kolejności informacje o sklepie, o ile w ogóle są konieczne. Z reguły dobiera się łatwe i przystępne treści nie wymagające zbytniej koncentracji czy wysiłku. W zależności od branży opisy powinien zawierać się w granicach wiadomości sms.
Funkcjonalność ograniczona
Zadbaj o to, by użytkownik twojej strony dostawał w pierwszej kolejności to, po co odwiedził twoją stronę i zdobył to w możliwie najłatwiejszy sposób. Każdy piksel ma ogromne znaczenie, trzeba zatem przemyśleć organizację wszystkich elementów na swojej stronie. Strona główna powinna przedstawiać tylko najważniejsze funkcje, jakie oferuje strona, ułożone według użyteczności. Lepiej sprawdza się w takim przypadku płytka nawigacja niż głęboka, aby użytkownik nie pogubił się podczas korzystania ze strony.
Efektywny layout
Kolory powinny być dobrane z odpowiednim kontrastem, tak aby zawartość była czytelna w dzień i w nocy bez przybliżania ekranu. Etykiety powinny być funkcjonalne i intuicyjne w używaniu. Komponenty menu powinny być wielkości opuszka palca, przyjmuje się standardowo około 10 mm i odstęp 2 mm pomiędzy poszczególnym kafelkami. Małe elementy umieszczamy z marginesami w zasięgu kciuka, którym najczęściej obsługujemy urządzenia mobilne. Uruchamianie linków poprzez puszczenie dotyku ochroni przed przypadkowymi kliknięciami.
Drobiazgi, które cieszą
Ułatwiaj użytkownikowi wprowadzanie treści (tylko niezbędnych), tak żeby nie zdążył się rozmyślić podczas próby ich wpisania. Zbieraj zatem tylko niezbędne informacje, korzystaj z autouzupełniania, bo łatwiej coś wybrać z listy niż wpisać. Pamiętaj o takich funkcjach smartfonów jak geolokalizacja czy połącz z numerem lub pobierz aplikację. Dobrze jest także umieścić przycisk „Home” lub logo, jako link do strony domowej, by użytkownik zawsze mógł wrócić na początek jednym kliknięciem.
Testuj i optymalizuj
Sprawdzaj użyteczność i funkcjonowanie strony na różnych urządzeniach mobilnych, bo może ona różnie działać w zależności od systemu czy jakości i wielkości wyświetlacza. Koniecznie należy mieć też na uwadze szybkość ładowania strony. Wszelkie zbędne multimedia, tła obrazkowe i flash (który nie jest obsługiwany przez wszystkie urządzenia!) spowalniają znacząco proces ładowania strony.
