10 porad, jak zaprojektować użyteczną aplikację mobilną - NowyMarketing

źródło: echouser.com

Aby wyróżnić się w morzu aplikacji mobilnych, dostępnych w marketach, musisz zagwarantować użytkownikom wysoki komfort użycia Twojej aplikacji. Jak to zrobić? Nie ma jednego uniwersalnego zestawu standardów użyteczności, dlatego proponuję swoje 10 zasad, które uznaję za niezbędne w procesie projektowania. Wkrótce dobre usability będzie cechą absolutnie obligatoryjną dla każdej użytkowej aplikacji mobilnej, ale dziś może być tylko Twoją przewagą.

Zobacz również

1. Bądź zgodny z konwencjami, przyjętymi w danym systemie operacyjnym

Trywialna porada na początek – należy znać wytyczne producenta sytemu operacyjnego, na który projektujesz aplikację. Poniżej linki do właściwych dokumentacji na 4 wybrane systemy:

Jeśli masz możliwość porównania tej samej aplikacji na systemach iOS i Android, spójrz na belki nawigacyjne – czy w interfejsie aplikacji na Android jest przycisk „back”? Jeśli tak, to właśnie odkrywasz jeden z najczęściej powielanych błędów polskich projektantów aplikacji. Telefony z Androidem mają hardware’owy przycisk powrotu i niepotrzebne jest dublowanie go wewnątrz aplikacji. Bezmyślnie kopiowany jest on z interfejsu aplikacji na iOS.

Twórcy aplikacji, które dostępne są na większość mobilnych systemów operacyjnych doskonale wiedzą, że interfejsy powinny się różnić względem OS. Poniżej przykład Listonic, w której edycja pojedynczej pozycji na liście wygląda (i wywoływana jest) inaczej w aplikacji na iOS i Android.

#NMInsights: Polskie podcasty o marketingu i e-commerce warte słuchania

Słuchaj podcastu NowyMarketing

2. Znaj kontekst i sposób użycia Twojej aplikacji

Czy zastanawiałeś się, gdzie będzie używana Twoja aplikacja? W biurze przy komputerze, na kanapie przed telewizorem, w kolejkach w sklepach, podczas spaceru czy jazdy na rowerze, w samochodzie, w świetle dziennym, sztucznym, itd.? Telefon używany jest w biegu, Użytkownik Twojej aplikacji w jednej ręce może trzymać telefon, a w drugiej pilot do telewizora. Albo dziecko na ramieniu. Jednym okiem na telefon, drugim za okno, sprawdzając, czy to już jego przystanek. Ludzie poświęcają swoim telefonom jedynie częściową uwagę! To ważna wskazówka dla projektantów aplikacji mobilnych, aby każdorazowo, najdokładniej jak jest to możliwe opisywać scenariusze użycia aplikacji, gdyż ma to wpływ na dalsze projektowanie.

Druga sprawa to znajomość typów zachowań użytkowników urządzeń mobilnych. Josh Clark w książce „Tapworthy” wskazuje na trzy główne typy: potrzebuję zrealizować mikro-zadanie (szczególnie pilne – teraz potrzebuję coś zapisać, zaktualizować status, poszukuję odpowiedzi na jakieś pytanie i chcę ją znać teraz, chcę coś szybko załatwić), działam lokalnie (często używam telefonu w związku z moją obecną lokalizacją), jestem znudzony (mam teraz wolną chwilę, czekam na coś, więc dla zabicia czasu sięgam po telefon). Jeżeli odchudzamy wersję desktopową jakiegoś serwisu do aplikacji mobilnej, to architekturę informacji powinniśmy budować w oparciu o wiedzę o powyższych zachowaniach (lub ich mieszance).

3. Content is king

