Projektowanie aplikacji mobilnych - praktyki UX - przydatne narzędzia

Na szczęście znaczną większość najnowszych urządzeń jesteśmy w stanie kontrolować z poziomu naszego smartfona, więc odchodzi nam wiele nauki! W dzisiejszym wpisie przyjrzymy się procesowi projektowania aplikacji mobilnych od strony User Experience, poznamy wiele przydatnych narzędzi, które ułatwią nam proces projektowy oraz dowiemy się o kilku ciekawych i efektywnych praktykach. Jeśli nie macie pewności, na czym polega User Experience (UX) to zapraszam do poprzedniego wpisu. Zaczynajmy!

Co wyróżnia dedykowane aplikacje mobilne od mobilnych wersji stron internetowych?

Na pierwszy rzut wyglądają one dość podobnie, na obu mamy bardzo często rozwijane menu a kontent jest dostosowany do małych wyświetlaczy, jednak ich główną różnicą, są możliwości w funkcjonalnościach oraz optymalizacja, która odpowiada za płynne ładowanie widoków.

Przykładowo wchodząc na smartfonie na stronę naszego banku, robimy to tak jak na komputerze, czyli wpisujemy nasz identyfikator, hasło i ewentualnie uwierzytelniamy się dwuetapowo, czyli wpisujemy w przeglądarce kod, który otrzymaliśmy właśnie w SMS. Natomiast uruchamiając aplikację naszego banku, do logowania możemy wykorzystać np. odcisk palca, który jest zapisany w urządzeniu lub skorzystać z systemu rozpoznawania twarzy. Wykonując przelew przez przeglądarkę, również prawdopodobnie będziemy musieli poczekać na SMS z banku i wprowadzić znajdujący się tam kod, w celu potwierdzenia wykonania przelewu. Korzystając z aplikacji, ponownie wykorzystamy szybsze metody potwierdzenia naszej tożsamości, a nawet jeśli nie korzystamy z systemu rozpoznawania twarzy czy czytnika linii papilarnych, to większość aplikacji korzysta z dostępu do powiadomień, dzięki czemu gdy otrzymamy SMS z kodem od banku - aplikacja sama go sobie “wyciągnie” z wiadomości i wprowadzi w odpowiednie pola, dzięki czemu nie musimy minimalizować aplikacji, wchodzić w SMS-y, zapamiętywać go i wpisywać w aplikacji.

Tak więc aplikacje mobilne mogą korzystać ze znacznie większej ilości funkcji niż strony www, otwierane w przeglądarce. W zależności od modelu używanego smartfona, jego możliwości oraz systemu operacyjnego różnią się więc funkcje, które możemy zaprojektować podczas tworzenia aplikacji. W zależności od systemu, z którego korzysta nasz smartfon, różnią się również standardy, których należy przestrzegać, aby nasza aplikacja była kompatybilna z urządzeniem oraz w ogóle mogła zostać wypuszczona na rynek. Dla przykładu aplikacje zaprojektowane dla urządzeń z systemem iOS przewidują przycisk cofania w lewym górnym rogu ekranu, podczas gdy urządzenia oparte na Androidzie korzystają najczęściej z dolnego paska nawigacji (przycisk home, wstecz oraz multi-tasking)/

Jak przebiega proces projektowania aplikacji mobilnej?

Krok 1 - Identyfikacja problemu

Zacznijmy od tego, że aby aplikacja była naprawdę użyteczna i aby ludzie chętnie z niej korzystali, musi ona rozwiązywać jakiś problem. Nie twórzmy programów jeśli nie są one potrzebne. Zasada ta brzmi dość banalnie, jednak w sklepie Google Play czy AppStore nie brakuje aplikacji, które albo są kompletnie nieprzydatne, albo są kopią 1:1 istniejącej już aplikacji. Musimy więc najpierw znaleźć problem i dobrze go zdefiniować. Jeżeli nie od razu nasuwa nam się jakiś problem, to nie znaczy, że go nie ma! Możemy zacząć od wysnucia tezy, na przykład: wiele ludzi ma problem, z tym że nie mają gdzie zostawić swojego psa na czas wyjazdu wakacyjnego lub firmowego. Czy z takim problemem faktycznie boryka się wiele ludzi? Tego jeszcze nie wiemy, ale dowiemy się, przeprowadzając ankiety wśród posiadaczy zwierząt. Załóżmy, że przeprowadziliśmy takie ankiety na różnych grupach i forach i okazało się, że rzeczywiście spory procent ankietowanych zadeklarowało, że choć raz miało taki problem. Mamy zielone światło!

