View
109
Download
1
Category
Tags:
Preview:
DESCRIPTION
iPhone User Interface Design Essentials, presented at Mobile Developer Conference, 2011, Bangalore
Citation preview
Monday, April 10, 2023
MOBILE DEVELOPER CONFERENCE, 2011, BANGALORE
iPhone User Interface Design Essentials
Yahoo! India UEDDesigns products for global and regional audience which are used across devices
Biju Damodharan
Harshad Kulkarni
Monday, April 10, 2023
Tapparatus Bestexit Epicurious
Monday, April 10, 2023
ConvertPowerybaseGuidedways
Monday, April 10, 2023
Yahoo! Finance Yahoo! Deals Yahoo! Messenger
Monday, April 10, 2023
Monday, April 10, 2023
Design for iPhone
Know your Application Type
Development Environment
Interface Builder
Know Your Application
Productivity Applications
Monday, April 10, 2023
Immersive Applications
Utility Applications
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
Utility Application
Visually attractive
Minimum user input
Quick summary of information
Filters to sort information
Monday, April 10, 2023
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
Choosing The Style
Based on type of information and tasks it enables,choose appropriate style
Monday, April 10, 2023
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
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
Lets Create PDS
Monday, April 10, 2023
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
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
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
1. Small Screen
Monday, April 10, 2023
1. Small Screen
Monday, April 10, 2023
1. Small Screen
Monday, April 10, 2023
App should be instantly understandable
Main function should be immediately apparent
Minimize the number of controls
1. Small Screen
Monday, April 10, 2023
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
2. Fingertip Targets
Monday, April 10, 2023
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
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
3. Animation & Gestures
Monday, April 10, 2023
3. Animation & Gestures
Monday, April 10, 2023
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
3. Animation & Gestures
Monday, April 10, 2023
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
4. Graphics & Realism
Monday, April 10, 2023
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
5. Minimum Required Input
Small screen requires lot of attention to input information
Text field vs. pickers
Monday, April 10, 2023
6. Express Information Briefly
Short and Direct
Real life/world metaphors
Monday, April 10, 2023
Dev Environment
Naming Conventions
Image format
Interface Builder
Monday, April 10, 2023
Monday, April 10, 2023
Monday, April 10, 2023
LUKEW Ideation + Design
MobileHIG
Tapfancy
mobile.yahoo.com/iPhone
References
Monday, April 10, 2023
Thanks
Recommended