Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Słów kilka o problemach z UX
w mobile

Paweł Czyżowski
PPG Mobile
UX TO NIC NOWEGO
UX DESIGNER

Photo	
  by	
  Jeff_Werner	
  -­‐	
  Crea2ve	
  Commons	
  A7ribu2on-­‐NonCommercial-­‐ShareAlike	
  License	
...
DEVELOPERZY

Photo	
  by	
  Elvert	
  Barnes	
  -­‐	
  Crea2ve	
  Commons	
  A7ribu2on	
  License	
  	
  h7p://www.flickr.c...
USER EXPIRIENCE

Photo	
  by	
  Melissa	
  Maples	
  -­‐	
  Crea2ve	
  Commons	
  A7ribu2on-­‐NonCommercial	
  License	
  ...
KIM JEST UX DESIGNER
to nie ma nic wspólnego z
dribbble

Photo	
  by	
  ˙Cаvin	
  〄	
  -­‐	
  Crea2ve	
  Commons	
  A7ribu2on	
  License	
  	
 ...
WIĘC CO JEST NIE TAK?
Tylko jedna z tych
aplikacji pogodowych
stara się rozwiązać
prawdziwy problem.
Maslow’s	
  Hierarchy	
  Of	
  Needs	
  
Design	
  Hierarchy	
  of	
  Needs	
  (Smashing	
  Magazine)	
  
 Hierarchy	
  of	
  Needs	
  for	
  the	
  Code	
  (Smashing	
  Magazine)	
  
ZASADA 3C

CONTENT

CEL

CZAS
PO CO?

Żeby użytkownik mógł:

Wykonać zadanie szybciej…
…robiąc przy tym mniej błędów
Photo	
  by	
  Wsf	
  Ali	
  -­‐	
 ...
A jeśli nie ?
Błędy w mobile
Są zabójcze
11% odinstaluje bezpłatną aplikację,
Aż 45% płatną!
Photo	
  by	
  dqqd	
  -­‐	
 ...
Co robić…

?
Pokora wobec nowych
technologii

Photo	
  by	
  Close	
  to	
  Home	
  -­‐	
  Crea2ve	
  Commons	
  A7ribu2on-­‐NonCommerc...
Aplikacja to nie choinka

Photo	
  by	
  Suzie	
  T	
  -­‐	
  Crea2ve	
  Commons	
  A7ribu2on	
  License	
  	
  h7p://www....
więc ciąć…
Nie, ciąć…

Photo	
  by	
  Jez	
  Page	
  -­‐	
  Crea2ve	
  Commons	
  A7ribu2on-­‐NonCommercial-­‐ShareAlike	
  License	
...
Tylko ciąć!

Photo	
  by	
  sacks08	
  -­‐	
  Crea2ve	
  Commons	
  A7ribu2on	
  License	
  	
  h7p://www.flickr.com/photos...
Żeby interfejs był
intuicyjny …

Photo	
  by	
  Geecy	
  -­‐	
  Crea2ve	
  Commons	
  A7ribu2on-­‐ShareAlike	
  License	
 ...
… znaczy podobny…

Photo	
  by	
  seagers	
  -­‐	
  Crea2ve	
  Commons	
  A7ribu2on-­‐NonCommercial-­‐ShareAlike	
  Licens...
Źródło:37signals.com	
  
Nadążać za konwencjami

Siatka	
  ikon	
  (zmierzch	
  trendu	
  2011)	
  

Facebook,	
  Yelp,	
  Linkedin	
  2011	
  

Na...
Tab	
  panel	
  dolny	
  zastąpił	
  siatkę	
  ikon	
  w	
  2011	
  

Pinterest	
  2011	
  

Pinterest	
  2012	
  

Pinter...
2014…

Sidebar	
  zastępuje	
  menu	
  dolne	
  

YouTube	
  2014	
  

Allegro	
  2014	
  
Typowy projekt ux

KLIENT

SPECYFIACJA

ANALIZA

MAKIETA

PROTOTYP
Typowy projekt ux

KLIENT

SPECYFIACJA

ANALIZA

MAKIETA

To za mało…

PROTOTYP
Ludzie, nie specyfikacje
Zanim zaczniesz…
KTO jest grupą docelową?
CZEGO POTRZEBUJĄ TWOI UŻYTKOWNICY?
DLACZEGO TEGO POTRZEBUJĄ?
KIEDY TEGO POTRZEBU...
Kiedy zaczniesz…
BUDUJ

UCZ SIĘ

MIERZ
TESTUJ
Prototyp…

…to tylko hipoteza
Źródło:	
  h7p://www.concept.ly/	
  
mobile first
Content first

Dopiero z analizy potrzeb i contentu
Wyniknie np. APP czy RWD
analiza potrzeb i contentu
= dobra architektura informacji