Content ma pierwszeństwo nad nawigacją. Elementy nawigacyjne zabierają miejsce właściwej treści aplikacji! Np. aplikacja newsowa już na pierwszym ekranie powinna dostarczać listę najświeższych wiadomości, a nie drzewko z kategoriami, czy menu aplikacji. Z polskich aplikacji informacyjnych najbardziej podoba mi się pomysł na stronę główną aplikacji Onet News. Cały ekran zajmuje lista aktualności. Nie ma tutaj dolnej belki nawigacyjnej, często spotykanej w podobnych aplikacjach – menu jest ukryte pod ikoną w prawym górnym rogu. Kategorie newsów zmienia się przesuwając poziomo palcem po ekranie. Onet News nie jest jednak idealny – minusem jest dużo niewykorzystanej przestrzeni, widoczne są tylko 2-3 newsy. Gdyby mieścił tyle treści, ile widocznych jest na stronie głównej aplikacji Gazeta.pl, byłby moją wzorcową aplikacją newsową.

4. Minimalizuj czas wykonywanych zadań

Aplikacja mobilna powinna dostarczać użytkownikowi natychmiastowej odpowiedzi na jego potrzebę. Czas dotarcia do celu jest najważniejszy.

W marcu br. we współpracy z Anią Liszewską i Jakubem Mielczarkiem z Janmedia opublikowałam raport użyteczności mobilnych aplikacji bankowych. W ramach testów sprawdziliśmy m.in. proces zlecania przelewu zdefiniowanego w każdej polskiej aplikacji m-bankingowej. Okazało się, że przelew najszybciej można zlecić w aplikacji ING Bank Śląski. Trwa to niecałe 20 sekund! A ścigając się z czasem, trwa to jeszcze mniej.

Jak osiągnął to INGMobile? Wprowadził za użytkownika wszystkie domyślne wartości (tutaj data przelewu, tytuł, a nawet kwota) i umożliwił błyskawiczny wybór pomiędzy dostępnymi kontami rozliczeniowymi oraz pozycjami na liście przelewów zdefiniowanych. A wszystko to zaproponował w intuicyjnym i czytelnym layoucie.

5. Layout przyjazny dla oka i palca

Najnowsze modele smartfonów wyposażone są w wyświetlacze, oferujące bogactwo kolorów i kontrastów. Eksperymanetalne przejścia tonalne, niuanse kolorystyczne, szalone gradienty wodzą na pokuszenie projektantów aplikacji mobilnych. W celu ostudzenia emocji odsyłam ponownie do wskazówki nr 2 – Twoja aplikacja może być używana w naprawdę różnych warunkach oświetleniowych i dlatego również warstwa graficzna musi być użyteczna. Za małe kontrasty utrudniają czytelność tekstów, wyświetlanych w aplikacji. Dbaj o duże kontrasty, jednolite tło, niezacienione pola. Pozbycie się zbędnych ozdobników i wodotrysków zwiększy wartość użytkową aplikacji.

Czy znasz zalecenia finger-friendly design? Jeśli nie, to poczytaj więcej tutaj. Nasze palce są nieprecyzyjne. Ile razy przypadkiem stuknąłeś w reklamę w aplikacji mobilnej, tylko dlatego, że przycisk akcji, w który pierwotnie chciałeś stuknąć, był po prostu położony za blisko niej? Ogólne zalecenie jest takie, aby przyciski były wystarczająco duże, odpowiednio odseparowane od pozostałych elementów interfejsu, a także odpowiednio umiejscowione (producenci systemów operacyjnych podpowiadają, jak to robić – patrz dokumenty podlinkowane do wskazówki nr 1). Usprawniaj działania swoich użytkowników, minimalizuj ryzyko przypadkowych, niechcianych stuknięć.

6. Ułatwiaj wprowadzanie danych

Powiedzmy sobie szczerze, korzystanie z klawiatury na ekranie dotykowym jest trudne. Konieczność wprowadzania danych ograniczaj zatem do niezbędnego minimum. Łatwiej przesunąć palcem po ekranie niż wprowadzać dane – o tej zasadzie pamiętali twórcy wyszukiwarki nieruchomości Morizon, proponując suwaki zamiast pól tekstowych.

Adres korespondencyjny łatwiej wybrać z książki adresowej niż odręcznie wprowadzać każdy element – wiele aplikacji posiada takie ułatwienie, np. Touchnote.

Szanuj każdy wysiłek podejmowany przez użytkownika. W praktyce zatem w aplikacji, w której stosujesz formularze:

podpowiadaj domyślne wartości
przewiduj, co użytkownik może chcieć wpisać i podpowiadaj sugestie
pamiętaj i podpowiadaj ostatnie wyniki wyszukiwania
filtruj nie tylko po całym wyrazie, ale i jego części
nie zmuszaj do ponownego wpisywania tych samych danych.

