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