what makes them love you, mobilne ux

Igor Farafonow

Trochę teorii

Szczegóły projektowania

Kilka caseów

Inspiracje I wróżby

Trochę

teorii

1,2 mlnaplikacji w Appstore

1,4 mlnaplikacji w Google Play

$0,4średni koszt pozyskania

użytkownika aplikacji mobilnej pięć lat temu

$1,5-50koszt pozyskania użytkownika

aplikacji mobilnej dziś – w zależności od lokalizacji

Źródło: wypowiedzi Renato Iversena z Cynny

80%aplikacji mobilnych wywołuje tak małe zainteresowanie, że nie są

nawet prezentowane w rankingach aplikacji

75%aplikacji, mobilnych, które zostaną pobrane, użytych

zostanie tylko raz

Co decyduje o tym, czy Klient skorzysta

z naszej aplikacji? A jeśli już skorzysta – co zrobić, by go zaangażować?

Źr.: http://johnhaime.com/2014/04/your-emotional-brain-a-key-in-performance/

Decyzja zakupowa jest wynikiem pracy mózgu emocjonalnego, nie racjonalnego

Golden Circle – emotional design

Klienci kupują emocjonalnie. Determinantem wcale nie muszą być są logiczne przesłanki. Często jest nią wiara we wspólne wartości.

Emotional design w marketingu

Emotional design w webie

Emocjonalne doświadczenie powinno być spójne we wszystkich touchpointach Klienta z

produktem

Emocje wynikają z sumy wszystkich doświadczeń Klienta z firmą / produktem. Tych dobrych i tych złych.

Niestety gorsze doświadczenia i emocje są zawsze silniejsze (negativity bias).

Chcę stworzyć apkę, która będzie robić …. i …., a poza tym

będzie jeszcze robić …

"You‘ve got to start with the customer experience and work

back toward the technology - not the other way around."

Steve Jobs maj 1997, World Wide Developers Conference

Przykład (choć nie z mobile)

Czy tworzyliście systemy ecommerce?

Czy w ramach tych systemów przewidywaliście moduły ocen

produktów?

Czy projektowany system zakładał powiadomienia mailowe 7 dni po zakupie z prośbą o ocenę

produktu?

W większości przypadków odpowiedź brzmi nie.

Czyli marnowany jest moduł o największym potencjale w kontekście zwiększania

zaangażowania poprzez dodawanie ocen produktów.

To jest przykład na projektowanie modułów a nie doświadczeń. Wychodzenie

z funkcjonalności, a nie z doświadczeń

Dlatego od dziś mówmy:

chcę stworzyć aplikację, dzięki której użytkownicy będą mogli robić …. oraz …. .

Moja apka będzie zapewniać doskonałe doświadczenie w …. , a użytkownicy pokochają ją dlatego, że jest … .

Kilka zasad projektowania

Persony

• Kim jest osoba, która będzie korzystać? • W jakim jest wieku, jakiej jest płci? • Jak często korzysta z komputera / komórki? Jak oceniasz jej

stopień świadomości? • Czy korzysta z danego typu rozwiązań? • Co sobie ceni w tych rozwiązaniach? Czego oczekuje? • Co ją motywuje do realizacji pewnych działań? Co ją

inspiruje? • Jakie ma wątpliwości, by je rozwiać? • Jakich rozwiązań oczekuje? • Jak często będzie korzystać z rozwiązań? • Jak można ją zachęcić do korzystania

Dla person powinniśmy tworzyć spójne doświadczenia w zakresie działań produktowych, marketingowych, sprzedażowych, itd.

Kontekst

• Gdzie użytkownicy będą korzystać z rozwiązań? • Jak użytkownicy będą korzystać? • Jak często będą rozpraszani w trakcie korzystania z

urządzenia? • Ile czasu będzie trwało jednorazowa fiksacja na

ekranie? • Jak często będą musieli przerwać korzystanie, bo

np. stojąc w kolejce dojdą do kasy? • Ile interakcji wykonają w trakcie jednej sesji?

Dla person powinniśmy tworzyć spójne doświadczenia w zakresie działań produktowych, marketingowych, sprzedażowych, itd.

Kontekst

Kontekst Attencja mobile i desktop

Kontekst Interakcje mobile i desktop

Użytkownik mobilny to użytkownik rozproszony.

Dodatkowo – czy kontekst w przypadku użycia mobile będzie taki sam, jak dla

korzystania z webu?

Wielkość ma znaczenie

Wielkość ma znaczenie

Wielkość ekranu stanowi ograniczenie – zarówno pod kątem ilości informacji, jak

i proponowanych funkcjonalności.

• Na komórce nie napiszemy eseju w Wordzie • Na komórce nie umieścimy głównych informacji w

pierwszym viewporcie • Czasami dla użytkownika wchodzącego z komórki

inne informacje będą stanowić wartość – np. adres i sposób dojazdu zamiast oferty firmy

Mobile First – redukcyjne podejście do projektowania

Mobile First – redukcyjne podejście do projektowania

• Skoncentruj się na treściach i komunikacji: jakiego typu treści stanowią dla niego wartość w danym kontekście użycia?

• Układaj informacje w porządku chronologii komunikacji (buduj dialog)

