Responsywność - jak zacząć? - Wiesław Kotecki, Piotr Słowik, Uselab
-
Upload
konferencja-sektor-30-technologie-w-organizacjach-pozarzadowych -
Category
Technology
-
view
347 -
download
0
description
Transcript of Responsywność - jak zacząć? - Wiesław Kotecki, Piotr Słowik, Uselab
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
@UXnightingale
Wiesław Kotecki
@WiesiekKotecki