Każdy z nas wie, że przeglądnie stron internetowych na komputerze bardzo różni się od przeglądania stron na telefonach komórkowych. Mamy różne orientacje oraz rozmiary ekranów, używamy kciuków zamiast myszy czy touchpada. Z tego powodu wiele akcji, które chcielibyśmy wykonać na stronie, mogą być trudne lub uciążliwe na telefonie. Osoba, która przegląda naszą stronę może mieć szybki i sprawny telefon. Z kolei może trafić się użytkownik, którego telefon zostanie przeciążony przez naszą witrynę od nadmiaru informacji i elementów, które na niej umieściliśmy. Dlatego podczas projektowania strony internetowej musimy mieć na uwadze to, by spełniała ona oczekiwania użytkowników zarówno desktopowych, jak i mobilnych.
Rozmiar ekranu
Przygotowując stronę internetową trzeba myśleć o niej nie tylko pod kątem atrakcyjnej witryny, która będzie dobrze wyglądała podczas przeglądania jej na komputerze. Równie ważną kwestią jest przygotowanie odpowiedniej wersji dla tych, którzy będą z niej korzystać za pomocą telefonu komórkowego.
- W wersji desktopowej mamy duże pole do popisu. Ilość dostępnego miejsca pozwala nam na dobre rozplanowanie elementów na stronie i dodanie większej ilości szczegółów, które mogą zainteresować odwiedzających. Jednocześnie dzięki temu mamy możliwość by uatrakcyjnić naszą stronę. Dobrym przykładem w tej kwestii jest nawigacja strony. W wersji desktopowej możemy pozwolić sobie na ukazanie całego menu. Zmieści nam się również logo marki. W przypadku sklepów, możemy wygospodarować miejsce na umieszczenie koszyka czy listy życzeń.
- Sytuacja nieco się komplikuje gdy przeglądamy witrynę za pomocą telefonu. Trzeba oszczędzać miejsce na ekranie gdzie to tylko możliwe i wyodrębnić te elementy, które są najważniejsze. W przypadku wersji mobilnej należy zastosować menu rozwijane. Powinno być oznaczone odpowiednią ikonką tak, aby użytkownik widząc ją wiedział, że właśnie tam znajduje się menu. Dzięki takiemu rozwiązaniu oszczędzamy miejsce, a po jednym kliknięciu rozwinie się dostęp do całego menu.
Interakcja
Użytkownicy desktopowi mogą w pełni korzystać z interaktywności za pomocą kursora. Dzięki efektowi hover po najechaniu na wybrany przycisk możemy ustawić zmianę koloru, może zostać wywołana animacja, lub komunikat tekstowy. Możliwości jest bardzo dużo!
W przypadku wersji mobilnych nie poruszamy się po stronie za pomocą kursora. W zamian za to, wykonujemy znaczną ilość gestów za pomocą rąk, a dokładniej – naszych palców. Możemy wybierać coś za pomocą dotyku, możemy przesuwać wybrane elementy, czy wykonywać inne gesty, których wymaga od nas strona.
Pamiętajmy też o tym, że korzystając z telefonu najczęściej używamy kciuka. Dlatego trzeba mieć na uwadze, by ważne elementy klikalne, typu buttony czy ikona menu, były na tyle dopasowane rozmiarowo, by użytkownik nie miał problemu ich dosięgnięciem. W momencie, gdy tego typu elementy będą za małe, osoba korzystająca z naszej strony może mieć problem z ich wybraniem. Uzupełnianie formularza na stronie również nie powinno być zbyt małe. Pola, w które należy wprowadzić dane powinny mieć odpowiedni rozmiar, aby użytkownik nie zniechęcił się w trakcie ich wypełniania.
Architektura informacji
Treści na komputerze mogą być wyświetlane w różny sposób. Możemy zaprojektować stronę w formacie wielokolumnowym, dzięki czemu mamy dużą elastyczność jeśli chodzi o układ. Pozwala nam to na odpowiednie i optymalne pozycjonowanie elementów interfejsu użytkownika, tekstów i elementów graficznych.
W przypadku telefonów sprawa wygląda nieco inaczej. Strony w wersji mobilnej scrollujemy, dlatego wszystkie elementy znajdują się jeden pod drugim. Ogranicza nas też wąski ekran. Przez to możemy mieć problem z poprawnym rozmieszczeniem poszczególnych detali oraz ryzykujemy, że strona będzie zbyt długa. Żmudne scrollowanie całej strony w poszukiwaniu interesującej nas treści z pewnością wywoła negatywne odczucia u odbiorcy. Dlatego warto przemyśleć, jak można to poprawić.
Zdjęcia
Zdjęcia i elementy graficzne powinny być odpowiednio skompresowane – duży rozmiar może zdominować stronę, utrudniając odnalezienie istotnych informacji. Z kolei waga zdjęcia może spowolnić naszą stronę, budując tym samym frustrację w użytkowniku. Należy także uważać na wszelkie wyskakujące okna, popupy czy powiadomienia. Potencjalny klient wchodząc na naszą stronę nie może być od razu atakowany serią wyskakujących okien z promocjami, czy newsletterami. Jeżeli już zdecydujemy się na takie rozwiązania, dajmy mu chwilę. Niech wstępnie zapoznana się z naszą stroną, oswoi z szatą graficzną, a dopiero później zdecyduje, czy chce zapisać się do newslettera.
Wersja desktopowa i mobilna – podsumowanie
Nie da się ukryć, że odpowiednie rozmieszczenie elementów i treści na stronie może być kluczem do sukcesu. Warto tutaj zagłębić się w podstawy projektowania UX (User Experience), ponieważ to właśnie użytkownik jest najważniejszy. Projektujemy strony internetowe po to, by były naszą wizytówką, by zachęcić klienta do skorzystania z naszych usług i do powrotu na naszą stronę. Dlatego musimy dać mu możliwość intuicyjnego, sprawnego i przyjemnego korzystania z naszej witryny. Zarówno na komputerze, jak i na telefonie komórkowym. Jego potrzeby i oczekiwania powinny być dla nas jedną z najbardziej istotnych kwestii.
