Metody projektowania rozwiązań mobilnych – zastosowania i wyzwania mobile UX

Autor: Bartłomiej Drążkiewicz 1 lipca 2022

Jak wiemy, niektóre aplikacje mają bardzo silne odwołanie do wzorców znanych nam z codzienności. Czy w środowisku mobilnym powinno się odwzorowywać rzeczywistość czy tworzyć zupełnie nową?

Rzeczywistością słownikowo określimy wszystko to, co istnieje naprawdę. PWN nazywa nią też sytuację lub warunki, w których ktoś żyje lub w których coś się odbywa w danym momencie. Ten sam słownik przytacza definicję rzeczywistości wirtualnej, którą nazwano tutaj sztuczną, trójwymiarową przestrzeń, w której zaczyna funkcjonować osoba grająca w grę komputerową. Nie są to opisy wyczerpujące całą mnogość znaczeń, jaką przypisujemy tym wyrażeniom. Rzeczywistością w końcu nazwiemy nie to, co istnieje, ale to co sami jesteśmy w stanie przetworzyć, że istnieje. 

Wszak w psychologii dowiedziono już istnienia różnego rodzaju syndromów wypierających konkretne fakty z życia jednostek, które nie uznawały danej wizji rzeczywistości, a żyły w słuszności przekonania o swojej. Rzeczywistość semantycznie może odnosić się do wszystkiego jako całości, ale w rozumieniu czym tak naprawdę jest, może okazać się, że dostrzeżemy w niej spory subiektywizm i relatywne podejście, uzależnione od percepcji poznawczej danej jednostki.

Podobnie to wygląda w przypadku rzeczywistości wirtualnej, która nie ogranicza się do gier, gdyż te są tylko jej częścią. W zasadzie rzeczywistością cyfrową nazwiemy te aktywności, które wymagają wykorzystania sieci i w jej obrębie się zamykają.

 Ostatnie lata pokazały jednak zazębianie się tych rzeczywistości i przeniesienie realiów ze świata realizmu do świata zer i jedynek.

Natalia Hatalska w książce “Wiek Paradoksów” pisała o skłonnościach ludzkich do odwzorowywania rzeczy, procesów i relacji, nieraz w proporcjach 1:1 na rzecz paneli w urządzeniach, które m.in. nosimy w kieszeni. 

Mówiąc o rzeczywistości coraz trudniej mówić nam o niej jako konkretnej materii, którą można podzielić na części składowe. Nigdy tak nie było, ale technologia stała się szkłem powiększającym ten efekt. Dzięki niej widzimy jak bardzo nieostre potrafią być granice między płaszczyznami, a jeden świat bezpośrednio oddziałuje na drugi i vice versa. 

Dostrzegają to także UX Designerzy, choć trudno, żeby tego nie zauważyli, skoro to oni w dużej mierze, w ostatnich latach, odpowiadają za tech wdrożenia i koncepcje. Igor Farafonow dostrzega nawet potencjalnie destrukcyjny wpływ ciągłego upraszczania produktów i działania proklienckiego, a specjaliści od User eXperience powinni zdawać sobie sprawę ze swojej społecznej odpowiedzialności za kształtowanie wzorców zachowań w użytkownikach ich projektów.

Aplikacja – punkt styczności rzeczywistości z cyfrą

Konrad Dziejarski, lider designu produktowego w Efigence, w trakcie Mobile Trends Conference’22 stwierdził, że możemy dokonać umownego podziału na realistyczną rzeczywistość oraz wersję digitalową. Gdy w skład tej drugiej wejdą systemy, graficzne przedstawienia, mieszane rzeczywistości z udziałem VR czy AR, itp. to wyróżnimy w nich też aplikacje mobilne. Te są niejako portalem, który skupia w sobie realia rzeczywistości i są też czynnikiem bezpośrednio ją kształtującym.

Wyzwania przy tworzeniu aplikacji

