Ozan Can Çalı

SWE 551 – Lightweight Client Programming Presented to: Roy Küçükateş

What are UI Guidelines for?
• To help developers design the best possible user interface & user experience

User Interface:
A connection between equipment and people, which help people interact with the system.
SWE513 - UI Design Guidelines 2

What does a good interface have? • intuitiveness • ease of use • ability to handle tasks more efficiently SWE513 .UI Design Guidelines 3 .

Types of User Interfaces • GUI (graphical user interface)  in use for years • NUI (natural user interface)  multi-touch.UI Design Guidelines in great demand thanks to smartphones technologies of the future 4 . motion • OUI (organic user interface) • BCI (brain-computer interface) SWE513 . gesture.

UI Design Guidelines 5 .Positive User Experience Principles 1) Make it fast 2) Make it clear 3) Make it easy SWE513 .

response time: 5 seconds – Broadcast receiver in max 10 seconds – Users perceive a lag longer than 100 to 200 ms SWE513 . even if it does! – max.UI Design Guidelines 6 .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.

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 SWE513 .UI Design Guidelines 7 .

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! SWE513 .UI Design Guidelines 8 .5 Deadly Sins 2) Gluttony – Use memory responsibly.

invite touches! SWE513 . the back button. the menu button – Users like to touch everything on the screen and see interaction! Also.UI Design Guidelines 9 .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.

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.UI Design Guidelines 10 . not the way you like  this is not your personal app! SWE513 .

com/tag/android/ 11 .UI Design Guidelines http://erictric.5 Deadly Sins 5) Discrimination – Design for a child & a 80-year-old – Design for all platforms (especially for Android) SWE513 .

but without a decent quality of the app-artwork.Aesthetic integrity: Good balance of the appearance & functionality of the interface Focus is ALWAYS on content.UI Design Guidelines 12 . 1) Beauty .Let your app interact with other apps (i. Dev. the content will not be easily consumable 2) Generosity  share + consume .e Babylon iPhone app interacts with Biletix web app) SWE513 .Key Points for a Good App.

be interesting. i. try to be the both! -Utilize innovations such as live wallpapers! http://www.androidal. 3) Ubiquity  app should be more than an icon. Dev.Key Points for a Good App.e put a widget on the home screen about an interesting feature 4) Utility  be useful.pl/widgety-na-android-15/1042 SWE513 .UI Design Guidelines 13 .

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 SWE513 .UI Design Guidelines 14 .

Screen sizes of some iOS-based devices (in pixels) Device iPhone 4 iPad iPod touch / older iPhones Portrait 640 x 960 768 x 1024 Landscape 960 x 640 1024 x 768 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) SWE513 .UI Design Guidelines 16 .

Technical Information on Android UI • Dashboard – quick intro about app – include the most used features – highlight new content – full screen – organize (by features.UI Design Guidelines http://newsrob.blogspot. categories or accounts) • Action Bar – together with title bar SWE513 .com/ 17 .

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 SWE513 .UI Design Guidelines 18 .

too SWE513 .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.UI Design Guidelines 19 .

) • Icons: app & store icons + launch images required SWE513 .Common Information on iPhone & Android UI • Users see one screen at a time (an app has a single window but can have multiple screens) • Orientation can change.UI Design Guidelines 20 . 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.

multitasking) • Start instantly • Always be prepared to stop • Never quit an app programatically SWE513 . sensors.Common Information on iPhone & Android UI • Use every possible technology to make the app more appealing (gestures.UI Design Guidelines 21 .

UI Design Guidelines 22 .SWE513 .

com) • IPhone User Interface Guidelines (http://www.UI Design Guidelines 23 .com/watch?v=yqCj83leYRE) • Google I/O 2010 – Android UI Design Patterns (http://www.com/watch?v=M1ZBjlCRfz0) • Android Developers Center – SDKs. UI Design Guidelines (http://developer. May-June 2010 SWE513 .php/2010/06/24/iphone-user-interfaceguidelines-part-i/ ) • iOS Human Interface Guidelines (http://developer.com/blog/index.References • Google I/O 2010 – A Beginner’s Guide to Android (http://www.apple.android.youtube.pdf) • The Age of the Interface by Richard Yonck / The Futurist Magazine.com/library/ios/documentation/userexperience/conceptual/mobile hig/MobileHIG.youtube.upsidelearning.

Sign up to vote on this title
UsefulNot useful