![Page 1: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/1.jpg)
Monday, April 10, 2023
MOBILE DEVELOPER CONFERENCE, 2011, BANGALORE
iPhone User Interface Design Essentials
![Page 2: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/2.jpg)
Yahoo! India UEDDesigns products for global and regional audience which are used across devices
Biju Damodharan
Harshad Kulkarni
Monday, April 10, 2023
![Page 3: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/3.jpg)
Tapparatus Bestexit Epicurious
Monday, April 10, 2023
![Page 4: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/4.jpg)
ConvertPowerybaseGuidedways
Monday, April 10, 2023
![Page 5: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/5.jpg)
Yahoo! Finance Yahoo! Deals Yahoo! Messenger
Monday, April 10, 2023
![Page 6: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/6.jpg)
Monday, April 10, 2023
Design for iPhone
Know your Application Type
Development Environment
Interface Builder
![Page 7: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/7.jpg)
Know Your Application
Productivity Applications
Monday, April 10, 2023
Immersive Applications
Utility Applications
![Page 8: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/8.jpg)
Productivity Application
Organize and manipulate information
User experience is focus on task. quickly find what is needed, perform necessary action
Tend to organize information hierarchically
High usage of native elements and interactions
Monday, April 10, 2023
![Page 9: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/9.jpg)
Utility Application
Visually attractive
Minimum user input
Quick summary of information
Filters to sort information
Monday, April 10, 2023
![Page 10: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/10.jpg)
Immersive Application
Fun application
Full screen visual rich environment
Simple Tasks
Hides device UI and has custom UI
Quick summary of information
Filters to sort informationMonday, April 10, 2023
![Page 11: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/11.jpg)
Choosing The Style
Based on type of information and tasks it enables,choose appropriate style
Monday, April 10, 2023
![Page 12: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/12.jpg)
Product Definition Statement
Helps to turn list of features into a coherent product
It is a tool used to determine suitability of features and terminology
Monday, April 10, 2023
![Page 13: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/13.jpg)
Know Your Audience
Experience/Novice, Specific Task/Entertainment, Serious or CasualUsers are mobile
Quickly open the application and see useful content immediately
Perform tasks in just few taps
Monday, April 10, 2023
![Page 14: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/14.jpg)
Lets Create PDS
Monday, April 10, 2023
![Page 15: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/15.jpg)
It is a small 320x480 pixel screen (163ppi)
Mind your gestures and animation
The size of a fingertip is 44x44 pixels
Delight with stunning graphics, add realism
Design for iPhone
Monday, April 10, 2023
Minimum Required Input
Express Information Briefly
![Page 16: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/16.jpg)
One of the longest standing issues in Web design has been the "everything including the kitchen sink problem”
On a 1024x768 screen there's lots of pixels to fill!
1. Small Screen
Monday, April 10, 2023
![Page 17: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/17.jpg)
With 80% less screen space, you should know what matters most
The app should have a laser-like focus on what customers need and no room for anything else
1. Small Screen
Monday, April 10, 2023
![Page 18: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/18.jpg)
1. Small Screen
Monday, April 10, 2023
![Page 19: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/19.jpg)
1. Small Screen
Monday, April 10, 2023
![Page 20: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/20.jpg)
1. Small Screen
Monday, April 10, 2023
![Page 21: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/21.jpg)
App should be instantly understandable
Main function should be immediately apparent
Minimize the number of controls
1. Small Screen
Monday, April 10, 2023
![Page 22: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/22.jpg)
The average cursor size is 16x16 pixels, but the average size of your fingertip is 44x44 pixels
Give tappable elements in your application a target area of about 44x44 pixels
2. Fingertip Targets
Monday, April 10, 2023
![Page 23: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/23.jpg)
2. Fingertip Targets
Monday, April 10, 2023
![Page 24: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/24.jpg)
Do not create targets lesser than 44x44 pixels
Do not place them too close together
If the UI is frequently touched then larger the better
2. Fingertip Targets
Monday, April 10, 2023
![Page 25: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/25.jpg)
Animation is a great way to communicate effectively, as long as it doesn’t get in the way of users
Animation can communicate status, provide useful feedback, and help people visualize the results of their actions
3. Animation & Gestures
Monday, April 10, 2023
![Page 26: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/26.jpg)
3. Animation & Gestures
Monday, April 10, 2023
![Page 27: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/27.jpg)
3. Animation & Gestures
Monday, April 10, 2023
![Page 28: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/28.jpg)
Add animation cautiously, especially in applications that do not provide an immersive experience
Use subtle animation used in the built-in iOS applications
Use animation consistently throughout your app
3. Animation & Gestures
Monday, April 10, 2023
![Page 29: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/29.jpg)
3. Animation & Gestures
Monday, April 10, 2023
![Page 30: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/30.jpg)
Use complex gestures as shortcuts to expedite a task
Avoid associating different actions with the standard gestures users know
In general, avoid defining new gestures
3. Animation & Gestures
Monday, April 10, 2023
![Page 31: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/31.jpg)
4. Graphics & Realism
Monday, April 10, 2023
![Page 32: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/32.jpg)
4. Graphics & Realism
When appropriate, add a realistic, physical dimension to your application.
The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.
Monday, April 10, 2023
![Page 33: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/33.jpg)
5. Minimum Required Input
Small screen requires lot of attention to input information
Text field vs. pickers
Monday, April 10, 2023
![Page 34: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/34.jpg)
6. Express Information Briefly
Short and Direct
Real life/world metaphors
Monday, April 10, 2023
![Page 35: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/35.jpg)
Dev Environment
Naming Conventions
Image format
Interface Builder
Monday, April 10, 2023
![Page 36: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/36.jpg)
Monday, April 10, 2023
![Page 37: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/37.jpg)
Monday, April 10, 2023
LUKEW Ideation + Design
MobileHIG
Tapfancy
mobile.yahoo.com/iPhone
References
![Page 38: Silicon India Mobile Developer Conference 2011](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c83fad4a795916308b46c1/html5/thumbnails/38.jpg)
Monday, April 10, 2023
Thanks