Responsywność - jak zacząć?

Piotr Słowik, Wiesław KoteckiUseLab Sp. z o.o.21 maja 2013, Warszawa

2

Źródło foto: www.old-print.com

Źródło foto: 4.bp.blogspot.com

Źródło foto: historycenterfw.blogspot.com

Źródło foto: fastcocreate.com

Na kontakt z partnerem poświęcamy średnio

97 minut dziennie.

Na korzystanie ze smartfona przeznaczamy średnio

119 minut dziennie

Dane operatora O2 z 2013 roku

Źródło foto: splatter.com

Czas spędzany dziennie na korzystaniu z urządzeń mobilnych

Kontekst jest wszystkim vs kontekst jest nieistotny Kontekst użycia jest bardzo ważny przy projektowaniu na mobile, ale bardzo trudno go określić

Z PC było łatwiej

Co z tym kontekstem?

Źródło: www.w3.org

Kontekst

Kontekst

Główne konteksty

•Otoczenie (miejsce)

•Aktywność (czas)

•Cele (chwilowe i długoterminowe)

•Uwaga (a w zasadzie jej stopień)

•Aktualne zadania

•Urządzenie

•Sieć

•Dostawca i usługa

•Uwarunkowania kulturoweŹródło: openroad.ca

Zawsze i wszędzie!Ograniczanie funkcji do tego co jest istotne i możliwe na mobile

Projektowanie pod kątem częściowej uwagi i czynników przerywających.

Źródło: eblondiau.blogspot.com

Kontekst

Mobile to sztuka wyważania elementów i określania priorytetów.

Kontekst

EkosystemyCoraz częściej systemy projektowane są pod kątem wielu urządzeń, nie tylko PC i mobile

Mobile to tylko jedna z części, ale w tym momencie jedna z najważniejszych

Źródło: thenextweb.com

Ekosystemy

Ciągłość. Coś co zaczynamy na jednym urządzeniu powinniśmy móc skończyć na innym. Użytkownicy oczekują, że treść będzie za nimi podążała

Spójność. User Experience na różnych urządzeniach powinien być podobny, żeby użytkownicy się nie pogubili. Treść jest najbardziej uniwersalnym nośnikiem

Uzupełnianie się. Różne urządzenia mają różne możliwości, dzięki czemu mogą się uzupełniać

Jednoczesne korzystanie.

Skupienie się na tym, w czym dobre jest dane urządzenie

15

PRODUKTY PRZESTAJĄ BYĆ WYRÓŻNIKIEM,

TO USŁUGA (NIENAMACALNA) WOKÓŁ

PRODUKTU ROBI RÓŻNICĘ

USŁUGI JAKO PROCENT PKB KRAJÓW WYSOKO ROZWINIĘTYCH

70%

17

http://scifi.stackexchange.com/questions/2013/which-episode-is-the-double-facepalm-image-macro-from

18

19

20

21http://najlepszegalerie.pl/warszawa/arkadia/249,Salon,Orange,GSM

UŻYTKOWNICY KOMUNIKUJĄ SIĘ Z MARKĄ NIE OBCHODZI ICH KANAŁ JAKIM TO ROBIĄ

CUSTOMER EXPERIENCE TO INTERAKCJA MIĘDZY ORGANIZACJĄ A KLIENTEM WE WSZYSTKICH MOMENTACH KONTAKTU (ACROSS ALL MOMENTS OF CONTACT)

24Źródło: http://blogs-images.forbes.com/johnkotter/files/2011/05/Too-Many-Silos.jpg

KLIENCI SĄ CORAZ BARDZIEJ WYMAGAJĄCY I POINFORMOWANI.

KLUCZOWA JEST JAKOŚĆ USŁUGI

Zdjęcie: http://www1.integer.pl/biuroPrasowe/upload/image/Paczkomat%20InPost.jpg

26

CELEM SERVICE DESIGN JEST PROJEKTOWANIE, KTÓRE POZWOLI NA STWORZENIE INTERFEJSÓW I USŁUG, KTÓRE BĘDĄ UŻYTECZNE, WYRÓŻNIAJĄCE SIĘ, SKUTECZNE I PRZEDE WSZYSTKIM POŻĄDANE PRZEZ KLIENTÓW.

BRIGIT MAGER, KOLN SCHOOL OF DESIGN