• Dialog musi być rzeczowy, konkretny, odpowiadający na pytania użytkownika w taki sposób, jakby sam je zadawał

• Szkicuj – najpierw na komórce • Skaluj – gdy dorysujesz zwiększ zakres – i rysuj dla większych

urządzeń, baw się układem

GUI Guidelines – skorzystaj, chyba że umiesz lepiej…

Co to znaczy umieć lepiej?

Korzystaj z dobrodziejstw natury

• Kamery front i back • Mikrofon • Nawigacja • Akcelerometr • Barometr • Magnetometr • Żyroskop

• Notyfikacje i powiadomienia • Dostęp do płatności • Dostęp do społeczności • Multitasking • Dostęp do informacji o osobie • … i wiele więcej

Korzystaj z dobrodziejstw natury

Always be testing

• Im wcześniej zbadasz swoją aplikację (nawet na poziomie makiet), tym więcej pieniędzy zaoszczędzisz na jej optymalizacji

• Użytkownik, który zrazi się do aplikacji, najpewniej już do niej nigdy nie powróci – co więcej – poinformuje o tym też swoich znajomych

• Nawet 5 osób potrafi wskazać w badaniu 85% utrudnień usability, które realnie wpływają na konwersję / zaangażowanie

• Testy usability wcale nie muszą być drogie • Kiedyś mówiłem, że jestem wszechwiedzącą wyrocznią

usability – byłem po prostu głupi i leniwy

Podsumowanie 1

• Zawsze pamiętaj o personach • To kontekst dyktuje scenariusze użycia • Pamiętaj o wielkości ekranu i parametrach urządzeń – nie projektuj

funkcjonalności, które nie będą łatwe w użyciu ze względu na ograniczenia urządzenia

• Mobile first – projektując serwisy responsywne zaczynaj od mobile – to jest ćwiczenie na redukcję i syntetyzowanie pewnych elementów architektury informacji

• Korzystaj z GUI Guidelines, chyba że umiesz lepiej ☺ • Korzystaj z dobrodziejstw urządzeń – zarówno pod kątem

funkcjonalności, jak i gestów i interfejsów • Always be testing – badania usability na każdym poziomie potrafią

zmniejszyć ilość utrudnień użyteczności, zwiększyć zaangażowanie i konwersję w aplikacji

Kilka

caseów

Przykład: Na chwilę obecną głównym celem aplikacji

jest sprawienie, bym zaczął jej używać.

Pierwszy ekran po uruchomieniu

Unikaj syndromu pustego sklepu

Projektowanie musi być pod aktualny zakres, a mnie pod nasze przewidywania lub (co gorsze) nadzieje.

Nie informuj użytkownika o tym, jaki jest stan rzeczy – mów mu o tym, co ma zrobić, by zacząć

tego używać.

Inspiruj, wskazuj, doradzaj – przez powiadomienia na urządzeniu i podsumowania mailowe.

Załóżmy, że nie znamy tego sajtu – czy te ekrany zachęcają Was do

uzupełnienia informacji?

To co działa u innych, wcale nie musi zadziałać u nas…

To że użytkownicy realizują zadanie na Facebooku wcale nie wynika z tego, że Facebook jest użyteczny

i porządnie zaprojektowany. Oni po prostu nie mają wyboru ;)

Wall aplikacji mobilnejWall, z którego korzysta 5 osób. Ostatni wpis sprzed tygodnia.

Apple iPhone pierwszy prawdziwy smartphone

Apple iPhone wcale nie pierwszy…

Apple dało swoim Klientom wygodę i seksowność

2012 rok, raport porównawczy IOS i Androida

263 slajdy pełne drobnych szczegółów

263 slajdy pełne szczegółów – które mają znaczenie.

Aplikacja w swoim zakresie musi być wygodna, dopracowana w każdym szczególe, wydajna, stabilna, skalowalna i łatwa do optymalizacji.

Podsumowanie 2

1. Kluczem do zaprojektowania skutecznej aplikacji jest odpowiednie zdefiniowanie problemów i zagadnień – nie są nimi problemy jutra, tylko te, które będziemy mieli dziś.

2. Wykorzystując zaobserwowane na rynku wzorce projektowe pamiętajmy, że fakt, że korzystają z nich użytkownicy innych serwisów nie musi wynikać z tego, że są dobrze zaprojektowane

3. To szczegóły budują pozytywne doświadczenia. Zakres funkcjonalny określony w aplikacji musi być wygodny, zgodny z przyzwyczajeniami użytkowników, stabilny i wydajny.

Inspiracje

i wróżby

Interfejsy warstwowe

Podwójne i wielozadaniowe swajpy

Kciukożercy

Kafelkowa, często łamana architektura informacji

Nowe animacje interakcji

Flat bije skeumorphism

Jednolite wyraziste kolory, prostota formy

Ikonki z pełnym wypełnieniem lub jednopikselowym borderem

Duże rozmyte zdjęcia tła

Piękne, spójne i estetyczne typo

Dziwne i niezrozumiałe uwielbienie do obiektów okrągłych

Dzięki za uwagę

Igor Farafonow igor@uxeria.com blog.uxeria.com