Jak powstawał nowy Play24

 

25 kwietnia miał premierę mój największy i najbardziej ambitny projekt mobilny – Play24.

To dobry moment, aby podsumować cały proces projektowy i wyciągnąć wnioski – może to przyda się naszej społeczności projektującej aplikacje mobilne.

Background

Na początku istotne jest zrozumienie kontekstu naszej współpracy: LoveMobile (agencja mobilna, którą kieruję w ramach Grupy o2) zostało zaproszone przez Play do zaprojektowania odświeżonej wersji aplikacji Play24, ale nie byliśmy jedynym podmiotem uczestniczącym w całym procesie.

Play24 to system do samoobsługi konta u operatora. To oznacza, że aplikacja mobilna jest ściśle skorelowana z możliwościami backendu więc musieliśmy się dostosować do filozofii działania systemu, ale mieliśmy też duży wpływ na to jak on się rozwinie na podstawie naszych sugestii.

Przy procesie produkcji aplikacji uczestniczyły trzy podmioty: Play jako zleceniodawca, my (LoveMobile) i software house wybrany przez Play, wdrażający nasze szalone pomysły. Ten układ byl specyficzny, ale sprawdził się dobrze bo powstał u nas taki mały system checks & balances – my pilnowaliśmy, aby zasady mobile UX który chcemy wprowadzić były zachowane, software house stopował nas przed bujaniem w obłokach a Play patrzył czy wszystko idzie w dobrym kierunku i kontrolował sytuację.

Kick off

Naszym zadaniem było zaprojektowanie od zera części wizualnej i interakcji użytkownika z systemem w środowisku mobilnym. Aby zrobić to dobrze musieliśmy zrozumieć przede wszystkim kim jest użytkownik Play24 i w jaki sposób z niego korzysta. Rozpoczęliśmy od zbierania user stories (w których uczestniczył między innymi Paweł Lipiec ale chyba się nawet nie zorientował:) aby zrozumieć motywacje użytkowników. Z tego wyklarowały nam się trzy najważniejsze:

  • korzystam z Play24 bo boję się, że czegoś mi zabraknie („czy wystarczy mi megabajtów do końca dnia?”),
  • zaciekawiła mnie nowa reklamowana usługa Play („fajna jest ta Audioteka z Play – sprawdzę jak działa”),
  • coś mi się nie zgadza na koncie („gdzie jest moja kasa?!”)

I jeszcze jeden dodatkowy wniosek: ta aplikacja jest traktowana jako timesaver a nie timewaster – to oznacza, że korzysta się z niej aby szybciej zdobyć ważne dane niż aby szybciej płynął czas; to aplikacja czysto użytkowa.

Userflow

Mając obraz motywacji użytkowników rozpoczęliśmy projektowanie userflow, czyli określania jak będziemy „rozprowadzać” ruch użytkowników to aplikacji tak aby osiągnęli zamierzone cele. Ta praca zawsze przypomina mi trochę zadania architekta miejskiego, który musi optymalnie zaprojektować ruch uliczny – tak, aby każdy dotarł tam gdzie chce w jak najkrótszym czasie, bez niepotrzebnego błądzenia i stresów. My mamy o tyle łatwiej, że pracujemy na „clean slate”, bez wcześniejszych uwarunkowań poza dobrymi praktykami i możliwościami backendu.

Budowanie userflow to moment w którym spotykają się ze sobą research o użytkownikach zebrany na początku (user stories) i nasze wyobrażenia o tym jak powinna być logika aplikacji, jeszcze bez rozróżnienia na platformy. Są różne sposoby aby przygotowywać userflow, ale my preferujemy do pierwszego draftu kartkę papieru a później MindNode Pro, czyli świetny program do tworzenia map myśli.

Userflow lubi się szybko rozrastać, ponieważ wraz z czasem i pracą staje się coraz bardziej szczegółowy. Na przykład Play24 przy logowaniu sprawdza czy pod danym numerem jest podpięte konto prepaid czy postpaid i w zależności od tego pokazuje „Doładowania” albo ekran „Faktury” jako trzecią ikonę w menu – wprowadzenie takiego rozróżnienia w logice aplikacji powoduje dodanie oddzielnej gałęzi w userflow.

