Projektowanie to nie dostosowywanie, dlatego koncepcja Mobile First Design pozwala wyjść poza ten schemat i archaiczne podejście w projektowaniu na urządzenia mobilne. Przykłady z wdrożenia eksięgarni dowodzą, jak słuszna i dobra jest to metoda. A zaczyna się od smartfona...

1. Mobile First Design
Jak przygotować swój biznes e-commerce na
sprzedaż do nowoczesnego konsumenta?
1

2. O mnie
Borys Skraba - CEO, Bold Brand Commerce, 38 lat, ponad 15 lat
doświadczeń w IT.

3. Firmy, które rosną dzięki rozwojowi i ulepszeniom, nie zginą. Ale kiedy firma
przestaje być twórcza, kiedy uważa, że osiągnęła doskonałość i teraz musi
tylko produkować – już po niej.
Henry Ford
„

4. Standardowy proces projektowania RWD wygląda tak…
Szkic/Makiety/Prototyp Projekt graf. interfejsu Wdrożenie
Dostosowanie

5. Jednak „dostosowywanie”
to „nie projektowanie”!

6. dostosowywanie
projektowanie

8. - brak stosowania konwencji znanych dla
użytkowników smartfonów („gesty”)
- przeładowanie skryptami javascript (błędne
działanie)
- strona jest ciężka… na siłę próbuje
się dostosować wszystkie elementy zaprojektowane
dla wersji desktop

9. Mobile First Design pozwala uniknąć takich błędów…

10. Ważny jest kontekst…

11. Proces projektowania w ujęciu RWD Mobile First
Wiedza o użytkowniku
Strateg, Projektant interakcji
Architektura informacji
Strateg, Projektant interakcji,
Projektant interfejsów, Inżynier IT
Projektowanie
Strateg, Projektant interakcji,
Projektant interfejsów, Inżynier IT
Wdrożenie
Projektant interakcji, Inżynier IT
Użytkownik
Architektura
informacji
Test
Interfejs
Graficzny
Makieta
Prototyp
Wdrożenie
Szkic
Projektowanie

12. 12
Kroki etapu projektowego
Architektura informacji
Makieta/prototyp
Szkic Szkic
Interfejs
Makieta/prototyp
Szkic
Interfejs Interfejs
Makieta/prototyp

13. 13
Studium przypadku (jeszcze w trakcie realizacji)
księgarnia internetowa

14. 14
Zbadaliśmy i zebraliśmy potrzeby klientów…
Mobile
- szybkie znalezienie wybranej pozycji z działu w celu porównania cen (efekt ROPO)
- szybkie zapamiętanie wybranej pozycji
Tablet
- sprawne znalezienie wybranej pozycji
- pozytywne doświadczenie zakupowe -> wyzwanie: formularz logowania/rejestracji
maksymalnie „przyjazny”
Desktop
- pozytywne doświadczenie z przeglądania całego katalogu książek (shopper vs buyer)
- pozytywne doświadczenie na karcie produktu (wyzwanie: na nowo pokazać, że książka to
książka, a nie „obrazek”)

15. 15
Mobile: szybkie znalezienie pozycji w dziale

16. 16
Tablet: sprawne znalezienie pozycji

17. 17
Tablet: pozytywne doświadczenie - checkout

18. 18
Desktop: pozytywne doświadczenie - katalog

19. 19
Desktop: pozytywne doświadczenie - produkt

20. 20
Mobile First
Architektura informacji
Makieta/prototyp
Szkic Szkic
Interfejs
Makieta/prototyp
Szkic
Interfejs Interfejs
Makieta/prototyp

21. 21
Dziękuję za uwagę
Borys Skraba
CEO Bold Brand Commerce
e-mail: borys.skraba@bold.net.pl,
tel: +48 501 351 542
www.bold.net.pl