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

676 views
495 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
676
On SlideShare
0
From Embeds
0
Number of Embeds
73
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×