Naszym głównym celem na tym etapie było stworzenie logiki aplikacji tak, aby jak najmocniej ograniczyć liczbę operacji potrzebnych do zaspokojenia trzech motywacji wskazanych w user stories.

 

Mockupy

Wstępne mockupy rysowane przez Pawła Orzecha z LoveMobile

 

Chwilę po stworzeniu draftu userflow rozpoczyna się praca nad mockupami  – najpierw low fidelity a później high fidelity.

Mockupy lo-fi mają za zadanie pokazać umiejscowienie CTAs (Calls to Action) i głównych elementów w aplikacji. To jest moment gdy zaczynamy myśleć niezależnie o wszystkich platformach na które projektujemy – od samego początku mieliśmy silne przekonanie, że aplikacje muszą być tworzone zgodnie z filozofią systemu operacyjnego na którym są zainstalowane (czyli odrzucamy uniwersalizm i portowanie).

Argument za takim podejściem jest prosty: nie chcemy aby użytkownik musiał uczyć się nowego interface’u skoro ma już pamięć (także mięśniową) natywnego, systemowego. Stąd też menu aplikacji w iOS znajduje się na dole, w Androidzie na górze a na tabletach po lewej stronie (chociaż w tym miejscu zdecydowaliśmy się na mały eksperyment inspirowany aplikacją Alien Blue).

Jeśli nasze papierowe rysunki zaczynają nabierać sensu przenosimy to na wersję cyfrową – korzystamy wtedy z Proto.io, które ma wiele świetnych funkcjonalności, ale dla mnie najważniejszą jest to, że można swój klikalny mockup przetestować w formie HTML5 bezpośrednio na telefonie.

Makiety lo-fi specjalnie robi się bardzo ogólnie i monochromatycznie aby nie rozpraszać się szczegółami, kontrastami i dominantami kolorystycznymi, bo na to przychodzi czas przy następnym etapie – czyli tworzeniu makiet hi-fi. Na etapie makiet hi-fi istotne jest siedzenie jednocześnie przy projekcie graficznym i zasadach tworzenia interface’ów dla iOS (Human Interface Guidelines) i Androida (User Interface Guidelines). Zgodność z tymi dokumentami jest bardzo ważna jeśli stawia się sobie jako cel maksymalnie dobry mobilny UX.

Jeden z pierwszych mockupów hi-fi Play24

Sam projekt graficzny zaczyna powoli przypominać to co widzicie teraz w aplikacji. Oczywiście dużo się będzie jeszcze zmieniać – jak chociażby widoczny tutaj switcher aktywny/nieaktywny czy kołowa „infografika” ze stanem konta.

Matryca

Mając już szczegółowy obraz userflow i makiety hi-fi stworzyliśmy matrycę projektu – po jednej na każdy system i typ urządzenia. Matryca jest doskonałym narzędziem komunikacyjnym z dwóch względów:

  • pokazuje holistyczny obraz procesów zachodzących w aplikacji a nie pojedyncze screeny
  • ułatwia szybką komunikację między wszystkimi podmiotami uczestniczącymi w projekcie
Plakaty z matrycami Play24 Android i iOS, które wiszą sobie w Playu:)

 

Każdy ekran na matrycy jest podpisany cyfrą i literą tak jak pola w szachach. Dzięki temu gdy dostawaliśmy poprawki do projektu to zamiast szukać w setkach piętrzących się screenshotów wystarczyło napisać że na ekranie iOS B4 trzeba poprawić X.

W moim odczuciu matryce okazują się najlepszym sposobem na przyśpieszenie pracy nad tak złożonymi projektami.

Ostatnie szlify

