Jak projektować aplikacje mobilne? – 6 zasad

Projektowanie aplikacji mobilnych rządzi się swoimi prawami. Swoimi względem rozwiązań na duże ekrany. Stąd też poniższe 6 prostych zasad, które warto mieć z tyłu głowy aby zaprojektować lepszą aplikację. Chciałbym Was przestrzec przed nadmiernym optymizmem. Te zasady nie sprawią, że aplikacja stanie się bestsellerem. Te zasady projektowania sprawią, że użytkownicy będą się chcieli z nią zapoznać, zamiast odinstalować z prędkością uchwalania prawa podczas nocnych posiedzeń w sejmie. To tak jak z projektowaniem krzesła, można zaprojektować najwygodniejsze na świecie krzesło z dwiema nogami, tylko czy znajdziemy śmiałka, który będzie chciał je wypróbować? Te 6 lekcji to fundamenty, które z czasem będę wypełniał kolejnymi detalami w kolejnych artykułach.

Mniej znaczy więcej

Jako społeczeństwo mamy wiele przyzwyczajeń oraz przekonań. Sądzimy, że dobry produkt to taki, który posiada wszystkie możliwe funkcje. Chcemy zadowolić wszystkich. Nieświadomie torpedując pomysł zbytnim rozmyciem charakteru naszego rozwiązania. Pamiętacie może takie rozwiązania jak Dreamveawer czy Pajączek? To były programy służące do tworzenia stron internetowych. Programy, które posiadały ogromną ilość funkcji, w porównaniu z dzisiejszym Atomem, Brackets czy VSC. Umarły niczym półkotapczan czy długopis z 8 kolorowymi wkładami. W skrócie, po przekroczeniu pewnego progu, dodatkowa funkcja bardziej przeszkadza niż pomaga. Warto o tym pamiętać.

W przypadku projektowania aplikacji mobilnych jest to szczególnie istotne. Przestrzeń determinuje większość zasad, o których tutaj piszę. Warto sobie wyobrazić, że Twoje rozwiązanie, aplikacja mobilna to tylko narzędzie. Narzędzie wynajęte aby coś osiągnąć. Kiedy wynajmujesz koparkę, aby przekopać Mierzeję Wiślaną to takie kwestie jak: ogrzewany uchwyt do kawy, firanki czy wbudowana buda dla psa są mało istotne. Powiem więcej, źle zamontowana buda może przeszkadzać podczas wsiadania. 

Warto zadać sobie pytanie co jest celem Twojej aplikacji mobilnej? Do czego ma służyć?  Jaki cel realizować? Warto zacząć od zmapowania głównego scenariusza użycia. Zacznijmy od tego, pozostałe funkcje, które mamy w naszych głowach, na razie zostawmy. Może się kiedyś przydadzą. Może. Skup się jednak na głównym celu, bo masz bardzo mało miejsca i mało czasu aby uwieść swojego użytkownika.

Duże jest piękne

Wyobraźcie sobie, że macie bardzo kiepski wzrok, bóle w nadgarstkach i drżące palce. W takiej sytuacji używanie aplikacji jest bardzo trudne. Dla takich użytkowników, właśnie projektujemy. Myślicie sobie – przecież takich użytkowników jest ułamek procenta, po co brać ich pod uwagę? Zaskoczę Was. Często właśnie tacy jesteśmy. Kończąca się bateria (obniżona jasność wyświetlacza) lub ekran w pełnym słońcu daje kiepski wzrok. Korzystanie ze smartfona w samochodzie czy środkach transportu daje drżące palce. Małe dziecko które pojawia się w życiu rodziców, na początku wymaga noszenia na rękach co powoduje bóle w nadgarstkach. Są sytuacje w naszym życiu kiedy nasza sprawność mocno spada.

Dlatego jest istotne aby elementy posiadały od siebie odpowiednie odległości (im większe elementy tym mniej przestrzeni potrzebują, elementy mobilne nie powinny być bliżej siebie niż 12px). Buttony nie mniejsze niż 46 px. Estetyka jest mniej ważna niż użyteczność, pamiętajcie o tym podczas projektowania. Jeżeli chcecie poznać więcej szczegółów na temat odległości to zachęcam do czytania wspaniałego artykułu na ten temat: Optimal Size and Spacing for Mobile Buttons

Dziel i rządź

Starajmy się dzielić elementy strony i formularze w taki sposób, aby krytyczna, podstawowa ścieżka była widoczna na głównym ekranie bez przewijania. Jeżeli projektujemy kartę produktu to główną ścieżką będzie sprzedaż, więc guzik “dodaj do koszyka” powinien być widoczny bez przewijania. Za to ścieżka rekomendowanych produktów, czy akcesoriów są dodatkowym odgałęzieniem procesu. Dlatego mogą znaleźć się już poniżej.

