Mobile First Designzaczyna się od smartfona a kończy na desktopie.

II Kongres eHandlu

O mnie

Borys Skraba - CEO, Bold Brand Commerce,

38 lat, ponad 15 lat doświadczeń w IT.

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

Standardowy proces projektowania RWD wygląda tak…

Szkic/Makiety/Prototyp Projekt graf. interfejsu Wdrożenie

Dostosowanie

Jednak „dostosowywanie” to „nie projektowanie”!

dostosowywanie

projektowanie

Ważny jest kontekst…Ważny jest kontekst…

Przykład 1: converse.sklep-luz.pl

Przykład 2: reserved.com

• brak stosowania konwencji

znanych dla użytkowników

smartfonów („gesty”)

• przeładowanie skryptami

(błędne działanie)

• strona jest ciężka… na siłę

próbuje się dostosować

wszystkie elementy

zaprojektowane dla wersji

desktop

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

Proces projektowania w ujęciu RWD Mobile First

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żytkownikArchitektura

informacji

Test

Interfejs Graficzny

Makieta Prototyp

Wdrożenie

Szkic

Projektowanie

Wiedza o użytkowniku

Strateg, Projektant interakcji

Kroki etapu projektowego

Architektura informacji

Makieta/prototyp

Szkic Szkic

Interfejs

Makieta/prototyp

Szkic

Interfejs Interfejs

Makieta/prototyp

Studium przypadku (jeszcze w trakcie realizacji)

księgarnia internetowa

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”)

Mobile: szybkie znalezienie pozycji w dziale

Mobile: pozytywne doświadczenie - checkout

Tablet: sprawne znalezienie pozycji

Desktop: pozytywne doświadczenie - katalog

Desktop: pozytywne doświadczenie - produkt

Od kwietnia Google zmienia politykę związaną z pozycjonowaniem w mobile

25 % Polaków używa smartfona GUS styczeń 2015

Kroki etapu projektowego

Architektura informacji

Makieta/prototyp

Szkic Szkic

Interfejs

Makieta/prototyp

Szkic

Interfejs Interfejs

Makieta/prototyp

Procent sprzedaży w m-commerce 2015 wyniesie …?

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