Cały projekt trwał dużo dłużej niż zakładaliśmy pierwotnie, bo mieliśmy głębokie wewnętrzne przekonanie, że nie możemy wypuścić półproduktu. To jest jeden z tych strasznych autoszantaży emocjonalnych, przy którym wpada się w pułapkę ciągłego poprawiania czegoś co jest „good enough”. My mieliśmy świra na punkcie każdego piksela i każdego cienia pod ikoną – do tego stopnia, że patrzyliśmy na przykład czy okres migania ikonki nowego powiadomienia w aplikacji jest już perfekcyjnie naturalny i przyjemny dla oka.

Takie podejście nie jest w dłuższym czasie niemożliwe do utrzymania i sabotuje projekt bo pozwala na przemycanie nieskończenie długiej listy poprawek, które są kosmetyczne i bez witalnego znaczenia dla produktu, a przesuwają shipping date. Z drugiej strony wiedzieliśmy, że taka aplikacja musi od razu być bardzo dobra pod każdym względem, więc obniżenie standardu w jednym miejscu spowoduje obniżenie standardu całego projektu.

Walczymy też na tym etapie z kwestiami, które wydają się z zewnątrz bardzo naturalne i logiczne, ale muszą być uwzględnione przy budowaniu „feelingu” aplikacji – czyli np. wizualne przedstawianie stanów usług (włączona/wyłączona/nieaktywna), stanów buttonów (nietapnięty/tapnięty/nieaktywny), czy rozróżnienia stylem ikonografii różnych systemów (iOS vs. Android).

Żmudna praca Michała Janiszewskiego nad szczegółami interface’u

Zajęliśmy się także dodatkowo mniejszymi pracami graficznymi które otaczają aplikację – na przykład takimi jak górna grafika na stronie Play24 w Google Play.

Efekt

Minął tydzień od premiery Play24, opinie na jej temat są w przytłaczającej większości pozytywne, nawet w komentarzach pod recenzjami, na Twitterze i w App Store (średnia 4.5 gwiazdki na 5 możliwych). Po 5 dniach od premiery aplikacja znalazła się na pierwszym miejscu w kategorii darmowych Utilities w polskim App Store oraz na ósmym w podobnym zestawieniu w Google Play.

 

W tym miejscu chcę podziękować wszystkim z którymi miałem przyjemność pracować przy Play24 – przede wszystkim pełnej otwartości na nowości ekipie  Play i mojemu zespołowi w LoveMobile i o2. Efekt przerósł moje osobiste oczekiwania, ale wiem, że nie byłoby to możliwe, gdyby nie Wasza ciężka praca, 150% zaangażowania i ambicja aby stworzyć coś niesamowitego. Chyba nam się udało:)

Skeu

Lubimy rzeczy, które znamy. Korzystamy ze zdezaktualizowanego języka aby opisać współczesne zjawiska i próbujemy tłumaczyć nowe według zasad starego.  Zamiast szukać nowych, dokładniejszych definicji- bezpieczniej czujemy się zakotwiczeni w czymś, co już oswoiliśmy.

Jednym z objawów takiego zachowania jest skeumorfizm (definicja).

Skeu ma ułatwiać użytkownikowi zrozumienie funkcji przez imitację i metaforę. Podczas ładowania iPhone’a (oraz w pasku statusu na górze) pojawia się szklana (?) bateria informująca o naładowaniu telefonu. Oczywiście wszyscy wiemy, że bateria smartfona wygląda zupełnie inaczej, ale ten specyficzny format przedstawiania krytycznych informacji jest dla nas z miejsca zrozumiały – każdy z nas przecież kiedyś w swoim życiu miał akumulatorki, które się rozładowały. Tak tłumaczymy sobie nowe poprzez stare.

Apple ma bardzo specyficzne podejście do skeumorfizmu. Potrafi przywiązywać do niego fanatyczne przywiązanie i raczyć uważnych obserwatorów niesamowitymi wręcz smaczkami (jak refleksy świetlne na niby-aluminiowych sliderach) czy wychylanie się igły przy tapnięciu na obrazek mikrofonu w natywnej aplikacji dyktafonu. Z drugiej strony potrafi też zupełnie bez sensu używać metafor „prawdziwego świata” tam gdzie to tylko przeszkadza.