Projektant tworząc rozwiązania mobilne staje przed wieloma dylematami w swojej pracy projektowej. Z jednej strony chciałby, aby użytkownik nie musiał zastanawiać się nad wykorzystaniem danego oprogramowania, a bez wątpliwości korzystał z niego w użyteczny dla siebie sposób. Z drugiej zaś strony designerzy muszą zastanowić się czy chcą stworzyć odwzorowanie znane użytkownikom z rozwiązań dostępnych w świecie fizycznym czy spróbują stworzyć całkiem nową wersję danego procesu, która w świecie cyfrowym będzie składać się z zupełnie innych elementów lub częściowo zmienionych. Niejednokrotnie zdarzają się też i takie projekty, które muszą ściśle integrować elementy z jednej rzeczywistości ze składnikami drugiej. Każda z tych perspektyw otwiera worek nowych wyzwań dla UX’owców.

Odwzorować czy nie?

Prelegent mówiąc o łączeniu i wspieraniu procesów pomiędzy przedmiotami ze świata fizycznego a aplikacjami pokazał przykład aplikacji płatniczych. Proces pobierania płatności polega na tym, że sprzedawca wpisuje kwotę w terminalu, czyli rzeczywistej, namacalnej rzeczy. Następnie musi go pokazać klientowi, aby ten mógł wyjąć swoją kartę (kolejny fizyczny przedmiot), przyłożyć ją i wywołać reakcję w aplikacji. W tej należy potwierdzić realizację transakcji i w ten sposób mieszały się ze sobą oba te światy. 

Płatności

Proces ten można skrócić, pozwalając na płatności bezpośrednio z telefonu, ale krokiem dalej jest zaprojektowanie terminali płatniczych w formie aplikacji. W ten sposób klient może zapłacić kartą, bezpośrednio z użyciem telefonu sprzedawcy. Gdyby ten chciał w tej sytuacji jeszcze zapłacić telefonem, powstanie w pełni cyfrowa operacja, w której jedynymi fizycznymi urządzeniami będą smartfony w dłoniach, aczkolwiek odwzorowanie procesu będzie niemal tożsame z sytuacją znaną użytkownikom już wcześniej, ale znacznie skrócone.

Lokalizacja

W podobnym miejscu są aplikacje z mapami na pokładzie, które zamieniły proces odnajdywania drogi z pomocą wielkiej mapy i szukania punktów orientacyjnych, na wyjęcie telefonu i uruchomienie aplikacji. W tej dzieje się jednak podobna reakcja, z tym że zachodzi ona cyfrowo. W przeciwieństwie do fizycznej mapy, system zazwyczaj ma jeszcze dla nas konkretne wskazówki i podpowiedzi odnośnie miejsc i drogi. Nie zmienia to jednak faktu, że jest to pewne odwzorowanie znane nam z wcześniejszych wersji tego procesu.

Muzyka

Nie inaczej jest z aplikacjami do tworzenia muzyki, w których występują niemal idealne odwzorowania instrumentów i ich działania czy też nowoczesnych konsol miksujących piosenki. 

Mobilne portfele

Portfele mobilne to również cyfrowa kopia zwykłych portfeli. Te musimy wyjąć z kieszeni, otworzyć, zajrzeć do przegrody i wyjąć z nich karty. Podobnie jak z telefonem, który wyjmujemy z kieszeni, otwieramy aplikację, wybieramy cyfrową przegródkę i naciskamy daną kartę płatniczą w postaci wirtualnej, aby móc z niej skorzystać. 

Przelewy

Nie można tego samego powiedzieć o formatkach do przelewów, które pamiętamy z dawnych placówek bankowych czy pocztowych. W tym przypadku mamy do czynienia z zupełnie nowym podejściem. . Konrad wyróżnia tutaj sytuacje projektantów ekranów służących do przelewów. Zapewne mierzyli się oni z dylematem, czy projektując dany ekran przenieść na niego cały druczek z oddziałów czy pomyśleć o innym podejściu do wpisywania danych i wyglądu strony. Jak wiemy, wybrali to drugie. Dzisiaj ekrany te w niczym nie przypominają karteczek z banku – prosty interfejs, zapisywanie wartości w okienkach, autouzupełnianie i korzystanie z klawiatury alfanumerycznej z pewnością ułatwia ten proces. 