Krok 2 - Badania szczegółowe

Wiemy już, jaki jest problem, wiemy, że chcemy go rozwiązać poprzez wdrożenie odpowiedniej aplikacji mobilnej, wiemy więc jaką funkcjonalność będziemy chcieli wprowadzić w naszym projekcie, jednak nie znamy przemyśleń i oczekiwań naszych odbiorców. W tym momencie nadszedł czas na dokładne przeanalizowanie tego, co o naszym pomyśle sądzi nasz przyszły odbiorca. Warto pamiętać o tym, aby na etapie przeprowadzania ankiet poprosić również o adres e-mail, lub inny kontakt do ankietowanego oraz zapytać go, czy chciałby przyczynić się do powstania owej aplikacji oraz czy na co dzień korzysta ze smartfona i aplikacji mobilnych. Musimy również określić i pogrupować ludzi, których nasza aplikacja będzie dotyczyła. W naszym przykładzie aplikacji dla posiadaczy psów musimy wyróżnić dwie grupy odbiorców: właścicieli psów, oraz potencjalnych przyszłych opiekunów. Na tym etapie musimy skontaktować się z jak najbardziej zróżnicowaną grupą naszych ankietowanych i przeprowadzić z nimi wywiad, który ma na celu określenie ich oczekiwań względem takiej aplikacji, czy mieli już kiedyś styczność z podobną aplikacją, jeśli tak, to co im się w niej podobało, a co ich odpychało od niej… Musimy po prostu zdobyć jak najwięcej informacji oraz wskazówek odnośnie naszej przyszłej aplikacji, musimy poznać naszych odbiorców i dowiedzieć się jakie funkcjonalności byłyby dla nich najbardziej przydatne.

Krok 3 - Strategia

Krok ten jest mniej związany z projektowaniem, aczkolwiek jest niezwykle ważny i nie należy go pomijać. Na tym etapie wiemy już jakie oczekiwania mają nasi ankietowani, musimy więc określić nasz model biznesowy, nie da się ukryć, iż wdrożenie i aktualizowanie aplikacji mobilnej nie są darmowe, musimy więc przemyśleć czy chcemy, aby nasz projekt zawierał elementy płatne, z jakich źródeł będziemy czerpali korzyści, powinniśmy przemyśleć i stworzyć Business Model Canvas oraz Value Proposition Canvas.

Krok 4 - Customer Journey Map oraz Makietowanie lo-fi (low fidelity)

Następnie należy rozpisać wszystkie funkcjonalności naszej aplikacji, które będziemy chcieli zaimplementować i stworzyć swojego rodzaju mapę aplikacji, która przedstawi całą ścieżkę od momentu pierwszego uruchomienia aplikacji, do momentu, w którym użytkownik dokona rezerwacji noclegu dla swojego pupila (oraz scenariusz dla drugiej grupy - potencjalnych opiekunów). Gdy już stworzymy taką mapę, nadszedł czas na bardziej graficzne aspekty projektowania aplikacji - makiety o niskiej szczegółowości, czyli dosłownie pierwsze szkice naszej aplikacji, które umożliwią nam wizualizację naszego projektu oraz sprawdzenie jego efektywności bez dużego nakładu czasu oraz pracy.

Krok 5 - Prototypowani

Jeśli wypracowaliśmy już szkice, które nas satysfakcjonują, możemy przystąpić do projektowania finalnego. Na tym etapie musimy już zwracać uwagę na wszystkie szczegóły wizualne, ponieważ projektujemy już ostateczny wygląd naszej aplikacji. O oprogramowaniach, które nam umożliwią prototypowanie napiszę w dalszej części wpisu.

