�ݺ�ߣ

P RO J E K TO WA N I E I N T E R F E J S Ó W
A P L I K AC J I M O B I L N YC H
Z P E R S P E K T Y W Y P RO G R A M I S T Y
Maciej Kołek
iOS 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 RY 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 WA Ż 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 WA 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 WA
P 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 Smartphones
Luke Wroblewski

PA L E C T O N I E M Y S Z K O M P U T E R O WA
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 Ó W
N 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 RY 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 E
N I K O M U N I E C H C E S I Ę S C R O L L O WA Ć

O N B O A R D I N G
T 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 WA 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 RY 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 D
P 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 Y
W 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 E
K 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 U
K A Ż D Y M A I N A C Z E J

TA B B A R U G Ó RY, TA B B A R N A D O L E
R Ó Ż 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 R
R Ó Ż N I C E W N A W I G A C J I

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

A K C J A G Ł Ó W N A
R Ó Ż 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 konﬁguracji 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 RY 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 RY D O W C H
W 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 RY D O W E I N T E R F E J S Y Z A G Ł A D Y
J 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 WA R Z A Ć
H Y B RY 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 WA R Z A Ć
H Y B RY 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 WA 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 WA 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łek
iOS Developer
http://ferus.info
@ferusinfo
hello@ferus.info
Będę wdzięczny za wszelkie uwagi do prezentacji. Dzięki!

�ݺ�ߣ

Z Perspektywy Programisty: Projektowanie Interfejsów Aplikacji Mobilnych

Recommended

More Related Content

Similar to Z Perspektywy Programisty: Projektowanie Interfejsów Aplikacji Mobilnych (20)

Z Perspektywy Programisty: Projektowanie Interfejsów Aplikacji Mobilnych