Projektowanie wieloplatformowych interfejsów

Z ilu urządzeń dziennie korzystasz, by przeglądać sieć lub używać aplikacji? Coraz częściej nie jest to już tylko komputer. Dostępna ilość interfejsów wymaga zmienionego podejścia do projektowania z uwzględnieniem wielu platform. Wersja webowa i mobilna to dziś niemal podstawa, a rosnąca popularność tabletów sprawi, że niebawem konieczne będzie także projektowanie dostosowane do dużych dotykowych ekranów.


Właściciele serwisów i aplikacji mogą podążyć dwiema różnymi drogami. Mogą projektować oddzielne wersje usług na każdą z platform lub projektować swoje usługi tak, by były wygodne w użyciu na każdej z nich. Tą drugą drogą w ostatnich miesiącach poszło Google, zmieniając interfejsy swoich głównych usług. Gmail, mapy, kalendarz, google news oraz  wyszukiwarka zyskały nowy, bardziej przejrzysty wygląd. Nowe układy funkcjonalne są dostosowane pod tablety, poniżej kilka screenshotów, na których można podejrzeć nowe projekty:

Świadczy to o tym, że rozwój rynku tabletów jest już na tyle duży, by mieć istotny wpływ na tak popularne usługi. Możemy spodziewać się fali redesignów najpopularniejszych serwisów i aplikacji sieciowych. Przeprojektowanie inerfejsów i dostosowanie ich do wymogów tabletów, to spore wyzwanie. Sposób korzystania z PC-ta i ekranów dotykowych różni się diametralnie. Dlatego projektując wieloplatformowy interfejs należy wziąć pod uwagę ograniczenia, jakie narzuca sposób używania ekranów dotykowych.

Po pierwsze, należy wyzbyć się myślenia, że to myszka jest podstawowym urządzeniem do nawigowania po usłudze. W przypadku tabletów są to palce, w związku z czym efekt hover, przestaje mieć uzasadnienie. Skanując ekran wzrokiem nie wywołamy żadnego podświetlenia, a dotknięcie ekranu wywołuje akcję. Środkiem zastępczym jest tzw. “pop-open” – po dłuższym przytrzymaniu palca w punkcie pojawia się akcja np. rozwijająca menu –  jednak automatycznie pojawia się pytanie, w jaki sposób poinformować użytkownika przy pierwszym kontakcie o takiej możliwości.

Brak hovera wpłynie nie tylko na wygląd i konstrukcję samych usług, ale także na sposób tworzenia kreacji reklamowych – rację bytu stracą bannery odpalające animacje po najechaniu kursorem. A propos reklam – spodziewam się, że AdWords i AdSense w związku ze zmianami wymuszanymi przez popularyzację urządzeń mobilnych czeka spora rewolucja.

Po drugie, światło. Jednym z częstych problemów przy korzystaniu z telefonów komórkowych była wielkość klawiszy, osoby posiadające grubsze palce miały kłopoty z wybieraniem odpowiednich przycisków. Podobnie jest z serwisami używanymi na dotykowych ekranach. Zbyt gęsto osadzone ikonki i przyciski są kłopotliwe. Odpowiednie podejście dobrze widać na przykładzie zmienionej stopki w wynikach wyszukiwania Google:

nowa wersja paginacji wyników wyszukiwania Google

W nowej wersji mamy do czynienia ze zdecydowanie bardziej “rozstrzeloną” paginacją. Użyto buttonów zamiast linków orz zastosowano większą ilość światła między linkami, które prezentowane są bez podkreśleń, innym niż główny kolor czcionki.

stara wersja paginacji wyników wyszukiwania Google

