Konferencje

Błędy popełniane podczas projektowania RWD, czyli kilka słów o anatomii

RWD to coraz częściej stosowane rozwiązanie, jeśli chodzi o projektowanie stron z myślą o urządzeniach mobilnych. Zwłaszcza w świetle ostatnich zmian pozycjonowania Google, które przestało pozycjonować strony niedostosowane do urządzeń mobilnych, warto wzbogacać swoją wiedzę na ten temat. O zaletach rozwiązania RWD pisaliśmy wielokrotnie, jednak samo stworzenie strony reponsywnej nie wystarczy – trzeba jeszcze zrobić ją dobrze. W tym celu trzeba dobrze poznać ograniczenia użytkowników, aby następnie możliwie najlepiej zadbać o UX strony.
Główną pułapką czyhającą na strony RWD jest problem zmieniających się rozmiarów ekranów smartfonów, które coraz bardziej zmierzają ku phabletom. W latach 2007-2011 średni rozmiar ekranu zwiększył się o pół cala, natomiast w przeciągu ostatnich 3 lat doszło do znacznie bardziej dynamicznych zmian, które sprawiły, że telefony z przeciętnego rozmiaru ekranu 3,5 cala rozrosły się do ponad pięcio- i sześciowcalowych urządzeń. Z jednej strony pozwala to na zmieszczenie większej ilości treści na ekranach, z drugiej – anatomiczne ograniczenia w postaci rozmiaru dłoni i długości palców powodują, że duże ekrany niosą ze sobą więcej „martwych punktów” na ekranach urządzeń mobilnych.
Mimo, iż coraz częściej „tapujemy” za pomocą palców wskazujących, aniżeli kciuka, to jednak nadal w wielu sytuacjach wolimy korzystać z ze smartfona jedną ręką, co wymaga nieraz nie lada akrobacji. Projektanci iPhone’ów przez wiele lat – aż do modelu iPhone 5 – przestrzegali ograniczeń anatomicznych ludzkiej dłoni, a iPhone’y leżały w dłoniach niemal idealnie.  Kciuk użytkownika mógł dość swobodnie dotrzeć w niemal każdy punkt 3,5 i 4-calowego ekranu. Wraz ze wzrostem rozmiaru ekranów, rośnie dyskomfort użytkowników, gdzie obsługa telefonu jedną ręką robi się coraz bardziej problematyczna. Na obrazku poniżej zaznaczone zostały obszary, w które użytkownik może swobodnie dotrzeć z użyciem jednej ręki (kolor zielony), których może dotknąć nieco nadwyrężając kciuk (kolor żółty) oraz martwe punkty, których nie sposób swobodnie dotknąć przy użyciu jednej ręki (obszar pomarańczowy).
thumb
Znamy już masę zalet RWD – wygląd strony w niemal idealny sposób dostosowany do każdego rozmiaru ekranu i wyświetlanie jedynie niezbędnych funkcjonalności w czytelny sposób. Teraz warto zadbać również o możliwie najswobodniejszą i najwygodniejszą nawigację po stronie responsywnej, z myślą o średniej wielkości ekranach phabletów. Projektując rozwiązania RWD trzeba ciągle mieć na uwadze martwe strefy, będące poza zasięgiem kciuka. Jak to zrobić?

Umieść najczęściej używane funkcje w łatwo dostępnym miejscu

Przyciski nawigacji oraz CTA (call to action) powinny znajdować się z dala od górnego lewego oraz dolnego prawego rogu ekranu, albowiem te dwa miejsca są najtrudniej dostępne podczas obsługi smartfonów. W tych miejscach warto umieścić przyciski takie jak wyjście z koszyka zakupów czy logo strony, pozwalające wrócić do ekranu głównego.

Rozsądny wybór etykiet

We wszelkiego typu formularzach, warto rozważyć użycie etykiet wewnątrz pól formularza lub też pod nim. Umieszczenie etykiet wewnątrz pól formularza pozwoli zaoszczędzić miejsce, jednak może być mylące dla użytkowników zmuszonych do wypełnienia bardziej rozbudowanych formularzy. Wobec tego w przypadku prostych formularzy, gdzie użytkownik pytany jest np. o hasło i e-mail, warto wykorzystać etykiety wewnątrz pól. W przypadku bardziej skomplikowanych formularzy, warto jednak umieszczać podpisy bezpośrednio pod wypełnianymi polami.

Gdy użytkownik chce dokonać zakupu, nie rozpraszaj go

Dość oczywiste, prawda? Kiedy użytkownik chce dokonać zakupu za pośrednictwem strony RWD, warto zminimalizować wyświetlane w tym momencie przyciski nawigacji czy inne rozpraszające elementy. Kupowanie na mobile ciągle nie jest jeszcze powszechne, a współczynnik porzuceń koszyka jest bardzo wysoki. Dlatego też warto zadbać o to, aby jak najlepiej pomóc użytkownikowi w zakupie – umożliwić jak najszybszy czas ładowania podstron, zminimalizować ilość podstron w procesie zakupowym, jak i informacji podawanych na ekranie. Reklamy, odniesienia do innych produktów, linki do social mediów – to wszystko jest zbędne. Jeśli w celu uproszczenia koszyka należałoby stworzyć koszyk zakupowy w zupełnie innej konwencji, niż cała reszta strony RWD, warto zdecydować się na tę niekonsekwencję.

Testuj, optymalizuj, powtórz

Aby strona działała sprawnie i spełniała oczekiwania użytkowników, trzeba o nią nieustannie dbać. Przeprowadzanie testów A/B i analiz, porównywanie zachowań użytkowników desktopowych i mobilnych, a następnie dostosowywanie strony do ich potrzeb stanowi klucz do sukcesu. Ten proces w zasadzie nigdy nie powinien się skończyć, jeśli chcemy zadbać o możliwie najlepszą w odbiorze stronę RWD.
Nie da się ukryć, że coraz większe rozmiary ekranów powodują coraz więcej zmartwień dla projektantów stron RWD oraz generują nowe problemy w postaci trudniejszej nawigacji po stronie. Jednak znając zasięg palców użytkownika, jego przyzwyczajenia i możliwości, nie tak trudno dostrzec słabe punkty RWD a następnie je naprawić, aby strona cieszyła się sympatią użytkowników, a jej właściciel – gronem zadowolonych klientów.
Źródło:
https://www.linkedin.com/pulse/were-doing-responsive-web-wrong-we-can-fix-jason-a-howie
Zdjęcie:
awesomephant © Więcej zdjęć na Fotolia.pl

Udostępnij
Zobacz także