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
![Page 1: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/1.jpg)
![Page 2: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/2.jpg)
![Page 3: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/3.jpg)
![Page 4: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/4.jpg)
![Page 5: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/5.jpg)
Ile wspólnego ma…
Castlevania
MONIKA MIKOWSKA mobimoni
i projektowanie interfejsów?
![Page 6: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/6.jpg)
jest najważniejszy.
UX DESIGN
![Page 7: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/7.jpg)
Abraham Lincoln ( 1809-1865 )
Give me 6 hours to chop down a tree and I will spend the first 4sharpening the axe.
![Page 8: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/8.jpg)
FUNKCJONALNOŚĆ
AI
NAWIGACJA
![Page 9: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/9.jpg)
![Page 10: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/10.jpg)
![Page 11: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/11.jpg)
Konwencje zmieniają się co 6 miesięcy
Facebook 2011
LinkedIn 2011
Yelp 2011
Nasza Klasa 2014 :-)
Siatka ikon (początek 2011)
![Page 12: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/12.jpg)
Zmierzch siatki ikon (koniec 2011)
LinkedIn 2011
Facebook 2011
![Page 13: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/13.jpg)
The 5-tab social app with center icon (2011)
Instagram Path Socialcam
![Page 14: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/14.jpg)
Trend w kierunku spłaszczania, upraszczania UI (2012)
Instagram 2011
Instagram 2012
Pinterest 2011
Pinterest 2012
![Page 15: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/15.jpg)
Side drawer = Hamburger Drawer = Hamburger Sidebar (koniec 2012)
Facebook Messenger
YouTube Feedly Allegro
![Page 16: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/16.jpg)
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
![Page 17: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/17.jpg)
ZEEBOX (obecnie Beamly TV)
Czytaj więcej: http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/
![Page 18: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/18.jpg)
Preferowany wzorzec dla aplikacji na Androidzie
Czytaj więcej: https://developer.android.com/design/patterns/navigation-drawer.html
![Page 19: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/19.jpg)
REZULTATY: !
• pozytywne komentarze, np. “Love the new design, 5 stars!”
!
• …spadek zaangażowania w aplikacji o połowę!!!
![Page 20: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/20.jpg)
TESTY A/B
![Page 21: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/21.jpg)
A
![Page 22: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/22.jpg)
B
![Page 23: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/23.jpg)
B
![Page 24: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/24.jpg)
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/
![Page 25: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/25.jpg)
OUT OF SIGHTOUT OF MIND
![Page 26: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/26.jpg)
CO Z OCZUTO SPOD PALCA
mobimoni
![Page 27: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/27.jpg)
CZEGO OCZY NIE WIDZĄTEGO PALEC NIE UŻYWA
mobimoni
![Page 28: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/28.jpg)
Źrodło: http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
![Page 29: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/29.jpg)
Ź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
![Page 30: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/30.jpg)
![Page 31: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/31.jpg)
![Page 32: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/32.jpg)
ALE…
![Page 33: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/33.jpg)
![Page 34: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/34.jpg)
źródło: Luke Wróblewski, Mobile First
![Page 35: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/35.jpg)
![Page 36: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/36.jpg)
![Page 37: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/37.jpg)
![Page 38: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/38.jpg)
![Page 40: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/40.jpg)
Czytaj więcej: http://exisweb.net/mobile-menu-icons.
+7,2% +22,4%
![Page 41: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/41.jpg)
Czytaj więcej: http://exisweb.net/mobile-menu-abtest.
+12,9% +5,7% -22,2%
![Page 43: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/43.jpg)
Aplikacja mobilna nie jest choinką:wszystkich bombek nie udźwignie.
mobimoni
![Page 44: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/44.jpg)
Facebook Messenger
Foursquare Swarm
The Great Unbundling Of 2014
![Page 45: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/45.jpg)
Czy tutoriale są pomocne?
![Page 46: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/46.jpg)
![Page 47: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/47.jpg)
![Page 48: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/48.jpg)
![Page 49: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/49.jpg)
![Page 50: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/50.jpg)
![Page 51: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/51.jpg)
![Page 52: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/52.jpg)
![Page 53: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/53.jpg)
![Page 54: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/54.jpg)
![Page 55: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/55.jpg)
![Page 56: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/56.jpg)
![Page 57: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/57.jpg)
![Page 58: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/58.jpg)
![Page 59: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/59.jpg)
![Page 60: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/60.jpg)
![Page 61: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/61.jpg)
![Page 62: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/62.jpg)
![Page 63: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/63.jpg)
Pamiętacie, jak wyglądał interfejs gry
Castlevania 1?
![Page 65: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/65.jpg)
Czytaj więcej: https://medium.com/design-ui-and-shenanigans/94c555301d98. Źródło obrazka: bit.ly/1kcm3Kf.
![Page 66: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/66.jpg)
Dobrze zaprojektowany interfejs
zachęca do odkrywania!
![Page 67: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/67.jpg)
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
![Page 68: Ile wspolnego ma Castlevania z projektowaniem mobile UI](https://reader036.vdocument.in/reader036/viewer/2022081716/54680d74af7959925f8b585f/html5/thumbnails/68.jpg)
mobee dick mobile design studio
MONIKA MIKOWSKA mobimoni
[email protected] +48 604 196 082
[email protected] +48 604 196 082