Wyciągając wspólny mianownik nowego wyglądu usług Google można zauważyć, że:

  • buttony, przyciągają wzrok – są duże, wyraźne i ciężkie;
  • wszystkie klikalne/dotykalne elementy są oddzielone od pozostałych, wyraźnie oznaczone.
  • wyraźnie podkreślona architektura informacji – waga funkcji podkreślona jest przez wielkość i kolory buttonów, najważniejsze funkcjonalności oznaczone są intensywnymi kolorami (niebieski i czerwony);
  • wszystkie użyte ikonki są płaskie, dwuwymiarowe.

Kolejną istotną rzeczą przy projektowaniu dla ekranów dotykowych jest to, że w przypadku ekranów dotykowych traci sens dotychczasowy sposób nawigacji, pozwalający scrollować jedynie w pionie i poziomie. Korzystając z ekranów dotykowych możemy przewijać wyświetlane treści w każdym z kierunków. Możliwe jest więc ukrycie części treści poza krawędziami ekranu.

W przypadku wyszukiwarki można zauważyć jeszcze jedną operację, dokonaną z powodu orientacji ekranu, głównie na smartphone’ach z dotykowymi ekranami (które są węższe, przez co dodatkowa lewa kolumna utrudniała przeglądanie wyników wyszukiwania) – przeniesienie menu z filtrami wyszukiwania z lewej strony na górę.

nowa nawigacja wyszukiwarka Google

Wydaje się, że jest to swego rodzaju potwierdzenie podejścia propozycji Luke’a W by rozpoczynać projektowanie od wersji na telefony komórkowe:

When you are working with a 320×480 pixel screen (iPhone, Palm Pre, first generation Android phones), 80% of the screen space you had at 1024×768 is gone. [...] Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business.

Takie podejście umożliwia wybranie naprawdę najważniejszych funkcjonalności do nawigacji najwyższego stopnia i zmniejszyć stopień złożoności usług.

Wracając na chwilę do tematu obszaru do nawigowania, ciekawostka: prezentacja ekranu pozwalającego skalować przewijane treści i jednocześnie zachować podgląd na przeglądany fragment ekranu:

Zapewne w przyszłości będziemy mogli pozwolić sobie na więcej tego typu tricków, również w trybie multi-touch. Dodatkowo jeśli liczyć na rozwój technologii haptycznych – możemy uzyskać naprawdę ciekawe efekty, prace nad ekranami odpowiadającymi na nasz dotyk, swoim dotykiem, czy raczej impulsami już trwają.

Jaki będzie to miało wpływ na serwisy informacyjne ? Rosnąca popularność ekranów dotykowych wymusi zmiany w sposobie nawigacji oraz zwiększoną ilość światła. Jednak nadal jestem zdania, że tablety będą służyły głownie do przeglądania treści magazynowych, publicystycznych, które będą nam podawane poprzez aplikacje w sposób ograniczony jedynie przez fantazję projektantów. Natomiast w przypadku informacji agencyjnych można podejrzewać, że będą one serwowane w aplikacjach ukierunkowanych na przejrzystość i łatwość przeglądania, wykorzystujące powyższe zasady/reguły projektowania pod ekrany dotykowe. Najpoważniejsze zmiany zostaną dokonane w serwisach internetowych, które będą musiały dostosować swoje layouty tak, by były bardziej “namacalne” dla ich użytkowników.

Być może w dłuższym okresie czasu wydawcy pójdą dalej i zaczną dostosowywać papierowe wydania swoich mediów do designu stosowanego na interfejsach elektronicznych. Jak mogłaby wyglądać taka gazeta? Pewnie podobnie jak Tages Anzeiger po redesignie dokonanym przez Information Architects.

Więcej na ten temat:

Adrian Roselli (aardvark) - UX Challenges in Touch Interfaces

Jason Amunwa - The Tangible Web: Thoughts on Designing Websites for Touchscreens

i z bardziej socjologicznej perspektywy:

Brennan Brown – Five Lessons from a Year of Tablet UX Research

15. August 2011, autor: Maciek Wiktorowski
Kategorie: biznes, Media, Technologie | Tagi: , , , , , , , , | skomentuj