Strona główna » Wzorce projektowe

Pozwól mi kliknąć, czyli o rozmiarach w interfejsach mobilnych

31 maja 2011 napisała Barbara [ 1 odpowiedź ] Drukuj wpis

Dotykowe telefony to już nasza codzienność. Stosowanie gestów do obsługi interfejsu wydaje się być o wiele bardziej wygodne i naturalne od innych form nawigowania – choćby klawiaturą czy rysikiem. Jednak ludzki palec nie jest tak precyzyjny jak kursor, a wpływ środowiska zewnętrznego dodatkowo utrudnia obsługę interfejsu. Wydaje się, że dla większości projektantów aplikacji czy stron mobilnych jest to „oczywista oczywistość”. Mimo to, bardzo często spotykam się z sytuacjami, kiedy podstawowe elementy klikalne, takie jak menu, linki czy przyciski są niedopasowane do wielkości ludzkiego palca, czyli po prostu za małe. Niejednokrotnie widziałam respondentów na testach, którzy z trudem trafiają w linki, inputy czy przyciski lub powiększają stronę, aby móc wykonać akcję.  Dlatego też postanowiłam zebrać w jednym miejscu wytyczne i garść dobrych wzorców związanych z wielkością elementów klikanych.

Co mówią nam producenci, czyli kilka wypisów z UI guideline’ów

Nie znajdziemy jednakowych wytycznych dla różnych systemów operacyjnych i modeli. Większość z guideline’ów podaje swoje preferencyjne rozmiary:

  • iPhone Human Interface Guidelines sugeruje najmniejszą wielkość elementu jako 44×44 px. Można wprawdzie używać ikon o wielkości 30×30 px, jednak ich obszar dotykowy powinien być zwiększony do minimum 44x44px. Apple nie jest jednak jednoznaczne w tym temacie.
  • W wytycznych Microsoftu, co do projektowania elementów dotykowych czytamy, że minimalna wielkość powinna wynosić 26px (7mm), a rekomendowana jako optymalna to 34px (9mm). Elementy mogą oczywiście być większe, szczególnie, jeśli są pierwszorzędne i przeznaczone do częstego używania. Co bardzo ważne został też określony minimalny rozmiar odstępów, który wynosić powinien 8px (2mm).

Wielkości elementów według Windows Phone UI Design and Interaction Guide, źródło http://go.microsoft.com/?linkid=9713252

  • Wytyczne Nokii mówią o następujących wielkościach:
    • 7×7 mm (26x26px) z 1-milimetrowymi odstępami, dla standardowych elementów dotykowych
    • 8×8 mm (30x30px) z 2-milimetrowymi odstępami, dla elementów klikanych przede wszystkim kciukiem
    • co najmniej 5mm odstępu dla elementów wylistowanych.

Przykładowy layout wraz z odstępami oraz tooltipami według Nokii

Nie znalazłam niestety danych odnoszących się do Androida, może ktoś z Was je zna?

Należy pamiętać, że powierzchnia dotykowa palca jest raczej kwadratowa, stąd tak ważna jest wysokość elementów, nie tylko ich szerokość. Kontrolki o tej samej powierzchni mogą być skrajnie różnie oceniane, jeśli chodzi o komfort użycia.

Ta sama powierzchnia elementów, zupełnie różny komfort użycia na telefonach dotykowych

Dobre wzorce – elementy menu

