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.

5. Ile wspólnego ma…
Castlevania
MONIKA MIKOWSKA
mobimoni
i projektowanie interfejsów?

6. jest najważniejszy.
UX DESIGN

7. Abraham Lincoln
( 1809-1865 )
Give me 6 hours to chop down
a tree and I will spend the first 4
sharpening the axe.

8. FUNKCJONALNOŚĆ
AI
NAWIGACJA

11. Konwencje zmieniają się co 6 miesięcy
Facebook
2011
LinkedIn
2011
Yelp
2011
Nasza Klasa
2014 :-)
Siatka ikon (początek 2011)

12. Zmierzch siatki ikon (koniec 2011)
LinkedIn
2011
Facebook
2011

13. The 5-tab social app with center icon (2011)
Instagram Path Socialcam

14. Trend w kierunku spłaszczania, upraszczania UI (2012)
Instagram
2011
Instagram
2012
Pinterest
2011
Pinterest
2012

15. Side drawer = Hamburger Drawer = Hamburger Sidebar (koniec 2012)
Facebook
Messenger
YouTube Feedly Allegro

16. 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

17. ZEEBOX (obecnie Beamly TV)
Czytaj więcej: http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/

18. Preferowany wzorzec dla aplikacji na Androidzie
Czytaj więcej: https://developer.android.com/design/patterns/navigation-drawer.html

19. REZULTATY:
!
• pozytywne komentarze, np.
“Love the new design, 5 stars!”
!
• …spadek zaangażowania w
aplikacji o połowę!!!

20. TESTY A/B

21. A

22. B

23. B

24. 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/

25. OUT OF SIGHT
OUT OF MIND

26. CO Z OCZU
TO SPOD PALCA
mobimoni

27. CZEGO OCZY NIE WIDZĄ
TEGO PALEC NIE UŻYWA
mobimoni

28. Źrodło: http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/

29. Ź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

32. ALE…

34. źródło: Luke Wróblewski, Mobile First

39. Źródło: http://exisweb.net/mobile-menu-icons.

40. Czytaj więcej: http://exisweb.net/mobile-menu-icons.
+7,2% +22,4%

41. Czytaj więcej: http://exisweb.net/mobile-menu-abtest.
+12,9% +5,7% -22,2%

42. Czytaj więcej: http://exisweb.net/menu-eats-hamburger.
+20%

43. Aplikacja mobilna nie jest choinką:
wszystkich bombek nie udźwignie.
mobimoni

44. Facebook
Messenger
Foursquare
Swarm
The Great Unbundling Of 2014

45. Czy tutoriale są pomocne?

63. Pamiętacie, jak wyglądał interfejs gry
Castlevania 1?

65. Czytaj więcej: https://medium.com/design-ui-and-shenanigans/94c555301d98.
Źródło obrazka: bit.ly/1kcm3Kf.

66. Dobrze zaprojektowany interfejs
zachęca do odkrywania!

67. 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

68. mobeedick
mobile design studio
MONIKA MIKOWSKA
mobimoni
monika@mobeedick.com
+48 604 196 082
monika@mobeedick.com
+48 604 196 082