z perspektywy programisty: projektowanie interfejsów aplikacji mobilnych
TRANSCRIPT
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.
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
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!
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
Będę wdzięczny za wszelkie uwagi do prezentacji. Dzięki!