Zakup nowego auta

Dziejarski pokazał także case study Toyoty, która wprowadziła możliwość finalizacji zakupu nowego samochodu bezpośrednio z panelu kupującego. Do tej pory,  nawet w dobie internetowych, zaawansowanych konfiguratorów samochodów, trzeba bylo isc z kodem konfiguracji do salonu dealera, aby sfinalizować zakup. W tym momencie powoli odchodzi się od tego modelu transakcyjnego, przenosząc go w całości do warstwy wirtualnej.

Żappka Store

Mniej oczywistym przykładem może być innowacyjna sieć sklepów  Żappka Store, które wykorzystują szereg nowoczesnych technologii, aby proces zakupu był jak najbardziej zbliżony do tego znanego klientowi, jednocześnie zmieniając podstawową jak dotąd zależność – brak obsługi.

Autonomiczna sieć sklepów wymaga kodu QR przed wejściem, generowanego w aplikacji Żabki. Zeskanowanie kodu równoznaczne będzie z automatycznym otwarciem się drzwi. Można powiedzieć, że skanowanie kodu odzwierciedla szukanie kluczy i otwieranie zamka. W tej samej chwili system dzięki kamerom i przypisanych do ich systemu algorytmom sprawdza co dana osoba wzięła z półki. W momencie opuszczenia sklepu przez klienta wszystkie brakujące towary zostają doliczone do rachunku, który zostaje obciążony równowartością tych produktów. Teoretycznie jest to spore odwzorowanie dotychczasowego modelu obsługi, ale większość procesu odbywa się w Żappce w tle, bez czynnego udziału i uważności klienta.

Jak widzimy projektanci mogą odwzorowywać całe procesy na cyfrową modłę, ale najwidoczniej te są stworzone w tak optymalny sposób, a klienci są do nich na tyle przyzwyczajeni, że zwyczajnie nie było potrzeby tworzyć niczego bardziej rewolucyjnego. Proces zdigitalizowany korzysta z rzeczywistych sytuacji odnosząc się do nich w swoich cyfrowych przedstawieniach na pokładach aplikacji. Niektóre aplikacje podchodzą do tego w trochę inny sposób, biorąc konkretny cel danego procesu i projektując dany proces od nowa, a jeszcze inne łączą funkcjonalności telefonów z urządzeniami lub chipami w przedmiotach codziennego użytku.

Problemy projektowe

Designer omówił przykład PolCard® Go, nad której redesignem pracował, aby zwiększyć wizualną atrakcyjność i użyteczność tej aplikacji. Pierwszym problemem projektowym było przyłożenie karty do terminala. Naturalnym jest, że klient przyłoży kartę do ekranu telefonu, gdyż stanowi ona dla niego naturalny przód. Z jednej strony jest to przestrzeń robocza, z którą styka się codziennie, z drugiej strony wyświetlające się interakcje istnieją na tej przestrzeni, więc instynktownie człowiek spróbuje zareagować też na niej, ale nie zapominajmy, że większość terminali generalnie zbudowana jest w ten sposób, że kartę przykłada się do czytnika, który jest umiejscowiony nieopodal wyświetlacza z kwotą, co czasem przypomina proces przykładania karty do ekranu. 

W przypadku terminala, którym był telefon powstał jeden mały szkopuł. Otóż moduły NFC umieszczone są z tyłu urządzenia, więc aby transakcja przeszła bez zakłóceń należało przyłożyć kartę do tylnej części urządzenia, tzw. plecków. Według badań przeprowadzonych przez zespół pracujący nad tym projektem, klienci mieli spory problem z natychmiastowym odgadnięciem intencji aplikacji, mimo różnych szablonów i specjalnych opisów. W teorii nie jest to ogromny problem, gdy sprzedawca będzie musiał poinformować klienta o prawidłowym wykorzystaniu terminala, ale mając w świadomości fakt, że proces ten ma pomagać w obsłudze, a nie ją utrudniać, wtedy robi się nieciekawie. Zwłaszcza, gdy zdamy sobie sprawę, że klientem nie jesteśmy tylko my w sklepie, a często dziesiątki czy nawet tysiące osób dziennie. Dodajmy do tego sekundy, w których spieszymy się na tramwaj czy czekamy w powstających zatorach, które nazywamy kolejkami. Po wielu próbach zespół wybrał pomocnicze animacje, których skuteczność potwierdziły testy korytarzowe. 

