czego oczy nie widza tego palec nie uzywa

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

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

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%

Czytaj więcej: http://exisweb.net/menu-eats-hamburger.

+20%

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

monika@mobeedick.com +48 604 196 082

monika@mobeedick.com +48 604 196 082