Krok 6 - Testowanie i wdrażanie poprawek

Gdy mamy już skończony prototyp naszej aplikacji mobilnej, dajmy go do przetestowania kilku osobom trzecim. Do takich testów warto ułożyć pytania odnośnie prototypu, abyśmy lepiej poznali emocje, które towarzyszą naszym testerom podczas korzystania z aplikacji. Korzystne dla nas może się okazać nagrywanie takich testów, ponieważ nie wszystko możemy dostrzec na żywo. Po zakończonych testach przeanalizujmy je, wysnujmy z nich wnioski i zaimplementujmy poprawki, które zaproponowali nam testerzy.

Krok 7 - Kodowanie aplikacji i wdrożenie jej w życie

Nasza aplikacja jest już teoretycznie gotowa do “wydania” - mamy dopracowany projekt, mamy plan na jego funkcjonowanie, pozostało jedynie zaprogramowanie jej, aby z prototypu stała się pełnoprawną aplikacją, funkcjonującą na rynku. Więcej o tym procesie napisaliśmy tutaj.

Krok 8 - Wdrażanie aktualizacji oraz patchów

Oczywiście nie powinniśmy siadać na laurach, ponieważ najprawdopodobniej wciąż będziemy dostawali feedback od użytkowników, którego nie powinniśmy ignorować.

Z jakich narzędzi warto korzystać podczas projektowania aplikacji mobilnej?

Formularze Google - kontakt z naszym potencjalnym użytkownikiem jest bardzo ważny, dlatego najlepiej byłoby przeprowadzać ankiety osobiście, na papierze, jednak nie zawsze jest to możliwe, zwłaszcza w dobie pandemii. Dlatego moim zdaniem najlepszym, darmowym oprogramowaniem, umożliwiającym przeprowadzanie ankiet online, są Formularze Google, które zapewne wielu z was widziało choć raz.

Milanote - Jest to program, który ułatwi nam zebranie wszystkich dokumentów, ankiet, rozpisanie modelu biznesowego, stworzenie Customer Journey Map w jednym miejscu. Krótko mówiąc, jest to “wirtualna tablica”, na której będziemy mogli wszystko rozpisać. Program ten jest darmowy z ograniczeniami. W wersji płatnej kosztuje 10USD / miesiąc.

Papier i ołówek! - Tak, w dzisiejszych czasach niestety zapominamy o tak prostych rozwiązaniach, które w przypadku tworzenia makiet lo-fi, są niezastąpione. U wielu ludzi, z którymi się spotkałem, szkicowanie interfejsów na papierze daje znacznie lepsze rezultaty, niż robienie tego cyfrowo. Warto więc spróbować!

Adobe XD - Jest to narzędzie, z którego korzystam na co dzień, do projektowania i prototypowania m.in. interfejsów aplikacji mobilnych, jest on oczywiście w pakiecie Adobe. Dużym jego plusem jest niezwykle prosty interfejs, dzięki czemu program ten jest bardzo intuicyjny.

Figma - Jest to swojego rodzaju darmowy odpowiednik Adobe XD, który również umożliwia profesjonalne projektowanie aplikacji mobilnych.

Axure RP - Pozwala tworzyć dużo bardziej zaawansowane projekty aplikacji, uwzględniając profesjonalne animacje i zachowując przy tym dużą intuicyjność i prostotę w obsłudze. Axure jest oprogramowaniem płatnym.

Projektowanie aplikacji mobilnych jest niewątpliwie procesem czasochłonnym i wymaga włożenia w to dużo pracy, dlatego warto pomyśleć nad stworzeniem zespołu. Zwłaszcza że mamy dziś bardzo dużo narzędzi ułatwiających zdalną współpracę.

Jeśli chcielibyście się dowiedzieć więcej o projektowaniu od strony User Experience, to również zapraszam do wcześniejszego wpisu, w którym opisaliśmy dla was przydatne praktyki, z których warto korzystać.