Menu główne strony czy aplikacji pełni absolutnie kluczową rolę – niemożność kliknięcia oznacza brak możliwości korzystania ze strony. W przypadku projektów dedykowanych na urządzenia dotykowe, menu powinno być dość duże, a przyciski zbliżone kształtem do kwadratów.

  • Wyróżnienie najważniejszych sekcji poprzez rozmiar
    Trzy najważniejsze sekcje strony mobilnej Deloitte zostały zaakcentowane kwadratową formą, rozmiarem oraz wyraźnymi ikonami z etykietami. Sekcje drugorzędne, choć mniejsze, dzięki zastosowaniu poziomych linii oraz strzałek nie przysparzają problemów w użyciu. 

    Hierarchia elementów menu na stronie m.deloitte.nl

  • Ograniczenie elementów klikanych i dopasowanie do kształtu opuszka
    Elementy klikalne na stronie głównej zostały ograniczone do 4 najważniejszych akcji. Każda z nich została dopasowana rozmiarem do kształtu i wielkości opuszka. Wszystkie akcje są równorzędne, ale nie ma tu miejsca na przypadkowe kliknięcia.
    "Kwadratowe" menu na stronie amig.com/mobi/
  • Różne akcje, różne formy
    Menu strony stanowią cztery pokaźnych rozmiarów przyciski, których nie sposób przeoczyć czy użyć omyłkowo. Dodatkowo, dwie sekcje serwisu zostały wyróżnione pokaźnymi, prostokątnymi przyciskami, zaakcentowanymi dodatkowo grafiką. Warto zwrócić uwagę, że zarówno pozycje menu, jak i przyciski dodatkowe są wysokie – łatwo w nie trafić.
    Graficzne odnośniki na stronie amig.com/mobi/
  • Rozmiary i kolory
    Oprócz rozmiaru znakomicie dopasowanego do wielkości palców, kolejne zakładki w tej aplikacji do zarządzania kontaktami zostały rozróżnione kolorami. Korzystanie w takich zakładek jest proste, nawet w biegu między jednym a drugim spotkaniem. 

    Duże zakładkowe menu w aplikacji Guideways

 

Dobre wzorce – bloki odnośników

Listy odnośników, bloki linków mogą być szczególnie trudne w użyciu na urządzeniach dotykowych. Zwłaszcza jeśli nie zadbano o odpowiednie odstępy. Na jednym z testów zaobserwowałam, jak respondenci radzą sobie ze zbyt ciasno ułożonymi linkami, sprytnie klikając w te najdłuższe lub najbardziej wystające części linków. Co zatem zrobić, żeby nasi użytkownicy nie musieli wykazywać się ponadprzeciętnym sprytem?

  • Zebra
    To stary sposób, znany np. z tabel, na wizualne odróżnienie od siebie kolejnych pozycji na liście. Następujące po sobie pasy kolorów sprawiają, że o wiele łatwiej jest wybrać właściwy element. 

    Zebra na stronie mobilnej m.da-lite.com

  • Rozmiar i kolory
    Podobnie jak przy elementach menu, żywe kolory oraz dość duży rozmiar odnośników (zarówno obszaru klikanego, jak i czcionki) ułatwia ich identyfikację i użycie. Należy jednak pamiętać o umiarze i wyczuciu w stosowaniu tak zdecydowanych kolorów. 

    Kolorowe odnośniki w aplikacja Mentalworkout

  • Podkreślenie linków i separatory
    Podkreślenie pierwszorzędnych linków, zastosowanie linii oddzielających kolejne pozycje słownika oraz dodanie opisów sprawia, że możliwość przypadkowych kliknięć została ograniczona do minimum. 

    Słownik w aplikacji Knittingdaily

  • Duże, wyraźne czcionki
    Oprócz tego, że obszary klikalne są sporych rozmiarów, nie zapomniano również o zastosowaniu dużych, wyraźnych czcionek, które pomagają w identyfikacji odnośnika.
  • Wizerunki i ikony
    W identyfikacji i wyborze odpowiedniego odnośnika znacząco pomagają wizerunki – zdarza się często, ze użytkownicy klikają właśnie w zdjęcia. Ponadto obraz przekazuje wiele dodatkowych informacji odnośnie zawartości podstrony i zwiększa atrakcyjność listingu. 

    Zdjęcia gwiazd pomagają w wyborze właściwego odnośnika - aplikacja Vevo

    Zdjęcia oraz opisy- aplikacja Knittingdaily

    obszary klikalne dodatkowo wzmocnione poprzez kwadratowe ikony - aplikacja Nike

Powyższa galeria pokazuje jedynie kilka subiektywnie wybranych możliwości zwiększenia łatwości operowania linkami i przyciskami w urządzeniach dotykowych. Może macie jakieś swoje rozwiązania, które znacznie poprawiają komfort użycia tego typu elementów?

 

Autorka

Barbara Rogoś-Turek

www: http://witflow.com
Managing Partner i Research Director w WitFlow. Trenerka, prelegentka, propagatorka projektowania użytecznego i budzącego pozytywne emocje. Ewangelistka pracy grupowej. Po godzinach wyszukuje przejawy dobrego user experience i designu poruszając się na różowym rowerze po ulicach Wrocławia. Czytaj więcej
Tagi: , , , , , , ,