Jest to bardzo ważna wskazówka, szczególnie w przypadku długich formularzy. Lepiej jest je podzielić na kroki niż dawać użytkownikom jeden wielki formularz. Pamiętaj aby dzielić je na logiczne części. Logiczne kawałki pozwolą wykorzystać moc auto-uzupełniania, co znacząco przyspieszy proces. Ta zasada również wynika z pierwszej – Mniej znaczy więcej, pozostawmy kluczowe elementy. Dzielmy rozwiązania mobilne na logiczne małe części.

Nie wymyślaj koła (o ile nie jest to konieczne)

Na początku warto sobie odpowiedzieć na pytanie – do jak szerokiej grupy odbiorców chcemy skierować nasze mobilne rozwiązanie? Im szersza grupa np. sklep z elektroniką, odzieżówka, sklep z dekoracjami. Tym szybciej możemy przechodzić do projektowania rozwiązania, w oparciu o dostępne wzorce. Czyli możemy skorzystać z gotowych bibliotek takich ja: Material Design, Microsoft UWP Design czy Apple Design. Tak szeroka grupa odbiorców potrzebuje prostych rozwiązań dostosowanych do wielu różnych segmentów. Szczególnie na początku, gdy nie segementujemy użytkowników, powinniśmy skorzystać z gotowych przyzwyczajeń, które powstały w kontakcie z innymi rozwiązaniami, czy aplikacjami mobilnymi. Do tego mogą się na przydać gotowe biblioteki oraz zasady ich wykorzystania. To przyspieszy proces projektowy i pomoże uniknąć podstawowych błędów (przynajmniej ich części).

W przypadku jednak, gdy nasze rozwiązanie jest skierowane do bardzo specyficznej grupy klientów np. aplikacja dla kardiochirurgów czy panel sterowania dla zarządu Ministerstwa Finansów. Wtedy powinniśmy koniecznie przeprowadzić wywiady pogłębione, aby poznać potrzeby jaki i aplikacje z których obecnie korzystają. Wykonać analizę porównawczą rozwiązań. Wszystko po to, aby skorzystać z tego bardzo specyficznego doświadczenia. Dzięki temu zaprojektujemy aplikację użyteczną do tej konkretnej grupy. Zdarzało mi się wielokrotnie projektować bardzo specyficzne rozwiązania, które dla mnie były zupełnie kontr-intuicyjne. A były bardzo intuicyjne dla samych użytkowników. Wtedy otrzymujemy wspaniałą lekcję pokory, ale i sensu UXa samego w sobie. Projektujemy dla innych nie dla siebie.

Spójność – cross platform

Jeżeli macie już użytkowników, którzy korzystają z Waszych produktów, za np. pomocą sklepu na komputery stacjonarne, może otrzymują koresponedcję mailową, albo mają kontakt z Wami w inny sposób. Pamiętajcie aby rozwiązania były spójne i wzajemnie się uzupełniały.

Zaprojektowanie aplikacji, która nie nawiązuje do pozostałych rozwiązań, może sprawić, że aplikacja będzie nie użyteczna, a na pewno będzie budziła podejrzenia. Zaufanie to waluta, którą kupujemy czas użytkownika. Warto zastanowić się czy aplikacja jest skierowana do osób, które już nas znają. Jeżeli tak, to pamiętaj, że mają już jakieś przyzwyczajenia związane z kontaktem z nami. Nie róbcie rewolucji, nie palcie mostów, które już zostały zbudowane. Wykorzystajcie je, ulepszcie je w swoim rozwiązaniu.

Czytaj w myślach – badania

Trzeba zrozumieć użytkownika zanim zaczniemy dla niego projektować. Zdobądźcie informacje: kim jest, jakie ma urządzenie, jak z nich korzysta, jakie aplikacje są dla nich użyteczne itd. Odpowiadając sobie na te pytania, za pomocą wywiadów pogłębionych czy za pomocą danych, które uda Wam się zebrać są punktem wyjścia. Fundamentami budowy Waszej aplikacji.

Następnie zaangażujcie (o ile to możliwe) użytkowników końcowych w proces projektowy. Czy to podczas warsztatu, czy podczas 5 dniowego design sprintu. Angażowanie użytkowników to spora praca,która potrafi przynieść ogromne korzyści. Pamiętaj o tym aby testować rozwiązanie już na etapie klikalnych makiet. Szkoda pieniędzy i czasu deweloperów, na poprawianie nie przetestowanego rozwiązania.

Więcej na temat badań znajdziesz w osobnej kategorii na blogu: badania UX