LOGICZNA, SPÓJNA, SPODZIEWANA
Photo	
  by	
  Travis	
  Jon	
  ...
Jak pracować?

Daj klientowi produkt konkurencji
i zobacz jak sobie radzi
Photo	
  by	
  Ame	
  Otoko	
  -­‐	
  Crea2ve	
 ...
Jak pracować?
Jak najwięcej na papierze
Może być brzydko (ładnie będzie potem)
Twoje zdanie nie ma znaczenia
Hipotezy to n...
Kilka podpowiedzi…
To co najważniejsze,
Wzasięgu kciuka
90% ludzi jest praworęczna
Jeśli możemy,
pamiętajmy o
leworęcznych

Przyciski na całą szerokość

Odstępy między
przyciskami są
ważne
Telefonów używamy
w różnych
warunkach
Wysoki kontrast pomaga
Minimalna wielkość
pojedynczego obszaru dotyku
to 7 mm
Obszar klikalny nie musi być
taki sam jak obiekt graficzny
Korzystanie z domyślnych
narzędzi urządzenia 4-krotnie
skraca akcję użytkownika
Dziękuję za uwagę i życzę samych
zadowolonych użytkowników

Paweł Czyżowski, PPGMobile
info@ppgmobile.pl
O rozwiązywaniu problemów z UX podczas projektowania interfejsów mobilnych
O rozwiązywaniu problemów z UX podczas projektowania interfejsów mobilnych
O rozwiązywaniu problemów z UX podczas projektowania interfejsów mobilnych
O rozwiązywaniu problemów z UX podczas projektowania interfejsów mobilnych
O rozwiązywaniu problemów z UX podczas projektowania interfejsów mobilnych
Upcoming SlideShare
Loading in …5
×

O rozwiązywaniu problemów z UX podczas projektowania interfejsów mobilnych

787 views

Published on

Paweł Czyżowski – PPG Mobile - O rozwiązywaniu problemów z UX podczas projektowania interfejsów mobilnych

Published in: Technology
  • Be the first to comment

