Projektowanie dla mobile to dość szeroki termin, ale na potrzeby dzisiejszego newslettera ograniczę się do tego powszechnego uproszczenia – czyli projektowania na smartfony. Nie zapomnij jednak, że urządzeń mobilnych z definicji mamy dużo więcej!

Mądre słówka

Tapnięcie, tapnąć coś – czyli dotknąć palcem element interfejsu dotykowego. Określenie wzięło się od angielskiego słówka to tap i używamy go jako dotykowej wersji klikania. To określenie, którego najczęściej używam (i jest powszechne w branży), ale warto rozważyć alternatywy przy projektowaniu np. instrukcji dla naszej grupy odbiorców. Nie dla każdego może być to intuicyjne określenie. Zawsze możemy wymieniać je na słowo – stuknąć, dotknąć czy po prostu kliknąć.

PWA – Progressive Web Apps – czyli takie strony internetowe na sterydach, potrafiące nieźle udawać aplikacje mobilne. Termin „Progressive Web App” nie jest jakąś oficjalną nazwą. To tylko skrót używany początkowo przez Google dla koncepcji stworzenia elastycznej, adaptowalnej aplikacji przy użyciu technologii internetowych.

Żeby sprawdzić co może takie PWA warto zerknąć na stronę What PWA Can Do Today (odpal ją sobie na telefonie!) i np. Wstęp do PWA stworzony przez Mozzilę. Ale każde inne źródło może być równie ciekawe, więc niech Cię te linki nie powstrzymują przed dalszymi poszukiwaniami.

Mobile to nie mały desktop

To, co wyróżnia projektowanie na urządzenia mobilne od klasycznego projektowania stron i aplikacji na desktop, to zmieniające się konteksty. Pomyśl, w jakich miejscach wyciągasz telefon z kieszeni czy torebki? Z telefonów korzystamy wszędzie – leżąc w łóżku, gotując wodę na herbatę, jadąc komunikacją czy korzystając z nawigacji w samochodzie.

Idąc chodnikiem, czekając na jedzenie w restauracji, zamawiając taksówkę w klubie czy ukradkiem sprawdzając Instagrama na nudnych wykładach. Będąc w różnym otoczeniu, w różnym stanie, o różnych porach dnia i nocy, korzystamy z aplikacji i stron internetowych na naszych telefonach. I te zmieniające się konteksty musimy brać pod uwagę gdy projektujemy nasze rozwiązania. 

Do tego pamiętamy o możliwościach, które dają nam smartfony – notyfikacje PUSH, lokalizacja, płatności mobilne, biometria, wykorzystanie aparatu, mikrofonu, akcelerometru, wbudowanych aplikacji (poczty, kalendarza) i integracji z innymi aplikacjami.

Ale też o trudnościach – wprowadzanie długich tekstów na mobilnej klawiaturze bywa męczące, łatwo się pomylić i przypadkiem coś wybrać – trzeba pamiętać o mniejszej precyzji naszego machania palcem po ekranie niż kliknięcia.

Do tego mogą pojawić się problemy z zasięgiem i siecią, przez co treści mogą ładować się dużo dłużej. No i mamy baterię, która może być prawie rozładowana albo nasze rozwiązanie może powodować szybsze jej rozładowanie.

Nie zapominajmy o tym, a jest szansa, że nasze rozwiązania będą bardziej użyteczne.

Gdzie szukać inspiracji i benchmarków?

Gdyby spojrzeć na album zdjęć w moim telefonie, można spokojnie założyć, że połowa to screeny. Aplikacji, stron internetowych albo nagrania jakiegoś specyficznego zachowania interfejsu. Świrnięta? Nie – i idę o zakład, że takich osób jak ja jest dużo więcej.

Nie ma lepszej inspiracji niż korzystanie z różnych produktów i ich wnikliwa obserwacja. Co Ci się spodobało w ostaniej aplikacji? Zachowanie formularza, typ walidacji, a może ma po prostu ładny układ treści? Zbieram takie rzeczy (choć muszę jeszcze ogarnąć ich organizację) i lubię do nich wracać. Poza tym przydają mi się do robienia prezentacji na studia, materiałów na bloga czy inspiracji do projektów.

Przygotowując jakikolwiek projekt zawsze przechodzę przez etap zbierania inspiracji i benchmarków – niezależnie czy ma formę moodboarda czy bardziej ustrukturyzowanej analizy, patrzę jak i co robią inni. Do tego etapu używam zbieranych przez siebie screenów oraz stron, które zbierają widoki różnych aplikacji. Najczęściej korzystam z Mobbin.design, który pozwala filtrować aplikacje wg systemów operacyjnych, kategorii produktów, a także pojedynczych komponentów.

Gdzie się uczyć?

