Projektowanie aplikacji mobilnych - praktyki UX - przydatne narz臋dzia

Smartfony, tablety, smartwatche, smartbandy, smartTV, smart lod贸wki... W dzisiejszych czasach wszystko jest SMART, a my, jako u偶ytkownicy czy projektanci, musimy za tym nad膮偶a膰 i ci膮gle 艣ledzi膰 post臋p technologiczny, bo inaczej b臋dziemy si臋 cofali. Oczywi艣cie nie mam tutaj na my艣li wiedzy, w jaki spos贸b te wszystkie bystre urz膮dzenia funkcjonuj膮, poniewa偶 my艣l臋, 偶e zdecydowan膮 wi臋kszo艣膰 z nas by to po prostu przeros艂o. Chodzi mi jedynie o umiej臋tno艣膰 opanowania i korzystania z nich.

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!

Aplikacje na telefon

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 鈥渨yci膮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)/

UX i UI aplikacji na telefon

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 鈥渨ydania鈥 - 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膰.

UX aplikacji na telefon - programy

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 鈥渨irtualna 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膰.

Szukasz efektywnej agencji interaktywnej?

Efektywno艣膰 to najwa偶niejszy parametr cechuj膮cy skuteczne dzia艂ania w Internecie. Agencja marketingowa RekinySukcesu.pl wie jak osi膮gn膮膰 za艂o偶one cele w b艂臋kitnym i czerwonym oceanie marketingu online.

Ponad 300 zadowolonych Klient贸w, ponad 2 000 przeszkolonych os贸b, a nam ci膮gle ma艂o. Sumuj膮c wszystkie dane, u偶ytkownicy sp臋dzili ju偶 艂膮cznie ponad 90 lat na wyprodukowanych przez nas stronach internetowych. Dzi臋ki temu o Twoim Kliencie wiemy wszystko, a nawet i wi臋cej. Nie uznajemy kompromis贸w. Dlatego warto klikn膮膰 jeden z przycisk贸w poni偶ej i um贸wi膰 si臋 na wizyt臋 we Wroc艂awiu, K艂odzku lub rozmow臋 zdaln膮.

Zobacz inne:

close
keyboard_arrow_up