O rozwiązywaniu problemów z UX podczas projektowania interfejsów mobilnych

  1. 1. Słów kilka o problemach z UX w mobile Paweł Czyżowski PPG Mobile
  2. 2. UX TO NIC NOWEGO
  3. 3. UX DESIGNER Photo  by  Jeff_Werner  -­‐  Crea2ve  Commons  A7ribu2on-­‐NonCommercial-­‐ShareAlike  License    h7p://www.flickr.com/photos/48023467@N00   Created  with  Haiku  Deck  
  4. 4. DEVELOPERZY Photo  by  Elvert  Barnes  -­‐  Crea2ve  Commons  A7ribu2on  License    h7p://www.flickr.com/photos/95413346@N00   Created  with  Haiku  Deck  
  5. 5. USER EXPIRIENCE Photo  by  Melissa  Maples  -­‐  Crea2ve  Commons  A7ribu2on-­‐NonCommercial  License    h7p://www.flickr.com/photos/84392129@N00   Created  with  Haiku  Deck  
  6. 6. KIM JEST UX DESIGNER
  7. 7. to nie ma nic wspólnego z dribbble Photo  by  ˙Cаvin  〄  -­‐  Crea2ve  Commons  A7ribu2on  License    h7p://www.flickr.com/photos/48876614@N00   Created  with  Haiku  Deck  
  8. 8. WIĘC CO JEST NIE TAK?
  9. 9. Tylko jedna z tych aplikacji pogodowych stara się rozwiązać prawdziwy problem.
  10. 10. Maslow’s  Hierarchy  Of  Needs  
  11. 11. Design  Hierarchy  of  Needs  (Smashing  Magazine)  
  12. 12.  Hierarchy  of  Needs  for  the  Code  (Smashing  Magazine)  
  13. 13. ZASADA 3C CONTENT CEL CZAS
  14. 14. PO CO? Żeby użytkownik mógł: Wykonać zadanie szybciej… …robiąc przy tym mniej błędów Photo  by  Wsf  Ali  -­‐  Crea2ve  Commons  A7ribu2on-­‐ShareAlike  License    h7p://www.flickr.com/photos/53756043@N03   Created  with  Haiku  Deck  
  15. 15. A jeśli nie ? Błędy w mobile Są zabójcze 11% odinstaluje bezpłatną aplikację, Aż 45% płatną! Photo  by  dqqd  -­‐  Crea2ve  Commons  A7ribu2on  License    h7p://www.flickr.com/photos/87623124@N02   Created  with  Haiku  Deck  
  16. 16. Co robić… ?
  17. 17. Pokora wobec nowych technologii Photo  by  Close  to  Home  -­‐  Crea2ve  Commons  A7ribu2on-­‐NonCommercial  License    h7p://www.flickr.com/photos/7228833@N08   Created  with  Haiku  Deck  
  18. 18. Aplikacja to nie choinka Photo  by  Suzie  T  -­‐  Crea2ve  Commons  A7ribu2on  License    h7p://www.flickr.com/photos/23727257@N00   Created  with  Haiku  Deck  
  19. 19. więc ciąć…
  20. 20. Nie, ciąć… Photo  by  Jez  Page  -­‐  Crea2ve  Commons  A7ribu2on-­‐NonCommercial-­‐ShareAlike  License    h7p://www.flickr.com/photos/30775143@N00   Created  with  Haiku  Deck  
  21. 21. Tylko ciąć! Photo  by  sacks08  -­‐  Crea2ve  Commons  A7ribu2on  License    h7p://www.flickr.com/photos/29071316@N06   Created  with  Haiku  Deck  
  22. 22. Żeby interfejs był intuicyjny … Photo  by  Geecy  -­‐  Crea2ve  Commons  A7ribu2on-­‐ShareAlike  License    h7p://www.flickr.com/photos/51866462@N07   Created  with  Haiku  Deck  
  23. 23. … znaczy podobny… Photo  by  seagers  -­‐  Crea2ve  Commons  A7ribu2on-­‐NonCommercial-­‐ShareAlike  License    h7p://www.flickr.com/photos/85213049@N00   Created  with  Haiku  Deck  
  24. 24. Źródło:37signals.com  
  25. 25. Nadążać za konwencjami Siatka  ikon  (zmierzch  trendu  2011)   Facebook,  Yelp,  Linkedin  2011   Nasza  Klasa  2014  
  26. 26. Tab  panel  dolny  zastąpił  siatkę  ikon  w  2011   Pinterest  2011   Pinterest  2012   Pinterest  2013   Trend w kierunku upraszczania
  27. 27. 2014… Sidebar  zastępuje  menu  dolne   YouTube  2014   Allegro  2014  
  28. 28. Typowy projekt ux KLIENT SPECYFIACJA ANALIZA MAKIETA PROTOTYP
  29. 29. Typowy projekt ux KLIENT SPECYFIACJA ANALIZA MAKIETA To za mało… PROTOTYP
  30. 30. Ludzie, nie specyfikacje
  31. 31. Zanim zaczniesz… KTO jest grupą docelową? CZEGO POTRZEBUJĄ TWOI UŻYTKOWNICY? DLACZEGO TEGO POTRZEBUJĄ? KIEDY TEGO POTRZEBUJĄ? GDZIE TEGO POTRZEBUJĄ? JAK MY MOŻEMY IM POMÓC?
  32. 32. Kiedy zaczniesz… BUDUJ UCZ SIĘ MIERZ TESTUJ
  33. 33. Prototyp… …to tylko hipoteza Źródło:  h7p://www.concept.ly/  
  34. 34. mobile first Content first Dopiero z analizy potrzeb i contentu Wyniknie np. APP czy RWD
  35. 35. analiza potrzeb i contentu = dobra architektura informacji LOGICZNA, SPÓJNA, SPODZIEWANA Photo  by  Travis  Jon  Allison  -­‐  Crea2ve  Commons  A7ribu2on-­‐NonCommercial-­‐ShareAlike  License    h7p://www.flickr.com/photos/31589716@N00   Created  with  Haiku  Deck  
  36. 36. Jak pracować? Daj klientowi produkt konkurencji i zobacz jak sobie radzi Photo  by  Ame  Otoko  -­‐  Crea2ve  Commons  A7ribu2on-­‐NonCommercial-­‐ShareAlike  License    h7p://www.flickr.com/photos/30674850@N00   Created  with  Haiku  Deck  
  37. 37. Jak pracować? Jak najwięcej na papierze Może być brzydko (ładnie będzie potem) Twoje zdanie nie ma znaczenia Hipotezy to nie dowody Źródło:  h7p://farm5.sta2cflickr.com/4095/4920215806_589bba2713.jpg  
  38. 38. Kilka podpowiedzi… To co najważniejsze, Wzasięgu kciuka 90% ludzi jest praworęczna
  39. 39. Jeśli możemy, pamiętajmy o leworęcznych Przyciski na całą szerokość Odstępy między przyciskami są ważne
  40. 40. Telefonów używamy w różnych warunkach Wysoki kontrast pomaga
  41. 41. Minimalna wielkość pojedynczego obszaru dotyku to 7 mm
  42. 42. Obszar klikalny nie musi być taki sam jak obiekt graficzny
  43. 43. Korzystanie z domyślnych narzędzi urządzenia 4-krotnie skraca akcję użytkownika
  44. 44. Dziękuję za uwagę i życzę samych zadowolonych użytkowników Paweł Czyżowski, PPGMobile info@ppgmobile.pl

×