Dziś nie polecę żadnego konkretnego kursu – albo mam pecha albo to urok zmieniających się trendów i rozwoju technologicznego. Kursy o mobile, które widziałam niestety szybko się dezaktualizują. Tzn. generalne zasady za bardzo się nie zmieniają – i te pewnie znajdziecie wszędzie opisywane podobnie.

Natomiast wytyczne co do wielkości, wzorców, technikaliów czy choćby komponentów i stylów zmieniają się regularnie. Efekt jest taki, że przechodząc przez kolejny kurs mam wrażenie, że podawane są przykłady ze średniowiecza. Równie dobrze można zerknąć po prostu na darmową wersję online książki Luka Wroblewskiego – Mobile First.

Gdzie szukać zatem inspiracji, przykładów i dobrych praktyk – mam kilka źródeł do których lubię wracać, co najlepsze – wszystkie są w przynajmniej jakiejś części darmowe:

NNgroup klasycznie – kategoria Mobile & Tablet na pewno dostarczy sporo informacji. Warto jednak mieć na uwadze, że NNgroup zbiera też bardzo stare, archiwalne artykuły (więc nie wszystko może być wciąż aktualne)

Baymard (dla mobile e-commerce) – jeśli działasz przy sklepach to będzie dobre miejsce na zerknięcie na dobre praktyki projektowania najpopularniejszych wzorców i komponentów

Smashing Magazine (różne kategorie wspisów) – niezmiennie to mój top wybór jeśli chodzi o trendy w projektowaniu i technicznej stronie tworzenia oprogramowania. Istnieją od miliona lat i wciąż trzymają poziom, do tego działają z wydawnictwem, darmowymi webinarami i płatnymi szkoleniami.

Twitter – nie zbiorę teraz pewnie wszystkich osób, które obserwuję na tym portalu, ale warto zerknąć i się rozejrzeć. Obserwuję projektantów i projektantki z różnych, głównie zagranicznych firm – osoby, które dzielą się ciekawostkami, artykułami i historiami ze swojej pracy. I czasem, po prostu przypadkiem, trafi się na coś wartego uwagi. Nie traktowałabym Twittera jako głównego źródła wiedzy, ale jeśli akurat korzystasz z tego portalu, może warto się rozejrzeć?

Idź Pan w UI! – oprócz briefów na zadania, robimy zawsze pod koniec zadania podsumowującego lajwa. Opowiadam wtedy o błędach i dobrych praktykach. Połowa zadań jest właściwie projektami pod mobile właśnie – więc jeśli chcesz posłuchać o projektowaniu, to wpadaj na kanał na YouTube (i koniecznie zostaw suba).

Palec to nie kursor

Odnosząc się wyłącznie do własnych doświadczeń (jako użytkowniczki urządzeń mobilnych, ale też osoby pracującej z uczącymi się projektować osobami) najczęściej pojawiającym się błędem na mobile jest niedostosowanie elementów interaktywnych do wielkości palca.

Na pewno nie raz udało Ci się trafić na stronę, której linki, przyciski lub pola wielokrotnego wyboru (checkboxy) były tak małe, że wymagały od Ciebie dużego skupienia i precyzji, by trafić w konkretny element. Na blogu pisałam o tym, że warto pamiętać, że palec to nie kursor. A to znaczy, że powierzchnia „kliknięcia” na ekranie dotykowym jest odrobinę większa niż na ekranie komputera.

Jak mieć pewność, że wielkości są odpowiednie? Testujmy – wystarczy po prostu odpalić swój projekt na telefonie (nawet jeśli to dopiero statyczny obrazek) i spróbować przyłożyć palce do elementów interaktywnych. A potem dajmy do przetestowania innym i obserwujmy jak wygląda interakcja z naszym produktem.

Warto założyć też minimalne wielkości elementów interaktywnych. Możesz spotkać się z założeniem średniej wielkości powierzchni tapnięcia jako 10 mm. W swojej książkę Touch Design for Mobile Interfaces, Steven Hoober trochę rozwija te wytyczne o wyniki badań:

So far, my observations and research had led me to these conclusions:

👉 Touch targets in the center of the screen can be as small as 7 millimeters.

👉 Corner target sizes must be about 12 millimeters to ensure they are accurately touched at least 95% of the time.

👉 The old 10 mm target I had promoted was not wrong on average. But interactions don’t care for averages.

I jeszcze trochę linków

Mystery meat navigation – warto poznać to pojęcie, a przede wszystkim dowiedzieć się jak go unikać! Pisałam o tym na blogu, więc zerknij na ten artykuł.

Świetna książka o projektowaniu na mobile (wydana w 2022), wspomniana chwilę wyżej – pst, będę ją polecać w kolejnych książkowych polecajkach.