Dodatkowo, z ekranów, które służą do wprowadzania danych usuwaj zbędne elementy nawigacji i inne dystraktory, aby nie odciągać uwagi użytkownika od realizacji głównego celu. Ułatw użytkownikowi skupienie na właściwym zadaniu. Tym samym zmniejszasz ryzyko pomyłek i prawdopodobieństwo przerwania procesu przez omyłkowe stuknięcia w ekran.

7. Nie zapomnij o użyciu gestów

Tutaj zaczyna się przejście z GUI (graphical user interface) do NUI (natural user interface)! Podczas projektowania interakcji w aplikacji wykorzystuj gesty. Największą korzyścią ze stosowania gestów są według mnie ułatwienia w nawigacji po aplikacji. Gesty zastępują z powodzeniem wiele przycisków akcji (np. „wstecz”/”dalej”). Poniżej lista gestów, wykorzystywanych podczas pracy z ekranami dotykowymi, którą opublikował P.J. Onori na somerandomdude.com:

Niezbędna jest oczywiście znajomość języka gestów i dobór odpowiedniego gestu do wywołania pożądanej akcji. Musisz wiedzieć, które gesty będą intuicyjne dla użytkownika, a także znać różnice w ich znaczeniach w zależności od danego systemu operacyjnego. Tutaj odsyłam do strony internetowej Luke’a Wroblewskiego (www.lukew.com/touch), który opracował „przewodnik” po gestach wykorzystywanych podczas pracy z ekranami dotykowymi.

Moim ulubionym przykładem aplikacji, która przepięknie bawi się gestami jest Clear. Aby zobaczyć jak działa, musisz ją pobrać z App Store – poniższe screeny nie pokazują nawet w połowie przyjemności korzystania z tej aplikacji!

8. Less is more – minimalizuj funkcjonalność aplikacji

Oto zasada często najtrudniejsza do przewalczenia. Jak coś jest do wszystkiego, to jest do… Podczas pracy, szczególnie nad swoją pierwszą aplikacją mobilną, trudno oprzeć się pokusie upakowania do niej, jak największej liczby funkcji. Zalecam jednak, aby jedna aplikacja skupiała się na realizacji jednej głównej potrzeby i aby zaspokoić kolejną warto robić to już w kolejnej aplikacji. Ta wskazówka ma bezpośredni wpływ na ergonomię i właściwe identyfikowanie celów przez użytkowników. Ograniczaj zawartość aplikacji do kluczowych elementów. Architektura informacji musi być maksymalnie prosta i logiczna, a nadmiar funkcji niestety to komplikuje.

9. Testuj

Gdyby Henry Ford zapytał klientów, czego potrzebują, odpowiedzieliby, że szybszego konia, ponieważ wówczas nie wiedzieli, czym jest samochód. Zatem i Ty nie pytaj użytkowników, czego potrzebują, ale… obserwuj ich podczas pracy z Twoją aplikacją, praktycznie na każdym etapie jej tworzenia (od prototypów do finalnie działającego produktu) i podczas całego cyklu jej życia. Sprawdzaj, badaj, testuj, poprawiaj. Udoskonalenia i poprawki nie kończą się w momencie wrzucenia aplikacji do marketu. Tak naprawdę wtedy dopiero się zaczynają…

10. …

Dziesiątej wskazówki celowo nie precyzuję i… pozostawiam ją Tobie. Tytuł i forma tego artykułu specjalnie zostały skonstuowane tak, aby spróbować ustandaryzować dobre praktyki dotyczące użyteczności aplikacji mobilnych, ale przecież nie da się ich zamknąć w 10 poradach, prawda? 🙂 Jest tego o wiele wiele więcej. Projektanci interfejsów aplikacji mobilnych, łączcie się! Zachęcam do dopisywania Twoich własnych wskazówek w komentarzach do niniejszego artykułu.

Monika Mikowska

Dyrektor ds. Rozwoju Biznesu międzynarodowej agencji technologicznej Janmedia, prelegentka licznych konferencji, publicystka oraz blogerka jestem.mobi.