Nie była to jedyna decyzja projektowa, którą trzeba było podjąć. Następnym krokiem okazało się zdecydowanie o wyglądzie ekranu odnośnie wpisywania kwot należności. W obecnej chwili większość sprzedawców wpisuje kwoty poprzez specyficzną logikę zapisu na urządzeniu. Aby napisać 1 zł, sprzedawca zwykle musi nacisnąć przycisk odpowiadający za 1, następnie nacisnąć 0 i ponownie nacisnąć 0. Gdyby chciał wziąć od klienta 10 złotych wpisałby jeszcze jedno zero, a gdyby chciał 57 złotych, musiałby wpisać przyciski 5,7,0,0. Oczywiście istnieją także terminale skonfigurowane z programem skanującym, który na bieżąco sumuje wartość produktów i nie wymaga wpisywania kwoty, ale większość terminali ma swoją konkretną specyfikę. Podobnie jest jednak z telefonem mającym przecież dostęp do klawiatury alfanumerycznej, do której użytkownicy przyzwyczajeni są pewnie nawet bardziej. Projektanci zdecydowali się na wygląd klawiatury zbliżonej do cyfrowego kalkulatora, a w przyszłości w razie problemów zostanie dodana możliwość przełączania się pomiędzy trybami, w którym jednym z nich będzie dokładne odwzorowanie przycisków w terminalu. 

Podobnież było z wpisywaniem kodu PIN na terminalu. Projektanci zaprojektowali ten ekran tak jak mogłaby wyglądać klawiatura służąca do odblokowania telefonu (PIN z terminala vs PIN z telefonu).

Przy okazji wpisywania PIN powstał kolejny mankament. Otóż sprzedawca korzystając z terminala korzysta przecież ze swojego własnego telefonu i może nie życzyć sobie dawać go obcym osobom do ręki, czy to ze względów bezpieczeństwa czy też higienicznych. Zdecydowano się na ekran obracający się o 180° w momencie wpisywania kodu, aby klient miał możliwość wygodnego przeczytania i reakcji, a kasjer nie musi martwić się o swój ukochany sprzęt.

Chodzi o to, żeby myśleć!

Aplikacje to cyfrowy portal między przestrzeniami. – Mamy świat ten fizyczny, gdzie możemy projektować aplikacje naśladując rzeczywistość, gdzie wiemy, że kartka służy do pisania tekstu, gdzie przyciski są niemal w 3D i jako użytkownicy nie mamy problemów z afordancją i mamy drugi świat, gdzie mamy modę, że wszystko jest spłaszczone, gdzie widnieje dużo białej przestrzeni, a wszystko jest minimalistyczne. Problem w tym, że jak coś jest źle zaprojektowane to użytkownicy nie wiedzą, zwłaszcza Ci starsi, czy coś można kliknąć czy nie – opowiada Konrad Dziejarski. Zdaniem projektanta warto projektować nowoczesne i estetyczne interfejsy. Nie można przy tym zapominać, że nie są one celem samym w sobie. Nie jest konieczne wymyślanie całych procesów w awangardowej cyfrowej formie. Ważne, aby myśleć przede wszystkim o użytkowniku, jego potrzebach i przyzwyczajeniach. Rzeczywistość fizyczna może stanowić świetne źródło inspiracji projektowej, gdy tylko podejdzie się do niej z otwartą głową. Najważniejsze w projektowanie jest myślenie.

Pełny dostęp do nagrań z konferencji, na której występuje Konrad uzyskasz na vod.mobiletrends.pl