Usability & E-marketing blog

Dobre praktyki projektowania na urządzenia mobilne – przykładowa aplikacja część 1

Autor: Wojciech Chojnacki. Dodano dnia 22/04/09

Z biegiem ostatnich lat, nowoczesne telefony komórkowe coraz bardziej zaczynają przypominać poczciwe PC-ty. Nadal jednak różnica między nimi widoczna jest zwykle przy pierwszym rzucie oka, a na pewno przy pierwszym dotknięciu palca. Eksploracja Internetu przy pomocy przycisków telefonu to zupełnie inne doznanie niż surfowanie z użyciem myszki i 19-calowego monitora. Czy gorsze? Niekoniecznie, pod warunkiem, że autorzy serwisów pamiętali o użytkownikach mobilnych.

Zestaw najlepszych praktyk dla projektowania mobilnego przedstawiło niedawno W3C Mobile Web Initiative. Spróbujmy je prześledzić z punktu widzenia twórcy interfejsu użytkownika na przykładzie. Będzie nim fragment aplikacji mobilnej – proces dokonywania przelewu między własnymi kontami w banku, przedstawiony w postaci interaktywnego projektu funkcjonalnego.

1. Projektuj dla wielu urządzeń

Ta dość ogólna zasada nawiązuje do idei „One Web”. Zgodnie z nią, te same treści mogą i powinny być przetwarzane tak, aby dostosować swój sposób prezentacji do urządzeń, z których mogą korzystać odbiorcy. Przez sposób prezentacji możemy rozumieć nie tylko zabiegi graficzne, ale również koncepcję i sposób działania UI. Jest to więc niejako przyzwolenie na realizację dedykowanego „projektowania dla urządzeń mobilnych” – o ile znaczenie serwisu powinno zostać to samo, nie znaczy to że mamy wykorzystać identyczne środki jej przedstawienia.

Jednym z podstawowych kryteriów jest tu rozdzielczość – obecnie za bezpieczne minimum dla urządzeń mobilnych można uznać 240px ( wartość sugerowana przez praktyków). Strony naszego serwisu powinny więc wyświetlać się w sposób zrozumiały dla urządzeń mobilnych o takiej lub większej rozdzielczości.

Rysunek 1 Sugerowana rozdzielczość ekranu na urządzenia mobilne

2. Opieraj się na standardach

Rysunek 2 Opieramy się na standardach i używamy CSS

Przypominanie o standardach www może wydawać się truizmem, jednak w sytuacji, gdy zapominają o nich twórcy nawet serwisów internetowych dla komputerów PC, temat pozostaje aktualny. Standardy nie gwarantują, że każda przeglądarka odtworzy stronę poprawnie, ale są pewnym wspólnym wzorcem, do którego silniki poszczególnych przeglądarek dążą. Pamiętajmy, że rynek PC jest zdominowany tylko przez kilka najważniejszych przeglądarek. Segmentacja w przypadku urządzeń mobilnych jest dużo większa i projektowanie „pod konkretne przeglądarki” wymagać może więcej pracy niż jest opłacalne.

3. Unikaj ryzykownych praktyk, uważaj na ograniczenia urządzeń

Czy warto projektować serwis dla komputerów PC, który do działania wymaga bezwzględnie np. wtyczki Shockwave? Rzadko kiedy. Do tego serwis, który stworzymy, trudno będzie nazwać „szeroko dostępnym”. W projektowaniu dla urządzeń mobilnych mamy do czynienia z podobnym problemem, z tym że dostępność może ograniczyć nawet zbytnie opieranie się o skrypty, grafiki czy (o zgrozo!) style CSS. Nie znaczy to, że tych elementów w ogóle nie powinniśmy stosować (z wyjątkiem rzadko akceptowanych skryptów). Pamiętajmy jednak o tym, żeby w trakcie projektowania interfejsu użytkownika uwzględnić również użytkownika, którego urządzenie jest w stanie przeczytać wyłącznie tekst nieopisany stylem.

Rysunek 3 Mało przyjemny wygląd, ale nadal czytelna budowa strony

4. Optymalizuj nawigację

Ważną umiejętnością przy projektowaniu interfejsu użytkownika jest zdolność do usuwania mniej ważnych elementów na korzyść kluczowych. W projektowaniu na urządzenia mobilne takie działanie jest wręcz nieodzowne.

Rysunek 4 Najmniej ważne na końcu

W naszej przykładowej aplikacji, łatwo zauważalną różnicą w porównaniu ze standardowymi serwisami jest znaczne okrojenie stałych elementów nawigacji. Podczas, gdy całkowita eliminacja tego elementu byłaby dużym błędem, zostaje on:

• sprowadzony do postaci ścieżki nawigacyjnej zamiast pełnego paska menu,
• przeniesiony na sam koniec strony zamiast typowego umiejscowienia w jej nagłówku.

Powód jest prosty – w przypadku urządzeń mobilnych, z których korzysta się przy pomocy klawiszy, a nie wskaźnika, nawigacja opiera się na przeskakiwaniu po kolejnych aktywnych elementach strony, podobnie jak w przeglądarce na komputerze PC gdy użyjemy klawisza „Tab”. Dwa wnioski jakie z tego płyną:

• zbyt duża liczba elementów nawigacji będzie bardzo niewygodna,
• im określony element jest ważniejszy dla danego ekranu serwisu, tym wyżej powinien zostać umieszczony.

5. Sprawdź grafiki i kolory

Rysunek 5 Dobry kontrast ma dużo większe znaczenie niż wymyślne efekty graficzne

W mobilnym Internecie sprawdza się zasada, że grafika nie powinna być podstawowym nośnikiem informacji, a jedynie pewnym uzupełnieniem. Żeby zwiększyć szansę prawidłowego odczytu stron, należy zadbać o to by rozmiar jak i jakość grafik była dostosowana do urządzeń odbiorców. W mobilnym Internecie nawet użycie obrazka jako tła strony może poskutkować w braku czytelności. W przypadku wątpliwości lepiej zachować skrajny nawet minimalizm, niż jednym „upiększeniem” wyeliminować znaczną grupę odbiorców.

Druga część artykułu pojawi się w przyszłym tygodniu.

Przeczytaj też:

• Dobre praktyki projektowania na urządzenia mobilne – przykładowa aplikacja część 2
• Użyteczne rozwiązania dla projektantów aplikacji webowych
• Przegląd sposobów testowania serwisów oraz aplikacji mobilnych
• GUI w m-commerce – dobre praktyki, rodzące się standardy
• Symetria o użyteczności w raporcie Interaktywnie.com