Ile wspolnego ma Castlevania z projektowaniem mobile UI

1,451 views

Published on

Prezentacja z konferencji Mobile Trends 4 Business, #MT4B, Targi Mobile-IT, 27.05.2014, Kraków, pt. "Ile wspólnego ma Castlevania z projektowaniem interfejsów mobilnych?", Monika Mikowska.

Published in: Mobile
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
1,451
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
10
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Ile wspolnego ma Castlevania z projektowaniem mobile UI

  1. 1. Ile wspólnego ma… Castlevania MONIKA MIKOWSKA mobimoni i projektowanie interfejsów?
  2. 2. jest najważniejszy. UX DESIGN
  3. 3. Abraham Lincoln ( 1809-1865 ) Give me 6 hours to chop down a tree and I will spend the first 4 sharpening the axe.
  4. 4. FUNKCJONALNOŚĆ AI NAWIGACJA
  5. 5. Konwencje zmieniają się co 6 miesięcy Facebook 2011 LinkedIn 2011 Yelp 2011 Nasza Klasa 2014 :-) Siatka ikon (początek 2011)
  6. 6. Zmierzch siatki ikon (koniec 2011) LinkedIn 2011 Facebook 2011
  7. 7. The 5-tab social app with center icon (2011) Instagram Path Socialcam
  8. 8. Trend w kierunku spłaszczania, upraszczania UI (2012) Instagram 2011 Instagram 2012 Pinterest 2011 Pinterest 2012
  9. 9. Side drawer = Hamburger Drawer = Hamburger Sidebar (koniec 2012) Facebook Messenger YouTube Feedly Allegro
  10. 10. 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
  11. 11. ZEEBOX (obecnie Beamly TV) Czytaj więcej: http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/
  12. 12. Preferowany wzorzec dla aplikacji na Androidzie Czytaj więcej: https://developer.android.com/design/patterns/navigation-drawer.html
  13. 13. REZULTATY: ! • pozytywne komentarze, np. “Love the new design, 5 stars!” ! • …spadek zaangażowania w aplikacji o połowę!!!
  14. 14. TESTY A/B
  15. 15. A
  16. 16. B
  17. 17. B
  18. 18. 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/
  19. 19. OUT OF SIGHT OUT OF MIND
  20. 20. CO Z OCZU TO SPOD PALCA mobimoni
  21. 21. CZEGO OCZY NIE WIDZĄ TEGO PALEC NIE UŻYWA mobimoni
  22. 22. Źrodło: http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
  23. 23. Źródło obrazka: TechCrunch. • 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
  24. 24. ALE…
  25. 25. źródło: Luke Wróblewski, Mobile First
  26. 26. Źródło: http://exisweb.net/mobile-menu-icons.
  27. 27. Czytaj więcej: http://exisweb.net/mobile-menu-icons. +7,2% +22,4%
  28. 28. Czytaj więcej: http://exisweb.net/mobile-menu-abtest. +12,9% +5,7% -22,2%
  29. 29. Czytaj więcej: http://exisweb.net/menu-eats-hamburger. +20%
  30. 30. Aplikacja mobilna nie jest choinką: wszystkich bombek nie udźwignie. mobimoni
  31. 31. Facebook Messenger Foursquare Swarm The Great Unbundling Of 2014
  32. 32. Czy tutoriale są pomocne?
  33. 33. Pamiętacie, jak wyglądał interfejs gry Castlevania 1?
  34. 34. Czytaj więcej: https://medium.com/design-ui-and-shenanigans/94c555301d98. Źródło obrazka: bit.ly/1kcm3Kf.
  35. 35. Dobrze zaprojektowany interfejs zachęca do odkrywania!
  36. 36. 4. Testuj koncepcje. Korzystaj z testów A/B. 5. Tu nie ma “złotych reguł”. Każdy przypadek jest indywidualny :) 3. Aktualizuj wiedzę! Konwencje zmieniają się co 6 miesięcy. 2. Użytkownik liczy czas dotarcia do celu. Ty licz tapnięcia. 1. Sposób nawigacji jest determinowany przez zakres funkcji. Podsumowanie
  37. 37. mobeedick mobile design studio MONIKA MIKOWSKA mobimoni monika@mobeedick.com +48 604 196 082 monika@mobeedick.com +48 604 196 082

×