P R O J E K T O W A N I E I N T E R F E J S Ó W A P L I K A C J I M O B I L N Y C H

Z P E R S P E K T Y W Y P R O G R A M I S T Y

Maciej KołekiOS Developer

K R Ó T K A A G E N D A

• Założenia i sztuczki projektowania interfejsów

• Najważniejsze różnice między systemami mobilnymi

• Hybrydowe aplikacje mobilne - multiplatformowe piekło UX?

• Narzędzia przyjazne dla developerów

P R O J E K T U J M Y A P L I K A C J E TA K , B YŚM Y S A M I C H C I E L I Z N I C H P ÓŹN I E J K O R Z Y S TAĆ .

M OŻE T O N I E O D K R Y C I E R O K U , A L E …

N I E K AŻ M YŚ L EĆ ( Z A D ŁU G O ) UŻY T K O W N I K O W I A P L I K A C J I

M O B I L E T O N I E W E B - P R O S T O TA J E S T N A J W AŻN I E J S Z A

Sfrustrowany użytkownik przestanie korzystać z Twojej aplikacji po kilkunastu sekundach i zacznie korzystać z konkurencyjnych rozwiązań.

… C O S IĘ S TA N I E J A K T O W T O K L I K NĘ ?

I K O N Y P O W I N N Y O D P O W I A D AĆ S W O I M F U N K C J O M

… S H A M E O N Y O U , S N A P C H AT.

I K O N Y P O W I N N Y O D P O W I A D AĆ S W O I M F U N K C J O M

" J E D NĄ Z P O D S TA W O W Y C H Z A S A D P O D C Z A S P R O J E K T O W A N I A U I J E S T, A B Y E L E M E N T Y W Y G LĄD A JĄC E TA K S A M O , D Z I A ŁA ŁY TA K S A M O . "

http://jestem.mobi/2014/10/pojedynek-na-ux-tocomoje-i-kwitki/

- Monika Mikowska

PA L E C T O N I E M Y S Z K O M P U T E R O W AP R Z E M YŚ L J A K I W J A K I C H WA R U N K A C H UŻY T K O W N I K BĘD Z I E K O R Z Y S TA Ł Z T W O J E J A P L I K A C J I

http://www.lukew.com/ff/entry.asp?1927

Designing for Large Screen SmartphonesLuke Wroblewski

PA L E C T O N I E M Y S Z K O M P U T E R O W A

W N I E K T Ó RY C H O S - A C H P O M YŚ L E L I Z A D E S I G N E R Ó W

http://verbbrands.com/apples-bigger-screens-a-bigger-headache-for-designers/

Apple’s Bigger Screens A Bigger Headache For Designers?James Clifton

F R A G M E N TA C J A E K R A N Ó WN I E K T Ó R Z Y N I E M A JĄ 5 C A L O W E J PA T E L N I W K I E S Z E N I

http://blog.fluidui.com/big-screens-v-small-screens-the-explosion-of-screens-devices-and-platforms/

The explosion of screens, devices and platforms

„This means over 24,000 distinct devices can immediately use your app.”

P R O S ZĘ C Z E K AĆ , BĘDĄ D A N E …L O A D E R Y W A P L I K A C J A C H M O B I L N Y C H

http://muz.li/blog/cool-mobile-application-loaders/

T U BĘDĄ D A N E , I TA K BĘDĄ W Y G LĄD AĆ

… A L E N I E P O K A Z U J P U S T E G O E K R A N U

Starajmy się pokazać jak będą wyglądać dane na które czeka użytkownik.

Jeśli pokażemy mu sam spinner, użytkownik nie będzie pewny czy korzysta z odpowiedniej funkcji naszej aplikacji.

F I LT R U J D A N EN I K O M U N I E C H C E S IĘ S C R O L L O W AĆ

O N B O A R D I N GT W O J A A P L I K A C J A D L A O P O R N Y C H

http://www.codemag.com/article/1509061

All Aboard: Maximize Mobile Engagement with Interactive Onboarding

R ÓŻN I C E W P R O J E K T O W A N I U I N T E R F E J S Ó W N A P L AT F O R M Y I O S I A N D R O I D

N A D G R Y Z I O N E J A B ŁK O I Z I E L O N Y R O B O T

http://webdesign.tutsplus.com/articles/a-tale-of-two-platforms-designing-for-both-android-and-ios--cms-23616

A Tale of Two Platforms: Designing for Both Android and iOS

