O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
UX DESIGN 
jest najważniejszy.
1 2 
3 4
Will it rain today?
Typowy projekt UI/UX 
To naprawdę złe podejście! 
Klient Specyfikacje Analiza Makiety Projekt graficzny
FUNKCJONALNOŚĆ 
AI 
NAWIGACJA
Konwencje zmieniają się co 6 miesięcy 
Facebook 
2011 
LinkedIn 
2011 
Yelp 
2011 
Nasza Klasa 
2014 :-) 
Siatka ikon (poc...
Zmierzch siatki ikon (koniec 2011) 
LinkedIn 
2011 
Facebook 
2011
Instagram Path Socialcam 
The 5-tab social app with center icon (2011)
Trend w kierunku spłaszczania, upraszczania UI (2012) 
Instagram 
2011 
Instagram 
2012 
Pinterest 
2011 
Pinterest 
2012
Facebook 
Messenger 
YouTube Feedly Allegro 
Side drawer = Hamburger Drawer = Hamburger Sidebar (koniec 2012)
HAMBURGER DRAWER 
! 
• ikona menu jest umieszczona 
na stałe w górnej belce 
• po tapnięciu w ikonę 
hamburgera, strona gł...
ZEEBOX (obecnie Beamly TV) 
Czytaj więcej: http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing...
Preferowany wzorzec dla aplikacji na Androidzie 
Czytaj więcej: https://developer.android.com/design/patterns/navigation-d...
REZULTATY: 
! 
• pozytywne komentarze, np. 
“Love the new design, 5 stars!” 
! 
• …spadek zaangażowania w 
aplikacji o poł...
TESTY A/B
A
B
B
B
Wyniki testów A/B w ZEEBOX (15/85) 
Czytaj więcej: http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation...
OUT OF SIGHT 
OUT OF MIND
CO Z OCZU 
TO SPOD PALCA 
mobimoni
CZEGO OCZY NIE WIDZĄ 
TEGO PALEC NIE UŻYWA 
MONIKA MIKOWSKA 
mobimoni
Źrodło: http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
• szybszy dostęp do poszczególnych sekcji - po 1 tapnięciu, nie po 2 
• szybsze przełączanie się pomiędzy sekcjami 
• noty...
ALE…
Czy są “złote” reguły?
NIE PROJEKTUJECIE 
DLA DESIGNERÓW, 
TYLKO DLA ZWYKŁYCH LUDZI
Źródło: http://exisweb.net/mobile-menu-icons.
+7,2% +22,4% 
Czytaj więcej: http://exisweb.net/mobile-menu-icons.
+12,9% +5,7% -22,2% 
Czytaj więcej: http://exisweb.net/mobile-menu-abtest.
+20% 
Czytaj więcej: http://exisweb.net/menu-eats-hamburger.
Tutorials - hot or not?
Dobrze zaprojektowany interfejs 
zachęca do odkrywania!
Podsumowanie 
1. Sposób nawigacji jest determinowany przez zakres funkcji. 
2. Użytkownik liczy czas dotarcia do celu. Ty ...
Give me 6 hours to chop down 
a tree and I will spend the first 4 
sharpening the axe. 
Abraham Lincoln 
( 1809-1865 )
mobee dick 
mobile UX design studio 
MONIKA MIKOWSKA 
mobimoni 
monika@mobeedick.com 
+48 604 196 082
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Czego oczy nie widza tego palec nie uzywa
Próximos SlideShares
Carregando em…5
×

Czego oczy nie widza tego palec nie uzywa

2.303 visualizações

Publicada em

Prezentacja z konferencji Internet Beta 2014, 11.09.2014, Rzeszów, pt. “Czego oczy nie widzą tego palec nie używa, czyli kilkanaście porad, jak projektować rozwiązania mobilne”, Monika Mikowska.

Publicada em: Celular
  • Seja o primeiro a comentar

Czego oczy nie widza tego palec nie uzywa

  1. 1. UX DESIGN jest najważniejszy.
  2. 2. 1 2 3 4
  3. 3. Will it rain today?
  4. 4. Typowy projekt UI/UX To naprawdę złe podejście! Klient Specyfikacje Analiza Makiety Projekt graficzny
  5. 5. FUNKCJONALNOŚĆ AI NAWIGACJA
  6. 6. Konwencje zmieniają się co 6 miesięcy Facebook 2011 LinkedIn 2011 Yelp 2011 Nasza Klasa 2014 :-) Siatka ikon (początek 2011)
  7. 7. Zmierzch siatki ikon (koniec 2011) LinkedIn 2011 Facebook 2011
  8. 8. Instagram Path Socialcam The 5-tab social app with center icon (2011)
  9. 9. Trend w kierunku spłaszczania, upraszczania UI (2012) Instagram 2011 Instagram 2012 Pinterest 2011 Pinterest 2012
  10. 10. Facebook Messenger YouTube Feedly Allegro Side drawer = Hamburger Drawer = Hamburger Sidebar (koniec 2012)
  11. 11. HAMBURGER DRAWER ! • ikona menu jest umieszczona na stałe w górnej belce • po tapnięciu w ikonę hamburgera, strona główna odsuwa się i wysuwa się menu z boku • tapnięcie na dowolną część wystającej strony, zamyka szufladę • w “szufladzie” dostęp do sekcji, z których nie korzysta się często
  12. 12. ZEEBOX (obecnie Beamly TV) Czytaj więcej: http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/
  13. 13. Preferowany wzorzec dla aplikacji na Androidzie Czytaj więcej: https://developer.android.com/design/patterns/navigation-drawer.html
  14. 14. REZULTATY: ! • pozytywne komentarze, np. “Love the new design, 5 stars!” ! • …spadek zaangażowania w aplikacji o połowę!!!
  15. 15. TESTY A/B
  16. 16. A
  17. 17. B
  18. 18. B
  19. 19. B
  20. 20. Wyniki testów A/B w ZEEBOX (15/85) Czytaj więcej: http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/
  21. 21. OUT OF SIGHT OUT OF MIND
  22. 22. CO Z OCZU TO SPOD PALCA mobimoni
  23. 23. CZEGO OCZY NIE WIDZĄ TEGO PALEC NIE UŻYWA MONIKA MIKOWSKA mobimoni
  24. 24. Źrodło: http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
  25. 25. • szybszy dostęp do poszczególnych sekcji - po 1 tapnięciu, nie po 2 • szybsze przełączanie się pomiędzy sekcjami • notyfikacje widoczne od razu • użytkownicy są świadomi istnienia wszystkich funkcji aplikacji Źródło obrazka: TechCrunch.
  26. 26. ALE…
  27. 27. Czy są “złote” reguły?
  28. 28. NIE PROJEKTUJECIE DLA DESIGNERÓW, TYLKO DLA ZWYKŁYCH LUDZI
  29. 29. Źródło: http://exisweb.net/mobile-menu-icons.
  30. 30. +7,2% +22,4% Czytaj więcej: http://exisweb.net/mobile-menu-icons.
  31. 31. +12,9% +5,7% -22,2% Czytaj więcej: http://exisweb.net/mobile-menu-abtest.
  32. 32. +20% Czytaj więcej: http://exisweb.net/menu-eats-hamburger.
  33. 33. Tutorials - hot or not?
  34. 34. Dobrze zaprojektowany interfejs zachęca do odkrywania!
  35. 35. Podsumowanie 1. Sposób nawigacji jest determinowany przez zakres funkcji. 2. Użytkownik liczy czas dotarcia do celu. Ty licz tapnięcia. 3. Aktualizuj wiedzę! Konwencje zmieniają się co 6 miesięcy. 4. Nie ma “złotych reguł”. Każdy przypadek jest indywidualny :) 5. Testuj koncepcje. Korzystaj z testów A/B. 6. Design można “mierzyć”. A projektowanie to proces.
  36. 36. Give me 6 hours to chop down a tree and I will spend the first 4 sharpening the axe. Abraham Lincoln ( 1809-1865 )
  37. 37. mobee dick mobile UX design studio MONIKA MIKOWSKA mobimoni monika@mobeedick.com +48 604 196 082

×