System is processing data
Please download to view
...

Ile wspolnego ma Castlevania z projektowaniem mobile UI

by monika-mikowska

on

Report

Category:

Mobile

Download: 0

Comment: 0

793

views

Comments

Description

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.
Download Ile wspolnego ma Castlevania z projektowaniem mobile UI

Transcript

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