Post on 16-Nov-2014
description
Building UI for mobile applications
Ivan Dulnyavkaivand@devcom.com
MDDAYLviv2011
1
Novice in mobile development
Audience
2
2
1. Mobile Platforms overview
2. UI design
3. UI usability
4. UI specifics on different platforms
5. Building cross-platform UI
6. Useful links
7. Q&A
Contents
3
3
1. Mobile platforms overviewMobile platforms and UI history:
4
Evolution
Windows Mobile, Symbian
4
Evolution
Windows Mobile, Symbian
1. Mobile platforms overviewMobile platforms and UI history:
5
vs
Revolution
iPhone OS
5
1. Mobile platforms overviewMobile platforms and UI history:
6
Evolution
6
1. Mobile platforms overviewMobile platforms and UI history:
7
Evolution
vs
Revolution
7
1. Mobile platforms overview
Most popular platforms to date* :
* all of above have both smartphones and tablet versions
iOS Android BlackBerry Symbian Others
Source: StatCounter8
8
1. Mobile platforms overview
Most popular platforms to date* :
* all of above have both smartphones and tablet versions
12%
8%
36%
45%
North America - Sept 2011
7%12%
14%
26%
41%
Europe - Sept 2011
iOS Android BlackBerry Symbian Others
Source: StatCounter8
8
1. Mobile platforms overview
New platforms:
9
9
Common specifics
• Hardware limitations screen, processor, memory, storage
• Touch oriented capacitive vs resistive displays
10
1. Mobile platforms overview
10
Usage of tablets
• Two-hand usage
• Indoor
• Mostly fast connection Wi-Fi
11
1. Mobile platforms overview
11
Usage of smartphones
• One-hand usage
• On-the-go
• Mostly slow connection mobile 2G/3G
12
1. Mobile platforms overview
12
Usage of smartphones
• One-hand usage
13
1. Mobile platforms overview
13
Usage of smartphones
• One-hand usage
14
1. Mobile platforms overview
14
Summary
• Mobile devices history
• Popular platforms (to date)
• Common usage specifics
15
1. Mobile platforms overview
15
16
2. UI design
Clear and SimpleThis is not a WindowsUse UI guidelines
16
17
2. UI design
Clear and SimpleThis is not a WindowsUse UI guidelines
Wrong:
17
18
2. UI design
Clear and SimpleThis is not a WindowsUse UI guidelines
Wrong:
18
19
2. UI design
Clear and SimpleThis is not a WindowsUse UI guidelines
Right:
Scorekeeper for the PlayBook
19
20
2. UI design
Nice graphics
Perfect idea with bad UI is doomed!Same concept with better UI wins
Pocket Informant HD
20
21
2. UI design
Consider different resolutionsAndroid brought the madness...
21
22
2. UI design
Use 9-patch approach for Android graphicsTortuga 22 NinePatch - a lib for iOS
22
23
2. UI design
Use high-contrast fonts and colorsHey, I'm outdoor! Where the heck is my text?!.
23
24
2. UI design
Summary
• Read UI guidelines
• Graphics is the key
• Use best practices for design
24
25
3. UI usability
What is usability?
25
26
3. UI usability
Usability is the ease of use and learnability of a human-made object.Wikipedia
€26
27
3. UI usability
Usability is the ease of use and learnability of a human-made object.Wikipedia
Good usability:• Increased sales• Lower support load• Lower training expenses
Bad usability:• If user starts thinking he'll stop using the app soon€
27
28
3. UI usability
How to build UI with good
usability?
28
29
3. UI usability
Read UI guidelines! Again!
vs
29
30
3. UI usability
Build prototypes
Balsamiq Mockups Keynotopia templates
30
31
3. UI usability
Support both Portrait and Landscape orientationsPrimary use: Portrait - smartphones, Landscape - tablets
Consider hardware keys (menu, back)Android, Blackberry
Enable shortcutsBlackberry
31
32
3. UI usability
Mobile Web = Small screen
vs
32
33
3. UI usability
Build separate version for Tablets
33
34
3. UI usability
Client is always right
34
35
3. UI usability
Client is always right
35
36
3. UI usability
Client NOT always right
36
37
3. UI usability
Client NOT always right
37
38
3. UI usability
Client NOT always right
vs
38
39
3. UI usability
Summary
• Read UI guidelines
• Build prototypes
• Client NOT always right
39
40
4. UI specifics on different platformsRead UI guidelines for selected platform! Once again!
Do not mix UI presentations (iOS in Android)Lists, Tabs, Controls, Menus
40
41
5. Building cross-platform UIGames are not apps!
41
42
5. Building cross-platform UI
Corporate apps
• MAY have unique UI on all platforms
• Needs training
42
43
5. Building cross-platform UICross-platform development tools:
• Flex 4.5 (Adobe Air) Android (requires Adobe Air installation), iOS, BlackBerry Tablet OS
• Phonegap (HTML5) Android, iOS, BlackBerry, WP7, Bada, ...
• Appcelerator Titanium (JavaScript) Android, iOS, BlackBerry, Desktop
43
44
5. Building cross-platform UICross-platform app example: Conqu (Flex 4.5 / Adobe Air)
Conqu for Android
Conqu for iPad
Conqu for PlayBook
44
45
6. Useful links
• iOS Human Interface Guidelines
• Android UI Guidelines
• BlackBerry UI Guidelines
• Tortuga 22 NinePatch
• Scorekeeper for the PlayBook
• Стив Круг. Веб-дизайн: или `не заставляйте меня думать!` Don't Make Me Think: A Common Sense Approach to Web Usability
• Якоб Нильсен. Веб-дизайнDesigning Web Usability. The Practice of Simplicity
45
7. Q&A
46
46
MDDAYLviv2011MDDAYLviv2011
Contact :ivand@devcom.com
47