Zdjęcie:: http://kisd.de/die-kisd/professorinnen/

27

Cross-Channel Experience Design to proces projektowania z uwzględnieniem wszystkich punktów styku z biznesem, niezależnie od kanału (oraz touchpoint’ów).

Źródło: Jess McMullin&Samantha Strammer

28

Całość doświadczeń powinna być lepsza niż jego poszczególne składowe.

Źródło: Jess McMullin&Samantha Strammer

Zródło: Eric Reiss

29

Nike Run

Źródło: nike.com

30

31

Jaką drogę wybrać?

APLIKACJE NATYWNE WEB

Wiele aplikacji tworzonych zgodnie z wytycznymi danej platformy

Wiele aplikacji na różne platformy posiadające taki sam interfejs

Strony stworzone specjalnie pod dany typ urządzenia / wielkość ekranu

Responsive Web Design

Natywne aplikacje stanowiące „ramkę” dla HTMLowej treści

Jaką drogę wybrać?

Mobilne strony

• Natychmiastowy dostęp

• Jedna wersja na wszystkie

platformy

• Możliwość natychmiastowej

aktualizacji i reakcji na błędy

• Mobilne strony jest łatwiej

współdzielić pomiędzy

użytkownikami

• Raczej nie można ich usunąć

• Często są tańsze w produkcji i

utrzymaniu

Aplikacje

• Dostęp do wszystkich czujników

• Zawierają dużą część treści już w

momencie ściągnięcia

• Z zasady są szybsze od stron

• Wykorzystują standardowe

składniki interfejsu systemu

operacyjnego

• Zdecydowanie łatwiej jest zrobić

grę w postaci aplikacji

• Pracują w trybie offline

• Na razie użytkownicy wolą

aplikacje

RWD

Źródło: expiriti.com

RWD

Płynne siatki (fluid grid)

Używanie wartości względnych (np. nie punkty, a procenty)

Odpowiednie przygotowanie mediów. Zmieniają one płynnie swoją wielkość.

Przy projektowaniu zaczynamy od mobile. Nie odejmujemy funkcjonalności, a dodajemy je wraz z powiększaniem strony.

Źródło: brolik.com

Płynne siatki

Źródło: www.freshegg.com

Skoki

Źródło: www.responsivewebdesign.net.nz

Media

Źródło: www.gossamer-threads.com

Media

Źródło: mediaspawn.com

Nawigacja

Źródło: orrachattack.files.wordpress.com

Nawigacja

Źródło: blog.teamtreehouse.com

Grupowanie elementów

Źródło: www.4mat.com

Ograniczanie ilości danych

Źródło: graphicfusiondesign.com

Realne rozmiary!

Myślmy wielkością fizyczną urządzeń, a nie rozdzielczością!

Od czego zacząć?

johnpolacek.github.io/Responsivator/

Od czego zacząć?

Źródło: www.library.ohiou.edu

Od czego zacząć?

Źródło: www.smashingmagazine.com

Od czego zacząć?

Źródło: www.designbolts.com

Od czego zacząć?

Źródło: dev.twitter.com

Warto zapamiętaćMobilne wersje stron to nie dodatek, a konieczność.

Z urządzeń mobilnych użytkownicy korzystają zawsze i wszędzie. Nie jesteśmy w stanie do końca przewidzieć kontekstu, w jakim użytkownik będzie korzystał z naszej strony.

Mobile jest ważny, ale na horyzoncie pojawia się coraz więcej nowych klas urządzeń, z których już niedługo będą korzystali nasi użytkownicy. Projektujmy pod kątem ekosystemów.

Warto zacząć proces projektowy od urządzeń mobilnych, ponieważ są one najbardziej ograniczone wielkościowo i zmuszają do skupienia się na najważniejszych rzeczach.

Kiedy już przystąpimy do projektowania pamiętajmy o mocnych i słabych stronach urządzeń, oraz o najpopularniejszych kontekstach korzystania z nich.

Treść jest najlepszym, najbardziej uniwersalnym mechanizmem cross platformowym.

Co dalej?

Dziękujemy za uwagę!Piotr Słowik

piotr.slowik@uselab.pl

@UXnightingale

Wiesław Kotecki

wieslaw.kotecki@uselab.pl

@WiesiekKotecki