Embed Size (px)
DESCRIPTION
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.
Citation preview
jest najważniejszy.
UX DESIGN
1 2
3 4
Will it rain today?
Klient Specyfikacje Analiza Makiety Projekt graficzny
Typowy projekt UI/UX
To naprawdę złe podejście!
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
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
mobimoniMONIKA MIKOWSKA
Ź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…
Czy są “złote” reguły?
NIE PROJEKTUJECIE DLA DESIGNERÓW,
TYLKO DLA ZWYKŁYCH LUDZI
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%
Tutorials - hot or not?
Dobrze zaprojektowany interfejs
zachęca do odkrywania!
4. Nie ma “złotych reguł”. Każdy przypadek jest indywidualny :)
5. Testuj koncepcje. Korzystaj z testów A/B.
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
6. Design można “mierzyć”. A projektowanie to proces.
Abraham Lincoln ( 1809-1865 )
Give me 6 hours to chop down a tree and I will spend the first 4sharpening the axe.
mobee dick mobile UX design studio
MONIKA MIKOWSKA mobimoni
[email protected] +48 604 196 082
[email protected] +48 604 196 082