(kto z Was wie o co chodzi z tą skalą nad igłą i co to jest VU?)

Ten tekst piszę na iPadzie i jeśli chcę poprawić literówkę przytrzymuję palec na tekście i pojawia się okrągła lupka z powiększonym tekstem. Ta lupka ma dodatkowo delikatny refleks świetlny sugerujący wypukłość prawdziwej lupy, ale nie ma już zakrzywienia linii jakie powstawałoby przy używaniu prawdziwej soczewki.

Zadziwiająca systemowa lupka

 

Ale…kto z Was korzystał ostatnio z lupy?

Skeu ma krótkie nogi. O ile na początku interfejsów dotykowych był świetnym narzędziem do „przeniesienia” usera i wytłumaczenia mu tego, co nowe, to teraz dochodzi do ściany. W efekcie większość najbardziej innowacyjnych aplikacji na iOS zaczyna adaptować mechanizmu znane z Windows 8, czyli minimalistyczne, ale natywne dla cyfrowej komunikacji, kafelki – podstawowy element trendu flat design.

Letterpress czyli ucieczka udana ucieczka od UI Kita skeu

Nowy płaski język komunikacji wizualnej w Google Maps

 

Skeumorfizm w cyfrowych interfejsach (skupmy się na mobilnych w tym momencie) ma swój jasny cel: szybko buduje zrozumienie funkcjonalności za pomocą imitacji i metafor z 'prawdziwego’ świata co zmniejsza czas potrzebny na opanowanie systemu. Innym, wtórnym celem jest ocieplenie HCI – user czuje się bezpieczniej gdy widzi znane mu materiały: szkło, drewno, aluminium, jeans, skórę.

Problem ze skeumorfizmem polega na tym że język, który jest wykorzystywany do tego  już przestarzały i traci pierwotne znaczenie (vide: lupka). Mój 14 letni brat korzystając z Windows Office zapisuje pliki klikając na przycisku z dyskietką, ale nigdy z prawdziwej dyskietki nie korzystał. Aplikacja Podcasty od Apple pokazuje poruszane szpule magnetofonu jako metaforę otwarzanego podcastu… Ale kto jeszcze pamięta czym jest magnetofon szpulowy?

Zwróćcie uwagę na  widoczne po lewej przełącznik do przyśpieszania lub zwalniania podcastu z symbolicznym żółwiem  i królikiem – zniknęły po pierwszej aktualizacji aplikacji 

Apple swoimi natywnymi aplikacjami (kompas, podcasty, kalkulator, passbook itd) spowodował, że iOS stał się zakładnikiem własnych zasad. System w obecnej postaci wypełnił całkowicie treścią swoją formę, a szukanie nowych ścieżek komunikacji z użytkownikiem bez tworzenia wszystkiego od zera jest niemal niemożliwe. Co udowodnił Loren Brichter, twórca Letterpress (a wcześniej Twittie i słynnego slide to refresh). Letterpress pokazuje jak fantastycznie na aplikację działa odrzucenie UI Kita iOSowych wzorców – świeży powiem powietrza w zatęchły materiałowy skeumorfizm Apple’a.

Podziwiam designerów Windows 8, którzy przez terapię szokową wprowadzili na nowo minimalizm do interfesjów mobilnych. To wraz z nowym językiem designu Google w Androidzie 4.0+ coraz mocniej przypomina mi interfejsy ze Start Treka – to tam powinniśmy się kierować, a nie wracać do tego co analogowe.

 

Nie jestem fanatycznym przeciwnikiem skeumorfizmu (tym bardziej nie przeciwstawiam sobie skeu i flat designu)- traktuje jednak ten trend jak fotografię analogową w stosunku do tej cyfrowej. Będzie stopniowo odchodzić w zapomnienie robiąc miejsce na to co dokładniejsze, elastyczniejsze, szybsze – czyli lepiej przystosowane do współczesności.