P R Z E S T R Z E G A J Z A S A DP O P I E R W S Z E

D E S I G N N I E M OŻE B YĆ I D E A L N YW K R Ó L E S T W I E M O B I L E PA N P I X E L J E S T N I K I M

http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

Mobile design 101: pixels, points and resolutions

1px na mockupie to nie 1dp / 1pt na ekranie telefonu!

P R Z Y C I S K I F I Z Y C Z N EK AŻD Y M A I N A C Z E J

P R Z Y C I S K W S T E C Z I M E N UK AŻD Y M A I N A C Z E J

TA B B A R U G Ó R Y, TA B B A R N A D O L ER ÓŻN I C E W N A W I G A C J I

T U H A M B U R G E R , TA M TA B B A RR ÓŻN I C E W N A W I G A C J I

C H O W A N I E K L A W I AT U R YR ÓŻN I C E W I N T E R A K C J I

A K C J A G ŁÓ W N AR ÓŻN I C E W I N T E R A K C J I

E K O S Y S T E M P L AT F O R M Y

• iOS jest ekosystemem zamkniętym - nie mamy dostępu do funkcji aplikacji podczas gdy nie jest ona aktywna na ekranie, na Androidzie jest to możliwe (Messenger Chat Heads)

• Ze względu na te ograniczenia, na iOS nie mamy możliwości przechwytywania SMS/połączeń i dostępu do np. zarządzania stanem telefonu, w tym jasności itd.

Dlatego użytkownik iOS bardziej stawia na niezawodność aplikacji, a Androida na możliwości konfiguracji i personalizacji „pod siebie”.

M U LT I P L AT F O R M O W E P I E K ŁO U X ?C Z Y H Y B R Y D O W E A P L I K A C J E M O B I L N E T O

D E S I G N A P L I K A C J I H Y B R Y D O W C HW I TA M Y W P I E K L E U X

Aplikacje tego typu są często wykorzystywane tylko i wyłącznie do wysyłania powiadomień, ale nie można ich nazywać pełnoprawnymi aplikacjami…

H Y B R Y D O W E I N T E R F E J S Y Z A G ŁA D YJ EŚ L I N I E W I D AĆ R ÓŻN I C Y T O P O C O P R Z E P ŁA C AĆ…

copy & paste

iOS Android

D L A C Z E G O N I E WA RT O W Y T W A R Z AĆ H Y B R Y D O W Y C H A P L I K A C J I ?

• Słabsza wydajność

• Brak wsparcia dla nowych rozwiązań w systemach (Multitasking, Handoff, Spotlight, Apple Watch)

• Ciągłe ładowanie widoków, brak dostosowania stron do aplikacji

• Zła praktyka tworzenia interfejsów „uniwersalnych” dla wszystkiego

• Koszta wytworzenia aplikacji z odrębnymi interfejsami są podobne do tworzenia aplikacji natywnych

K I E D Y WA RT O W Y T W A R Z AĆ H Y B R Y D O W E A P L I K A C J E ?

• Jesteśmy świadomi wad tego rozwiązania

• Potrzebujemy aplikacji na jeden event i nie będziemy jej później rozwijać

• Mamy bardzo ograniczony budżet lub zespół developerski

• Jesteśmy gigantyczną korporacją która ma po prostu „wylane” w użytkowników, a musimy dostarczać jakieś funkcjonalności (Steam)

http://www.bjheinley.com/good-fast-cheap-pick-two/

N A R ZĘD Z I A D O P R O J E K T O W A N I A

P R O G R A M I S TA BĘD Z I E C I Z A T O W D Z IĘC Z N Y

N A R ZĘD Z I A D O P R O J E K T O W A N I A

P R O G R A M I S TA BĘD Z I E C I Z A T O W D Z IĘC Z N Y

• InvisionApp - mockupy live na podstawie grafik, animacje, komentarze

• FluidUI - rozbudowane narzędzie do tworzenia prostych mockupów, tworzenie map przejść do druku oraz wersji live na ich podstawie

• Zeplin.io - narzędzie do ekstrakcji grafik na różne rozdzielczości ekranu bezpośrednio z mockupów stworzonych w tym narzędziu

https://medium.com/user-experience-design-1/the-best-prototyping-tools-8d7dc5c8ee27#.v0iksz79q

P Y TA N I A ?

Maciej KołekiOS Developer

http://ferus.info@ferusinfo

hello@ferus.info

Będę wdzięczny za wszelkie uwagi do prezentacji. Dzięki!