UI Design Guidelines for iPhone and Android
description
Transcript of UI Design Guidelines for iPhone and Android
Ozan Can Çalı
SWE 551 – Lightweight Client Programming
Presented to: Roy Küçükateş
• To help developers design the best possible
user interface & user experience
What are UI Guidelines for?
User Interface:
A connection between equipment and people, which help people interact with the
system.
2 SWE513 - UI Design Guidelines
What does a good interface have?
• intuitiveness • ease of use • ability to handle tasks more
efficiently
3 SWE513 - UI Design Guidelines
Types of User Interfaces
• GUI (graphical user interface) in use for years
• NUI (natural user interface) multi-touch, gesture, motion
• OUI (organic user interface) • BCI (brain-computer interface)
in great demand thanks to
smartphones
technologies of the future
4 SWE513 - UI Design Guidelines
Positive User Experience Principles
1) Make it fast
2) Make it clear
3) Make it easy
5 SWE513 - UI Design Guidelines
5 Deadly Sins 1) Sloth
– Be fast and responsive
– Give immediate feedback to the user
– Give feedback for every user action
– Never make the user think the application has crashed, even if it does!
– max. response time: 5 seconds
– Broadcast receiver in max 10 seconds
– Users perceive a lag longer than 100 to 200 ms
6 SWE513 - UI Design Guidelines
5 Deadly Sins
– Prefer lists to textboxes
– Use Threads and AsyncTasks within Services
– People want to make adjustments / enter
information only once at the beginning
– Minimize required inputs, try to find info yourself!
– Give users a logical path to follow
7 SWE513 - UI Design Guidelines
5 Deadly Sins
2) Gluttony
– Use memory responsibly, this is not a desktop application!
– Memory management
– If you can do it with less memory, then do it so! -no matter how hard it is!
8 SWE513 - UI Design Guidelines
5 Deadly Sins 3) Hostility
– The customer is always right!
– Provide positive user experience
– Respect the expectations
– Stick to the procedures and guidelines
– Do not try to teach users new things, let them use the way they know
– Always utilize native icons, the back button, the menu button
– Users like to touch everything on the screen and see interaction! Also, invite touches!
9 SWE513 - UI Design Guidelines
5 Deadly Sins
4) Arrogance
– Do not fight the system!
– Do not use untrusted APIs
– No hard-coding! Put them into the resources file!
– Do it the recommended/usual way, not the way you like this is not your personal app!
10 SWE513 - UI Design Guidelines
5 Deadly Sins
5) Discrimination
– Design for a child & a 80-year-old
– Design for all platforms (especially for Android)
http://erictric.com/tag/android/ 11 SWE513 - UI Design Guidelines
Key Points for a Good App. Dev.
1) Beauty - Aesthetic integrity: Good
balance of the appearance & functionality of the interface
- Focus is ALWAYS on content, but without a decent quality of the app-artwork, the content will not be easily consumable
2) Generosity share + consume - Let your app interact with other
apps (i.e Babylon iPhone app interacts
with Biletix web app) 12 SWE513 - UI Design Guidelines
Key Points for a Good App. Dev.
3) Ubiquity app should be more than an icon; i.e put a widget on the home screen about an interesting feature
4) Utility be useful, be interesting, try to be the both!
-Utilize innovations such as live wallpapers!
http://www.androidal.pl/widgety-na-android-15/1042
13 SWE513 - UI Design Guidelines
Technical Information on iPhone UI
• Status bar: at the upper edge – Display the status bar as much as possible!
• Navigation bar:
below the status bar
• Toolbar: at the bottom edge
• Tab bar: at the bottom edge
• Make the minimum size of a tappable element 44x44 px
14 SWE513 - UI Design Guidelines
Screen sizes of some iOS-based devices (in pixels)
Device Portrait Landscape
iPhone 4 640 x 960 960 x 640
iPad 768 x 1024 1024 x 768
iPod touch / older iPhones
320 x 480 480 x 320
Technical Information on Android UI
Design with respect to different screen resolutions of different devices:
• LDPI (low density screen)
• MDPI (medium density screen)
• HDPI (high density screen)
16 SWE513 - UI Design Guidelines
Technical Information on Android UI
• Dashboard
– quick intro about app
– include the most used features
– highlight new content
– full screen
– organize (by features, categories or accounts)
• Action Bar
– together with title bar
http://newsrob.blogspot.com/ 17 SWE513 - UI Design Guidelines
Technical Information on Android UI
• Quick actions
– popup window from an onscreen target (similar to popover in iPad / Facebook)
– make it compact – easy to manipulate
if this is clear enough
label is not needed
18 SWE513 - UI Design Guidelines
Technical Information on Android UI
• Search bar – if provided, partially overlaps the action bar when
activated
– a quick action node next to search bar
– keyboard appears when activated
• Companion widget – show the key functionality of the app in the home
screen, too
19 SWE513 - UI Design Guidelines
• Users see one screen at a time (an app has a single window but can have multiple screens)
• Orientation can change, landscape orientation should be both-sided!
• Add physicality and realism! (the voice recorder may look like a real microphone)
• Do not fill the form with a lot of elements • Do not ask a lot of questions (regarding
updates, saving etc.) • Icons: app & store icons + launch images
required
Common Information on iPhone & Android UI
20 SWE513 - UI Design Guidelines
Common Information on iPhone & Android UI
• Use every possible technology to make the
app more appealing (gestures, sensors,
multitasking)
• Start instantly
• Always be prepared to stop
• Never quit an app programatically 21 SWE513 - UI Design Guidelines
22 SWE513 - UI Design Guidelines
References
• Google I/O 2010 – A Beginner’s Guide to Android (http://www.youtube.com/watch?v=yqCj83leYRE)
• Google I/O 2010 – Android UI Design Patterns (http://www.youtube.com/watch?v=M1ZBjlCRfz0)
• Android Developers Center – SDKs, UI Design Guidelines (http://developer.android.com)
• IPhone User Interface Guidelines (http://www.upsidelearning.com/blog/index.php/2010/06/24/iphone-user-interface-
guidelines-part-i/ )
• iOS Human Interface Guidelines (http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf)
• The Age of the Interface by Richard Yonck / The Futurist Magazine,
May-June 2010
23 SWE513 - UI Design Guidelines