Mobile First – projektowanie mobile dla początkujących

Dziś mam dla Was skrót książki – Mobile First Luka Wroblewskiego. Pochodzący z Polski ekspert podbijający Amerykańska scenę UX / Product design. Obecnie Product Director pracujący dla Googla. Kieruje zespołem metryki i analityki. Mobile First to książka z 2011 roku.

2011 rok to rok, w którym królują takie telefony jak: Samsung Galaxy SII, iPhone 4 oraz inne modele ze stajni HTC. W mobilu dominują rozdzielczości 320 x 480. Rihanna wydała piosenkę We Found Love a w kinie możemy zobaczyć ekranizację książki Dziewczyna z tatuażem z Danielem Craigiem. Czy książka na temat projektowania rozwiązań mobilnych jest jeszcze aktualna? Jeżeli nie liczyć ilustracji, które demonstrują już historyczne wersje popularnych serwisów, to jak najbardziej. Zawarte w niej podstawowe wskazówki, problemy oraz rady są dziś aktualne.

Mobile First – o czym jest ta książka?

Jest to skondensowane wprowadzenie do projektowania rozwiązań mobilnych. Książka składa się z 8 głównych rozdziałów.  Prowadząc nas od możliwości, które dają urządzenia mobilne, aż po rozwiązania i wymagania, które warto stosować podczas projektowania takich rozwiązań. Na przykładach pokazuje nam problemy związane z projektowaniem mobilnych ekranów by dać nam rozwiązanie. Książka napisana jest na poziomie dość ogólnym. Książka napisana jest prostym, zrozumiałym językiem. Jest to typ książki, którą spokojnie połkniecie w dwa wieczory. Dużo ilustracji oraz wykresów pomaga w utrzymaniu uwagi czytelnika.

Dla kogo jest ta książka?

Jest idealnym wprowadzeniem dla przyszłych projektantów. Jednakże może być wspaniałym uzupełnieniem wiedzy dla frontendowców, PMów czy kierowników zespołów projektowych. Poziom podstawowy. Jednakże o podstawach łatwo zapomnieć w gąszczu nowinek, które trafiają do nas każdego dnia.

Mobile First – ultra streszczenie książki

Poniżej mam dla Was po kilka najważniejszych insitów z każdego rozdziału książki Luka Wroblewskiego.

Wzrost

• W 2010 roku ruch z mobile wzrósł o 600% względem 2009,
• Planowano, że ruch z mobile prześcignie PCty w 2012 roku,
• PayPal odnotował wolumen płatności na poziomie 10 mln usd średnio dziennie (w 2010),
• Trzeci kwartał 2010 przyniósł wzrost ruchu mobilnego o 130% względem takiego samego okresu w poprzednim roku,
• 35% posiadaczy smartfonów korzysta minimum raz dziennie z mobilnego Internetu (2010 rok),
• 70% posiadaczy smartfonów korzysta z poczty w przeciwieństwie do 7% klasycznych telefonów komórkowych,

Wymagania

• większość ekranów mobilnych to 320 x 480 (2010),
• wykorzystuj spritesy zamiast img,
• minifikuj kod CSS,
• wywal zbędne JSy,
• korzystaj z CSS3 do gradientów, zaokrąglania czy ramek. Unikaj dodatkowych bitmap,
• projektowanie dla mobile to projektowanie rozwiązań, które mogą być użyte wszędzie o dowolnej porze,
• 84% użytkowników korzysta z mobile w domu,
• 80% użytkowników, używa smartfonu jako wypełniacz pomiędzy różnego rodzaju przerwami,
• 74% użytkowników korzysta z mobile gdy na coś czeka np. na zamówienie czy w kolejce,
• Od 62 do 84% użytkowników korzysta ze smartfonów podczas oglądania telewizji
• kiedy obserwuje rożne przyzwyczajenia i zachowania użytkowników lubię wyobrażać sobie ich jako ludzi z jednym okiem oraz jednym kciukiem,
• co jest najbliższym urządzeniem, które pozwala mi na osiągnięcie danego celu?
• korzystanie z PC to nurkowanie, korzystanie ze smartfona to pływanie w masce z rurką Racel Hinman,
• słabe połączenia, niskie plany przesyły danych (oraz zapchane łącza) zmuszają nas do przygotowywania rozwiązań lekkich dla użytkowników mobile,

Możliwości

• mobilne rozwiązania są lepsze od desktopowych np. podczas nawigowania po mieście,
• mobile daje inne kanały komunikacji z urządzeniem: żyroskop, GPS, mobilna kamera, mikrofon, bluetooth, NFC itp.

Organizacja

• sprawdź jak użytkownicy korzystają urządzeń oraz dlaczego,
• dostarczaj tylko rozwiązania, które rozwiązują problemy tutaj i teraz,
• zadbaj o czytelność oraz skupienie na celu,
• użytkowników można podzielić na kilka kategorii w zależności od potrzeby, którą chcą zaspokoić za pomocą mobile:,
• poszukiwanie – szukam odpowiedzi na pytanie dotyczące mojego otoczenia,,
• eksploracja/ zabawa – mam czas do zabicia, szukam rozrywki, która mi na to pozwoli,
• sprawdzenie statusu – coś istotnego dla mnie ulega zmianie, aktualizacji chce być z tym na bieżąco,
• realizacja zadania – potrzebuje szybko dokonać jakiegoś zadania, zmiany nie mogę czekać,
• zawartość (content) jest ważniejszy do nawigacji,
• zadbaj o nawigację w drugiej kolejności (najpierw content), redukuj zbędne opcje,

Akcje

• zadbaj o przestrzenie i wielkości, butonów, odległości między nimi oraz akcji, które mają realizować, butony o przeciwnych akcjach nie powinny znajdować się obok siebie,
• elementy nie powinny być mniejsze niż 7 mm,
• akcje destrukcyjne jak usuwanie, kasowanie czyanulowanie powinny znajdować się poza komfortowym zasięgiem kciuka,
• przemyśl czy nie dać użytkownikom nie-klikane elementy takie jak przesunięcia czy uszczypnięcia zamiast butonów,

Formularze

• formularze to komunikacja z użytkownikiem, zadawanie pytań czytelnikowi, zastanów się o co chcesz zapytać użytkownika zanim zadasz mu pytanie?
• pamiętaj aby wypełniacie placeholderów różniły się od treści wprowadzonej, łatwo przegapić co mamy do wprowadzenia gdy wydaje się, że wszystko zostało wprowadzone,
• grupuj pola czyli pytania w klastry, zadawaj pytania tematycznie, aby wykonać zadanie,
• mapuj pola, tak by użytkownik od razu wiedział jakie dane ma wprowadzić,

Layout

• pamiętaj aby zabezpieczyć reflow elementów tak by w każdej rozdzielczości dało się wykonać główne zadanie, osiągnąć cel,
• redukcja to najlepsze podejście do projektowania layoutów,
• uwzględnij różne zachowania dla różnych urządzeń, czyli różnych rozdzielczości,

Gdzie można kupić – Mobile first?

Książka została wydana poprzez A Book Apart zatem książkę [możecie kupić tutaj]