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.

5. UX DESIGN
jest najważniejszy.

7. 1 2
3 4

8. Will it rain today?

13. Typowy projekt UI/UX
To naprawdę złe podejście!
Klient Specyfikacje Analiza Makiety Projekt graficzny

16. FUNKCJONALNOŚĆ
AI
NAWIGACJA

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

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

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

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

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

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

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

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

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

26. TESTY A/B

27. A

28. B

29. B

30. B

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

32. OUT OF SIGHT
OUT OF MIND

33. CO Z OCZU
TO SPOD PALCA
mobimoni

34. CZEGO OCZY NIE WIDZĄ
TEGO PALEC NIE UŻYWA
MONIKA MIKOWSKA
mobimoni

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

36. • 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.

39. ALE…

44. Czy są “złote” reguły?

46. NIE PROJEKTUJECIE
DLA DESIGNERÓW,
TYLKO DLA ZWYKŁYCH LUDZI

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

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

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

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

52. Tutorials - hot or not?

70. Dobrze zaprojektowany interfejs
zachęca do odkrywania!

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

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

73. mobee dick
mobile UX design studio
MONIKA MIKOWSKA
mobimoni
monika@mobeedick.com
+48 604 196 082