Jakiej struktury informacji użytkownik spodziewa się po mobilnej wersji Twojego serwisu? Z czym wiąże się przygotowanie strony do stworzenia wersji mobilnej? Jak myśleć mobilnie? Jakie narzędzia mają do dyspozycji projektanci stron mobilnych - czego technologicznie nie da się przenieść ze standardowej przeglądarki?

1. Responsywność - jak zacząć?
Piotr Słowik, Wiesław Kotecki
UseLab Sp. z o.o.
21 maja 2013, Warszawa

2. 2

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

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

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

6. Źródło foto: fastcocreate.com

7. 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

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

9. 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

10. 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

11. 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

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

13. Ekosystemy
Coraz 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

14. 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. 15
PRODUKTY PRZESTAJĄ BYĆ
WYRÓŻNIKIEM,
TO USŁUGA (NIENAMACALNA)
WOKÓŁ PRODUKTU ROBI
RÓŻNICĘ

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

17. 17
http://scifi.stackexchange.com/questions/2013/which-episode-is-the-d

18. 18

19. 19

20. 20

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

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

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

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

25. 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. 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. 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. 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. 29
Nike Run
Źródło: nike.com

30. 30

31. 31

32. 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

33. 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

34. RWD
Źródło: expiriti.com

35. 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

36. Płynne siatki
Źródło: www.freshegg.com

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

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

39. Media
Źródło: mediaspawn.com

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

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

42. Grupowanie elementów
Źródło: www.4mat.com

43. Ograniczanie ilości danych
Źródło: graphicfusiondesign.com

44. Realne rozmiary!
Myślmy wielkością fizyczną urządzeń, a nie
rozdzielczością!

45. Od czego zacząć?
johnpolacek.github.io/Responsivator/

46. Od czego zacząć?
Źródło: www.library.ohiou.edu

47. Od czego zacząć?
Źródło: www.smashingmagazine.com

48. Od czego zacząć?
Źródło: www.designbolts.com

49. Od czego zacząć?
Źródło: dev.twitter.com

50. 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.

51. Co dalej?

52. Dziękujemy za uwagę!
Piotr Słowik
piotr.slowik@uselab.pl
@UXnightingale
Wiesław Kotecki
wieslaw.kotecki@uselab.pl
@WiesiekKotecki